/* =========================================================================
   The Sim Standard — house stylesheet
   =========================================================================

   The whole design is three decisions:

     1. Two accents plus paper. Ink, oxblood for editorial marks, navy for
        the paper's furniture, the stock. Every other tone on the page is ink
        mixed with paper. No status colours, no section colours, no tints.
     2. Type scale carries the hierarchy. The lead headline is ~3.5x the
        secondary headline. That gap is the front page.
     3. Nothing is in a box. Stories are separated by whitespace and hairline
        rules. No cards, no shadows, no pills, no filled badges.

   Adding a component? See STYLEGUIDE.md. If it needs a box or a new colour
   to read as important, the typography is wrong, not the palette.
   ========================================================================= */

/* ==================================================== tokens: colour */
:root {
  color-scheme: light;

  /* The entire palette. Four values, with a job each.
     --accent  is editorial: section labels, links, live status dots.
     --accent-2 is institutional: the rules and bars that frame the paper.
     They never swap roles, and nothing else is coloured. */
  --paper:    #FBF9F4;  /* warm stock */
  --ink:      #17150F;  /* near-black, warm */
  --accent:   #8C1D18;  /* oxblood */
  --accent-2: #1F3864;  /* navy */

  /* Permitted derivations — ink diluted with paper, nothing else.
     Two quieter voices, both still AA against the stock at small sizes. */
  --ink-soft:    color-mix(in srgb, var(--ink) 82%, var(--paper));
  --ink-muted:   color-mix(in srgb, var(--ink) 62%, var(--paper));
  --rule:        color-mix(in srgb, var(--ink) 16%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --selection:   color-mix(in srgb, var(--accent) 16%, var(--paper));

  /* ================================================== tokens: type */
  --face-display: 'Playfair Display', 'Times New Roman', Times, serif;
  --face-text: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --face-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Identifiers in the register only — bill numbers, docket numbers. */
  --face-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --step--2: 0.6875rem;   /* 11px — small-caps labels */
  --step--1: 0.8125rem;   /* 13px — bylines, timestamps, UI */
  --step-0:  1.0625rem;   /* 17px — body */
  --step-1:  1.1875rem;   /* 19px — standfirsts, register titles */
  --step-2:  1.5rem;      /* 24px — secondary headlines */
  --step-3:  1.875rem;    /* 30px — page headings */
  --step-4:  2.375rem;    /* 38px — section-page lead */
  --step-lead: clamp(2.6rem, 6.4vw, 5.25rem);      /* the front-page headline */
  --step-nameplate: clamp(2.4rem, 8.8vw, 6.25rem); /* the nameplate */

  --measure: 68ch;        /* article line length, capped */
  --lh-tight: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.7;

  /* ================================================== tokens: space */
  --wrap: 1220px;
  --gutter: clamp(1rem, 2.4vw, 2.25rem);
  --space-1: .35rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: clamp(2.25rem, 4.5vw, 3.75rem);
  --space-6: clamp(3rem, 7vw, 5.5rem);

  --hover: 100ms;  /* the only animation on the site */
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper:    #14130F;  /* ink becomes the stock */
  --ink:      #EDE7D9;  /* warm off-white */
  --accent:   #DE8B7B;
  --accent-2: #93AEE0;
  --selection: color-mix(in srgb, var(--accent) 26%, var(--paper));
  --rule:        color-mix(in srgb, var(--ink) 22%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 50%, var(--paper));
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--selection); }

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -.006em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
hr { border: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--hover) linear;
}
a:hover { color: var(--ink); }

code, kbd, pre, .mono { font-family: var(--face-mono); font-size: .88em; }

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

/* =========================================================== utilities */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A page whose entire content is the reading column — article, corrections,
   error pages. Centred inside .wrap so the page is never lopsided, while the
   measure itself stays capped and nothing sits beside the text.
   Must come after .wrap: same specificity, later wins. */
