/* Magnolia Dog Journal — dog law, health, and life across the American South.
   Design system: the dogtrot house and its gallery. Haint blue porch paint,
   deep cypress, one copperhead accent. Century Schoolbook for the courtroom
   headlines, Charter for the reading column, a typewriter stack for dates,
   kickers and code section numbers. Sharp corners everywhere, hairline rules,
   a double rule instead of ornament, a photographed hero under a fixed cypress
   veil, and a dense ruled index instead of thumbnail cards. Dark mode follows
   the system preference; the veiled hero, the statute cards and the footer
   stay cypress in both modes with their text colors set in ink, never in
   variables. No external resource of any kind. */

:root {
  --mag-porch-paint: #eaf2f0;
  --mag-porch-shade: #dde9e6;
  --mag-limewash: #f7fbfa;
  --mag-ironwork: #1a2422;
  --mag-ironwork-soft: #5a6a66;
  --mag-cypress: #10312a;
  --mag-cypress-deep: #0b241f;
  --mag-copperhead: #7a3320;
  --mag-copperhead-dark: #5f2617;
  --mag-copperhead-light: #dda27a;
  --mag-hairline: #c3d5d0;
  --mag-court: "Century Schoolbook", "New Century Schoolbook", Century, "Bookman Old Style", "TeX Gyre Schola", "Nimbus Roman", serif;
  --mag-plain: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Liberation Serif", serif;
  --mag-stamp: "Lucida Sans Typewriter", "Andale Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mag-porch-paint: #0e1a18;
    --mag-porch-shade: #16302b;
    --mag-limewash: #16302b;
    --mag-ironwork: #e2ece9;
    --mag-ironwork-soft: #8ea8a1;
    --mag-hairline: #2c4448;
    --mag-copperhead: #dda27a;
    --mag-copperhead-dark: #e9c09a;
    --mag-copperhead-light: #dda27a;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--mag-porch-paint);
  color: var(--mag-ironwork);
  font-family: var(--mag-plain);
  font-size: clamp(1.02rem, 0.99rem + 0.2vw, 1.12rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--mag-copperhead); color: var(--mag-limewash); }

a {
  color: var(--mag-copperhead);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms ease;
}
a:hover { color: var(--mag-copperhead-dark); }
a:focus-visible { outline: 2px solid var(--mag-copperhead); outline-offset: 3px; }

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

h1, h2, h3 {
  font-family: var(--mag-court);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.008em;
}
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 0 0 0.7em; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); }

/* Skip link */
.mag-walk {
  position: absolute; left: -9999px; top: 0;
  background: var(--mag-copperhead); color: var(--mag-limewash);
  font-family: var(--mag-stamp); font-size: 0.85rem; padding: 0.6rem 1rem; z-index: 60;
}
.mag-walk:focus { left: 0.5rem; top: 0.5rem; }

/* The breezeway: the open corridor every module sits on, 1180px of useful width */
.mag-breezeway { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.4rem); }

