/* Marshal Fraiden site - canonical palette source: LeoMcGarry/MarshalFraiden_BrandPalette.md
   Design pass 2026-07-07 ("Civic Editorial - New York, in the room"): editorial type scale,
   navy duotone city imagery in heroes/bands, brass kicker+rule signature system, designed
   borough band, pre-footer CTA band, footer with NYC secondary mark, no-JS mobile nav.
   Derived shades below are tints/shades of the canonical colors (for gradients/scrims only),
   never replacements for them. */
:root {
  --civic-blue: #1F4E79;
  --ink-navy: #17324D;
  --muted-brass: #B08A45;
  --warm-ivory: #FAF7F0;
  --pale-blue: #E6EEF5;
  --charcoal: #263238;
  --white: #FFFFFF;
  /* derived (documented): deep shade of Ink Navy for hero/band gradients */
  --navy-deep: #0E1F33;
  /* derived (documented): darkened shade of Muted Brass for INLINE TEXT emphasis on
     light backgrounds. Raw --muted-brass fails WCAG AA as text on Warm Ivory/Pale
     Blue (2.7-3.0:1) - this shade holds 5.0-5.5:1 on both while still reading as
     brass/bronze. Never used for rules, dots, or borders - that's still the raw
     canonical brass. Approved usage added 2026-07-07 (Marissa): use to emphasize a
     specific word or short phrase, never a full sentence or paragraph. */
  --brass-text: #7B6030;
  /* derived (documented): lightened shade of Muted Brass for SMALL TEXT on DARK NAVY
     surfaces. Raw --muted-brass measures 4.11:1 on --ink-navy - fails WCAG AA (4.5:1)
     for normal-weight/normal-size text, which is what the footer's "Phone:"/"Fax:"/
     "Email:" labels are (0.92rem desktop, 0.7rem mobile, both well under the large-text
     threshold). This shade measures 4.65:1 on --ink-navy, still reads as brass/bronze.
     Found and fixed 2026-08-16 (Leo's accessibility audit, Marissa-approved). Like
     --brass-text, never used for rules, dots, or borders - those stay raw canonical
     brass; this is for small inline text only. */
  --brass-text-navy: #BA944F;
  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Civic Duty type system (Marissa's pick, 2026-07-12): Source Serif 4 body keeps
     long-form warm; Public Sans headings. Canonical: LeoMcGarry/MarshalFraiden_BrandPalette.md */
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--charcoal);
  background: var(--warm-ivory);
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: 'Public Sans', Arial, sans-serif;
  color: var(--ink-navy);
  line-height: 1.18;
  margin-top: 0;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-top: 0; margin-bottom: 1.1rem; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1rem; }

a { color: var(--civic-blue); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Brass kicker + rule: the site's signature. Text is Civic Blue (light bg) or Pale Blue
   (dark bg) so brass itself is never used as text - brass carries the rule only. */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--civic-blue);
  margin: 0 0 0.9rem;
}
.kicker::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--muted-brass);
  flex-shrink: 0;
}
.on-dark .kicker, .hero .kicker, .cta-band .kicker { color: var(--pale-blue); }

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--pale-blue);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
  gap: 1rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.wordmark-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--pale-blue);
  border: 1px dashed var(--muted-brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: var(--civic-blue);
  text-align: center;
  flex-shrink: 0;
}

/* NYC(TM) master wordmark in the primary logo slot (all pages, approved 2026-07-08).
   Respects NYC guidelines: fixed aspect ratio (no stretch/resize of the forms),
   clear space to the site name so it doesn't read as an agency lockup, no effects/recolor. */
.wordmark-logo {
  display: flex;
  align-items: center;
  padding-right: 0.35rem; /* extra clear space so the mark isn't read as an agency lockup */
  flex-shrink: 0;
}
.wordmark-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.wordmark-text .site-name {
  font-size: 1.12rem;
  font-weight: 700;
  /* Helvetica per NYC logo guidelines for text adjacent to the NYC mark;
     Arial is NYC's own sanctioned online fallback - no license purchase needed
     because we never serve a Helvetica font file. */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--ink-navy);
  display: block;
  line-height: 1.25;
}

.wordmark-text span {
  display: block;
  font-size: 0.75rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--civic-blue);
  font-weight: 500;
  line-height: 1.25;
}

/* 2026-09-27: the header lockup may no longer shrink.
   Adding two menu items made the nav wide enough that flex compressed the lockup
   from one line to THREE: "Marshal David Fraiden" measured 87px wide and 67px tall
   on all twelve pages, on the live site, with document.fonts.ready awaited.
   The office's own name is not the thing that gives way when a menu grows. */
.site-header .wordmark { flex: 0 0 auto; }
.site-header .wordmark span { white-space: nowrap; }

nav.main-nav {
  display: flex;
  align-items: center;
  /* 2026-09-26: gap cut from 1.4rem, and the link size trimmed just below, because
     her instruction put two more pages in the menu and eight links no longer fit.
     MEASURED on the live site with document.fonts.ready awaited, which is the step
     my first measurement skipped: the eight links need 923px and the lockup takes
     212px, against a container capped at 1120px. So the nav did not merely fit
     badly at one width, it could not fit at ANY width, and four labels were
     wrapping onto two lines on all twelve pages.
     Spacing and a 5 percent size trim are preferred over renaming her pages or
     widening the header out of line with the page content below it. */
  gap: 1.1rem;
}

nav.main-nav a {
  color: var(--charcoal);
  text-decoration: none;
  /* v4 c25: option A semibold, a hair larger. RESTORED to 1rem on 2026-09-27
     after a 0.95rem trim proved to be treating a symptom. The real causes were
     the lockup being squeezed (fixed above) and two labels I had invented. */
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.2rem 0;
  border-bottom: 2px solid transparent;
}

nav.main-nav a:hover { color: var(--civic-blue); }
nav.main-nav a.active { color: var(--civic-blue); border-bottom-color: var(--muted-brass); }

/* The nav link rule above outranks .btn-primary on specificity, which turned the
   header CTA's text charcoal-on-navy. Keep button text white inside the nav. */
nav.main-nav a.btn-primary { color: var(--white); border-bottom: none; }
nav.main-nav a.btn-primary:hover { color: var(--white); }

/* No-JS mobile nav (checkbox toggle) */
/* WCAG 2.1.1, cold gate 2026-09-24. This was display:none, which takes the checkbox out of the
   tab order, so the hamburger and all five primary nav links were unreachable by keyboard on
   every page below 900px. Visually hidden but still focusable, with a visible focus ring on the
   label that controls it. */
.nav-toggle-box { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.nav-toggle-box:focus-visible + label.nav-toggle { outline: 2px solid var(--civic-blue); outline-offset: 3px; }
label.nav-toggle {
  display: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  border: 1px solid var(--pale-blue);
  border-radius: 6px;
  position: relative;
  flex-shrink: 0;
}
label.nav-toggle span, label.nav-toggle span::before, label.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 20px;
  height: 2px;
  background: var(--ink-navy);
}
label.nav-toggle span { top: 20px; }
label.nav-toggle span::before { left: 0; top: -6px; }
label.nav-toggle span::after { left: 0; top: 6px; }
/* Must out-rank .btn's display:inline-block (defined later at equal specificity) - 
   without the .site-header prefix this never actually hid on desktop, which is what
   produced Marissa's "two large Contact buttons in the header" (comment #15). */
.site-header .header-contact-mobile { display: none; }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--civic-blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--ink-navy); }

.btn-secondary {
  background: var(--white);
  color: var(--civic-blue);
  border-color: var(--civic-blue);
}
.btn-secondary:hover { background: var(--pale-blue); }

/* Non-breaking space so the arrow can never wrap onto its own line (round-3, 2026-07-13) */
.btn-arrow::after { content: "\00a0\2192"; color: var(--muted-brass); }

/* On navy surfaces the primary button inverts to white so it doesn't sink into the panel */
.hero .btn-primary, .cta-band .btn-primary {
  background: var(--white);
  color: var(--civic-blue);
}
.hero .btn-primary:hover, .cta-band .btn-primary:hover { background: var(--pale-blue); color: var(--ink-navy); }

/* Embedded intake form (real Google Form - single pipeline, no duplicate fields) */
.form-embed {
  background: var(--white);
  border: 1px solid var(--pale-blue);
  border-radius: 8px;
  padding: 0.5rem;
}
.form-embed iframe { display: block; width: 100%; border: 0; }

/* Heroes - navy panels with duotone city imagery blended in.
   The left 55-60% carries a near-solid scrim so text always sits on effectively
   solid Ink Navy/deep navy (WCAG-safe); imagery breathes on the right. */
.hero {
  background-color: var(--ink-navy);
  color: var(--white);
  padding: 4.5rem 0 4rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero h1 { color: var(--white); max-width: 22ch; }
.hero p { max-width: 62ch; }
.hero p.lede { font-size: 1.22rem; color: var(--pale-blue); line-height: 1.55; }
.hero a:not(.btn) { color: var(--pale-blue); }

/* ===== DESKTOP HERO PHOTOGRAPH, Marissa 2026-10-04 =====
   Her finding: the crop was different on every page. The cause was that the hero has no height
   of its own, it is as tall as the words inside it, so `cover` filled twelve different boxes and
   cut twelve different slices. Measured live: 346px on Privacy to 1018px on Home, 37% to 100% of
   the same picture.
   The fix is her option A: the photograph gets its OWN box of a fixed height, behind the words
   exactly as before, so every page shows the same slice. The copy sits on top on its own layer.
   Where a page's copy runs past the box, as Home does, the picture fades into Ink Navy rather
   than ending on a hard edge.
   A hero with no modifier class gets NO photograph and keeps the same box, which is the Privacy
   Policy page on her instruction. The phone band under 720px is untouched. */
@media (min-width: 721px) {
  .hero { position: relative; min-height: 420px; }
  .hero > .container { position: relative; z-index: 1; }
  .hero--dusk::after,
  .hero--surrogate::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 420px;
    z-index: 0; pointer-events: none;
    background-size: cover; background-repeat: no-repeat;
  }
  .hero--dusk::after {
    background-image:
      linear-gradient(180deg, rgba(23,50,77,0) 76%, var(--ink-navy) 100%),
      linear-gradient(100deg, var(--navy-deep) 0%, rgba(14,31,51,0.93) 48%, rgba(14,31,51,0.50) 100%),
      url('../assets/img/city-dusk-1600w.webp');
    background-position: center 41%;
  }
  .hero--surrogate::after {
    background-image:
      linear-gradient(180deg, rgba(23,50,77,0) 76%, var(--ink-navy) 100%),
      linear-gradient(100deg, var(--navy-deep) 0%, rgba(14,31,51,0.93) 48%, rgba(14,31,51,0.50) 100%),
      url('../assets/img/city-surrogate-1600w.webp');
    background-position: center 100%;
  }
}

/* Placeholder boxes inside a dark hero stay legible (placeholders are launch-queue items) */
.hero .img-placeholder {
  background: rgba(230,238,245,0.08);
  border-color: rgba(176,138,69,0.7);
  color: var(--pale-blue);
}

/* Proof strip (homepage): verifiable credentials under the headline */
.proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: 1.4rem 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
}
.proof-strip li { display: flex; align-items: center; gap: 0.9rem; }
.proof-strip li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-brass);
  flex-shrink: 0;
}
.proof-note {
  font-size: 0.9rem;
  color: var(--pale-blue);
  margin: 0.4rem 0 1.6rem;
}

/* Sections */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--pale-blue); }

