/*
 * ohio-family.lawyer: "The Ledger"
 * Vellum paper, verdigris ink, sealing wax, gilt. Every color is a token from
 * themes.css. Every size is a token from tokens.css.
 */

/* ================= Banners ================= */
.crisis-banner {
  background: var(--night);
  color: var(--night-ink);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  letter-spacing: 0.01em;
}

.crisis-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
  margin-block: 0;
  padding-block: var(--space-2);
}

.crisis-banner strong {
  color: var(--gilt);
  font-size: 1.1em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
}

.crisis-banner strong::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 35%, transparent);
  vertical-align: 0.08em;
}

.crisis-banner a {
  font-weight: 600;
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--night-ink) 40%, transparent);
}

.crisis-banner__more {
  margin-left: auto;
}

.disclaimer-banner {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-tint);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  color: var(--ink-muted);
}

.disclaimer-banner p {
  margin-block: 0;
  padding-block: var(--space-2);
}

.disclaimer-banner a {
  color: var(--ink-soft);
}

/* ================= Masthead ================= */
.site-header {
  border-bottom: 4px double var(--rule-strong);
  font-family: var(--font-sans);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5) var(--space-3);
}

.site-brand {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
}

.site-brand__seal {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 34% 30%, var(--accent-2-light), var(--accent-2) 48%, var(--accent-2-deep));
  box-shadow:
    inset 0 0 0 3px var(--accent-2-deep),
    inset 0 0 0 4px color-mix(in oklab, var(--accent-2-ink) 30%, transparent),
    0 3px 6px color-mix(in srgb, var(--shadow-tone) 35%, transparent);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent-2-ink);
  transform: rotate(-8deg);
  transition: transform 0.5s var(--ease-out);
}

.site-brand:hover .site-brand__seal {
  transform: rotate(8deg) scale(1.05);
}

.site-brand__name {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
}

.site-brand__tld {
  font-weight: 500;
  font-style: italic;
  color: var(--accent-2);
}

.site-brand__tag {
  margin-top: 0.35em;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.primary-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav a {
  position: relative;
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.15rem;
  left: 0;
  height: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.primary-nav a:hover,
.primary-nav a[aria-current] {
  color: var(--ink);
}

.primary-nav a:hover::after,
.primary-nav a[aria-current]::after {
  transform: scaleX(1);
}

.primary-nav a.primary-nav__search {
  padding-inline: 0.9em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
}

.primary-nav a.primary-nav__search::after {
  display: none;
}

.primary-nav a.primary-nav__search:hover {
  border-color: var(--ink);
  background: var(--surface);
}

.nav-toggle {
  display: none;
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 2px 2px 0 var(--press);
  font: 700 var(--step--2) / 1.2 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

@media (width <= 48rem) {
  .has-js .nav-toggle {
    display: inline-flex;
  }

  .has-js .primary-nav {
    display: none;
    width: 100%;
  }

  .has-js .primary-nav.is-open {
    display: block;
    padding-bottom: var(--space-3);
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav a {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--rule);
  }

  .primary-nav a.primary-nav__search {
    margin-top: var(--space-3);
    text-align: center;
  }
}

/* ================= Footer ================= */
.site-footer {
  position: relative;
  margin-top: var(--space-8);
  padding-block: var(--space-7) var(--space-5);
  background: var(--night);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--night-ink);
}

/* Scalloped top edge, like a torn docket stub. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  height: 10px;
  background: radial-gradient(circle at 50% 100%, var(--night) 0 7px, transparent 7.5px) 0 0 / 18px 10px repeat-x;
}

.site-footer::after {
  content: "\00a7";
  position: absolute;
  right: 3vw;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(8rem, 22vw, 17rem);
  line-height: 0.78;
  color: color-mix(in oklab, var(--night-ink) 6%, transparent);
}

.site-footer > .wrap {
  position: relative;
  z-index: 1;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-6);
}

.site-footer__heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gilt);
}

.site-footer a {
  color: var(--night-ink);
  text-decoration-color: color-mix(in oklab, var(--gilt) 55%, transparent);
}

.site-footer a:hover {
  color: var(--gilt);
}

.site-footer .fine-print {
  color: var(--night-muted);
}

.site-footer ul {
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: var(--space-2);
}

.site-footer__nav ul {
  columns: 2;
  column-gap: var(--space-5);
}

.site-footer__nav li {
  break-inside: avoid;
}

.site-footer__base {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--night-rule);
  font-size: var(--step--2);
  color: var(--night-muted);
}

.site-footer__base p {
  margin-bottom: var(--space-1);
}

/* ================= Buttons (letterpress) ================= */
.button {
  --button-bg: var(--surface);
  --button-ink: var(--ink);
  --button-edge: var(--ink);
  --button-press: var(--press);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8em 1.35em;
  border: 1.5px solid var(--button-edge);
  border-radius: var(--radius-sm);
  background: var(--button-bg);
  box-shadow: 3px 3px 0 var(--button-press);
  font: 700 var(--step--1) / 1.1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--button-ink);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.button:hover {
  box-shadow: 5px 5px 0 var(--button-press);
  transform: translate(-2px, -2px);
}

.button:active {
  box-shadow: 0 0 0 var(--button-press);
  transform: translate(3px, 3px);
}

.button--primary {
  --button-bg: var(--accent);
  --button-ink: var(--accent-ink);
  --button-edge: var(--accent-strong);
  --button-press: var(--accent-2);
}

.button--small {
  padding: 0.55em 0.95em;
  font-size: var(--step--2);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.quick-exit {
  --button-bg: var(--accent-2);
  --button-ink: var(--accent-2-ink);
  --button-edge: var(--accent-2-deep);
  --button-press: var(--press);

  font-size: var(--step-0);
}

/* ================= Page scaffolding ================= */
.page-header {
  max-width: var(--measure);
  padding-block: var(--space-7) var(--space-4);
}

.page-header::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin-top: var(--space-4);
  background: var(--accent-2);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: var(--space-3);
  font: 700 var(--step--2) / 1.2 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: currentcolor;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-variant-numeric: lining-nums;
  color: var(--muted);
}

.meta-line > * + *::before {
  content: "\00b7";
  margin-right: var(--space-3);
  color: var(--rule-strong);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--ink-soft);
}

.breadcrumbs a:hover {
  color: var(--accent-2);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--rule-strong);
}