.measure { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.visually-hidden, .skip-link:not(:focus) {
  position: absolute !important; 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; z-index: 50; left: 1rem; top: .5rem;
  background: var(--ink); color: var(--paper); padding: .5rem .9rem;
}

/* The small-caps section label. The one place the accent is allowed to
   appear in bulk, and never inside a box. */
.label {
  display: block;
  font-family: var(--face-ui);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  margin: 0 0 var(--space-1);
}
.label a { color: inherit; text-decoration: none; }
.label a:hover { text-decoration: underline; }
.label--ink { color: var(--ink-muted); }

/* Metadata: byline, timestamp, counts. Sans, small, quiet, never accent. */
.meta {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
}
.meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); }
.meta a:hover { color: var(--accent); }
.meta__sep { padding-inline: .45em; opacity: .55; }

/* A plain text link that used to be a button. */
.textlink {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color var(--hover) linear;
}
.textlink:hover { color: var(--ink); }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.linkish:hover { color: var(--accent); }
.inline-form { display: inline; margin: 0; }

.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }
.stack-top { margin-top: var(--space-4); }

.rule { height: 0; border-top: 1px solid var(--rule); margin-block: var(--space-5); }
.rule--strong { border-top-color: var(--rule-strong); }

/* ============================================================ masthead
   No rule of its own: the section nav closes the block in navy. */
.masthead { position: relative; }

.masthead__utility {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-block: .5rem;
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
}
.masthead__utility a { color: inherit; text-decoration: none; }
.masthead__utility a:hover { color: var(--accent); }
.masthead__utility > * { display: flex; align-items: center; gap: .9rem; }

.theme-toggle {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  transition: color var(--hover) linear;
}
.theme-toggle:hover { color: var(--accent); }

/* ----------------------------------------------------------- nameplate */
.nameplate { text-align: center; padding-block: clamp(1.25rem, 3.4vw, 2.5rem) var(--space-3); }
.nameplate__link { text-decoration: none; color: inherit; }
.nameplate__title {
  font-family: var(--face-display);
  font-weight: 900;
  font-size: var(--step-nameplate);
  line-height: .9;
  letter-spacing: -.022em;
}
.nameplate__tagline {
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-muted);
  margin: .75rem 0 0;
}

/* --------------------------------------------------------- dateline bar
   The identity of the paper: it says a government is being tracked. */
/* The 2px navy rule is the paper's institutional mark. It appears exactly
   three times: over the dateline bar, over an article's Filed under, and
   over the footer. Do not use it for anything else. */
.dateline {
  border-top: 2px solid var(--accent-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
}
.dateline__edition {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-block: .5rem;
}
.dateline__edition > * { white-space: nowrap; }

.dateline__state {
  display: flex; flex-wrap: wrap;
  gap: 0 var(--space-3);
  padding-block: .5rem;
  border-top: 1px solid var(--rule);
}
.dateline__item { display: flex; align-items: baseline; gap: .45rem; }
.dateline__item + .dateline__item { position: relative; padding-left: var(--space-3); }
.dateline__item + .dateline__item::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em;
  border-left: 1px solid var(--rule);
}
.dateline__key { color: var(--ink-muted); }
.dateline__value { color: var(--ink); font-weight: 600; letter-spacing: .06em; }
.dateline__value a { color: inherit; text-decoration: none; }
.dateline__value a:hover { color: var(--accent); }

/* Standing correction note: only present for seven days after one is filed. */
.standing-note {
  padding-block: .5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-muted);
}
.standing-note__flag {
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-weight: 600;
}