/* Navy band section with faded city texture (used sparingly) */
.section-band {
  background-color: var(--ink-navy);
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 4.5rem 0;
}
.section-band h2, .section-band h3 { color: var(--white); }
.section-band p { color: var(--pale-blue); }

.card {
  background: var(--white);
  border-radius: 10px;
  padding: 1.9rem;
  border: 1px solid var(--pale-blue);
  border-top: 3px solid var(--muted-brass);
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  /* Marissa's review 2026-07-07: card contents align across the pair - titles at the
     same y, copy starting at the same y, buttons pinned to the same bottom line. */
  display: flex;
  flex-direction: column;
}
.card .btn { margin-top: auto; align-self: flex-start; }
.card p { margin-bottom: 1.25rem; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(23, 50, 77, 0.12);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.divider {
  border: none;
  border-top: 2px solid var(--muted-brass);
  width: 60px;
  margin: 1.5rem 0;
}

/* Image placeholder (launch-queue items - untouched by design pass) */
.img-placeholder {
  background: var(--pale-blue);
  border: 2px dashed var(--muted-brass);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--civic-blue);
  font-size: 0.85rem;
  padding: 2rem 1rem;
  min-height: 180px;
}

.img-placeholder.award-photo,
.img-placeholder.hero-portrait,
.img-placeholder.contact-portrait { min-height: 220px; float: right; width: 260px; margin: 0 0 1rem 1.5rem; }

.img-placeholder.hero-photo { min-height: 260px; width: 100%; margin: 1.5rem 0 0; }

/* Real integrated photos */
figure.site-photo { margin: 0 0 1rem; }
figure.site-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(23, 50, 77, 0.16);
}
figure.site-photo figcaption {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.4;
}
/* v5 feedback (2026-07-13, comments 2-3): caption text was bleeding into the brass
   corner bracket at the figure's right edge. Stop the text 60px short of it (bracket is
   52px wide); a 3rd line is fine per Marissa. Scoped to the left/right column photos - 
   centered captions (award/hero/contact) are unaffected. */
figure.site-photo.media-row-photo figcaption { padding-right: 60px; }
figure.site-photo.award-photo,
figure.site-photo.hero-portrait,
figure.site-photo.contact-portrait { float: right; width: 260px; margin: 0.4rem 0 1rem 1.75rem; }
figure.site-photo.award-photo figcaption,
figure.site-photo.hero-portrait figcaption,
figure.site-photo.contact-portrait figcaption { text-align: center; }
figure.site-photo.hero-photo { width: 340px; max-width: 100%; margin: 1.5rem auto 0; }
figure.site-photo.hero-photo figcaption { text-align: center; }
@media (max-width: 720px) {
  figure.site-photo.award-photo,
  figure.site-photo.hero-portrait,
  figure.site-photo.contact-portrait,
  figure.site-photo.hero-photo { float: none; width: 100%; margin: 0 0 1rem; }
}

/* Five-borough band */
.borough-band {
  background-color: var(--ink-navy);
  background-image: linear-gradient(rgba(14,31,51,0.9), rgba(14,31,51,0.9)), url('../assets/img/city-dusk-1600w.webp');
  background-size: cover;
  background-position: center;
  color: var(--white);
  padding: 3.5rem 0;
  text-align: center;
}
.borough-band h2 { color: var(--white); }
.borough-band p { color: var(--pale-blue); max-width: 62ch; margin-left: auto; margin-right: auto; }
.borough-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.6rem;
  padding: 0;
  list-style: none;
}
.borough-strip li {
  border: 1px solid rgba(230, 238, 245, 0.4);
  border-radius: 999px;
  padding: 0.5rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

/* Steps - numbered process treatment */
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.1rem;
  margin-bottom: 1.7rem;
  align-items: start;
}
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--muted-brass);
  color: var(--civic-blue);
  /* Sans digits: geometrically symmetric, so flex centering is exact. Playfair's
     asymmetric metrics kept the digits visually off-center through two fix attempts
     (Marissa's reviews 2026-07-07 and round 2). Public Sans since the Civic Duty
     switch (2026-07-12) - same symmetric-digit rationale as the Inter original. */
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  line-height: 1;
}
.step h3 { color: var(--civic-blue); margin-bottom: 0.4rem; margin-top: 0.55rem; }
.step p:last-child { margin-bottom: 0; }

/* About credentials timeline */
.timeline { list-style: none; margin: 1.8rem 0; padding: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.8rem 2rem;
  border-left: 2px solid var(--pale-blue);
  margin-left: 0.4rem;
}
.timeline li:last-child { padding-bottom: 0.2rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted-brass);
  border: 2px solid var(--warm-ivory);
}
.timeline .timeline-era {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--civic-blue);
  margin-bottom: 0.25rem;
}
.timeline h3 { margin-bottom: 0.3rem; }
.timeline p { margin-bottom: 0; }

/* FAQ */


details.faq-item {
  background: var(--white);
  border: 1px solid var(--pale-blue);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 14px rgba(23, 50, 77, 0.05);
}
details.faq-item summary {
  font-weight: 600;
  color: var(--ink-navy);
  cursor: pointer;
  font-size: 1.02rem;
}
details.faq-item[open] summary { color: var(--civic-blue); }
details.faq-item p { margin-top: 0.75rem; }

/* Pre-footer CTA band - the ONE contact moment per page (plus the header button) */
/* Marissa 2026-10-04: the closing band carries NO photograph. It was the second place
   the harbor picture lived, and the harbor picture requires credit. Flat Ink Navy, so the
   hero is the only photograph on the page and the band below it is quiet. */
.cta-band {
  background-color: var(--ink-navy);
  background-image: none;
  color: var(--white);
  padding: 4rem 0;
}
.cta-band h2 { color: var(--white); margin-bottom: 0.6rem; }
.cta-band p { color: var(--pale-blue); max-width: 62ch; margin-bottom: 1.5rem; }

/* Form */
form.inquiry-form { display: grid; gap: 1rem; max-width: 620px; }
form.inquiry-form label { font-weight: 600; font-size: 0.9rem; color: var(--ink-navy); display: block; margin-bottom: 0.3rem; }
form.inquiry-form input, form.inquiry-form select, form.inquiry-form textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #c9d6e0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--white);
}
form.inquiry-form .checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; }
form.inquiry-form .checkbox-row input { width: auto; margin-top: 0.3rem; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.contact-info-grid .card h3 { margin-top: 0; }

/* Footer */
footer.site-footer {
  background: var(--ink-navy);
  color: var(--white);
  padding: 3rem 0 1.5rem;
  margin-top: 0;
  border-top: 3px solid var(--muted-brass);
}
footer.site-footer a { color: var(--pale-blue); text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }
footer.site-footer h3 { color: var(--white); font-size: 1.05rem; }
footer.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}
footer.site-footer .quick-links { display: flex; flex-direction: column; gap: 0.4rem; }
/* Contact-info lines: one line each, never mid-wrap (Marissa's review 2026-07-07) */
.footer-lines span { display: block; white-space: nowrap; font-size: 0.92rem; line-height: 1.8; }
/* DOI source attribution (Official DOI Resources page): the DOI shield presented as the
   SOURCE of the linked resources, not as an endorsement. Rendered on a light card with
   clear space; the shield is unaltered and kept to a controlled size. */
.doi-source {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--pale-blue);
  border-left: 3px solid var(--muted-brass);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.doi-source img {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  display: block;
}
.doi-source p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--charcoal);
}
@media (max-width: 560px) {
  .doi-source { flex-direction: column; text-align: center; gap: 0.9rem; }
}
footer.site-footer .footer-bottom {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  color: var(--pale-blue);
  /* One continuous line, not a split row - the right-floating Privacy link read as a
     "rogue design element" in Marissa's review 2026-07-07. */
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  justify-content: flex-start;
  align-items: center;
}
footer.site-footer .footer-bottom a::before {
  content: "\00B7";
  margin-right: 0.6rem;
  color: var(--pale-blue);
}

/* Brass rule above section headings (signature system) - suppressed where a heading
   already carries its own brass treatment (FAQ category underline) */
.section h2::before, .borough-band h2::before, .cta-band h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--muted-brass);
  margin-bottom: 0.85rem;
}
.faq-category h2::before, .contact-info-grid h2::before { content: none; }
.borough-band h2::before { margin-left: auto; margin-right: auto; }

/* Brass text emphasis - Marissa's standing rule (2026-07-07): highlight a specific
   word or short phrase in brass for real per-page emphasis. Use --brass-text (the
   accessible darker shade) on light backgrounds; raw --muted-brass already passes
   contrast on the navy hero/band/cta surfaces. Sparingly - a phrase, not a sentence. */
.emphasis-brass { color: var(--brass-text); font-weight: 600; }
.hero .emphasis-brass, .cta-band .emphasis-brass,
.section-band .emphasis-brass, .borough-band .emphasis-brass {
  color: var(--muted-brass);
}

/* Disclaimer box */
.disclaimer {
  /* Quiet treatment (Marissa round 2): no box, no fill - a thin brass hairline and
     small muted text. Reads as a footnote, not a competing panel. */
  font-size: 0.8rem;
  color: var(--charcoal);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(176, 138, 69, 0.45);
  border-radius: 0;
  padding: 0.9rem 0 0;
  margin-top: 1.6rem;
  opacity: 0.92;
}
.cta-band .disclaimer, .on-dark .disclaimer { color: var(--pale-blue); }
.section-alt .disclaimer { background: transparent; }

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--civic-blue);
  color: var(--white);
  padding: 0.6rem 1rem;
  z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* The header collapses to the hamburger EARLIER than everything else, and it has to.
   2026-09-26: the nav went from six links to eight on her instruction, and the eight
   measure 774px. The lockup and its gap take a further ~322px, so the row needs about
   1096px of container. The container only reaches its 1120px max-width above roughly
   1168px of viewport, so between 901px and ~1168px the nav overflowed the header and
   pushed 17px of horizontal scroll onto the page. Measured at 950px before this rule:
   navRight 967 against hdrRight 935.
   Collapsing the header at 1180px is preferred over shrinking the nav's gap or font,
   because the hamburger is an approved pattern already on the site and her nav
   typography (v4 c25, semibold, a hair larger) is not mine to shrink.
   These six declarations moved out of the 900px block below, unchanged. Everything
   else in that block is still 900px, so tablet layout is untouched. */
@media (max-width: 1180px) {
  label.nav-toggle { display: block; }
  .site-header .header-contact-mobile {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
    margin-left: auto;
  }
  nav.main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.8rem 0 0.6rem;
    border-top: 1px solid var(--pale-blue);
    order: 4;
  }
  .nav-toggle-box:checked ~ nav.main-nav { display: flex; }
  .site-header .container { flex-wrap: wrap; }
  /* The persistent header-contact-mobile button above already covers the "contact"
     job at this width. Without this rule, opening the menu revealed a SECOND
     Contact button (the nav's own last link) at the same time - caught in review
     2026-07-07. Hide the in-menu copy here; it only shows again at desktop width. */
  nav.main-nav a.btn-primary { display: none; }
}

/* Mobile */
@media (max-width: 900px) {
  .hero { padding: 3.2rem 0 3rem; }
  .section { padding: 3.2rem 0; }
  .step { grid-template-columns: 44px 1fr; gap: 0.85rem; }
  .step-num { width: 42px; height: 42px; font-size: 1.15rem; }
  footer.site-footer .footer-grid { grid-template-columns: 1fr; }
  /* Keep each footer info line on one line at phone width - the Serving line is the
     longest; it clears 390px at this size. */
  .footer-lines span { font-size: 0.7rem; letter-spacing: -0.01em; }
  .img-placeholder.award-photo,
  .img-placeholder.hero-portrait,
  .img-placeholder.contact-portrait { float: none; width: 100%; margin: 0 0 1rem 0; }
}