.empty,
.todo {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  font-style: italic;
  color: var(--muted);
}

.fine-print {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--muted);
}

/* ================= Notices and stamps ================= */
.notice {
  max-width: var(--measure);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.notice--draft,
.notice--warn {
  border-color: color-mix(in oklab, var(--warn-ink) 20%, transparent);
  border-left-color: var(--gilt);
  background-color: var(--warn-bg);
  background-image: repeating-linear-gradient(-45deg, transparent 0 11px, color-mix(in oklab, var(--warn-ink) 6%, transparent) 11px 12px);
  color: var(--warn-ink);
}

.notice--draft strong {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.12em 0.55em;
  border: 2px solid var(--accent-2);
  border-radius: var(--radius-sm);
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  transform: rotate(-2.5deg);
}

/* ================= Callouts: tabbed folders ================= */
.callout {
  --callout-accent: var(--accent);
  --callout-ink: var(--accent-ink);
  --callout-bg: var(--accent-soft);

  position: relative;
  max-width: var(--measure);
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--callout-accent) 25%, var(--rule));
  border-top: 3px solid var(--callout-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--callout-bg);
  box-shadow: var(--shadow-soft);
}

.callout::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(to bottom right, color-mix(in oklab, var(--callout-accent) 30%, var(--callout-bg)) 50%, var(--bg) 50%);
  box-shadow: -2px -2px 3px color-mix(in srgb, var(--shadow-tone) 12%, transparent);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout__title {
  position: absolute;
  top: 0;
  left: var(--space-5);
  margin: 0;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-sm);
  background: var(--callout-accent);
  font: 700 var(--step--2) / 1.3 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--callout-ink);
  transform: translateY(-60%);
}

.callout__title + * {
  margin-top: var(--space-2);
}

.callout--objections {
  --callout-accent: var(--accent-2);
  --callout-ink: var(--accent-2-ink);
  --callout-bg: var(--accent-2-soft);
}

.callout--not-claim {
  --callout-accent: var(--ink-soft);
  --callout-ink: var(--paper);
  --callout-bg: var(--surface);
}

.callout--protections {
  --callout-accent: var(--badge-brief);
  --callout-ink: var(--badge-ink);
  --callout-bg: color-mix(in oklab, var(--badge-brief) 10%, var(--paper-raised));
}