/* The porch: masthead, wordmark and baseline, then the seven gates */
.mag-porch { border-bottom: 1px solid var(--mag-hairline); background: var(--mag-porch-paint); }
.mag-porch__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.4rem 2rem;
  padding-top: 1.1rem; padding-bottom: 0.9rem;
}
.mag-porch__sign {
  font-family: var(--mag-court); font-weight: 700;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
  color: var(--mag-ironwork); text-decoration: none;
  letter-spacing: -0.012em; line-height: 1.05;
}
.mag-porch__sign:hover { color: var(--mag-copperhead); }
.mag-porch__sign span {
  display: block; font-family: var(--mag-stamp); font-weight: 400;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mag-ironwork-soft); margin-top: 0.35rem;
}
.mag-gate ul { display: flex; flex-wrap: wrap; gap: 0.1rem 1.2rem; list-style: none; max-width: 46rem; }
.mag-gate a {
  font-family: var(--mag-stamp); font-size: 0.78rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; color: var(--mag-ironwork-soft);
  padding-bottom: 0.4rem; border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.mag-gate a:hover { color: var(--mag-copperhead); border-bottom-color: var(--mag-copperhead); }

/* The transom: photographed hero under a cypress veil set in ink.
   The veil, the title and the rules never read a variable, so the hero
   keeps its depth in dark mode as in light. */
.mag-transom { position: relative; background: #10312a; overflow: hidden; }
.mag-transom__plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
}
.mag-transom::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,49,42,0.34) 0%, rgba(16,49,42,0.6) 46%, rgba(16,49,42,0.94) 100%);
}
.mag-transom__frame {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(180px, 26vh, 280px);
  padding-top: clamp(1.3rem, 0.8rem + 1.6vw, 2rem);
  padding-bottom: clamp(1.3rem, 0.8rem + 1.6vw, 2rem);
}
.mag-transom__frame > * { max-width: 60rem; }
.mag-transom__kicker {
  font-family: var(--mag-stamp); font-size: clamp(0.72rem, 0.66rem + 0.22vw, 0.84rem);
  letter-spacing: 0.24em; text-transform: uppercase; color: #dda27a;
}
.mag-transom__title {
  margin-top: 1rem;
  font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.6rem);
  color: #eaf2f0; letter-spacing: -0.014em; line-height: 1.08;
}
.mag-transom__rule {
  border: 0; border-top: 3px double rgba(234,242,240,0.58);
  margin: 0.9rem 0 0.75rem; width: min(28rem, 62%);
}
.mag-transom__deck { color: #eaf2f0; font-size: clamp(1.04rem, 0.99rem + 0.3vw, 1.22rem); line-height: 1.55; max-width: 58rem; }
.mag-transom__edition {
  display: inline-block; margin-top: 1.1rem; width: fit-content;
  border-top: 1px solid rgba(234,242,240,0.58); border-bottom: 1px solid rgba(234,242,240,0.58);
  padding: 0.5rem 0.2rem;
  font-family: var(--mag-stamp); font-size: 0.76rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: #eaf2f0;
}
.mag-transom__edition .mag-transom__number {
  color: #dda27a; font-family: var(--mag-court); font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.04em; margin-right: 0.55rem;
}
.mag-transom a { color: #dda27a; }

/* The front page only: the transom stands as a band, and the gate grid
   chains straight after it, so the first row of tiles shares the screen
   with the masthead on a 1456 by 800 window. The other yards keep their
   reading order behind the grid. The order lives here, in CSS, because
   the source order of the page is the generator's contract. */
main:has(> .mag-transom) { display: flex; flex-direction: column; }
main:has(> .mag-transom) > section:nth-of-type(1) { order: 1; } /* transom band */
main:has(> .mag-transom) > section:nth-of-type(4) { order: 2; padding-top: clamp(2rem, 1rem + 2vw, 2.8rem); } /* the seven gates */
main:has(> .mag-transom) > section:nth-of-type(2) { order: 3; } /* the yard promise */
main:has(> .mag-transom) > section:nth-of-type(3) { order: 4; } /* the dogtrot table */
main:has(> .mag-transom) > section:nth-of-type(5) { order: 5; } /* the almanac */
main:has(> .mag-transom) > section:nth-of-type(6) { order: 6; } /* the yard of references */

/* The stoop: breadcrumb, always class="breadcrumb mag-stoop" */
.mag-stoop { font-family: var(--mag-stamp); font-size: 0.76rem; letter-spacing: 0.05em; }
.mag-stoop ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding-top: 1.1rem; }
.mag-stoop li { color: var(--mag-ironwork-soft); }
.mag-stoop li + li::before { content: "\203A"; margin-right: 0.6rem; color: var(--mag-copperhead); }
.mag-stoop a { color: var(--mag-ironwork-soft); text-decoration: none; }
.mag-stoop a:hover { color: var(--mag-copperhead); }
.mag-stoop [aria-current="page"] { color: var(--mag-ironwork); font-weight: 700; }

/* The yard: a section of the house, ruled open, numbered in the court face */
.mag-yard { padding-top: clamp(3rem, 1rem + 4.4vw, 4.5rem); padding-bottom: clamp(3rem, 1rem + 4.4vw, 4.5rem); }
.mag-yard--shade { background: var(--mag-porch-shade); }
.mag-yard__head {
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.4rem;
  align-items: end; border-top: 1px solid var(--mag-hairline);
  padding-top: 1.3rem; margin-bottom: 1.9rem;
}
.mag-yard__count {
  font-family: var(--mag-court); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  line-height: 0.9; color: var(--mag-copperhead);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.mag-yard__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.mag-yard__note { grid-column: 2; color: var(--mag-ironwork-soft); max-width: 56ch; }

/* The gallery: asymmetric grid of swings, 28px gutters */
.mag-gallery { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }
.mag-swing { grid-column: span 6; position: relative; }
.mag-swing--full { grid-column: span 6; }
.mag-swing--wide { grid-column: span 4; }
.mag-swing--half { grid-column: span 3; }
.mag-swing--quarter { grid-column: span 2; }
.mag-swing--offset { grid-column: 2 / span 3; }

.mag-shutter { overflow: hidden; background: var(--mag-porch-shade); border: 1px solid var(--mag-hairline); }
.mag-shutter--pano { aspect-ratio: 21 / 9; }
.mag-shutter--wide { aspect-ratio: 3 / 2; }
.mag-shutter--square { aspect-ratio: 1 / 1; }
.mag-shutter--tall { aspect-ratio: 3 / 4; }
.mag-shutter img { width: 100%; height: 100%; object-fit: cover; }

.mag-swing__text { padding-top: 0.8rem; }
.mag-swing__label {
  font-family: var(--mag-stamp); font-size: 0.66rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mag-copperhead);
}
.mag-swing__title { margin-top: 0.4rem; font-size: clamp(1.14rem, 1rem + 0.6vw, 1.45rem); line-height: 1.22; }
.mag-swing__latch { color: var(--mag-ironwork); text-decoration: none; }
.mag-swing__latch::after { content: ""; position: absolute; inset: 0; }
.mag-swing__latch:hover { color: var(--mag-copperhead); }
.mag-swing__note { margin-top: 0.4rem; color: var(--mag-ironwork-soft); font-size: 0.9rem; line-height: 1.5; }

/* The dogtrot: the open corridor through the middle of the house, given
   here to the signature resource. Cypress ground, ink-set text, one latch. */
.mag-dogtrot { background: #10312a; color: #eaf2f0; position: relative; overflow: hidden; }
.mag-dogtrot__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.24; }
.mag-dogtrot__frame { position: relative; z-index: 2; padding-top: clamp(2.6rem, 1rem + 4vw, 4.2rem); padding-bottom: clamp(2.6rem, 1rem + 4vw, 4.2rem); }
.mag-dogtrot__kicker {
  font-family: var(--mag-stamp); font-size: 0.72rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: #dda27a;
}
.mag-dogtrot__title { margin-top: 0.8rem; color: #eaf2f0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.mag-dogtrot__note { margin-top: 0.7rem; color: #eaf2f0; max-width: 58ch; }
.mag-dogtrot__states { list-style: none; margin-top: 1.6rem; border-top: 1px solid rgba(234,242,240,0.58); }
.mag-dogtrot__states li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
  padding: 0.55rem 0; border-bottom: 1px solid rgba(234,242,240,0.58);
}
.mag-dogtrot__state { font-family: var(--mag-stamp); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #dda27a; padding-top: 0.1rem; }
.mag-dogtrot__rulecell { font-size: 0.94rem; line-height: 1.5; color: #eaf2f0; }
.mag-dogtrot__latch {
  display: inline-block; margin-top: 1.5rem;
  color: #dda27a; text-decoration: underline; text-underline-offset: 4px;
}
.mag-dogtrot__latch:hover { color: #eaf2f0; }

/* The almanac: a dense ruled index, three columns, no thumbnails */
.mag-almanac { list-style: none; }
.mag-entry {
  display: grid; grid-template-columns: 11rem 8.5rem 1fr; gap: 1.2rem;
  padding: 0.9rem 0; border-top: 1px solid var(--mag-hairline);
}
.mag-almanac li:first-child { border-top: 0; }
.mag-entry__date {
  font-family: var(--mag-stamp); font-size: 0.74rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mag-copperhead);
  font-variant-numeric: tabular-nums; padding-top: 0.28rem;
}
.mag-entry__label {
  font-family: var(--mag-stamp); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--mag-ironwork-soft);
  padding-top: 0.34rem;
}
.mag-entry__title { font-family: var(--mag-court); font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.mag-entry__title a { color: var(--mag-ironwork); text-decoration: none; }
.mag-entry__title a:hover { color: var(--mag-copperhead); }
.mag-entry__note { margin-top: 0.2rem; color: var(--mag-ironwork-soft); font-size: 0.88rem; line-height: 1.5; }

/* The beam: article head */
.mag-beam { border-top: 1px solid var(--mag-hairline); padding-top: 1.4rem; margin-bottom: 1.8rem; }
.mag-beam__kicker {
  font-family: var(--mag-stamp); font-size: 0.7rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mag-copperhead);
}
.mag-beam h1 { margin-top: 0.8rem; font-size: clamp(1.9rem, 1.25rem + 2.5vw, 3rem); max-width: 22ch; line-height: 1.1; }
.mag-beam__deck { margin-top: 0.9rem; color: var(--mag-ironwork-soft); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.55; max-width: 56ch; }
.mag-apron { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin-top: 1.2rem; padding-top: 0.85rem; border-top: 1px solid var(--mag-hairline); }
.mag-apron li {
  font-family: var(--mag-stamp); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mag-ironwork-soft);
  font-variant-numeric: tabular-nums;
}
.mag-apron a { color: var(--mag-ironwork-soft); text-decoration: none; }
.mag-apron a:hover { color: var(--mag-copperhead); }

/* The awning: full width head image */
.mag-awning { border: 1px solid var(--mag-hairline); background: var(--mag-porch-shade); }
.mag-awning img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* The parlor: the reading column, 68ch, set to the left of the breezeway,
   with the statute rail beside it past 1100px */
.mag-parlor-row { display: grid; grid-template-columns: minmax(0, 68ch) minmax(15rem, 1fr); gap: clamp(1.6rem, 3.4vw, 3.2rem); align-items: start; }
.mag-parlor { max-width: 68ch; padding-top: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); }
.mag-parlor > p { margin-bottom: 1.1em; }
.mag-parlor h2 { margin-top: 1.8em; margin-bottom: 0.55em; }
.mag-parlor h2::before {
  content: ""; display: block; width: 2.8rem; height: 0;
  border-top: 3px double var(--mag-copperhead); margin-bottom: 0.6em;
}
.mag-parlor ul { list-style: none; margin: 0 0 1.2em; }
.mag-parlor ul li { padding-left: 1.3rem; position: relative; margin-bottom: 0.45em; }
.mag-parlor ul li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.7rem; height: 0; border-top: 2px solid var(--mag-copperhead); }
.mag-parlor .mag-hairnote { font-family: var(--mag-stamp); font-size: 0.8rem; color: var(--mag-ironwork-soft); letter-spacing: 0.04em; }