/* ===== Round 2 feedback additions (2026-07-11) ===== */



/* No orphan single-word lines (site-wide review note): balance headings, tidy paragraphs. */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Header CTA breathing room ("looks like a cropping error") */
.site-header .btn-primary { padding-left: 1.35rem; padding-right: 1.35rem; }

/* About: photos mapped inline to the content they reference */
.media-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.25rem;
  align-items: center;
  margin: 1.9rem 0;
}
.media-row--reverse { grid-template-columns: 1fr 1.5fr; }
.media-row--reverse .media-row-text { order: 2; }
.media-row--reverse .media-row-photo { order: 1; }
.media-row .media-row-photo { margin: 0; width: 100%; max-width: 360px; justify-self: center; }
.media-row .media-row-photo img { width: 100%; height: auto; }
@media (max-width: 720px) {
  .media-row, .media-row--reverse { grid-template-columns: 1fr; gap: 1.1rem; }
  .media-row--reverse .media-row-text { order: 1; }
  .media-row--reverse .media-row-photo { order: 2; }
}

/* About: slightly larger body copy ("text on this page is very small") */
.prose-lg p { font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.6rem; } /* v3 c7: more air between paragraphs */

/* Brass credential/standards list (timeline-weight styling for flat lists) */
.brass-list { list-style: none; margin: 1.4rem 0; padding: 0; }
.brass-list li {
  position: relative;
  margin-left: 0.4rem; /* v3 c9/c10: geometry matches .timeline exactly */
  padding: 0 0 0.85rem 2rem;
  font-size: 1.12rem;
  color: var(--ink-navy);
  font-weight: 500;
}
.brass-list li::before {
  content: "";
  position: absolute;
  left: -7px;
  border: 2px solid var(--white); /* v3 c9: same ring as the timeline dots */
  top: 0.42em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted-brass);
}

/* Caution note: dark + distinct (was blending into body copy) */
.note-caution { color: var(--ink-navy); font-weight: 600; }

/* Keep the response-time line on one line at desktop */
@media (min-width: 721px) {
  .one-line { white-space: nowrap; }
}

/* DOI resource cards: equal size, top-aligned content, buttons on one baseline (v3 c18) */
.card-grid { align-items: stretch; }
.card-grid .card { height: 100%; display: flex; flex-direction: column; }
.card-grid .card .btn { margin-top: auto; align-self: flex-start; }

/* ===== v3 feedback additions (2026-07-12) ===== */

/* Footer lockup (c4): white NYC(TM) master + two-line Helvetica block, matches the header */
.footer-lockup { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; }
.footer-nyc { display: block; height: 40px; width: auto; }
.footer-lockup-text { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.25; }
.footer-lockup-text .footer-site-name { display: block; font-size: 1.12rem; font-weight: 700; color: var(--white); }
.footer-lockup-text span:not(.footer-site-name) { display: block; font-size: 0.75rem; font-weight: 500; color: var(--white); }

/* Footer tidy-up (c3): tagline wraps inside the column instead of running toward center */
.footer-tagline { max-width: 42ch; } /* v5 comment 4: widened from 34ch so "eligible" pulls up to line 1 */
/* 2026-08-16: raw --muted-brass measured 4.11:1 here, below WCAG AA 4.5:1 for this
   normal-size/normal-weight text - see --brass-text-navy above. */
.footer-lines .flabel { color: var(--brass-text-navy); font-weight: 600; }

/* Contact info grid 2+3 (c22/c25): phone+email large on top, three equal boxes below */
.contact-info-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; align-items: stretch; }
.contact-info-grid .card { height: 100%; }
.contact-info-grid .info-wide { grid-column: span 3; }
.contact-info-grid .info-third { grid-column: span 2; }
@media (max-width: 900px) {
  .contact-info-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-info-grid .info-wide, .contact-info-grid .info-third { grid-column: span 1; }
}

/* Form warning (c26/c14): sits directly above the embedded form, larger, standout brass */
.form-warning {
  font-size: 1.18rem; /* v4 c18 */
  font-weight: 600;
  color: var(--brass-text);
  border-left: 3px solid var(--muted-brass);
  padding: 0.6rem 0 0.6rem 1rem;
  max-width: 720px;
}

/* ===== v4 feedback additions (2026-07-12) ===== */
.media-row .prose-lg p, .media-row-text p { font-size: 1.15rem; line-height: 1.75; margin-bottom: 1.9rem; } /* c2 */
.card-grid .card h2 { text-align: center; margin-bottom: 0.6rem; } /* c5 centered headings */
.card-grid .card .btn { align-self: stretch; text-align: center; } /* c7 equal buttons (Home/Services keep the v5 look) */

/* ===== DOI resource cards, round-3 structural fix (2026-07-13) =====
   Replaces the h2 min-height magic numbers (2.5em → 2.6em) that never matched the real
   line boxes and kept letting the copy tops drift. Subgrid pins every row to the same
   track across all three cards BY CONSTRUCTION: heading row, both copy rows, button row.
   Buttons: identical width (justify-self stretch), identical height (nowrap = one line,
   nbsp arrow can never wrap alone), identical y (shared bottom row). */
.doi-card-grid {
  /* Columns never drop below 330px, so the longest one-line button label always fits
     at full size. Below that the grid wraps to 2 columns, then 1 - never a tight column. */
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
}
.doi-card-grid .card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* h2 + two paragraphs + button - matches the card markup exactly */
  align-content: start;
  row-gap: 0; /* keep the original paragraph rhythm; don't inherit the outer 1.5rem gap */
}
.doi-card-grid .card h2 { min-height: 0; }
.doi-card-grid .card .btn {
  align-self: end;            /* in grid, align-self is the vertical axis */
  justify-self: stretch;      /* uniform width = full card column */
  text-align: center;
  white-space: nowrap;        /* uniform height = one line, always */
  padding-left: 0.6rem;
  padding-right: 0.6rem;      /* longest label fits one line inside the 280px min column */
}
.contact-info-grid .card p { font-size: 1.02rem; } /* c14 */
.img-placeholder.contact-portrait { min-height: 460px; } /* c11 - photo spec now 2:3 */
/* c26: frame Option A - brass corner brackets on site photos */
figure.site-photo { position: relative; padding: 12px; }
figure.site-photo::before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-top: 3px solid var(--muted-brass); border-left: 3px solid var(--muted-brass); }
figure.site-photo::after { content: ""; position: absolute; bottom: 34px; right: 0; width: 52px; height: 52px; border-bottom: 3px solid var(--muted-brass); border-right: 3px solid var(--muted-brass); }

/* ===== Motion: hero entrance + scroll reveal (2026-07-16, Marissa-approved) =====
   Two effects only, per her review of the animation preview. Fallback point before this
   work: git tag "version-monkey" in this repo (revert with `git checkout version-monkey -- .`).

   EFFECT 1 - Hero entrance. Pure CSS, zero JavaScript. Every direct child of a .hero
   .container (kicker, h1, lede, supporting copy, proof note, photo/placeholder, button)
   rises into place once, in reading order, on page load. Gated behind
   prefers-reduced-motion: no-preference so it plays ONLY when the visitor hasn't asked for
   reduced motion, and simply never fires (fully visible, no animation) on any browser that
   can't evaluate the media feature at all. */
@media (prefers-reduced-motion: no-preference) {
  .hero .container > * {
    opacity: 0;
    transform: translateY(14px);
    animation: heroEntrance 0.6s ease-out forwards;
  }
  .hero .container > *:nth-child(1) { animation-delay: 0.05s; }
  .hero .container > *:nth-child(2) { animation-delay: 0.18s; }
  .hero .container > *:nth-child(3) { animation-delay: 0.32s; }
  .hero .container > *:nth-child(4) { animation-delay: 0.44s; }
  .hero .container > *:nth-child(5) { animation-delay: 0.56s; }
  .hero .container > *:nth-child(6) { animation-delay: 0.68s; }
  .hero .container > *:nth-child(n+7) { animation-delay: 0.40s; }
  @keyframes heroEntrance {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Sidney's LCP fix (2026-07-16, audit of commit b8e5f33): whatever position the H1 or
     the hero photo/placeholder lands in per page, neither may carry a render delay.
     Chrome's Largest Contentful Paint timing only credits an element once it reaches
     full opacity, so delaying the page's actual (or future) LCP candidate directly
     inflates the metric - the nth-child stagger above was costing the H1 up to ~0.78s,
     and would have cost a future real hero photo (currently just a placeholder) up to
     ~1.3s the moment it ships. Both now start fading in immediately; every other hero
     element still staggers in around them for the visual effect Marissa approved.
     Wins over the positional stagger via !important - a deliberate, narrowly-scoped
     override for the one property that must never lose to position, not a general
     practice on this site. */
  .hero h1,
  .hero .img-placeholder,
  .hero figure.site-photo {
    animation-delay: 0s !important;
  }
}

/* EFFECT 2 - Scroll reveal. REMOVED 2026-09-25 (C4, all animations now).
   The .reveal-armed rules only ever did anything when js/site-motion.js added
   the class. That file is gone. Scroll motion is now CSS scroll-driven, in the
   SCROLL-DRIVEN MOTION block further down this file. */

@media (prefers-reduced-motion: reduce) {
  .hero .container > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ===== Tap target fix, WCAG 2.2 AA 2.5.8 (2026-08-16, Leo's audit, Marissa-approved) =====
   6 of 19 tappable elements measured under the 24x24px minimum on the live 375px preview,
   worst offenders the footer phone (15px) and email (15px) links - the single hardest
   thing to tap on this site was the phone number, and Peter Brand's own research says
   phone calls are more than half of conversions for a local service business.

   Footer Phone/Email: display:inline-block + vertical padding grows the real tap target
   to 30px without growing the row - the padded anchor (text height + padding) still fits
   inside the row's existing 1.8 line-height, so Marissa's one-line-per-item rule
   (`.footer-lines span { white-space: nowrap; }`, 2026-07-07) is untouched - verified no
   row growth and no wrapping on all 10 pages at 375px before shipping this. */
.footer-lines a { display: inline-block; padding: 5px 0; }

/* Footer bottom (Privacy Policy): same technique, smaller padding since the row already
   carries more natural line-height slack (0.8rem text against the inherited 1.65 body
   line-height). 21px measured -> 27px after. */
.footer-bottom a { display: inline-block; padding: 3px 0; }

/* In-body links inside running paragraphs (e.g. "Marshal Fraiden's Services",
   "submit an inquiry", the Step-1 phone number): brute-force padding here risks
   overlapping hit areas with the line above or below when the paragraph wraps, so this
   is deliberately the smallest padding that clears 24px (22px measured -> 26px after),
   not the larger footer treatment. Verified against every paragraph on the site with 2+
   links (the Step-1 phone + "submit an inquiry" pair) for zero vertical overlap between
   consecutive lines before shipping this. .btn-arrow/.btn links are excluded - they
   already clear the minimum via their own button padding. */
main p a:not(.btn) { padding: 2px 0; }

/* ==========================================================================
   ROUND 6 PAGE STYLES, 2026-09-24. Courts and Boroughs, and Filing Requirements
   and Timelines. Lifted from the two previews, gp-* preview rules dropped, and
   every @container rewritten as a plain @media: the real site has no .gp-frame,
   so a container query would have silently never fired in production.
   ========================================================================== */

/* --- courts-and-boroughs.html --- */
/* ===== Preview shell (not site CSS). Palette from styles.css :root; the grey chrome is the shell's, not the brand's. ===== */
/* Site finding, not new design: the footer one-line-per-item rule (white-space: nowrap) bleeds 9px past a true 320 viewport on the live site today (the Serving line is the longest; the site CSS says it clears 390). Proposed: let footer lines wrap under 360px only. 390 is untouched. */
@media (max-width: 360px) { .footer-lines span { white-space: normal; } footer.site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); } }
/* Shell label bar on each borough section: the word count, so equal weight is visible. Not site CSS; toggled off with the bar button. */

/* ===== ROUND 3 (from Preview 03, shipping block): the rule 96 by 3 draws itself, then the heading rises, then the copy fades up. Zero JavaScript. ===== */

/* ===== Proposed site CSS for the hub page. Rows, not cards. One component, five times, nothing varies but the words. ===== */
.breadcrumb { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--pale-blue); margin: 0 0 1.3rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; }
.breadcrumb li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-brass); margin: 0 0.6rem; vertical-align: middle; }
.breadcrumb a { color: var(--pale-blue); text-decoration: none; border-bottom: 1px solid var(--muted-brass); padding-bottom: 1px; }
.breadcrumb a:hover { border-bottom-color: var(--white); color: var(--white); }
.breadcrumb [aria-current="page"] { color: var(--white); }
.reviewed { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--pale-blue); margin: 0.2rem 0 0; }
/* ===== Jump list, rebuilt 2026-09-23 on Marissa's comment ("the grey border is awkward
   and inconsistent with the color scheme"). No box and no one-off grey. The label uses the
   site's own kicker device (a 40px brass line, then civic-blue uppercase type). The five
   cells are equal by grid, not by content, and each borough name behaves exactly like a
   main-nav link: pale-blue rule at rest, brass rule on hover and focus, the site's own
   treatment. Brass is a line, never a dot. Stacks on a phone with the mobile nav's own
   pale-blue rules. ===== */