.callout--verify,
.callout--clinical,
.callout--law-as-of {
  --callout-accent: var(--gilt);
  --callout-ink: var(--night);
  --callout-bg: var(--warn-bg);

  color: var(--warn-ink);
}

.law-as-of {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  max-width: var(--measure);
  padding: var(--space-2) var(--space-4);
  border: 1px dashed color-mix(in oklab, var(--warn-ink) 35%, transparent);
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--warn-ink);
}

.law-as-of strong {
  color: inherit;
}

/* ================= Badges, pills, chips ================= */
.badge {
  display: inline-block;
  padding: 0.28em 0.75em 0.22em;
  border-radius: var(--radius-sm);
  background: var(--badge-page);
  outline: 1px solid color-mix(in oklab, var(--badge-ink) 38%, transparent);
  outline-offset: -3px;
  font: 700 0.66rem / 1.4 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--badge-ink);
}

.badge--news {
  background: var(--badge-news);
}

.badge--essay {
  background: var(--badge-essay);
}

.badge--brief {
  background: var(--badge-brief);
}

.badge--guide {
  background: var(--badge-guide);
}

.badge--foundation {
  background: var(--badge-foundation);
}

.pill {
  display: inline-block;
  padding: 0.1em 0.7em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface);
  font: 600 0.76rem / 1.6 var(--font-sans);
  color: var(--ink-soft);
}

/* "Unverified" and "Coming" become a rubber stamp. */
.pill--muted {
  padding: 0.05em 0.55em;
  border: 1.5px solid var(--accent-2);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  transform: rotate(-4deg);
}

.pill--warn {
  border-color: transparent;
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.pill--position {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill--support {
  border-color: var(--badge-brief);
  color: var(--badge-brief);
}

.pill--oppose {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.pill--amend {
  border-color: var(--badge-guide);
  color: var(--badge-guide);
}

.pill--watching {
  border-color: var(--badge-news);
  color: var(--badge-news);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 0.22em 0.75em;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 1px 0 var(--rule);
  font: 500 var(--step--2) / 1.5 var(--font-mono);
  font-variant-numeric: lining-nums;
  text-decoration: none;
  color: var(--ink-soft);
  transition:
    transform 0.2s var(--ease-out),
    border-color 0.2s ease,
    color 0.2s ease;
}

a.chip:hover {
  border-color: var(--accent);
  border-left-color: var(--accent-2);
  color: var(--accent);
  transform: translateY(-2px);
}

/* ================= Cards: index cards ================= */
.card-list {
  max-width: 48rem;
}

.card {
  --card-accent: var(--badge-page);

  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card-accent);
}

.card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px) rotate(-0.2deg);
}

.card + .card {
  margin-top: var(--space-4);
}

.card--essay {
  --card-accent: var(--badge-essay);
}

.card--news {
  --card-accent: var(--badge-news);
}

.card--brief {
  --card-accent: var(--badge-brief);
}

.card--guide {
  --card-accent: var(--badge-guide);
}

.card--foundation {
  --card-accent: var(--badge-foundation);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.card__title {
  margin-bottom: var(--space-2);
  font-size: var(--step-1);
  line-height: 1.2;
}

.card__title a {
  text-decoration: none;
  color: var(--ink);
}

/* Whole card is the link target. */
.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.card:hover .card__title a {
  color: var(--accent);
}

.card__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
}

.card__summary {
  margin-bottom: 0;
  font-size: 0.97em;
  color: var(--ink-soft);
}

/* Featured: a legal pad with a margin line and a ribbon. */
.card--featured {
  padding: var(--space-6) var(--space-6) var(--space-5) calc(var(--space-6) + 2rem);
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, transparent 2.6rem, color-mix(in oklab, var(--accent-2) 45%, transparent) 2.6rem 2.7rem, transparent 2.7rem 2.9rem, color-mix(in oklab, var(--accent-2) 45%, transparent) 2.9rem 3rem, transparent 3rem),
    repeating-linear-gradient(to bottom, transparent 0 calc(1.9rem - 1px), var(--rule-faint) calc(1.9rem - 1px) 1.9rem);
}

