/* ============================================================
   LEGISLATIVE TRACKER — shared styles for the 54 pages.

   A real stylesheet rather than three `const css` blocks because the hub,
   the 51 state pages and the 2 method hubs share almost everything: the
   status pill, the state table, the source list, the review footer. Loaded
   via Layout's `stylesheets` prop, so it is cached once and the state pages
   after the first cost nothing for it.

   Everything here is built from tokens.css variables. No new colours except
   the four tier hues below, and those are decorative in the strict sense:
   every place a tier or status appears in colour ALSO carries a glyph and
   the words, so a reader who cannot separate the hues loses nothing. That
   is the "colour-blind safe" requirement met by construction rather than by
   picking clever hues and hoping.
   ============================================================ */

:root {
  /* A sequential lightness ramp for the two "legal" tiers plus one amber
     for pending -- deliberately NOT a red/green diverging scale, which is
     the classic failure case. Ordered dark-to-light so the map still reads
     as a gradient in greyscale. */
  --tier-both:    #3E5240;
  --tier-one:     #8CA283;
  --tier-pending: #C08A33;
  --tier-none:    #DCD6CA;
}

/* ============================================================
   HEAD BAND
   The same dark forest surface as .page-masthead and .gd-head, sized for a
   sentence-length title. "Ecological Deathcare Laws in West Virginia" at
   the masthead's clamp(64px, 11vw, 148px) is five lines of display serif
   before any content, which is why guide.tsx hand-rolls its band too.
   ============================================================ */
.lg-head {
  background: var(--ink);
  color: var(--bone);
  padding: clamp(112px, 16vh, 190px) clamp(24px, 5vw, 56px) clamp(40px, 6vh, 68px);
  width: 100%;
}
.lg-head-inner { max-width: 1120px; margin: 0 auto; }

/* Moss reads murky on the dark band, so the eyebrow takes the same bone-dim
   the overlay nav uses there. Matches .gd-cat exactly. */
.lg-cat {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, .62);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lg-cat::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(244, 242, 236, .34);
  flex: none;
}

.lg-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(36px, 5.4vw, 62px);
  letter-spacing: -.03em;
  line-height: 1.04;
  color: var(--bone);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.lg-deck {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: rgba(244, 242, 236, .78);
  margin: 22px 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* The review stamp, in the head band so it is above the fold on every page.
   Both halves are required on every page by the brief; showing them as one
   mono strip keeps them a fact rather than a design flourish. */
.lg-stamp {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, .52);
  margin: 26px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.lg-stamp span { display: inline-flex; align-items: center; gap: 8px; }
.lg-stamp span + span::before {
  content: "";
  width: 1px;
  height: 11px;
  background: rgba(244, 242, 236, .28);
  margin-right: 10px;
}

/* Breadcrumb on the dark band. tokens.css styles .breadcrumb links for the
   bone ground (ink-3), which disappears here, so the dark variant restates
   the colours and keeps the hover gesture. */
.lg-crumb {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 22px;
  color: rgba(244, 242, 236, .52);
}
.lg-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.lg-crumb li { display: inline-flex; align-items: center; gap: 10px; }
.lg-crumb li + li::before { content: "/"; color: rgba(244, 242, 236, .34); }
.lg-crumb a {
  color: rgba(244, 242, 236, .62);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  transition: color .22s var(--ease-quiet), text-decoration-color .22s var(--ease-quiet);
}
.lg-crumb a:hover, .lg-crumb a:focus-visible { color: var(--bone); text-decoration-color: currentColor; }
.lg-crumb [aria-current] { color: rgba(244, 242, 236, .82); }

/* ============================================================
   BODY SHELL
   ============================================================ */
.lg { max-width: 1120px; margin: 0 auto; padding: clamp(44px, 6vh, 72px) clamp(24px, 5vw, 40px) clamp(76px, 11vh, 130px); }
.lg-narrow { max-width: 820px; }

.lg-section { margin: 0 0 clamp(48px, 7vh, 82px); }
.lg-section:last-child { margin-bottom: 0; }
.lg-lede { font-family: var(--f-sans); font-size: 17px; line-height: 1.72; color: var(--ink-2); margin: 0 0 20px; max-width: 64ch; text-wrap: pretty; }
.lg-p { font-family: var(--f-sans); font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 16px; max-width: 64ch; text-wrap: pretty; }
.lg-p:last-child { margin-bottom: 0; }

/* h3 inside a section: display serif, one step under the sitewide h2 scale. */
.lg-h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 34ch;
  text-wrap: balance;
}
/* A count or qualifier that rides on the end of an .eyebrow row. */
.lg-count { margin-left: auto; padding-left: 14px; font-size: 10px; letter-spacing: .14em; color: var(--moss); white-space: nowrap; }