.jump-b { padding: 1.7rem 0 0; }
.jump .kicker { margin: 0 0 0.7rem; }
.jump-b { text-align: left; }
.jump .kicker { display: inline-block; }
.jump-b .jump-row { list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;  /* any number of cells: 5 boroughs, 4 FAQ topics */
  border-top: 1px solid var(--pale-blue); border-bottom: 1px solid var(--pale-blue);
  font-family: 'Public Sans', Arial, sans-serif; }
.jump-b .jump-row li + li { border-left: 1px solid var(--pale-blue); }
.jump-b .jump-row a { display: block; padding: 0.85rem 1.1rem;
  color: var(--civic-blue); text-decoration: none; text-align: left;
  font-size: 1rem; font-weight: 600; letter-spacing: 0.01em;
  border-left: 3px solid transparent;
  transition: background-color .15s ease, border-color .15s ease; }
.jump-b .jump-row a:hover { background: var(--pale-blue); border-left-color: var(--muted-brass); }
.jump-b .jump-row a:focus-visible { outline: 2px solid var(--civic-blue); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .jump-b .jump-row a { transition: none; } }
@media (max-width: 720px) {
  /* The pills become a stacked list on a phone. The old rule set grid-template-columns on a
     flex container, so it did nothing, and it zeroed the horizontal padding while the base rule
     kept the 999px pill radius: the borough names rendered outside their own curved border. */
  .jump-b .jump-row { display: block; border: 0; }
  /* The vertical divider between cells has to go when they stack, or it draws one
     long hairline down the left of the list. Caught on the FAQ at 320. */
  .jump-b .jump-row li + li { border-left: 0; }
  .jump-b .jump-row a { display: block; padding: 0.8rem 0 0.75rem; border: 0;
    border-top: 1px solid var(--pale-blue); border-radius: 0; text-align: left; }
  .jump-b .jump-row li:last-child a { border-bottom: 1px solid var(--pale-blue); }}
/* In-copy links: civic blue with a one-pixel brass underline, the same treatment as the hero links in update 1. */
.prose a:not(.btn) { color: var(--civic-blue); text-decoration: underline; text-decoration-color: var(--muted-brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: var(--civic-blue); color: var(--ink-navy); }
.prose p { max-width: 72ch; }
.prose p strong { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; color: var(--civic-blue); }
/* Hero note: the one place on the page that says where the court explanations live. */
.hero .lede, .hero .lede-note { max-width: 44.2rem; }
.lede-note { color: var(--pale-blue); font-size: 0.95rem; max-width: 74ch; margin: 0.9rem 0 1.1rem; }

/* ===== The borough component. Marissa's field order, 2026-09-23: borough, county,
   Housing Court address, Civil Court address, then clerk offices and phone numbers, so
   every section is the same shape. The "what the office does here" row is deleted, and so
   is the two-column layout: the stacked list is the approved format (Marissa, 2026-09-23). Every hairline is the site's own --pale-blue, never a one-off
   grey. All five sections sit on ivory; an alternating band would weight two of five. ===== */
.borough { padding: 3.6rem 0; border-top: 1px solid var(--pale-blue); }
.borough:first-of-type { border-top: 0; }
.borough h2 { text-align: left; }
.court-rows { list-style: none; margin: 0.6rem 0 0; padding: 0; max-width: 78ch; }
.court-rows > li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 0.4rem 1.5rem; padding: 0.95rem 0; border-top: 1px solid var(--pale-blue); align-items: start; }
.court-rows > li:last-child { border-bottom: 1px solid var(--pale-blue); }
.court-rows .label { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--civic-blue); padding-top: 0.3rem; }
.court-rows p { margin: 0; }
.court-rows .v p + p { margin-top: 0.45rem; }
.court-rows .county-name { font-weight: 600; color: var(--ink-navy); }
.sub { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; color: var(--ink-navy); }
.gap { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; color: var(--brass-text); }
.borough .how { margin: 1.4rem 0 0; }

@media (max-width: 720px) {
  .court-rows > li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .court-rows .label { padding-top: 0; }
  .borough { padding: 2.8rem 0; }}

.court-address { font-style: normal; display: block; line-height: 1.45; }
.court-address .line { display: block; }
.court-note { display: block; margin-top: 0.45rem; font-size: 0.82rem; line-height: 1.4; color: var(--civic-blue); }

.county-line { display: block; font-weight: 600; }
.county-how { display: block; margin-top: 0.15rem; }

/* --- nyc-marshal-filing-requirements-and-timelines.html --- */
/* ===== Preview shell (not site CSS). Palette from styles.css :root; the grey chrome is the shell's, not the brand's. ===== */
/* The site's 900px rules key on the viewport. Inside a narrowed frame, re-state the ones that matter against the frame. */
/* Reduced-motion emulation for a reviewer without the OS setting. The real gate is the media query below. */
/* Site finding, not new design: the footer one-line-per-item rule (white-space: nowrap) bleeds 9px past a true 320 viewport on the live site today (the Serving line is the longest; the site CSS says it clears 390). Proposed: let footer lines wrap under 360px only. 390 is untouched. */
@media (max-width: 360px) { .footer-lines span { white-space: normal; } footer.site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); } }
/* Links panel */

/* ===== ROUND 3 (from Preview 03, shipping block): the rule 96 by 3 draws itself, then the heading rises, then the copy fades up. Zero JavaScript. ===== */
/* Card hover from round 1 (approved): brass edge in 150ms, no lift. */