.card--featured::after {
  content: "Featured";
  position: absolute;
  top: var(--space-5);
  right: -0.5rem;
  padding: 0.35em 1.1em 0.35em 1.4em;
  background: var(--accent-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.6em 50%);
  box-shadow: var(--shadow-soft);
  font: 800 var(--step--2) / 1.2 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2-ink);
}

.card--featured .card__title {
  max-width: 20ch;
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.card--featured .card__subtitle {
  font-size: var(--step-1);
}

@media (width <= 40rem) {
  .card--featured {
    padding: var(--space-6) var(--space-5) var(--space-5) calc(var(--space-5) + 1.5rem);
    background-image:
      linear-gradient(to right, transparent 1.6rem, color-mix(in oklab, var(--accent-2) 45%, transparent) 1.6rem 1.7rem, transparent 1.7rem),
      repeating-linear-gradient(to bottom, transparent 0 calc(1.9rem - 1px), var(--rule-faint) calc(1.9rem - 1px) 1.9rem);
  }
}

/* ================= Home: hero ================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8) var(--space-7);
  border-bottom: 1px solid var(--rule);
  background-image:
    radial-gradient(ellipse 55% 65% at 82% 35%, var(--accent-soft), transparent 70%),
    repeating-linear-gradient(to bottom, transparent 0 calc(2.25rem - 1px), var(--rule-faint) calc(2.25rem - 1px) 2.25rem);
}

/* Legal-pad margin: a double wax line. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(0.5rem, calc((100% - var(--wrap)) / 2 - 2rem));
  width: 5px;
  border-inline: 1px solid color-mix(in oklab, var(--accent-2) 50%, transparent);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr);
  align-items: center;
  gap: var(--space-7);
}

@media (width <= 56rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.hero__title {
  max-width: 17ch;
  margin-bottom: var(--space-5);
  font-size: clamp(2.5rem, 1.3rem + 4.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero__title em {
  font-weight: 500;
  color: var(--accent);
}

.hero__lede {
  max-width: 56ch;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero__aside {
  position: relative;
  justify-self: center;
  width: min(100%, 24rem);
}

/* The ledger card */
.ledger {
  position: relative;
  padding: var(--space-6) var(--space-5) var(--space-4);
  border: 1px solid var(--rule);
  border-top: 4px double var(--ink);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2.4rem - 1px), var(--rule-faint) calc(2.4rem - 1px) 2.4rem);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-sans);
  transform: rotate(1.6deg);
}

.ledger__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

.ledger__rows li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  height: 2.4rem;
  padding-top: 0.65rem;
}

.ledger__party {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

.ledger__party::after {
  content: "";
  flex: 1;
  border-bottom: 1.5px dotted var(--rule-strong);
}

.ledger__tick {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--accent);
}

.ledger__row--court .ledger__party {
  font-style: italic;
}

.ledger__row--court .ledger__tick {
  color: var(--accent-2);
}

.ledger__foot {
  margin: var(--space-4) 0 0;
  font-size: var(--step--2);
  font-style: italic;
  color: var(--ink-muted);
}

/* The seal */
.seal {
  position: absolute;
  top: -4rem;
  right: -1.75rem;
  z-index: 2;
  width: clamp(7.5rem, 11vw, 9.5rem);
  margin: 0;
  filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--shadow-tone) 35%, transparent));
  transform: rotate(-10deg);
}

.seal svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.seal__beads {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 7;
  stroke-dasharray: 0.5 5.6;
  stroke-linecap: round;
}

.seal__disc {
  fill: var(--accent-2);
}

.seal__shine {
  fill: var(--accent-2-light);
  opacity: 0.55;
}

.seal__line {
  fill: none;
  stroke: var(--accent-2-ink);
  stroke-width: 1;
  stroke-opacity: 0.5;
}

.seal__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.seal__text {
  font: 700 10px var(--font-sans);
  fill: var(--accent-2-ink);
}

.seal__glyph {
  font: 600 62px var(--font-display);
  fill: var(--accent-2-ink);
}

@media (width <= 56rem) {
  .seal {
    top: -4.5rem;
    right: -0.75rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * {
    animation: rise-in 0.9s var(--ease-out) both;
  }

  .hero__copy > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero__copy > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero__copy > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .hero__aside {
    animation: settle-in 1.2s var(--ease-out) 0.3s both;
  }

  .seal__ring {
    animation: seal-turn 120s linear infinite;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.6em);
  }
}