.mag-rail { position: sticky; top: 1.4rem; padding-top: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); }
.mag-rail__head {
  font-family: var(--mag-stamp); font-size: 0.68rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mag-ironwork-soft);
  border-top: 1px solid var(--mag-hairline); padding-top: 1rem; margin-bottom: 1rem;
}

/* The survey: the ledgers, ruled and scrolling */
.mag-survey { margin: 1.8em 0; }
.mag-survey__scroll { overflow-x: auto; border: 1px solid var(--mag-hairline); }
.mag-survey table { border-collapse: collapse; width: 100%; font-family: var(--mag-plain); font-size: 0.86rem; line-height: 1.45; }
.mag-survey caption {
  caption-side: top; text-align: left;
  font-family: var(--mag-stamp); font-weight: 400;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mag-ironwork-soft); padding-bottom: 0.6rem;
}
.mag-survey th { background: #10312a; color: #eaf2f0; text-align: left; font-family: var(--mag-stamp); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 0.8rem; }
.mag-survey td { padding: 0.6rem 0.8rem; border-top: 1px solid var(--mag-hairline); vertical-align: top; font-variant-numeric: tabular-nums; }
.mag-survey tbody tr:nth-child(even) { background: var(--mag-limewash); }
.mag-survey .mag-survey__unset { font-family: var(--mag-stamp); font-size: 0.76rem; color: var(--mag-ironwork-soft); }
.mag-survey .mag-survey__cite { font-size: 0.8rem; color: var(--mag-ironwork-soft); }

/* The fenceline: the checked enclosure */
.mag-fenceline { border: 1px solid var(--mag-copperhead); background: var(--mag-limewash); padding: 1.3rem 1.5rem; margin: 1.8em 0; }
@media (prefers-color-scheme: dark) { .mag-fenceline { background: var(--mag-porch-shade); } }
.mag-fenceline h2, .mag-fenceline h3 { font-size: 1.12rem; margin: 0 0 0.6em; }
.mag-fenceline h2::before, .mag-fenceline h3::before { display: none; }
.mag-fenceline > p { font-family: var(--mag-stamp); font-size: 0.82rem; color: var(--mag-ironwork-soft); margin-bottom: 0.7em; line-height: 1.55; }
.mag-fenceline ul { list-style: none; margin: 0; }
.mag-fenceline li { padding-left: 1.5rem; position: relative; margin-bottom: 0.45em; font-size: 0.96rem; }
.mag-fenceline li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.85rem; border-top: 2px solid var(--mag-copperhead); }