/* ----------------------------------------------------------- section nav */
.sections { border-bottom: 1px solid var(--accent-2); }
.sections__list {
  display: flex; gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.sections__list::-webkit-scrollbar { display: none; }
.sections__list a {
  display: block; padding-block: .7rem;
  font-family: var(--face-ui); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  transition: color var(--hover) linear;
}
.sections__list a:hover { color: var(--accent); }
/* Where you are is structural, so it is navy — and the only underline in the nav. */
.sections__list a[aria-current="page"] {
  color: var(--accent-2);
  box-shadow: inset 0 -2px 0 var(--accent-2);
}

/* =============================================================== layout */
main { padding-block: var(--space-5) var(--space-6); display: block; }

/* The grid. Twelve columns on desktop, one on a phone. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
}
.col-lead { grid-column: span 8; }
.col-side { grid-column: span 4; }
.col-full { grid-column: 1 / -1; }
.col-half { grid-column: span 6; }
.col-third { grid-column: span 4; }

/* ========================================================== front page */
.front__lead { border-right: 1px solid var(--rule); padding-right: var(--gutter); }

.lead__title {
  font-size: var(--step-lead);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -.024em;
  margin-bottom: var(--space-2);
}
.lead__title a { color: inherit; text-decoration: none; }
.lead__title a:hover { color: var(--accent); }
.lead__standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--space-2);
}
.lead__figure { margin: var(--space-3) 0 0; }
.lead__figure figcaption,
.article__figure figcaption {
  font-family: var(--face-ui);
  font-size: var(--step--2);
  color: var(--ink-muted);
  padding-top: .5rem;
  line-height: 1.45;
}

/* The column of seconds: one third the lead, and it should look it. */
.column__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.column__item:first-child { padding-top: 0; border-top: 0; }
.column__title {
  font-size: var(--step-2);
  line-height: 1.18;
  margin-bottom: var(--space-1);
}
.column__title a { color: inherit; text-decoration: none; }
.column__title a:hover { color: var(--accent); }

/* ======================================================== entries
   Below the fold every story is one line: headline, section, timestamp. */
.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-3);
  padding-block: .7rem;
  border-top: 1px solid var(--rule);
}
.entry:first-child { border-top: 0; }
.entry__meta { display: flex; align-items: baseline; gap: var(--space-2); }
.entry__title {
  font-family: var(--face-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--hover) linear;
}
.entry__title:hover { color: var(--accent); }
.entry__section {
  font-family: var(--face-ui); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.entry__section:hover { color: var(--ink); }
.entry__time {
  font-family: var(--face-ui); font-size: var(--step--2);
  color: var(--ink-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A block heading: small caps, a hairline, nothing else. */
.blockhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink);
  padding-bottom: .5rem;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--accent-2);
}
.blockhead a { color: inherit; text-decoration: none; }
.blockhead a:hover { color: var(--accent); }
.blockhead__aside {
  font-weight: 400; letter-spacing: .1em; color: var(--ink-muted);
}

/* ======================================================== the register
   Bill tracker and court docket. A court register, not a board. */