@keyframes settle-in {
  from {
    opacity: 0;
    transform: translateY(2rem) rotate(5deg);
  }
}

@keyframes seal-turn {
  to {
    transform: rotate(1turn);
  }
}

/* ================= Home: safety strip ================= */
.safety-strip {
  border-block: 1px solid color-mix(in oklab, var(--warn-ink) 18%, transparent);
  background-color: var(--warn-bg);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in oklab, var(--warn-ink) 5%, transparent) 14px 15px);
  font-family: var(--font-sans);
  color: var(--warn-ink);
}

.safety-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}

.safety-strip__inner p {
  flex: 1 1 30rem;
  margin: 0;
}

.safety-strip a:not(.button) {
  font-weight: 800;
  color: inherit;
}

.safety-strip__heading {
  margin: 0;
  padding: 0.2em 0.7em;
  border: 2px solid currentcolor;
  border-radius: var(--radius-sm);
  font: 800 var(--step--2) / 1.3 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  transform: rotate(-2deg);
}

/* ================= Home: sections ================= */
main {
  counter-reset: folio;
}

.home-section {
  padding-block: var(--space-7);
}

.home-section--tinted {
  border-block: 1px solid var(--rule);
  background: var(--bg-tint);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--ink);
}

.section-head h2 {
  margin: 0;
  font-size: var(--step-3);
  counter-increment: folio;
}

.section-head h2::before {
  content: "\00a7\2009" counter(folio, decimal-leading-zero);
  display: block;
  margin-bottom: 0.3em;
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent-2);
}

.section-head p {
  margin: 0 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
}

.section-lede {
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--ink-soft);
}

.latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
}

@media (width <= 52rem) {
  .latest-grid {
    grid-template-columns: 1fr;
  }
}

.list-heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Reform tiles: docket cards, wax-seal numbers, ghost numerals */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  padding: 0;
  list-style: none;
  counter-reset: tile;
}

.tile {
  counter-increment: tile;
}

.tile__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  overflow: hidden;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-sans);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s ease;
}

.tile__link::after {
  content: counter(tile, decimal-leading-zero);
  position: absolute;
  right: -0.04em;
  bottom: -0.28em;
  font: italic 600 6rem / 1 var(--font-display);
  font-variant-numeric: lining-nums;
  color: color-mix(in oklab, var(--accent) 8%, transparent);
  transition: color 0.3s ease;
}

.tile__link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.tile__link:hover::after {
  color: color-mix(in oklab, var(--accent-2) 16%, transparent);
}

.tile__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.15;
}

.tile__summary {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The wax seal number, used everywhere a priority is numbered. */
.tile__num {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 34% 30%, var(--accent-2-light), var(--accent-2) 48%, var(--accent-2-deep));
  box-shadow:
    inset 0 0 0 3px var(--accent-2-deep),
    inset 0 0 0 4px color-mix(in oklab, var(--accent-2-ink) 28%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-tone) 30%, transparent);
  font: 700 var(--step--1) / 1 var(--font-display);
  font-variant-numeric: lining-nums;
  color: var(--accent-2-ink);
}

/* Standards: numbered columns */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6) var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: standard;
}

.standards-grid li {
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  counter-increment: standard;
}