/* ============================================================
   STALE BANNER
   Shown when the set has not been read in 100 days. It states the fact and
   does not hide the data behind it: a reader is better served by figures
   plus a caveat than by a blank page.
   ============================================================ */
.lg-stale {
  margin: 0 0 clamp(32px, 5vh, 48px);
  padding: 18px 22px;
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--tier-pending);
  border-radius: var(--r-card);
}
.lg-stale p { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.lg-stale strong { font-weight: 500; color: var(--ink); }

/* ============================================================
   STATUS PILL
   Fill is bone-2 and the type is ink, ALWAYS -- 12.6:1, and it cannot fail
   whatever the tier. The hue lives in a 8px dot and the left border only,
   and it is always accompanied by the glyph and the word. So the pill is
   legible in greyscale, under any colour-vision deficiency, and read aloud
   correctly by a screen reader, without three variants of contrast tuning.
   ============================================================ */
.lg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 10px;
  white-space: nowrap;
}
.lg-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--tier-none);
}
.lg-pill[data-status="legal"]::before      { background: var(--tier-both); }
.lg-pill[data-status="pending"]::before    { background: var(--tier-pending); }
.lg-pill[data-status="not_yet"]::before    { background: var(--tier-none); }
.lg-pill[data-status="prohibited"]::before { background: var(--oxide); }
/* The glyph. aria-hidden in the markup -- the word beside it is the label,
   and a screen reader announcing "check mark Legal" is noise. */
.lg-mark { font-family: var(--f-sans); font-size: 12px; line-height: 1; color: var(--ink-2); }

/* ============================================================
   COUNTS STRIP
   The four figures the hub opens with. A dl, because each one is a term and
   a value, and that is what a screen reader should hear.
   ============================================================ */
.lg-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
}
.lg-fig {
  background: var(--sage-card);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  padding: 20px 22px;
}
.lg-fig dt {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --ink-2, never --ink-3: ink-3 is 2.84:1 on this sage fill. */
  color: var(--ink-2);
  margin: 0 0 10px;
}
.lg-fig dd {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0;
}
.lg-fig-note { font-family: var(--f-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 10px 0 0; }
@media (max-width: 900px) { .lg-figures { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .lg-figures { grid-template-columns: 1fr; } }

/* ============================================================
   THE MAP
   Injected by legislation.js after first paint, so it costs the initial
   render nothing -- the dropdown and the full state table below are in the
   server HTML and are the authoritative, keyboard-navigable version. The
   map is decoration over data that is already there.

   The wrapper reserves its aspect ratio up front so injecting the SVG does
   not shift the page (the CLS half of the LCP requirement).
   ============================================================ */
.lg-mapwrap {
  position: relative;
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  background: var(--sage-card);
  padding: 10px;
  aspect-ratio: 960 / 540;
}
.lg-mapwrap[hidden] { display: none; }
.usm { width: 100%; height: 100%; display: block; }
.usm-state {
  fill: var(--tier-none);
  stroke: var(--sage-card);
  stroke-width: 1.1;
  transition: fill .2s var(--ease-quiet);
}
.usm-state[data-tier="both"]    { fill: var(--tier-both); }
.usm-state[data-tier="one"]     { fill: var(--tier-one); }
.usm-state[data-tier="pending"] { fill: var(--tier-pending); }
.usm-state[data-tier="none"]    { fill: var(--tier-none); }
/* The map's own states are focusable links once injected, so they need a
   visible focus ring of their own -- an outline on an SVG child is
   unreliable across engines, so this uses stroke instead. */
.usm a { cursor: pointer; }
.usm a:hover .usm-state { stroke: var(--ink); stroke-width: 1.6; }
.usm a:focus { outline: none; }
.usm a:focus-visible .usm-state { stroke: var(--ink); stroke-width: 2.4; }

.lg-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.lg-legend li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lg-legend i {
  width: 13px;
  height: 13px;
  border-radius: var(--r-tight);
  border: 1px solid rgba(31, 42, 36, .16);
  flex: none;
}
.lg-legend i[data-tier="both"]    { background: var(--tier-both); }
.lg-legend i[data-tier="one"]     { background: var(--tier-one); }
.lg-legend i[data-tier="pending"] { background: var(--tier-pending); }
.lg-legend i[data-tier="none"]    { background: var(--tier-none); }

/* ============================================================
   STATE PICKER
   The accessibility equivalent of the map, and available immediately --
   it is in the server HTML, before the map exists. It is also the faster
   route for anyone who knows their state, which on a legal-status lookup
   is nearly everyone.
   ============================================================ */
.lg-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 22px;
}
.lg-picker label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--moss);
  display: block;
  margin: 0 0 8px;
}
.lg-picker-field { flex: 1 1 260px; min-width: 0; }
.lg-select {
  width: 100%;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  padding: 12px 14px;
  min-height: 46px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lg-select:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
/* Submit exists so the picker works with JavaScript off: it is a real form
   that GETs /legislation/go?state=slug and redirects. JS upgrades it to
   navigate on change and hides the button. */
.lg-go {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 13px 24px;
  min-height: 46px;
  cursor: pointer;
  transition: background .22s var(--ease-quiet), color .22s var(--ease-quiet);
}
.lg-go:hover, .lg-go:focus-visible { background: transparent; color: var(--ink); }

/* ============================================================
   TABLES
   Same anatomy as .gd-table in guide.tsx -- sage fill, mono uppercase head,
   overflow-x on the wrapper rather than a squeezed font. The tracker's
   tables are longer, so they add a sticky header and sortable columns.
   ============================================================ */
.lg-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  background: var(--sage-card);
}
.lg-table { width: 100%; border-collapse: collapse; font-family: var(--f-sans); font-size: 14.5px; }
.lg-table caption {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: left;
  padding: 14px 18px 0;
}
.lg-table th, .lg-table td { text-align: left; padding: 12px 18px; vertical-align: top; line-height: 1.55; }
.lg-table thead th {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--sage-deep);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--sage-card);
  z-index: 1;
}
.lg-table tbody tr + tr th, .lg-table tbody tr + tr td { border-top: 1px solid var(--sage-line); }
.lg-table tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.lg-table td { color: var(--ink-2); }
.lg-table tbody tr:hover th, .lg-table tbody tr:hover td { background: rgba(196, 207, 186, .22); }