/* ===== Proposed site CSS for the new page. Rows, not cards. Everything below would move into css/styles.css as written. ===== */
/* Breadcrumb in the hero. Pale blue, brass hairline under the links, a brass dot between crumbs. */
.breadcrumb { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--pale-blue); margin: 0 0 1.3rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0; }
.breadcrumb li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted-brass); margin: 0 0.6rem; vertical-align: middle; }
.breadcrumb a { color: var(--pale-blue); text-decoration: none; border-bottom: 1px solid var(--muted-brass); padding-bottom: 1px; }
.breadcrumb a:hover { border-bottom-color: var(--white); color: var(--white); }
.breadcrumb [aria-current="page"] { color: var(--white); }
/* Reviewed line, once under the lede. Same rule as the FAQ (Preview 05), on navy here so it is pale blue. */
.reviewed { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.74rem; letter-spacing: 0.04em; color: var(--pale-blue); margin: 0.2rem 0 0; }
/* Jump list: a ruled row under the hero, brass dots between entries, the same device as the round 3 borough strip. Stacks under 720. */
.jump { padding: 1.1rem 0; }
.jump .jump-label { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--civic-blue); font-weight: 600; display: block; margin: 0 0 0.5rem; }
/* In-copy links: civic blue with a one-pixel brass underline, the same treatment as the hero links in update 1. */
.prose a:not(.btn) { color: var(--civic-blue); text-decoration: underline; text-decoration-color: var(--muted-brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:not(.btn):hover { text-decoration-color: var(--civic-blue); color: var(--ink-navy); }
.prose p { max-width: 72ch; }
.prose p strong { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; color: var(--civic-blue); }
/* Ruled list: each bullet is a hairline row on the page surface. No dots, no fills. */
.rows { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 78ch; }
.rows > li { padding: 0.95rem 0; border-top: 1px solid var(--pale-blue); }
.rows > li:last-child { border-bottom: 1px solid var(--pale-blue); }
/* The clocks: ordered rows with a bare tabular numeral in civic blue, the round 3 step numeral. */
.clocks h3 { color: var(--civic-blue); font-size: 1.12rem; margin: 2rem 0 0.2rem; }
.clocks h3:first-of-type { margin-top: 1.4rem; }
ol.clock { list-style: none; counter-reset: clock; margin: 0.6rem 0 0; padding: 0; max-width: 78ch; }
ol.clock > li { counter-increment: clock; position: relative; padding: 0.9rem 0 0.9rem 4.2rem; border-top: 1px solid var(--pale-blue); }
ol.clock > li:last-child { border-bottom: 1px solid var(--pale-blue); }
ol.clock > li::before { content: "0" counter(clock); position: absolute; left: 0; top: 0.75rem; font-family: 'Public Sans', Arial, sans-serif; color: var(--civic-blue); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; line-height: 1.25; }
/* What to send: a ruled table, brass rule under the head, prints on one sheet. Under 720 each row becomes a stacked block with its column labels. */
.print-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 0.4rem; }
.print-row .btn { font-family: inherit; cursor: pointer; }
@media print {
  /* RESTORED 2026-09-26. These two declarations existed at edf7630 and were
     deleted in 2c26800, a preview-shell cleanup: the dead selectors .gp-bar
     and .gp-links led the list, so removing them took the whole rule and with
     it the site header, hero, breadcrumb, timelines, CTA band and footer.
     Consequence: her "goal is for everything to life on one page" printed as
     six pages, and with body{background:#fff} gone the hero printed white
     text on a white sheet whenever Background graphics was off.
     The dead preview-shell selectors are NOT restored: .gp-bar, .gp-links,
     .gp-frame and .print-row appear in zero HTML files. */
  .site-header, .hero, .jump, .breadcrumb, footer.site-footer,
  main > section:not(.print-sheet) { display: none !important; }
  body { background: #fff; }
  .print-sheet { padding: 0; }
  .print-sheet .container { max-width: none; padding: 0; }
  .prose a:not(.btn) { color: inherit; text-decoration: none; }
  .section h2::before { animation: none; transform: none; }
  * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Round 4. The clocks as a real vertical timeline. NOT called .timeline: the site
   stylesheet already uses that class for the About page credentials list, and its
   brass dot marker rendered straight through this component. Check the site's own
   class names before naming a new one.
   The clocks as a real vertical timeline: the number lives in the rail, nothing else does.
   No icons, no coloured stages, no progress bar, nothing that says "you are here". A public
   officer's site cannot imply a schedule it does not control. */
.clock-rail { list-style: none; margin: 1.1rem 0 1.6rem; padding: 0 0 0 3.6rem; position: relative; max-width: 82ch; }
.clock-rail::before { content: ""; position: absolute; left: 1.05rem; top: .75rem; bottom: .75rem; width: 2px; background: var(--pale-blue); }
.clock-rail > li { position: relative; padding: 0 0 1.15rem; line-height: 1.6; }
.clock-rail > li:last-child { padding-bottom: 0; }
.clock-rail .step { position: absolute; left: -3.6rem; top: -.15rem; width: 2.15rem; height: 2.15rem;
  border-radius: 50%; background: var(--civic-blue); color: var(--white, #fff);
  font-family: 'Public Sans', Arial, sans-serif; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; }
/* Her ruling: "make sure the numnbers match the format we use on the rest of the site."
   The site writes 01, 02, 03 via content: "0" counter(clock) at ol.clock > li::before
   and .container > .step .step-num::before. The filing page's timeline rails were the
   only numbers left bare. Scoped to .clock-rail because the stylesheet's own note at
   line 1431 warns that a bare .step rule breaks all three timelines.
   NOTE: this prepends a literal zero, so it is correct only while every timeline has
   fewer than ten steps. Today the longest has seven. A tenth step would read 010. */
.clock-rail .step::before { content: "0"; }
.sr-step { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  .clock-rail { padding-left: 3rem; }
  .clock-rail .step { left: -3rem; width: 1.9rem; height: 1.9rem; font-size: .85rem; }
  .clock-rail::before { left: .9rem; }}

/* Round 4 restructure, 2026-09-24, to Marissa's brief. Three sections, four matter types,
   same order in all three. The type block is one object and looks identical in each section,
   which is the whole point of a lookup page: the reader learns the shape once. */
.key-list { list-style: none; margin: 1.1rem 0 0.4rem; padding: 0; max-width: 78ch; }
.key-list > li { padding: 0.8rem 0; border-top: 1px solid var(--pale-blue); }
.key-list > li:last-child { border-bottom: 1px solid var(--pale-blue); }
.key-list a { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; }
.key-list .key-term { display: block; font-size: 0.86rem; color: var(--charcoal, #263238); opacity: 0.8; margin-top: 0.15rem; }
/* The checklist. An empty brass square, because this section prints and a reader ticks it. */
.check-list { list-style: none; margin: 0.9rem 0 1.1rem; padding: 0; max-width: 78ch; }
.check-list > li { position: relative; padding: 0.72rem 0 0.72rem 1.9rem; border-top: 1px solid var(--pale-blue); line-height: 1.6; }
.check-list > li:last-child { border-bottom: 1px solid var(--pale-blue); }
.check-list > li::before { content: ""; position: absolute; left: 0; top: 1.1rem; width: 0.6rem; height: 0.6rem; border: 1px solid var(--muted-brass); }
.srclink { font-weight: 600; }
.caveat { margin: 1.1rem 0 0; padding: 0.95rem 1.1rem; background: var(--pale-blue); border-left: 3px solid var(--muted-brass); max-width: 72ch; }
.caveat p { margin: 0; max-width: none; }
.caveat .clabel { font-family: 'Public Sans', Arial, sans-serif; font-weight: 600; color: var(--civic-blue); }
.also { font-size: 0.9rem; margin: 1rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--pale-blue); max-width: 78ch; }
.rule-note { margin-top: 2.2rem; }
@media print {
  .check-list > li, .key-list > li { padding-top: 5pt; padding-bottom: 5pt; }
  a.srclink::after { content: " (" attr(href) ")"; font-size: 7.5pt; word-break: break-all; }
  .also { display: none !important; }
}

/* The printable checklist, designed. Marissa's round 4 comment: it has to be obvious on paper
   that this came from the office. So the print sheet gets a letterhead and a footer of its own,
   both hidden on screen. The footer is fixed, which is how Chrome repeats it on every sheet. */
.print-head, .print-foot { display: none; }
@media print {
  @page { margin: 0.55in 0.7in 1.15in; }
  .print-head { display: block; margin: 0 0 1.4rem; }
  .ph-top { display: flex; align-items: center; gap: 0.9rem; }
  .ph-mark { width: 110px; height: auto; }
  .ph-office { display: flex; flex-direction: column; line-height: 1.25; }
  .ph-name { font-family: 'Public Sans', Arial, sans-serif; font-weight: 700; font-size: 12pt; color: #17324D; letter-spacing: 0.01em; }
  .ph-role { font-family: 'Public Sans', Arial, sans-serif; font-weight: 500; font-size: 9pt; color: #1F4E79; letter-spacing: 0.06em; text-transform: uppercase; }
  .ph-rule { height: 3px; width: 96px; background: #7B6030; margin: 0.75rem 0 0.7rem; }
  .ph-title { font-size: 19pt; margin: 0 0 0.2rem; color: #17324D; }
  .ph-title::before { content: none !important; }
  /* Two attempts at a footer repeated on every sheet both failed on the render: a fixed
     element drew UNDER the text, and a negative offset drew it at the top of later pages.
     Chrome only repeats a footer reliably from a table tfoot, which would mean rebuilding
     the checklist as a table and losing its semantics on screen. So the letterhead opens
     the sheet and the office block closes it, which is how a printed reference actually
     reads. Page numbers come from the browser print dialog. */
  .print-foot { display: block; margin-top: 2.2rem; break-inside: avoid; }
  /* Keeping a whole matter type on one sheet pushed the checklist from 5 pages to 8 and left
     half-empty pages. Only the small blocks are held together now. */
  .check-list > li, .key-list > li { break-inside: avoid; }
  .pf-rule { height: 1px; background: #7B6030; margin-bottom: 5pt; }
  .pf-lines { font-family: 'Public Sans', Arial, sans-serif; font-size: 7.5pt; color: #17324D; margin: 0 0 2pt; line-height: 1.4; max-width: none; }
  .pf-lines strong { font-weight: 700; }
  .pf-note { font-family: 'Public Sans', Arial, sans-serif; font-size: 7pt; color: #1F4E79; margin: 0; line-height: 1.4; max-width: none; }
  /* the on-screen H2 of section 1 is replaced by the letterhead title */
  .print-sheet > .container > h2 { display: none; }
}

/* Her ruling, 2026-09-24: the delay causes are a list, not a paragraph clump, and they open
   with her own lead-in line. A short brass dash rather than a square, because the checklist
   already owns the square and these are not things a reader ticks off. */
.caveat ul { list-style: none; margin: 0.65rem 0 0; padding: 0; }
.caveat li { position: relative; padding: 0.3rem 0 0.3rem 1.15rem; line-height: 1.55; }
.caveat li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.55rem; height: 2px; background: var(--muted-brass); }

/* Her ruling, 2026-09-24: choose a kind of matter, the detail fades in beside it, a brass rule
   draws down the divide. Built with :target and no script at all, so every pane is in the page
   source for a crawler and every matter type keeps its own web address. */
.chooser { display: grid; grid-template-columns: minmax(14rem, 19rem) 1fr; gap: 0 2.6rem; align-items: start; margin: 1.5rem 0 0; }
.picker { display: flex; flex-direction: column; }
.picker a { display: block; padding: 0.85rem 1rem 0.85rem 0; border-top: 1px solid var(--pale-blue);
  color: var(--ink-navy); text-decoration: none; font-family: 'Public Sans', Arial, sans-serif;
  font-weight: 600; font-size: 0.95rem; line-height: 1.45; }
.picker a:last-of-type { border-bottom: 1px solid var(--pale-blue); }
.picker a:hover, .picker a:focus-visible { color: var(--civic-blue); }
.picker a.on { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.panes > .pane { display: none; position: relative; padding-left: 2.4rem; }
.panes > .pane:target { display: block; }
.pane > .rail { position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 3px;
  background: var(--muted-brass); transform-origin: top center; }
.pane > h3 { margin-top: 0; }
@keyframes railDown { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panes > .pane:target > .rail { animation: railDown 0.5s cubic-bezier(0.22,0.61,0.36,1) both; }
.panes > .pane:target > *:not(.rail) { animation: paneIn 0.45s cubic-bezier(0.22,0.61,0.36,1) 0.1s both; }
@media (prefers-reduced-motion: reduce) {
  .pane > .rail, .panes > .pane > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}
@media (max-width: 760px) {
  .chooser { grid-template-columns: 1fr; gap: 1.2rem; }
  .panes > .pane { padding-left: 0; }
  .pane > .rail { display: none; }}
/* The container query above only fires inside the preview frame. The real site has no frame,
   so the same rule is repeated as a plain media query or the chooser would stay two columns on
   a phone once this ships. Caught by asking what this file does OUTSIDE the mockup. */
@media (max-width: 760px) {
  .chooser { grid-template-columns: 1fr; gap: 1.2rem; }
  .panes > .pane { padding-left: 0; }
  .pane > .rail { display: none; }
}
/* Her note that the bullets read sloppy. The checklist keeps its square, because it is a
   checklist and somebody ticks it on paper. The delay causes lose their dash and become plain
   ruled rows, so the page carries one marker rather than three. */
.caveat ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.caveat li { position: relative; padding: 0.42rem 0; line-height: 1.55; border-top: 1px solid var(--pale-blue); }
.caveat li::before { content: none; }
@media print {
  .picker { display: none !important; }
  .panes > .pane { padding-left: 0; page-break-inside: auto; }
  .pane > .rail { display: none !important; }
  .chooser { display: block; }
}

.chooser:has(#paperwork-eviction:target) .picker a[href="#paperwork-eviction"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.chooser:has(#paperwork-paycheck:target) .picker a[href="#paperwork-paycheck"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.chooser:has(#paperwork-property:target) .picker a[href="#paperwork-property"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.chooser:has(#timeline-eviction:target) .picker a[href="#timeline-eviction"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.chooser:has(#timeline-paycheck:target) .picker a[href="#timeline-paycheck"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }
.chooser:has(#timeline-property:target) .picker a[href="#timeline-property"] { color: var(--civic-blue); box-shadow: inset 3px 0 0 var(--muted-brass); padding-left: 0.85rem; }

/* Her ruling, 2026-09-24: "It is wasteful for the person to print all matter types when they
   only need one." So a print prints ONE matter type. The button sets its own pane as the
   target before printing, which is what makes that reliable even if the reader last selected
   something in the timelines section. */
@media print {
  .panes > .pane { display: none !important; }
  .panes > .pane:target { display: block !important; }
  .chooser:not(:has(:target)) .panes > .pane:first-of-type { display: block !important; }
  .pane-print { display: none !important; }
  /* telling a reader on paper to choose from a control that is not on the paper */
  .chooser-lead { display: none !important; }
}
.pane-print { margin-top: 1.4rem; }
.pane-print .btn { font-family: inherit; cursor: pointer; }

/* Her ruling, 2026-09-24: "details on the right for both sections shouldn't load until you
   make your selection." So there is no default pane. The panel holds a prompt until a matter
   type is chosen. Every pane is still in the page source; only what is SHOWN has changed. */
.panes-empty { grid-column: 1 / -1; color: var(--civic-blue); font-family: 'Public Sans', Arial, sans-serif;
  font-size: 0.95rem; padding: 0.85rem 0; border-top: 1px solid var(--pale-blue);
  border-bottom: 1px solid var(--pale-blue); max-width: 52ch; }
.chooser:has(:target) .panes-empty { display: none; }
@media print {
  /* Nothing selected and somebody presses print anyway: give them all three rather than a
     sheet with a prompt on it. The buttons always select first, so the normal path is one. */
  .chooser:not(:has(:target)) .panes > .pane { display: block !important; }
  .panes-empty { display: none !important; }
}

/* Her nine marks on the printed card, 2026-09-24. The whole goal is one sheet per matter type,
   so everything here either shrinks something or takes space back. @page lost its 1.15in bottom
   margin, which had been reserved for a fixed footer that no longer exists. */
@media print {
  @page { margin: 0.5in 0.62in; }
  /* "use the whole horizontal space inside the margins" - the on-screen measure is 72ch, which
     on paper left the office email address stranded on a second line. */
  .print-sheet p, .print-sheet ul, .print-sheet li { max-width: none; }
  .print-sheet > .container > p { font-size: 9pt; line-height: 1.45; margin: 0 0 0.55rem; }
  .print-head { margin: 0 0 0.8rem; }
  .ph-rule { margin: 0.5rem 0 0.45rem; }
  .ph-title { font-size: 17pt; margin: 0; }
  .pane > h3 { font-size: 12.5pt; margin: 0 0 0.3rem; }
  .pane > p { font-size: 9pt; line-height: 1.45; margin: 0.5rem 0 0; }
  /* "shrink font size but be consistent for all items on the check list" */
  .check-list { margin: 0.45rem 0 0.7rem; }
  .check-list > li { font-size: 9pt; line-height: 1.45; padding: 4.5pt 0 4.5pt 15pt; }
  .check-list > li::before { top: 7.2pt; width: 7pt; height: 7pt; }
  .print-sheet > .container > p.rule-note { margin-top: 1rem; font-size: 8.5pt; }
  .print-foot { margin-top: 0.85rem; }
  .pf-name { font-family: 'Public Sans', Arial, sans-serif; font-size: 8pt; color: #17324D; margin: 0 0 1pt; line-height: 1.4; }
  /* Her disclaimer, and the source follows the matter type being printed. Nothing selected and
     all three print, so that sheet names both courts. */
  .pf-note { display: none; }
  #paperwork:has(#paperwork-eviction:target) .pf-note[data-court="housing"],
  #paperwork:has(#paperwork-paycheck:target) .pf-note[data-court="civil"],
  #paperwork:has(#paperwork-property:target) .pf-note[data-court="civil"],
  #paperwork:not(:has(:target)) .pf-note[data-court="both"] { display: block; }
}
/* .mt > h3 carried the pane heading colour and size until the chooser replaced .mt and took the
   rule with it. Restored on the element that actually exists now. */
.pane > h3 { color: var(--civic-blue); font-size: 1.18rem; }

/* Her ruling, 2026-09-24: option A, no numerals, a "Jump to" label, and big enough that the
   filing information sits below it rather than beside it on a desktop. The title carries its own
   brass underline and an arrow, because a heading that happens to be clickable does not read as
   a link and she said so. */
.jump-a { border-top: 1px solid var(--pale-blue); border-bottom: 1px solid var(--pale-blue); }
.jump-a > .container { padding-block: 2.1rem 2.4rem; }
.jump .jump-label { display: block; font-family: 'Public Sans', Arial, sans-serif; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text); font-weight: 600;
  margin: 0 0 1.15rem; }
.jump-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.8rem; }
.jump-cards > li { border-top: 3px solid var(--muted-brass); }
.jump-cards a { display: block; padding: 1.5rem 0 1.8rem; text-decoration: none; }
.jump-cards .jt { display: inline-block; font-family: 'Public Sans', Arial, sans-serif; font-weight: 600;
  font-size: 1.32rem; line-height: 1.25; color: var(--civic-blue);
  border-bottom: 2px solid var(--muted-brass); padding-bottom: 0.2rem; }
.jump-cards .jd { display: block; font-size: 1rem; line-height: 1.55; color: var(--ink-navy);
  opacity: 0.82; margin-top: 0.85rem; }
.jump-cards a:hover .jt, .jump-cards a:focus-visible .jt { color: var(--ink-navy); border-bottom-color: var(--ink-navy); }
@media (max-width: 760px) { .jump-cards { grid-template-columns: 1fr; gap: 0; } }
@media print { .jump { display: none !important; } }

/* Her ruling, 2026-09-24: "push including bank levy to the second line under both sections so
   the cutoff doesn't look sloppy." At the picker's width the label broke after "Bank" and left
   "Levy)" stranded. The whole parenthetical now takes its own line. Text content is unchanged,
   so the ItemList and the link's accessible name still read as one string. */
.picker a .mt-sub { display: block; }

/* Both new pages call their contents nav .jump, and they are two different designs: the Courts
   page centres a row of borough links, the Filing page left-aligns two ruled cards. Same class
   name, so the centring leaked onto the cards and the render showed it. The filing page's nav
   carries .jump-a, which is what scopes this. */
.jump-a { text-align: left; }

/* The FAQ question is now a real h3 inside its summary, so the page has a document outline that
   a parser and an answer engine can follow. It has to look exactly as it did before, so the h3
   inherits everything from the summary and contributes no box of its own. */
.faq-item summary h3 { display: inline; margin: 0; padding: 0; font-size: inherit;
  font-weight: inherit; color: inherit; font-family: inherit; line-height: inherit; }


/* The office email address is a 248px unbreakable token. On a 320px screen it forced the contact
   grid 15px wider than the viewport, which is the long-email case Marissa named as her first
   concern. minmax(0,1fr) above stops the blowout; this stops the text clipping inside the card. */
.contact-info-grid a[href^="mailto"], .footer-lines a[href^="mailto"] { overflow-wrap: anywhere; }

/* WCAG 2.4.11. The whole stylesheet had three author focus rules, all on the two newest pages,
   and one of them was colour only. Everything else fell back to the browser default, which over
   the navy bands measures 1.43:1 and is unreliable outside Chrome. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--civic-blue); outline-offset: 3px; border-radius: 2px; }
.hero :where(a, button):focus-visible, .cta-band :where(a, button):focus-visible,
footer.site-footer :where(a, button):focus-visible { outline-color: var(--white, #fff); }

/* The hero hides its own children in plain CSS and relies on the animation to bring them back.
   If the animation never runs, the hero is empty. Belt and braces. */
@supports not (animation-name: heroEntrance) { .hero .container > * { opacity: 1; } }

/* The breadcrumb links on the two new pages missed the tap-target pass the rest of the site had. */
.breadcrumb a { display: inline-block; padding: 4px 0; }

/* The FAQ put its brass rule UNDER the section heading while every other page puts a 40x2 bar
   above it. One system, twelve pages. */
.faq-category h2 { border-bottom: 0; padding-bottom: 0; }
.faq-category h2::before { content: ""; }

/* ===== HERO PHONE BAND, Marissa 2026-09-24: "I like the mobile version of design 1c
   but the desktop design of 1b". Desktop is untouched, still the full bleed photograph
   behind the type. Under 720px the same photograph becomes a band ABOVE the copy, so it
   is composed rather than cropped. This is the awkward cutoff fix. ===== */
@media (max-width: 720px) {
  .hero { background-image: none; padding-top: 0; }
  .hero::before {
    content: ""; display: block; width: 100%; aspect-ratio: 16 / 8;
    background-size: cover; background-position: center;
    border-bottom: 1px solid rgba(176,138,69,0.42);
    margin: 0 0 2rem;
  }
  /* The two live images carry their own band position, measured rather than eyeballed: the window
     the 16 by 8 band shows is centred on where the picture's detail actually sits. Dusk keeps 73%
     of its height and sits high, so the skyline is in frame and the empty foreground is dropped. */
  .hero--dusk::before { background-image: linear-gradient(180deg, rgba(14,31,51,0.18) 0%, rgba(14,31,51,0.52) 100%), url('../assets/img/city-dusk-1600w.webp'); background-position: center 16%; }
  /* Surrogate keeps 75% of its height and sits low, so the courthouse fills the band and the sky goes. */
  .hero--surrogate::before { background-image: linear-gradient(180deg, rgba(14,31,51,0.18) 0%, rgba(14,31,51,0.52) 100%), url('../assets/img/city-surrogate-1600w.webp'); background-position: center 100%; }
  /* a hero with no photograph keeps no band */
  .hero:not([class*="hero--"])::before { display: none; }
}

/* ===== ROWS, NOT CARDS =====================================================
   Round 2 council, update 7. Leo's ruling 2026-09-22: "Ship the full treatment on
   every page in Genie's table." Approved then, never built, found missing 2026-09-25
   when Marissa remembered it. Genie's own rules, with his .v2 preview prefix removed.

   TWO DEPARTURES FROM HIS SPEC, both flagged to Marissa rather than slipped in:
   1. He kept the grids at two and three columns. Her words are "a beautiful vertical
      stack", and two boxes side by side still read as two boxes. One column.
   2. His table said the Contact page's six cards are DELETED, because update 6 was
      meant to replace them with an office card in the hero. Update 6 was never built
      either, so deleting them would strip the email and the street address off the
      page. They become rows instead.

   THE SCOPING FIX HE COULD NOT HAVE KNOWN ABOUT: the Filing Requirements page did not
   exist when this was written, and its timeline rails use .step for something else
   entirely (a numbered span inside .clock-rail). A bare .step rule would have broken
   all three timelines. Every step rule below is scoped to .container > .step, which
   the rails are not.
   ========================================================================== */

/* Cards become hairline rows on the page surface. No fill, no radius, no shadow,
   no brass top bar. The hairline turns brass on hover, in 150ms, instead of lifting. */
.card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pale-blue);
  border-radius: 0;
  box-shadow: none;
  padding: 1.6rem 0 1.7rem;
  transition: border-color 0.15s ease;
}
.card:hover { transform: none; box-shadow: none; border-top-color: var(--muted-brass); }
.card h3 { color: var(--civic-blue); margin-bottom: 0.5rem; }

/* One column, so the hairlines read as a stack. Revert to Genie's two-up by putting
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) back on .card-grid. */
.card-grid,
.doi-card-grid,
.contact-info-grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin: 1.5rem 0 0;
  border-bottom: 1px solid var(--pale-blue);
}
.card-grid .card h2 { text-align: left; }

/* The rows-not-cards override captured the 404's recovery group, which holds three
   BUTTONS, not three cards. Under it they went full-bleed and stacked with gap 0,
   touching each other, and the group's pale-blue bottom hairline drew straight across
   the navy hero. Sidney flagged this before it shipped and it went out anyway.
   Exempted so it keeps the auto-fit row it had before that ruling. Not a new design:
   this is the .card-grid behaviour from line 365, restored for this one group. */
.card-grid.btn-row { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; border-bottom: 0; }

/* Her C8 ruling, 2026-09-23: "three DOI resource rows on one desktop line."
   The one-column rows rule above is right for every other grid on the site and wrong
   for this one, because these are three reference links, not three cards. Specific
   beats general, so the columns come back here and nowhere else. */
.doi-card-grid { grid-template-columns: repeat(3, 1fr); gap: 0 2.4rem; }
@media (max-width: 860px) { .doi-card-grid { grid-template-columns: 1fr; gap: 0; } }


/* The old grids equalised card heights. Rows have no heights to equalise. */
.card-grid .card,
.contact-info-grid .card { height: auto; }
.doi-card-grid .card { display: block; grid-row: auto; }

/* DOI source attribution: a ruled row. The seal is untouched. */
.doi-source {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pale-blue);
  border-bottom: 1px solid var(--pale-blue);
  border-radius: 0;
  padding: 1.4rem 0;
  margin-bottom: 0;
}

/* Steps: the circled number becomes a bare tabular numeral, 01 02 03, in civic blue,
   with a hairline per row. Scoped so the timeline rails are never touched. */
.container > .step {
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  margin-bottom: 0;
  padding: 1.3rem 0;
  border-top: 1px solid var(--pale-blue);
}
.container > .step:last-of-type { border-bottom: 1px solid var(--pale-blue); }
.container > .step .step-num {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--civic-blue);
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.1;
  padding-top: 0.5rem;
}
.container > .step .step-num::before { content: "0"; }
.container > .step h3 { margin-top: 0.4rem; }

/* Borough band: pills become one ruled line separated by brass dots. Stacks on a phone.
   Hairlines are pale blue here because this band sits on navy. */
.borough-strip {
  gap: 0;
  border-top: 1px solid rgba(230, 238, 245, 0.25);
  border-bottom: 1px solid rgba(230, 238, 245, 0.25);
  padding: 0.9rem 0;
}
.borough-strip li {
  border: 0;
  border-radius: 0;
  padding: 0.2rem 1.1rem;
  position: relative;
  letter-spacing: 0.08em;
}
.borough-strip li + li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--muted-brass);
}

/* ---- Rows, continued: the button inside a row ----------------------------
   Going one column made the Learn More button stretch the full width, which turned
   it into the heaviest element on the page. A bordered box inside a hairline row is
   the exact thing these rows exist to remove.
   Genie's table said buttons were out of scope, and at two columns he was right.
   At full width he could not have been: this is a consequence of the one-column
   departure above, so it is mine to fix and mine to flag.
   Marissa, 2026-09-25: "I could've sworn we got rid of the buttons like on the
   homepage and made everything a beautiful vertical stack."
   The link is unchanged, its href is unchanged, its accessible name is unchanged.
   Only the styling moves from a box to an editorial link with a brass rule.
   -------------------------------------------------------------------------- */
.card-grid .card,
.doi-card-grid .card,
.contact-info-grid .card { align-items: flex-start; }

.card-grid .card .btn-secondary,
.doi-card-grid .card .btn-secondary {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--muted-brass);
  border-radius: 0;
  padding: 0.15rem 0 0.2rem;
  margin-top: 0.9rem;
  width: auto;
  align-self: flex-start;
  color: var(--civic-blue);
  font-size: 0.95rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.card-grid .card .btn-secondary:hover,
.doi-card-grid .card .btn-secondary:hover {
  background: transparent;
  color: var(--ink-navy);
  border-bottom-color: var(--ink-navy);
}

/* ===== SCROLL-DRIVEN MOTION, C4 ============================================
   Her C4: "Apply the rule everywhere relevant. Add back a sophisticated fade in
   harmony with it." Approved. All animations ship now, 2026-09-25, which also
   overrides Leo's earlier "page wipe the week after" ruling.

   One heading, three beats, all scrubbed by the same scroll position, so they
   read as one gesture and run backward when you scroll up. Nothing is on a timer.

     beat 1  the brass rule draws left to right
     beat 2  the heading rises 10px  (it never fades: the rule is the heading's
             ::before, so fading the heading would fade the rule mid-draw)
     beat 3  the paragraph and the rows rise 10px and fade, each a few behind the last

   AT REST, WHICH IS THE WHOLE SAFETY ARGUMENT: animation-fill-mode both on a view()
   timeline means anything past its range, on a browser without scroll-driven
   animation, under reduced motion, or in print, sits at opacity 1 and transform
   none. Nothing is ever hidden. Every word is in the DOM for a crawler at all times.

   LCP is untouched: the hero is not a .section, so no selector here reaches it.
   CLS is 0: transforms and opacity only, which the compositor handles off the
   main thread and which never change an element's size or position.
   ========================================================================== */
.section h2::before, .borough-band h2::before, .cta-band h2::before { transform-origin: left center; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* beat 1: the rule draws */
    .section h2::before, .borough-band h2::before, .cta-band h2::before {
      animation: drawRule linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    /* beat 2: the heading rises, never fades */
    .section h2, .borough-band h2, .cta-band h2 {
      animation: r3Rise linear both; animation-timeline: view(); animation-range: cover 4% cover 38%; }
    /* beat 3a: the first paragraph under a heading */
    .section h2 + p, .borough-band h2 + p, .cta-band h2 + p {
      animation: r3RiseFade linear both; animation-timeline: view(); animation-range: cover 8% cover 44%; }
    /* beat 3b: the rows */
    .timeline li, .brass-list li, .card-grid .card, .container > .step,
    .doi-source, .media-row, .borough-strip li, .court-rows > li {
      animation: r3RiseFade linear both; animation-timeline: view(); animation-range: cover 6% cover 40%; }
    .timeline li:nth-child(2), .brass-list li:nth-child(2), .card-grid .card:nth-child(2),
    .container > .step:nth-of-type(2), .court-rows > li:nth-child(2) { animation-range: cover 10% cover 44%; }
    .timeline li:nth-child(3), .brass-list li:nth-child(3),
    .container > .step:nth-of-type(3), .court-rows > li:nth-child(3) { animation-range: cover 14% cover 48%; }
    .timeline li:nth-child(4), .brass-list li:nth-child(4), .court-rows > li:nth-child(4) { animation-range: cover 18% cover 52%; }
    .brass-list li:nth-child(n+5) { animation-range: cover 22% cover 56%; }
    /* beat 3c: the FAQ first sentence. Opacity only, no rise, so the question never moves. */
    details.faq-item .faq-a1 { animation: r3Fade linear both; animation-timeline: view(); animation-range: cover 5% cover 38%; }
    details.faq-item:nth-of-type(2) .faq-a1 { animation-range: cover 9% cover 42%; }
    details.faq-item:nth-of-type(3) .faq-a1 { animation-range: cover 13% cover 46%; }
    details.faq-item:nth-of-type(n+4) .faq-a1 { animation-range: cover 17% cover 50%; }
  }
}
@keyframes drawRule   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes r3Rise     { from { transform: translateY(10px); } to { transform: none; } }
@keyframes r3RiseFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes r3Fade     { from { opacity: 0; } to { opacity: 1; } }

/* ===== PAGE TRANSITION, cross-document, zero script ========================
   A 300ms navy wipe between pages. The header does not move because it carries
   its own view-transition-name. Browsers without cross-document view transitions
   (Firefox today) do an ordinary page load and nothing breaks. Reduced motion
   gets an ordinary page load too, because the whole block sits inside the query.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(root) { background: var(--ink-navy); animation-duration: 300ms; }
  ::view-transition-old(root) { animation: vt-out 120ms ease-in both; }
  ::view-transition-new(root) { animation: vt-in 220ms cubic-bezier(.2,.7,.2,1) 90ms both; }
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
}
@keyframes vt-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* ===== CONTACT, THE OFFICE CARD (update 6, approved round 2, her C7 on top) =====
   The card carries the office's own details on the navy hero, which is why the phone
   and the email use --brass-text-navy rather than raw brass: 4.65:1 against 4.11:1,
   and 4.11 fails AA. Built 2026-09-25; approved 2026-09-22 and never ported.
   Media query, not a container query, because nothing else on this site uses one. */
.office { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: 3rem; align-items: start; }
.office-card { border-left: 1px solid rgba(176,138,69,0.55); padding: 0.1rem 0 0 1.75rem; }
.office-ledger { margin: 0; padding: 0; }
.office-ledger div { padding: 0.55rem 0 0.6rem; border-bottom: 1px solid rgba(230,238,245,0.18); }
.office-ledger div:first-child { padding-top: 0; }
.office-ledger div:last-child { border-bottom: 0; }
.office-ledger dt { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--pale-blue);
  font-weight: 600; line-height: 1.4; margin: 0 0 0.12rem; }
.office-ledger dd { margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--white); min-width: 0; }
.office-ledger dd a { color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(230,238,245,0.45); display: inline-block; padding: 2px 0; }
.office-ledger dd a:hover, .office-ledger dd a:focus-visible { color: var(--pale-blue);
  border-bottom-color: var(--pale-blue); }
.office-ledger dd a.brass { color: var(--brass-text-navy); font-weight: 600;
  border-bottom-color: rgba(186,148,79,0.6); }
.office-ledger dd a.brass:hover, .office-ledger dd a.brass:focus-visible { color: var(--white);
  border-bottom-color: var(--white); }
.office .nowrap { white-space: nowrap; }
@media (max-width: 860px) {
  .office { grid-template-columns: 1fr; gap: 2rem; }
  .office-card { border-left: 0; border-top: 1px solid rgba(176,138,69,0.55);
    padding: 1.5rem 0 0; }
}

/* ===== FAQ: ROWS AND THE BRASS PLUS ========================================
   Update 7 row 12, and update 5, approved in ROUND 1 and never built. The page
   was still white boxes with a rounded corner, a drop shadow and the browser's
   default grey triangle. Now: hairline rows, no box, and a brass + that turns
   into an x when the answer opens.

   Hairlines are --pale-blue, not Genie's rgba grey, per her 2026-09-23 ruling.

   The .faq-a1 span is the first sentence of the answer, shown under the question
   while it is closed. It is styled here and deliberately left empty until she has
   approved all 43 sentences. .faq-more holds the rest.
   ========================================================================== */
details.faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pale-blue);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
details.faq-item:last-of-type { border-bottom: 1px solid var(--pale-blue); }
details.faq-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 2rem;
  gap: 0.45rem 1rem;
  padding: 1.05rem 0;
  align-items: start;
  color: var(--ink-navy);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1;
  font-family: 'Public Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted-brass);
  justify-self: end;
  transition: transform 0.2s ease;
}
details.faq-item[open] summary::after { transform: rotate(45deg); }
details.faq-item[open] summary { color: var(--ink-navy); }
details.faq-item summary h3 { grid-column: 1; grid-row: 1; }
.faq-a1 { grid-column: 1; grid-row: 2; font-weight: 400; color: var(--charcoal);
  font-size: 0.96rem; line-height: 1.55; }
.faq-more { padding: 0 0 1.05rem; max-width: 62ch; }
.faq-more p { margin: 0 0 0.75rem; }
.faq-more p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  details.faq-item summary::after { transition: none; }
}

/* Her ruling 2026-09-25: five answers are one sentence long, so they show whole and
   carry no plus. A plus that opens to nothing teaches a reader not to trust the
   other 38. The summary keeps its grid so the text still lines up with the rest. */
.faq-item--nomore summary { cursor: default; }
.faq-item--nomore summary::after { content: none; }








/* ===== ROUND 11, Marissa's markup of 2026-09-27 ===========================
   Sticky numbers below are her comment numbers in
   Website_Round10_FullSiteReview_2026-09-27.pdf.
   ========================================================================= */

/* Stickies 4, 10, 34 and 52: "Make this the same font size as the other lede text
   and give it the same text box width, as well." Every paragraph in a hero now takes
   the lede's size and measure. The one exception is the manual review date, which is
   a small print stamp by design and carries Mark's never-automate condition. */
.hero p,
.hero p.lede-note,
.hero p.proof-note { font-size: 1.22rem; line-height: 1.55; max-width: 44.2rem; }
.hero p.reviewed { font-size: 0.85rem; }

/* Sticky 12: "Fix the alignment and width of all text boxes in this section to match."
   The two media-row text columns are 1.5 of 2.5 columns wide. The trailing prose block
   was full width, so it was the odd one out. Same measure now, same left edge as row 1.
   NOTE TO HER: the photograph still alternates side, so row 2's text still starts
   further right. Say the word and the photo stops alternating. */
/* mark 3, round 12: the two closing paragraphs run the full width, they share no row with a photo. */
.media-row-tail { max-width: none; }

/* Stickies 13 and 14: "We already ruled out the use of bullet points." The career
   timeline and the standards list both carried brass dots. They become the site's
   approved hairline rows, which is what every other list already uses. */
.timeline li,
.brass-list li {
  border-left: 0;
  border-top: 1px solid var(--pale-blue);
  margin-left: 0;
  padding: 1rem 0 1.1rem;
}
.timeline li::before,
.brass-list li::before { content: none; }
.timeline li:last-child { padding-bottom: 1.1rem; }

/* Sticky 58, her answer on the three dotted lists: do the copy change and the style
   change together. Same hairline rows, used inline in body copy. */
.ruled-rows { list-style: none; margin: 1.2rem 0; padding: 0; }
.ruled-rows li {
  border-top: 1px solid var(--pale-blue);
  padding: 0.85rem 0 0.9rem;
  margin: 0;
}
.ruled-rows li:last-child { border-bottom: 1px solid var(--pale-blue); }

/* Stickies 43, 47 and 59: "use the same design format as how the boroughs are laid out
   on the homepage." The home strip is one ruled line, centred, names separated by small
   brass dots. The Courts borough nav and the FAQ topic nav now match it exactly. The
   hairlines are pale blue here because these sit on a light background, not on navy. */
.jump-b .jump-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 0.9rem 0;
}
.jump-b .jump-row li { position: relative; }
.jump-b .jump-row li + li { border-left: 0; }
.jump-b .jump-row li + li::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--muted-brass);
}
.jump-b .jump-row a {
  display: inline-block;
  padding: 0.2rem 1.1rem;
  border-left: 0;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.jump-b .jump-row a:hover,
.jump-b .jump-row a:focus-visible {
  background: transparent;
  border-left-color: transparent;
  color: var(--ink-navy);
}
@media (max-width: 720px) {
  .jump-b .jump-row { display: block; padding: 0; }
  .jump-b .jump-row li + li::before { display: none; }
  .jump-b .jump-row a { text-align: left; padding: 0.8rem 0 0.75rem; }
}

/* Sticky 48: "Sentence case, not all caps." This eyebrow is a whole sentence, so it
   is the one that stops being set in capitals. Every other eyebrow is a short label
   and keeps the treatment. */
.kicker--sentence { text-transform: none; letter-spacing: 0.01em; }

/* Stickies 36 and 39: "Is there a reason why this text box is so narrow? shouldn't it
   extend further right on a desktop version?" The Filing page capped every paragraph at
   72 characters while its headings ran the full container. The introductions now run the
   container width, matching every other page. Checklist and caveat text keeps its
   measure, because a short line is what makes a checklist scannable. */
.prose > .container > p { max-width: none; }

/* Sticky 44: the county moves below the borough name and joins the line that explains
   how it is written, with a colon. One brass bar per borough now, not two stacked. */
.county-label { font-weight: 600; color: var(--civic-blue); }

/* Sticky 45: each courthouse address links to Google Maps. */
.court-address a.map-link { display: block; color: var(--civic-blue);
  text-decoration: underline; text-decoration-color: var(--muted-brass);
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.court-address a.map-link:hover { color: var(--ink-navy); text-decoration-color: var(--civic-blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sticky 53: "the formatting should be consistent across all 3 columns." Equal column
   widths, headings share one height so every body starts on the same line, and the
   links sit on one baseline at the foot of each column. Heading SIZE is untouched,
   which is her appendix answer 9. */
@media (min-width: 901px) {
  .doi-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .doi-card-grid .card { display: flex; flex-direction: column; height: 100%; }
  .doi-card-grid .card h2 { min-height: 2.9em; margin-bottom: 0.9rem; }
  /* 2.9em, not 2.5em. Measured at 1400 with fonts loaded: the two line heading
     "NYC Marshals Handbook" is 97px against a 34.4px type size, so 2.5em fell 11px
     short and its body started lower than the other two. */
  .doi-card-grid .card .btn { margin-top: auto; align-self: flex-start; }
}


/* ===== ROUND 12, Marissa's markup of 2026-10-02 ============================
   Mark numbers are her comment numbers in Website_Round11_YourMarkupBuilt_2026-09-27.pdf.
   ========================================================================= */

/* Mark 4: "Current office is supposed to have a brass vertical bar next to it, not touching
   the text." The career timeline gets a brass rail down its left edge. No dots, which stays
   ruled out. The rail sits 1.5rem clear of the words. */
.timeline li {
  border-top: 0;
  border-left: 3px solid var(--muted-brass);
  margin-left: 0.4rem;
  padding: 0 0 1.6rem 1.5rem;
}
.timeline li:last-child { padding-bottom: 0.4rem; }

/* Mark 5: "The numbers on the timeline for each matter type got completely screwed up."
   They were. The 01 02 03 format went in on 27 September and the 2.15rem circles were drawn
   for one digit, so the second digit clipped on every step. The rail numbers now use the
   same plain large number the process steps use everywhere else on the site, which is the
   format her ruling asked them to match in the first place. */
.clock-rail .step {
  width: auto; height: auto; min-width: 2.4rem;
  background: transparent; border-radius: 0;
  color: var(--civic-blue);
  font-size: 1.25rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  display: block; white-space: nowrap;   /* the 0 and the digit are one run of text, no flex gap */
  top: 0.05rem; left: -3.6rem;
}
.clock-rail::before { left: 0; }
@media (max-width: 640px) {
  .clock-rail .step { width: auto; height: auto; font-size: 1.05rem; left: -3rem; }
  .clock-rail::before { left: 0; }
}

/* Mark 7: "All answers should have the same text box width and should cover as much of the
   margins within the page as the default to match. This feedback should be applied to the
   entire site unless otherwise noted." Every body text box runs the container width. The
   one noted exception is the hero, where she asked for the lede measure on 27 September. */
.faq-more, .prose p, .caveat, .check-list, .key-list, .court-rows, .rows, ol.clock,
.clock-rail, .also, .panes-empty, .cta-band p, .borough-band p, p.form-warning { max-width: none; }


/* ===== ROUND 13, site search, Marissa's pick 2026-10-03 ========================
   Her words: "option B. DOI needs to remain DOI Resources so adjust the spacing and
   font size a hair so everything fits and doesn't bleed." Then: "change the space
   between the words slightly. Not the letters. And ever so slightly decrease the font
   size." So: the gap between menu items comes in, letter-spacing is untouched, type
   drops 4 percent. Measured before: 11px spare at desktop (lockup 335, links plus gaps
   710, container 1072). The icon plus its gap needs about 58px. Every number below is
   from a render after document.fonts.ready.
   ========================================================================== */
nav.main-nav { gap: 0.8rem; }
nav.main-nav a { font-size: 0.96rem; }
.site-header nav.main-nav .btn-primary { padding-left: 1.1rem; padding-right: 1.1rem; }
nav.main-nav a.nav-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: -10px -11px;   /* her 2026-10-04 ruling: the glyph sits the same 13px from its neighbours as any two headings; the 44px tap target overlaps the gaps instead of widening them */
  border-bottom: 2px solid transparent; color: var(--civic-blue);
}
nav.main-nav a.nav-search:hover { color: var(--ink-navy); }
nav.main-nav a.nav-search.active { border-bottom-color: var(--muted-brass); }
/* Footer contact links read as links (Marissa's device check, 2026-10-04): the phone, the email
   and the Privacy Policy carry the site's brass underline at rest, white on hover. The Quick
   Links column is a menu and stays plain. */
footer.site-footer .footer-lines a, footer.site-footer .footer-bottom a {
  color: var(--white); text-decoration: underline; text-decoration-color: var(--muted-brass);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
footer.site-footer .footer-lines a:hover, footer.site-footer .footer-bottom a:hover { text-decoration-color: var(--white); }
@media (max-width: 1180px) {
  /* inside the open phone menu the icon becomes a full width row like the other links */
  nav.main-nav a.nav-search { width: auto; height: auto; margin: 0; justify-content: flex-start; gap: 0.6rem; }
  nav.main-nav a.nav-search::after { content: "Search this site"; font-size: 0.96rem; font-weight: 600; }
}
/* The 320px overflow, found while the header was open: the lockup is a fixed 335px and
   a 320px phone is 320px. Below 360px the two lockup lines may wrap and the name steps
   down one size, so nothing runs off the right edge. */
@media (max-width: 360px) {
  /* the lockup may shrink here, which is the one place it may: the 27 September rule
     (flex 0 0 auto) exists to stop the DESKTOP menu crushing it, and below 360px there
     is no desktop menu. The NYC mark steps to 100px, above its 48px minimum. */
  .site-header .wordmark { flex: 1 1 auto; min-width: 0; }
  .site-header .wordmark-text { min-width: 0; }
  .site-header .wordmark span { white-space: normal; }
  .site-header .wordmark-logo img { width: 100px; height: auto; }
  .site-header .wordmark .site-name { font-size: 1rem; line-height: 1.15; }
  .site-header .wordmark-text span:last-child { font-size: 0.7rem; }
}

/* A search result links to /faq#<question-id>. Where the browser supports it the answer
   opens on arrival; elsewhere the page scrolls to the question and one tap opens it. */
details.faq-item:target::details-content { content-visibility: visible; display: block; }
details.faq-item:target > summary { color: var(--ink-navy); }
/* Search page */
.search-form { display: flex; max-width: 44.2rem; margin: 0 0 1.6rem; }
.search-form input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 1rem; font: 500 1.05rem/1 'Public Sans', Arial, sans-serif;
  color: var(--ink-navy); background: var(--white); border: 1px solid var(--civic-blue); border-right: 0; border-radius: 4px 0 0 4px; -webkit-appearance: none; appearance: none; }
.search-form button { height: 52px; padding: 0 1.35rem; font: 600 1rem/1 'Public Sans', Arial, sans-serif; color: var(--white);
  background: var(--civic-blue); border: 1px solid var(--civic-blue); border-radius: 0 4px 4px 0; cursor: pointer; }
.search-form button:hover { background: var(--ink-navy); border-color: var(--ink-navy); }
.search-note { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.82rem; color: var(--civic-blue); margin: -1rem 0 1rem; }
.search-summary { font-family: 'Public Sans', Arial, sans-serif; font-size: 0.9rem; color: var(--civic-blue); margin: 0 0 1rem; min-height: 1.4em; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results > li { border-top: 1px solid var(--pale-blue); padding: 1.1rem 0 1.2rem; }
.search-results > li:last-child { border-bottom: 1px solid var(--pale-blue); }
.search-results .sr-section { display: block; font: 600 0.72rem/1.4 'Public Sans', Arial, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-text); margin-bottom: 0.25rem; }
.search-results a.search-result { font: 600 1.12rem/1.3 'Public Sans', Arial, sans-serif; color: var(--civic-blue); text-decoration: none; }
.search-results a.search-result:hover { color: var(--ink-navy); text-decoration: underline; text-decoration-color: var(--muted-brass); }
.search-results .sr-excerpt { margin: 0.4rem 0 0; color: var(--ink-navy); }
.search-results .sr-excerpt mark { background: rgba(176,138,69,0.25); color: inherit; padding: 0 0.1em; }
.search-results .sr-subs { list-style: none; margin: 0.6rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--pale-blue); }
.search-results .sr-subs li { margin: 0.3rem 0; }
.search-results .sr-subs a { font: 500 0.95rem/1.4 'Public Sans', Arial, sans-serif; color: var(--civic-blue); }
.search-none { border-top: 1px solid var(--pale-blue); padding: 1.1rem 0; }
.search-index h2 { margin-top: 2.2rem; }
.search-index ul { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.search-index li { border-top: 1px solid var(--pale-blue); padding: 0.6rem 0; }
.search-index li:last-child { border-bottom: 1px solid var(--pale-blue); }
.js .search-index { display: none; }           /* the plain list is the no script path; with script it steps aside */
.js .search-index.show { display: block; }