.standards-grid li::before {
  content: counter(standard, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  font: italic 600 var(--step-3) / 1 var(--font-display);
  font-variant-numeric: lining-nums;
  color: var(--accent-2);
}

.standards-grid strong {
  display: block;
  margin-bottom: 0.3em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

/* Topic directory */
.topic-grid,
.county-grid {
  display: grid;
  gap: 0 var(--space-6);
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
}

.topic-grid {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.county-grid {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.topic-grid li,
.county-grid li {
  border-bottom: 1px solid var(--rule);
}

.topic-grid a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.topic-grid a::after {
  content: "\2192";
  color: var(--accent-2);
  transition: transform 0.25s var(--ease-out);
}

.topic-grid a:hover {
  color: var(--accent);
}

.topic-grid a:hover::after {
  transform: translateX(4px);
}

.county-grid li {
  padding-block: var(--space-2);
}

.county-grid a {
  text-decoration: none;
  color: var(--ink-soft);
}

.county-grid a:hover {
  color: var(--accent-2);
}

/* Newsletter: airmail envelope */
.newsletter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
  padding: var(--space-6);
  border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--accent-2) 0 14px, var(--surface) 14px 21px, var(--accent) 21px 35px, var(--surface) 35px 42px) 10;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.newsletter h2 {
  font-size: var(--step-3);
}

.signup label {
  display: block;
  margin-bottom: var(--space-1);
  font: 800 var(--step--2) var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.signup__row {
  display: flex;
  gap: var(--space-3);
}

.signup input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}

.signup input:focus-visible {
  border-bottom-color: var(--accent-2);
  outline: none;
}

/* ================= Hubs, agenda, bills ================= */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

.hub-card {
  position: relative;
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s ease;
}

.hub-card h2 {
  font-size: var(--step-2);
}

a.hub-card::after {
  content: "\2192";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--step-1);
  color: var(--accent-2);
  transition: transform 0.3s var(--ease-out);
}

a.hub-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

a.hub-card:hover::after {
  transform: translateX(5px);
}

.hub-card--soon {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
}

.hub-card--soon h2 {
  color: var(--ink-soft);
}

.agenda-list {
  max-width: 52rem;
  padding: 0;
  list-style: none;
}

.agenda-item {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.agenda-item .tile__num {
  width: 3rem;
  height: 3rem;
  font-size: var(--step-0);
}

.agenda-item__title {
  margin-bottom: var(--space-2);
  font-size: var(--step-2);
}

.agenda-item__title a {
  text-decoration: none;
  color: var(--ink);
}

.agenda-item__title a:hover {
  color: var(--accent);
}

.rubric-list {
  max-width: var(--measure);
  padding-left: 1.8em;
}

.rubric-list li {
  padding-block: var(--space-2);
  border-bottom: 1px dotted var(--rule-strong);
}

.rubric-list li::marker {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  color: var(--accent-2);
}

.bill-grid,
.bill-list {
  display: grid;
  gap: var(--space-4);
}

.bill-grid {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* Docket slip with a perforated binding edge */
.bill {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4) calc(var(--space-5) + 1rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.bill::before {
  content: "";
  position: absolute;
  top: var(--space-3);
  bottom: var(--space-3);
  left: 0.7rem;
  width: 7px;
  background: radial-gradient(circle, var(--bg-tint) 2.5px, transparent 3px) 0 0 / 7px 13px repeat-y;
}

.bill--placeholder {
  border-style: dashed;
  background-image: repeating-linear-gradient(-45deg, transparent 0 12px, var(--rule-faint) 12px 13px);
}

.bill__id {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: 0.1em 0.55em;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  font: 700 var(--step--1) var(--font-mono);
  letter-spacing: 0.06em;
}

.bill__title {
  font-size: var(--step-1);
}

.bill__title a {
  text-decoration: none;
  color: var(--ink);
}

.bill__title a:hover {
  color: var(--accent);
}

.bill__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.bill__links {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 600;
}

.rubric-score summary {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.rubric-score ul {
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.rubric-score li {
  display: flex;
  align-items: baseline;
  padding-block: var(--space-1);
}

.score {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 0.6em;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--muted);
}

.score--pos {
  border-color: currentcolor;
  color: var(--badge-brief);
}

.score--neg {
  border-color: currentcolor;
  color: var(--accent-2);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 4px double var(--rule-strong);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
}

.pager a {
  text-decoration: none;
}

.pager a:hover {
  color: var(--accent-2);
}

.pager a[rel="next"] {
  margin-left: auto;
}

/* ================= Articles ================= */
.article__header {
  max-width: var(--measure);
  margin-bottom: var(--space-6);
  padding-block: var(--space-7) var(--space-5);
  border-bottom: 4px double var(--rule-strong);
}

.article__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font: var(--step--2) var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.article__title {
  margin-top: var(--space-4);
  font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.article__subtitle {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}

.article__body.has-toc {
  display: grid;
  grid-template-columns: 15rem minmax(0, var(--measure));
  gap: var(--space-7);
}

@media (width <= 60rem) {
  .article__body.has-toc {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.toc {
  position: sticky;
  top: var(--space-5);
  align-self: start;
  max-height: calc(100vh - 2 * var(--space-5));
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

@media (width <= 60rem) {
  .toc {
    position: static;
    max-height: none;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--surface);
  }
}

.toc__heading {
  margin-bottom: var(--space-3);
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.toc__list {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule-strong);
  list-style: none;
}

.toc__link {
  position: relative;
  display: block;
  padding: 0.4em 0 0.4em 1.1rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.toc__link::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--bg);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.toc__link:hover {
  color: var(--ink);
}

.toc__link.is-active {
  font-weight: 700;
  color: var(--ink);
}

.toc__link.is-active::before {
  border-color: var(--accent-2);
  background: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-2) 22%, transparent);
}

/* "What to do about it": a night panel */
.reform-hooks {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--night);
  box-shadow: var(--shadow-lift);
  color: var(--night-ink);
}

.reform-hooks h2 {
  font-size: var(--step-2);
  color: var(--gilt);
}

.reform-hooks__list {
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.reform-hooks__list li + li {
  border-top: 1px solid var(--night-rule);
}

.reform-hooks__list a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  text-decoration: none;
  color: var(--night-ink);
  transition: color 0.2s ease;
}

.reform-hooks__list a:hover {
  color: var(--gilt);
}

.related {
  max-width: var(--measure);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink);
}

.related h2 {
  font-size: var(--step-2);
}

.related__list {
  padding: 0;
  list-style: none;
}

.related__list li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.related__list a {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.related__list a::before {
  content: "\2192\2002";
  font-family: var(--font-sans);
  color: var(--accent-2);
}

.related__list a:hover {
  color: var(--accent);
}

.related__summary {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: var(--muted);
}

.changelog {
  max-width: var(--measure);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.changelog summary {
  font-size: var(--step--2);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.changelog ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.changelog li {
  padding-block: var(--space-2);
  border-top: 1px dashed var(--rule);
}

.changelog time {
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-2);
}

.article__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ================= Reading progress, back to top ================= */
.reading-progress {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 3px;
  background: transparent;
}

.reading-progress__bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--gilt), var(--accent-2));
}

.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 34% 30%, var(--accent-2-light), var(--accent-2) 48%, var(--accent-2-deep));
  box-shadow:
    inset 0 0 0 3px var(--accent-2-deep),
    0 6px 14px color-mix(in srgb, var(--shadow-tone) 40%, transparent);
  font-size: 1.2rem;
  color: var(--accent-2-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) rotate(-12deg);
  transition:
    opacity 0.3s ease,
    transform 0.3s var(--ease-out),
    visibility 0.3s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover {
  transform: rotate(10deg) scale(1.06);
}

/* ================= Law index, glossary, essays index ================= */
.statute-index {
  max-width: 54rem;
  padding: 0;
  list-style: none;
}

.statute-index__item {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.statute-index__item .chip {
  align-self: start;
  justify-self: start;
}

.statute-index__title {
  margin-bottom: var(--space-1);
  font-size: var(--step-1);
}

.statute-index__title a {
  text-decoration: none;
  color: var(--ink);
}

.statute-index__title a:hover {
  color: var(--accent);
}

@media (width <= 40rem) {
  .statute-index__item {
    grid-template-columns: 1fr;
  }
}

.glossary {
  max-width: var(--measure);
}

.glossary__entry {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.3s ease;
}

.glossary__entry:has(dt:target) {
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  border-radius: var(--radius);
  background: var(--gilt-soft);
}

.glossary dt {
  font: 600 var(--step-1) / 1.3 var(--font-display);
  scroll-margin-top: var(--space-6);
}

.glossary dt:target {
  color: var(--accent-2);
}

.glossary dfn {
  font-style: normal;
}

.glossary dd {
  margin: var(--space-1) 0 0;
  color: var(--ink-soft);
}

.glossary__anchor {
  font-family: var(--font-sans);
  font-weight: 400;
  text-decoration: none;
  color: var(--accent-2);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.glossary__entry:hover .glossary__anchor,
.glossary__anchor:focus-visible {
  opacity: 1;
}

.series {
  margin-top: var(--space-6);
}

.series h2 {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--step-2);
  font-style: italic;
}

/* ================= Search (Pagefind UI) ================= */
.search .pagefind-ui {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--ink);
  --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--rule-strong);
  --pagefind-ui-tag: var(--bg-tint);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--radius);
  --pagefind-ui-font: var(--font-sans);
}