/* Sort buttons. A real <button> inside the <th>, so the control is
   keyboard-reachable and announces its state via aria-sort on the th. */
.lg-sort {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color .22s var(--ease-quiet);
}
.lg-sort:hover { color: var(--ink); }
.lg-sort::after { content: "\2195"; opacity: .38; font-size: 11px; }
[aria-sort="ascending"] .lg-sort::after  { content: "\2191"; opacity: 1; }
[aria-sort="descending"] .lg-sort::after { content: "\2193"; opacity: 1; }

/* The status cell: glyph, then the word. Never colour alone. */
.lg-cell-status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink-2); }
.lg-cell-status[data-status="legal"] { color: var(--ink); }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tier-none); }
.lg-dot[data-status="legal"]      { background: var(--tier-both); }
.lg-dot[data-status="pending"]    { background: var(--tier-pending); }
.lg-dot[data-status="prohibited"] { background: var(--oxide); }

/* ============================================================
   LINKS
   Three classes, all registered in the tokens.css :not() chain. They HAVE
   to be: the sitewide `main a:not(...)` TEXT LINKS rule scores (0,6,2) and
   silently beats any local (0,1,0) rule, which is how three earlier pages
   shipped with copper serif titles nobody asked for. Adding the class to
   that list is the only reliable fix.
   ============================================================ */
.lg-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color .22s var(--ease-quiet), text-decoration-color .22s var(--ease-quiet);
}
.lg-link:hover, .lg-link:focus-visible { color: var(--oxide); text-decoration-color: currentColor; }

/* Citations and bill numbers: mono, one step down, moss at rest. */
.lg-src-link {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--moss);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: .2em;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  transition: color .22s var(--ease-quiet), text-decoration-color .22s var(--ease-quiet);
}
.lg-src-link:hover, .lg-src-link:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* ============================================================
   STATUS CARDS (state page, at-a-glance)
   One per tracked method. Two up on desktop; the anatomy borrows .icard's
   fixed order so it reads as the same family without restyling .icard.
   ============================================================ */
.lg-status-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 720px) { .lg-status-grid { grid-template-columns: 1fr; } }

.lg-status {
  display: flex;
  flex-direction: column;
  background: var(--sage-card);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  padding: 22px 24px 20px;
}
.lg-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sage-deep);
}
.lg-status-name { font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.18; letter-spacing: -.015em; color: var(--ink); margin: 0; }
.lg-status-legal { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 4px 0 0; }
.lg-status-body { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.lg-status-body p { margin: 0 0 12px; }
.lg-status-body p:last-child { margin-bottom: 0; }

/* Fact rows inside a card: term left, value right, hairline between. */
.lg-facts { margin: 14px 0 0; }
.lg-facts > div { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--sage-line); }
.lg-facts dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); flex: 0 0 132px; }
.lg-facts dd { font-family: var(--f-sans); font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0; flex: 1 1 140px; min-width: 0; }
@media (max-width: 520px) { .lg-facts dt { flex-basis: 100%; } }