/* The screen: a louvered aside, one copperhead edge */
.mag-screen { border-left: 3px solid var(--mag-copperhead); background: var(--mag-porch-shade); padding: 1.1rem 1.3rem; margin: 1.8em 0; }
.mag-screen p { margin: 0; font-size: 0.96rem; }

/* The statute: the code citation card. Cypress ground in both modes,
   ink-set text, tabular numbers, no link of its own. */
.mag-statute { background: #10312a; color: #eaf2f0; padding: 1.35rem 1.4rem; margin: 0 0 1.4rem; }
.mag-statute h2, .mag-statute h3 { color: #dda27a; font-size: 1.02rem; margin: 0 0 0.6em; letter-spacing: 0.02em; }
.mag-statute h2::before, .mag-statute h3::before { display: none; }
.mag-statute dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; font-family: var(--mag-stamp); font-size: 0.8rem; line-height: 1.5; }
.mag-statute dt { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.66rem; color: rgba(234,242,240,0.66); align-self: center; }
.mag-statute dd { font-variant-numeric: tabular-nums; }

/* The marginalia: read next, under a double rule */
.mag-marginalia { border-top: 3px double var(--mag-hairline); padding: 1.4rem 0 0.4rem; margin-top: 2.2rem; }
.mag-marginalia h2 { font-size: 1.18rem; margin-bottom: 0.8em; }
.mag-marginalia h2::before { display: none; }
.mag-marginalia ul { list-style: none; }
.mag-marginalia li { margin-bottom: 0.75em; padding-left: 1.3rem; position: relative; font-size: 0.96rem; }
.mag-marginalia li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.75rem; border-top: 2px solid var(--mag-copperhead); }