.register { list-style: none; margin: 0; padding: 0; }
.register__row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 14rem;
  column-gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: 1px solid var(--rule);
}
.register__row:first-child { border-top: 0; }
.register__id {
  font-family: var(--face-mono);
  font-size: var(--step--1);
  color: var(--ink-muted);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.register__title {
  font-family: var(--face-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
}
.register__title a { color: inherit; text-decoration: none; }
.register__title a:hover { color: var(--accent); }
.register__note {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: .25rem 0 0;
  max-width: 60ch;
}
.register__note a { color: var(--accent); text-decoration: none; }
.register__note a:hover { text-decoration: underline; }
.register__status {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.register__when {
  flex-basis: 100%;
  font-size: var(--step--2);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}
.register__when--due { color: var(--accent); }

/* Status is a word. The dot is the only ornament, and it is the accent. */
.dot {
  flex: none;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  transform: translateY(-.15em);
}
.dot--live { background: var(--accent); }
.dot--closed { border-color: var(--ink-muted); }

.register-filter {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  font-family: var(--face-ui); font-size: var(--step--1);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.register-filter a { color: var(--ink-muted); text-decoration: none; }
.register-filter a:hover { color: var(--accent); }
.register-filter a[aria-current="true"] { color: var(--ink); font-weight: 600; }

/* ============================================================== article */
.article { max-width: var(--measure); margin-inline: auto; }
.article__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: var(--space-2);
}
.article__standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
/* Byline and timestamp sit above the headline, in small sans. */
.article__byline {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.article__byline b { color: var(--ink); font-weight: 600; }
.article__figure { margin: 0 0 var(--space-4); }

/* ---- prose ---- */
.prose { font-size: var(--step-0); line-height: var(--lh-body); }
.prose > p { margin: 0 0 1.2em; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--face-display);
  font-weight: 900;
  font-size: 3.9em;
  line-height: .8;
  margin: .04em .08em -.04em 0;
  color: var(--accent-2);
}
.prose--tight > p:first-of-type::first-letter { float: none; font-size: 1em; margin: 0; }

.prose h2 { font-size: var(--step-2); margin: 1.9em 0 .5em; }
.prose h3 { font-size: var(--step-1); margin: 1.6em 0 .4em; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose hr { border-top: 1px solid var(--rule); margin-block: var(--space-4); }
.prose img { margin-block: var(--space-3); }
.prose figcaption { font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted); }
.prose blockquote {
  margin: var(--space-3) 0 var(--space-3) var(--space-3);
  color: var(--ink-soft);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Pull-quote: large serif, no marks, no rules, no float. */
.prose .pullquote {
  margin: var(--space-4) 0;
  font-family: var(--face-display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.prose .inline-cite {
  font-family: var(--face-ui); font-size: .78em; font-style: normal;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--step--1); }
.prose th, .prose td { padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
.prose thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--face-ui); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}
.prose pre { overflow-x: auto; border-left: 1px solid var(--rule); padding-left: var(--space-2); }
.prose code { font-size: .88em; }
.prose .footnote { font-size: var(--step--1); color: var(--ink-muted); border-top: 1px solid var(--rule); margin-top: var(--space-4); }
.prose mark { background: var(--selection); color: inherit; }

/* ---- article footer: filed under, corrections, tools ---- */
.article__foot { max-width: var(--measure); margin: var(--space-5) auto 0; }

.filed { border-top: 2px solid var(--accent-2); padding-top: var(--space-2); }
.filed__list { list-style: none; margin: 0; padding: 0; }
.filed__item {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding-block: .45rem;
  border-top: 1px solid var(--rule);
}
.filed__item:first-child { border-top: 0; }
.filed__id { font-family: var(--face-mono); font-size: var(--step--1); color: var(--ink-muted); }
.filed__link { font-family: var(--face-text); color: var(--ink); text-decoration: none; }
.filed__link:hover { color: var(--accent); }
.filed__status { font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted); }

.article__correction {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.article__correction .label { color: var(--accent); }

.article__tools {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  font-family: var(--face-ui); font-size: var(--step--1);
}
.article__tools [data-copied="1"] { color: var(--ink-muted); }

/* ========================================================== page heads */
.pagehead { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--accent-2); }
.pagehead__title { font-size: var(--step-4); font-weight: 900; letter-spacing: -.02em; }
.pagehead__blurb { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; margin: var(--space-2) 0 0; }
.pagehead__meta { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* The first story on a section page is set larger than the rest. */
.section-lead { padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.section-lead__title { font-size: var(--step-4); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.section-lead__title a { color: inherit; text-decoration: none; }
.section-lead__title a:hover { color: var(--accent); }
.section-lead__standfirst { font-size: var(--step-1); color: var(--ink-soft); max-width: 58ch; margin-bottom: var(--space-2); }

/* ============================================================== notices */
.note {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.note b, .note strong { color: var(--ink); }

.messages { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.messages__item {
  font-family: var(--face-ui); font-size: var(--step--1);
  padding-block: .5rem; border-bottom: 1px solid var(--rule);
}

/* =========================================================== corrections */
.corrections { list-style: none; margin-inline: auto; padding: 0; max-width: var(--measure); }
.corrections__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.corrections__item:first-child { border-top: 0; padding-top: 0; }
.corrections__subject { font-size: var(--step-1); margin-bottom: var(--space-1); }
.corrections__subject a { color: inherit; text-decoration: none; }
.corrections__subject a:hover { color: var(--accent); }
.corrections__text { margin: var(--space-1) 0 0; }

/* ============================================================== masthead pg */
.staff { list-style: none; margin: 0; padding: 0; }
.staff__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.staff__item:first-child { border-top: 0; }
.staff__name { font-size: var(--step-2); margin-bottom: var(--space-1); }
.staff__bio { max-width: var(--measure); color: var(--ink-soft); }
.staff__bio p:last-child { margin-bottom: 0; }

.colophon { max-width: var(--measure); }
.colophon p { margin-bottom: 1em; }
.colophon dl { margin: 0; }
.colophon dt { font-family: var(--face-ui); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-top: var(--space-3); }
.colophon dd { margin: .2rem 0 0; }

/* =============================================================== search */
.searchform { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.searchform input[type="search"], .searchform select {
  font-family: var(--face-ui); font-size: var(--step-0);
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: .4rem 0; min-width: 0;
}
.searchform input[type="search"] { flex: 1 1 20rem; }
.searchform select { flex: 0 1 12rem; }
.searchform input[type="search"]:focus, .searchform select:focus { outline: 0; border-bottom-color: var(--accent); }
.searchhit { font-size: var(--step--1); color: var(--ink-muted); margin: .2rem 0 0; }
.searchhit mark { background: var(--selection); }

/* =========================================================== pagination */
.pagination {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--rule-strong);
  font-family: var(--face-ui); font-size: var(--step--1);
}
.pagination a { text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination span { color: var(--ink-muted); }

/* ========================================================== empty/error */
.empty { color: var(--ink-muted); font-style: italic; padding-block: var(--space-4); }
.errorpage { max-width: var(--measure); margin-inline: auto; padding-block: var(--space-4); }
.errorpage__title { font-size: var(--step-4); font-weight: 900; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.errorpage__lede { font-size: var(--step-1); color: var(--ink-soft); }

/* =============================================================== footer */
.footer {
  border-top: 2px solid var(--accent-2);
  margin-top: var(--space-6);
  padding-block: var(--space-4) var(--space-4);
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-3);
}
.footer__about { grid-column: span 4; }
.footer__col { grid-column: span 2; }
.footer__nameplate { font-family: var(--face-display); font-size: var(--step-2); font-weight: 900; color: var(--ink); margin: 0 0 var(--space-1); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .3rem; }
.footer__list a { color: var(--ink-muted); text-decoration: none; }
.footer__list a:hover { color: var(--accent); }
.footer__baseline {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .1em;
}

/* =========================================================== responsive */
@media (max-width: 62rem) {
  .col-lead, .col-side, .col-half, .col-third { grid-column: 1 / -1; }
  .front__lead { border-right: 0; padding-right: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-strong); }
  .footer__about, .footer__col { grid-column: span 6; }
  .register__row { grid-template-columns: 6.5rem minmax(0, 1fr); row-gap: .35rem; }
  .register__status { grid-column: 2; }
}

@media (max-width: 40rem) {
  :root { --step-lead: clamp(2.1rem, 10vw, 2.9rem); }
  .entry { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .filed__item { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
  .footer__about, .footer__col { grid-column: 1 / -1; }
  .prose > p:first-of-type::first-letter { font-size: 3.2em; }
}

/* ================================================================ print */
@media print {
  .masthead__utility, .sections, .footer, .article__tools, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  a { color: #000; text-decoration: none; }
  .article, .article__foot, .prose { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}