/* ============================================================
   NOTES
   Two kinds, deliberately different. .lg-note is editorial -- Kairos
   speaking. .lg-datanote is a conflict record: the published field guide
   and the primary bill record disagree, and the page says so instead of
   quietly picking one. It gets the amber edge because it is a caveat, not
   a remark.
   ============================================================ */
.lg-note, .lg-datanote {
  padding: 16px 20px;
  background: var(--bone-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  margin: 16px 0 0;
}
.lg-note { border-left: 2px solid var(--moss); }
.lg-datanote { border-left: 2px solid var(--tier-pending); }
.lg-note-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 8px; }
.lg-datanote .lg-note-label { color: var(--oxide); }
.lg-note-body { font-family: var(--f-sans); font-size: 14px; line-height: 1.65; color: var(--ink-2); margin: 0; }

/* ============================================================
   LISTS — providers, transport, sources, change log
   ============================================================ */
.lg-list { list-style: none; margin: 0; padding: 0; }
.lg-list > li { padding: 14px 0; border-top: 1px solid var(--rule, var(--hairline)); }
.lg-list > li:first-child { border-top: 0; padding-top: 0; }
.lg-item-name { font-family: var(--f-sans); font-size: 15.5px; font-weight: 500; color: var(--ink); margin: 0 0 4px; }
.lg-item-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); margin: 0; }

/* Sources: numbered, so an inline citation can point at "3" and be found. */
.lg-sources { list-style: none; counter-reset: src; margin: 0; padding: 0; }
.lg-sources > li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 4px 12px;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.lg-sources > li:first-child { border-top: 0; padding-top: 0; }
.lg-sources > li::before {
  content: counter(src);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 3px;
}
.lg-src-title { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0 0 4px; }
.lg-src-meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* A tracker is labelled a tracker. The brief forbids presenting a secondary
   aggregator as a primary citation, and the honest way to keep using one
   for bill status is to say what it is on the face of the citation. */
.lg-srctype {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--hairline);
  border-radius: var(--r-tight);
  padding: 2px 7px;
  color: var(--ink-2);
  background: var(--bone-2);
}
.lg-srctype[data-type="primary"] { border-color: var(--sage-deep); color: var(--ink); }

/* Change log. Empty at bootstrap and it says so rather than rendering an
   empty box, because a silent void reads as a render fault. */
.lg-log { list-style: none; margin: 0; padding: 0; }
.lg-log > li { display: grid; grid-template-columns: 108px 1fr; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.lg-log > li:first-child { border-top: 0; padding-top: 0; }
.lg-log time { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); }
.lg-log p { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.lg-empty { font-family: var(--f-sans); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin: 0; font-style: italic; }
@media (max-width: 520px) { .lg-log > li { grid-template-columns: 1fr; } }

/* ============================================================
   NOTIFY FORM
   Same contract as /contact: it either does the thing or says plainly that
   it did not. It never shows a thank-you panel over a request that went
   nowhere.
   ============================================================ */
.lg-notify {
  background: var(--sage-card);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  padding: clamp(22px, 3.5vw, 30px);
}
.lg-notify-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.lg-input {
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--hairline);
  border-radius: var(--r-inner);
  padding: 12px 14px;
  min-height: 46px;
}
.lg-input:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.lg-submit {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 13px 26px;
  min-height: 46px;
  cursor: pointer;
  transition: background .22s var(--ease-quiet), color .22s var(--ease-quiet);
}
.lg-submit:hover, .lg-submit:focus-visible { background: transparent; color: var(--ink); }
.lg-submit[disabled] { opacity: .55; cursor: default; }
.lg-formmsg { font-family: var(--f-sans); font-size: 14px; line-height: 1.6; margin: 14px 0 0; color: var(--ink-2); }
.lg-formmsg[data-state="error"] { color: var(--oxide); }
.lg-fine { font-family: var(--f-sans); font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin: 12px 0 0; }
/* Honeypot. Off-screen rather than display:none, which some autofillers
   ignore, and aria-hidden + tabindex so nobody real ever reaches it. */
.lg-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   RELATED / FOOT
   ============================================================ */
.lg-rel { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.lg-foot {
  margin: clamp(52px, 7vh, 84px) 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.lg-foot p { margin: 0; }

@media (max-width: 720px) {
  .lg-title { font-size: clamp(30px, 7.4vw, 42px); }
}