/* The rule: a double rule where the donor waved an SVG */
.mag-rule { display: flex; justify-content: center; padding: 0.2rem 0; }
.mag-rule::before { content: ""; width: min(22rem, 50%); border-top: 3px double var(--mag-copperhead); }

/* The eaves: three columns under the eave, a deep base */
.mag-eaves { background: #10312a; color: rgba(234,242,240,0.82); margin-top: 3rem; }
.mag-eaves__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding-top: 2.5rem; padding-bottom: 2.1rem; }
.mag-eaves h2 {
  font-family: var(--mag-stamp); font-weight: 400; font-size: 0.68rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: #dda27a; margin-bottom: 0.9em;
}
.mag-eaves h2::before { display: none; }
.mag-eaves ul { list-style: none; }
.mag-eaves li { margin-bottom: 0.5em; }
.mag-eaves a { color: rgba(234,242,240,0.82); text-decoration: none; font-family: var(--mag-stamp); font-size: 0.84rem; }
.mag-eaves a:hover { color: #dda27a; text-decoration: underline; }
.mag-eaves__base {
  background: #0b241f; padding-top: 1.1rem; padding-bottom: 1.3rem;
  font-family: var(--mag-stamp); font-size: 0.72rem;
  letter-spacing: 0.06em; color: rgba(234,242,240,0.6);
}

/* Rhythm and breakpoints: rail at 1100, gallery at 940, one column at 720 */
@media (max-width: 1100px) {
  .mag-parlor-row { grid-template-columns: minmax(0, 68ch); }
  .mag-rail { position: static; }
  .mag-rail__head { display: none; }
  .mag-rail .mag-statute { margin-left: 0; }
}
@media (max-width: 940px) {
  .mag-swing--wide { grid-column: span 6; }
  .mag-swing--half { grid-column: span 3; }
  .mag-swing--quarter { grid-column: span 3; }
  .mag-swing--offset { grid-column: span 6; }
  .mag-eaves__row { grid-template-columns: 1fr 1fr; }
  .mag-entry { grid-template-columns: 10rem 1fr; }
  .mag-entry__label { grid-column: 2; grid-row: 1; }
  .mag-entry__title, .mag-entry__note { grid-column: 1 / span 2; }
  .mag-entry__title { margin-top: 0.2rem; }
}
@media (max-width: 720px) {
  .mag-porch__row { flex-direction: column; align-items: flex-start; }
  .mag-gate ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; max-width: none; }
  .mag-gate li:nth-child(4) { grid-column: 1; }
  .mag-gallery { grid-template-columns: 1fr; }
  .mag-gallery .mag-swing { grid-column: span 1; }
  .mag-yard { padding-top: 3rem; padding-bottom: 3rem; }
  .mag-entry { grid-template-columns: 1fr; gap: 0.15rem; }
  .mag-entry__label { grid-column: 1; }
  .mag-entry__title, .mag-entry__note { grid-column: 1; }
  .mag-yard__head { grid-template-columns: 1fr; }
  .mag-yard__note { grid-column: 1; }
  .mag-eaves__row { grid-template-columns: 1fr; }
  .mag-dogtrot__states li { grid-template-columns: 1fr; gap: 0.15rem; }
  .mag-shutter--tall { aspect-ratio: 4 / 3; }
}

@media print {
  .mag-porch, .mag-gate, .mag-eaves, .mag-walk, .mag-rule, .mag-dogtrot__plate, .mag-transom__plate { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .mag-transom, .mag-dogtrot, .mag-statute { background: #fff; color: #000; }
  .mag-transom__title, .mag-transom__deck, .mag-transom__edition, .mag-dogtrot__title, .mag-dogtrot__note, .mag-dogtrot__rulecell { color: #000; }
  .mag-survey th { background: #eee; color: #000; }
  a { color: #000; }
}