/* ==========================================================================
   Melly's Compliance (compliance.mellysrecycling.com)
   Sibling of mellysrecycling.com: same tokens, buttons, header/footer, torn edges, forms.
   Differences by the compliance brief: display type is Anton (Brooklyn first if installed).
   ========================================================================== */

@font-face {
  font-family: "Oswald";      /* only for the start plaque and the continue cue, matching mellysrecycling.com */
  src: url("../assets/fonts/oswald-latin-wght-normal.woff2") format("woff2-variations"),
       url("../assets/fonts/oswald-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Courier Prime (typed labels) and Playfair Display (the News & dates nameplate), OFL, self-hosted */
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../assets/fonts/courier-prime-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  /* Color: the brand five, nothing else */
  --red: #E9210B;
  --cream: #F6DEB9;
  --ink: #1A1A1A;
  --green: #465D41;
  --gold: #C8A04E;

  /* Interaction shades, mixed from the five (darken, never lighten) */
  --red-press: color-mix(in srgb, var(--red) 82%, var(--ink));
  --cream-shade: color-mix(in srgb, var(--cream) 86%, var(--gold));
  --paper: color-mix(in srgb, var(--cream) 55%, #fff);

  /* Type: Anton has one weight; never let the browser fake bold */
  --font-display: "Brooklyn", "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: Georgia, "Times New Roman", serif;
  --track-label: 0.1em;
  --track-eyebrow: 0.18em;
  --font-oswald: "Oswald", "Arial Narrow", sans-serif;
  --font-type: "Courier Prime", "Courier New", monospace;          /* typed file labels */
  --font-news: "Playfair Display", Georgia, "Times New Roman", serif;   /* the News & dates nameplate + headlines */
  --track-eyebrow-oswald: 0.22em;   /* mellysrecycling.com's --track-eyebrow */

  /* Edges: square, inked, printed */
  --radius: 2px;
  --line: 2px;
  --line-heavy: 3px;
  --shadow-print: 4px 4px 0 var(--ink);
  --shadow-print-lg: 6px 6px 0 var(--ink);

  /* Motion: short and mechanical (the pins' small bounce is the one exception) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mech: cubic-bezier(0.2, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 220ms;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { background: var(--cream); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  padding: 8px 12px;
  background: var(--cream); color: var(--ink);
  border: var(--line) solid var(--ink); box-shadow: var(--shadow-print);
  font: 400 14px/1 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--t-med) var(--ease-mech);
}
.skip:focus { transform: none; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.eyebrow, .h1, .h2, .h3, .h4, .btn, .nav__links a, .facts__title, .facts dt, .status, .site-footer h2,
.site-footer__motto, .site-footer__base, .field > label, .field legend, .chip span, .ph, .crumbs, .j-link, .law-group__title,
.finder__label, .statement, .step__num, .card__num {
  font-synthesis: none;
}
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--green { background: var(--green); color: var(--cream); }

.eyebrow {
  margin: 0 0 14px;
  color: var(--red);
  font: 400 14px/1.2 var(--font-display);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
.section--ink .eyebrow { color: var(--gold); }
.section--green .eyebrow { color: var(--cream); }
.h1, .h2, .h3, .h4 { margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; text-wrap: balance; }
.h1 { font-size: clamp(40px, 5.8vw, 78px); line-height: 0.98; letter-spacing: 0.015em; }
.h2 { font-size: clamp(30px, 3.9vw, 52px); line-height: 1; letter-spacing: 0.02em; }
.h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.08; letter-spacing: 0.035em; }
.h4 { font-size: 18px; line-height: 1.15; letter-spacing: 0.05em; }
.lede { margin: 18px 0 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 36em; }
.lede p { margin: 0 0 10px; }
.muted { opacity: 0.78; }
.small { font-size: 15px; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head .lede { margin-top: 14px; }
/* placeholder marker: visible in drafts so nothing ships unnoticed */
.ph {
  font-family: var(--font-display); font-size: 0.78em; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--red); overflow-wrap: anywhere;
}
.section--ink .ph, .section--green .ph, .cta-band .ph { color: var(--gold); }
.statement { font: 400 clamp(28px, 4.2vw, 58px)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; text-wrap: balance; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font: 400 15px/1.1 var(--font-display);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-mech), transform var(--t-fast) var(--ease-mech), box-shadow var(--t-fast) var(--ease-mech);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary {
  background: var(--red); color: var(--cream);
  border: var(--line) solid var(--ink);
  box-shadow: var(--shadow-print);
  /* Red/Cream is 3.43:1: primary labels are set as WCAG "large text" (>= 24px, or 18.66px heavy) */
  font-size: 20px; min-height: 54px; padding-inline: 22px;
}
.btn--primary:hover { background: var(--red-press); }
.btn--primary:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--primary:focus-visible { outline-color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--cream); border: var(--line) solid var(--gold); }
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 80%, var(--gold)); }
.btn--ink:active { transform: translate(2px, 2px); }
.section--ink .btn--ink { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--ink); border: var(--line) solid var(--ink); box-shadow: var(--shadow-print); }
.btn--cream:hover { background: var(--cream-shade); }
.btn--cream:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--ghost { background: transparent; color: inherit; border: var(--line) solid currentColor; }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn--sm { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.btn--primary.btn--sm { font-size: 15px; min-height: 42px; box-shadow: 3px 3px 0 var(--ink); }
.btn--big { font-size: 22px; min-height: 60px; padding-inline: 26px; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; align-items: center; }
.text-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.text-link:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Header (2.1, every page): the logo, MENU beside it; My plan on the right (+ the red button on inner pages).
   Inner pages: the cream bar. The homepage floats it over the scene (css/scene.css).
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  border-bottom: var(--line) solid var(--ink);
}
.site-header__inner { display: flex; align-items: center; gap: 14px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { width: 52px; height: auto; }
.brand__name {
  font: 400 12px/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase;
  border-left: var(--line) solid currentColor; padding-left: 12px; transition: color 300ms ease;
}
.brand__name b { display: block; font-weight: 400; font-size: 17px; letter-spacing: 0.07em; }
/* MENU: Courier Prime caps with a small two-line icon; CLOSE with an X when open */
.menu-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px 8px 12px; flex: none;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 22px; cursor: pointer; text-decoration: none;
  font: 700 13px/1 var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease-mech), color var(--t-fast) var(--ease-mech);
}
@media (hover: hover) { .menu-btn:hover { background: var(--ink); color: var(--cream); } }
.menu-btn__icon { position: relative; width: 16px; height: 10px; flex: none; }
.menu-btn__icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 1px; transition: transform 300ms var(--ease-out), top 300ms var(--ease-out); }
.menu-btn__icon i:first-child { top: 1px; }
.menu-btn__icon i:last-child { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { top: 4px; transform: rotate(-45deg); }
.js .menu-btn--nojs, .no-js button.menu-btn { display: none; }
.site-header__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-header__cta { white-space: nowrap; flex: none; }
@media (max-width: 640px) {
  .site-header__cta { display: none; }   /* phones: the menu's big red link is the way in */
}
@media (max-width: 359px) {
  .brand__name { display: none; }
  .brand img { width: 46px; }
}

/* --------------------------------------------------------------------------
   THE MENU (2.1, src/partials/menu.html, js/site.js): a full-page cream panel over everything; the logo and
   CLOSE stay on top. Big Anton links left (two thirds), the small groups right. One column on phones.
   -------------------------------------------------------------------------- */
.menu {
  display: none; position: fixed; inset: 0; z-index: 1200; overflow: auto; overscroll-behavior: contain;
  background: var(--cream); color: var(--ink);
  padding: calc(var(--header-h) + clamp(16px, 4vh, 48px)) 0 clamp(28px, 5vh, 56px);
}
.menu.is-open, .no-js .menu:target { display: block; }
.menu__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; min-height: 100%; }
.menu__links { margin: 0; padding: 0; list-style: none; }
.menu__links a {
  display: inline-block; padding: 0.04em 0; text-decoration: none; color: var(--ink);
  font: 400 clamp(48px, min(7.2vw, 10.5vh), 104px)/0.98 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; font-synthesis: none;
  transition: color var(--t-fast) var(--ease-mech);
}
.menu__links a.menu__go { color: var(--red); }
.menu__links a:hover, .menu__links a:focus-visible { color: var(--red); }
.menu__links a.menu__go:hover, .menu__links a.menu__go:focus-visible { color: var(--red-press); }
.menu__links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.menu__links a[aria-current="page"]::before { content: "✦ "; font-size: 0.4em; vertical-align: 0.6em; color: var(--red); }
.menu__side { display: grid; gap: 22px; padding-top: 10px; font-size: 16px; }
.menu__label { margin: 0 0 8px; font: 700 12px/1.2 var(--font-type); letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 70%, var(--cream)); }
.menu__group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.menu__group a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.menu__group a:hover { color: var(--red); text-decoration-thickness: 2px; }
.menu__fine { margin: 0; font: italic 400 14px/1.45 var(--font-body); color: color-mix(in srgb, var(--ink) 80%, var(--cream)); }
.menu__copy { font-style: normal; font-family: var(--font-type); font-size: 12px; letter-spacing: 0.06em; }
.menu__nojs-close { display: none; }
.no-js .menu__nojs-close { display: inline-block; font: 700 13px/1 var(--font-type); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
/* open: the panel covers the page; the header sits on top of it, its right side (cart, button) stepped back */
html.is-menu-open { overflow: hidden; }
html.is-menu-open .site-header { z-index: 1250; background: transparent; border-bottom-color: transparent; }
html.is-menu-open .site-header__end { visibility: hidden; }
html.is-menu-open .brand__name { color: var(--ink); }
@media (max-width: 760px) {
  .menu__in { grid-template-columns: 1fr; gap: 34px; }
  .menu__links a { font-size: clamp(40px, 12vw, 56px); }
  .menu__side { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
  .menu__side .menu__fine, .menu__side .menu__nojs-close { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .menu__side { grid-template-columns: 1fr; } }

.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(56px, 7vw, 88px) 28px; }
.site-footer__grid { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.site-footer__mark img { width: min(150px, 100%); height: auto; }
.site-footer h2 { margin: 0 0 14px; color: var(--gold); font: 400 14px/1.2 var(--font-display); letter-spacing: var(--track-eyebrow); text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover, .site-footer .text-link { text-decoration: underline; text-underline-offset: 0.18em; }
.site-footer p { margin: 0 0 10px; }
.site-footer__motto { font: 400 clamp(22px, 2.2vw, 30px)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 18px !important; }
.site-footer__base {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font: 400 13px/1.4 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
}
@media (max-width: 860px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__mark { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Page hero, breadcrumb, quick facts
   -------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; list-style: none; font: 400 13px/1.3 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--red); }
.draft-note {
  display: inline-block; margin: 0 0 22px; padding: 8px 14px;
  border: var(--line) dashed var(--red); border-radius: var(--radius); font-size: 15px;
}
.draft-note b { color: var(--red); }
.law-hero .h1 { max-width: 14em; }
.law-hero__lede { max-width: 40em; }

.facts {
  margin-top: clamp(32px, 4vw, 48px); max-width: 860px;
  background: var(--paper); border: var(--line-heavy) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg);
}
.facts__title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 12px 18px; background: var(--ink); color: var(--cream);
  font: 400 15px/1 var(--font-display); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.facts dl { margin: 0; }
.facts__row { display: grid; grid-template-columns: minmax(130px, 30%) 1fr; gap: 16px; padding: 16px 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); align-items: baseline; }
.facts__row:first-child { border-top: 0; }
.facts dt { font: 400 15px/1.3 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .facts__row { grid-template-columns: 1fr; gap: 4px; } }

.status {
  display: inline-block; padding: 5px 8px 4px; border-radius: var(--radius);
  font: 400 12px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border: var(--line) solid currentColor;
}
.status--active { background: var(--red); color: var(--cream); border-color: var(--red); }
.status--coming { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.status--watching { background: transparent; color: inherit; }
.facts__title .status--watching { color: var(--cream); }

/* --------------------------------------------------------------------------
   Lists: requirements, checklist, sources, jurisdiction links
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.ticks, .checklist { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; font-size: 18px; }
.ticks li, .checklist li { position: relative; padding-left: 40px; }
.ticks li::before { content: "✦"; position: absolute; left: 4px; top: 0; color: var(--red); }
.section--ink .ticks li::before { color: var(--gold); }
.ticks--num { counter-reset: req; }
.ticks--num li::before {
  counter-increment: req; content: counter(req); left: 0; top: 1px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--red); color: var(--cream); border-radius: var(--radius);
  font: 400 15px/1 var(--font-display);
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px;
  border: var(--line) solid currentColor; border-radius: var(--radius);
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23C8A04E' stroke-width='2.6'/%3E%3C/svg%3E");
}
.sources { margin: 18px 0; padding-left: 20px; display: grid; gap: 8px; }

.j-links { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.j-link {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print);
  font: 400 20px/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform var(--t-fast) var(--ease-mech), box-shadow var(--t-fast) var(--ease-mech), background-color var(--t-fast) var(--ease-mech);
}
.j-link:hover { background: var(--cream-shade); }
.j-link:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.j-link__name { flex: 1; min-width: 0; }
.j-link__kind { font-size: 12px; letter-spacing: 0.14em; opacity: 0.7; }
.j-link__go { color: var(--red); font-size: 22px; }
.j-link--city .j-link__name { font-size: 18px; }
.law-group + .law-group { margin-top: clamp(40px, 5vw, 64px); }
.law-group__title { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 clamp(26px, 3vw, 38px)/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.law-group__count { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; background: var(--ink); color: var(--cream); font-size: 17px; border-radius: var(--radius); }
.law-group [hidden] { display: none; }
.no-results { margin-top: 24px; font-size: 18px; }

/* --------------------------------------------------------------------------
   Cards, steps, FAQ, CTA band
   -------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 24px; background: var(--cream); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print);
}
.section--ink .card { box-shadow: 4px 4px 0 var(--gold); }
.card p { margin: 0; }
.card__num { font: 400 34px/1 var(--font-display); color: var(--red); letter-spacing: 0.02em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: var(--line-heavy) solid currentColor; }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: var(--red); color: var(--cream); border: var(--line) solid var(--ink);
  font: 400 22px/1 var(--font-display); border-radius: var(--radius);
}
.step p { margin: 0; }

.faq { border-top: var(--line) solid var(--ink); max-width: 860px; }
.faq details { border-bottom: var(--line) solid var(--ink); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 400 clamp(19px, 1.7vw, 23px)/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: var(--line) solid var(--ink); border-radius: var(--radius); font-size: 20px;
  transition: transform var(--t-med) var(--ease-mech), background-color var(--t-fast) var(--ease-mech);
}
.faq details[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--cream); }
.faq summary:hover::after { background: var(--cream-shade); }
.faq details[open] summary:hover::after { background: var(--ink); }
.faq .faq__a { padding: 0 0 24px; max-width: 64ch; }
.faq .faq__a p { margin: 0 0 12px; }

.cta-band { background: var(--red); color: var(--cream); padding-block: clamp(56px, 7vw, 96px); }
.cta-band__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cta-band .eyebrow { color: var(--cream); }
.cta-band p { margin: 14px 0 0; max-width: 40ch; font-size: 19px; }
.cta-band__actions { display: grid; gap: 14px; justify-items: start; }
.cta-band .contact-line { font: 400 15px/1.5 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.cta-band .contact-line a { color: var(--cream); }
@media (max-width: 860px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* Outline placeholder sections (Ethan's homepage copy goes here) */
.outline-tag {
  display: inline-block; margin: 0 0 16px; padding: 6px 10px;
  border: var(--line) dashed var(--red); color: var(--red); border-radius: var(--radius);
  font: 400 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase;
}
.section--ink .outline-tag { color: var(--gold); border-color: var(--gold); }

/* --------------------------------------------------------------------------
   Forms (validation + delivery in js/forms.js)
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--cream); color: var(--ink);
  border: var(--line-heavy) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg);
  padding: clamp(22px, 3.4vw, 40px);
}
.form-card__head { margin-bottom: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; } }
.field { display: grid; gap: 7px; align-content: start; }
.field > label, .field legend { font: 400 15px/1.2 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; padding: 0; }
.field .req { color: var(--red); }
.field .field__hint { font-size: 15px; opacity: 0.8; margin: -2px 0 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 13px;
  font: 17px/1.3 var(--font-body); color: var(--ink);
  background: var(--paper);
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--ink) 50%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--red); border-width: 3px; }
.field__error { display: none; margin: 0; font-size: 15px; font-weight: 700; }
.field__error::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; background: var(--red); vertical-align: 1px; }
.field.has-error .field__error { display: block; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: var(--line) solid var(--ink); border-radius: var(--radius); cursor: pointer;
  font: 400 15px/1 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color var(--t-fast) var(--ease-mech);
}
.chip span:hover { background: var(--cream-shade); }
.chip input:checked + span { background: var(--ink); color: var(--cream); }
.chip input:checked + span::before { content: "✓"; margin-right: 8px; color: var(--gold); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.has-error .chip span { border-color: var(--red); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.form-note { font-size: 15px; margin: 0; max-width: 46ch; }
.form-status { display: block; color: var(--red); font-weight: 700; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-summary {
  display: none; margin-bottom: 22px; padding: 14px 18px;
  border: var(--line) solid var(--ink); border-left: 8px solid var(--red); border-radius: var(--radius); background: var(--paper);
}
.form-summary.is-visible { display: block; }
.form-summary h3 { margin: 0 0 6px; font: 400 17px/1.2 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.form-summary ul { margin: 0; padding-left: 18px; }
.form-summary a { color: var(--ink); }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.form-success:focus { outline: none; }
.form-success__stamp {
  display: inline-block; padding: 9px 16px 8px; margin: 0 0 18px; rotate: -4deg;
  border: var(--line-heavy) solid var(--red); color: var(--red); border-radius: var(--radius);
  font: 400 20px/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase;
  animation: stamp 320ms cubic-bezier(0.3, 0, 0.4, 1) both;
}
@keyframes stamp { from { scale: 1.6; opacity: 0; } 70% { scale: 0.96; opacity: 1; } to { scale: 1; } }
.form-success ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.form-success li b { font: 400 14px var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; margin-right: 8px; }

/* --------------------------------------------------------------------------
   FIND YOUR STATE search (js/search.js). Without JS it submits to /find-your-law/?q=
   -------------------------------------------------------------------------- */
.finder { position: relative; max-width: 760px; }
.finder__label { display: block; margin: 0 0 10px; font: 400 clamp(26px, 3vw, 40px)/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.finder__box { display: flex; border: var(--line-heavy) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg); background: var(--paper); }
.finder__input {
  flex: 1; min-width: 0; min-height: 64px; padding: 14px 18px;
  font: 22px/1.2 var(--font-body); color: var(--ink); background: transparent; border: 0; border-radius: 0;
  appearance: none;
}
.finder__input:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; }
.finder__input::placeholder { color: color-mix(in srgb, var(--ink) 50%, transparent); }
.finder__go {
  flex: none; padding: 0 22px; border: 0; border-left: var(--line-heavy) solid var(--ink);
  background: var(--red); color: var(--cream); cursor: pointer;
  font: 400 22px/1 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase;
}
.finder__go:hover { background: var(--red-press); }
.finder__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none; max-height: min(380px, 60vh); overflow: auto;
  background: var(--cream); border: var(--line-heavy) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg);
}
.finder__list[hidden] { display: none; }
.finder__opt {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px; cursor: pointer; border-radius: var(--radius);
  font: 400 20px/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
.finder__opt small { margin-left: auto; font-size: 12px; letter-spacing: 0.14em; opacity: 0.7; }
.finder__opt[aria-selected="true"], .finder__opt:hover { background: var(--ink); color: var(--cream); }
.finder__opt[aria-selected="true"] .status--watching, .finder__opt:hover .status--watching { color: var(--cream); }
.finder__empty { padding: 12px; font-size: 17px; }
.section--ink .finder__label { color: var(--cream); }
.section--ink .finder__box { box-shadow: 6px 6px 0 var(--gold); }

/* --------------------------------------------------------------------------
   SECTION EDGES: hand-cut torn paper edges, no rules between sections
   -------------------------------------------------------------------------- */
.page main > :is(section, article, div), .site-footer { position: relative; }
.page main > :is(section, div, article) { background-color: var(--cream); }
.page main > .section--ink { background-color: var(--ink); }
.page main > .section--green { background-color: var(--green); }
.page main > .cta-band { background-color: var(--red); }
.page main > .section--cream { background-color: var(--cream-shade); }
.page main > :is(section, div, article) + :is(section, div)::before,
.site-footer::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0;
  top: calc(-1 * var(--edge-h) + 1px); height: var(--edge-h);
  background-color: inherit;
  -webkit-mask: var(--edge) 0 100% / var(--edge-w) 100% repeat-x;
          mask: var(--edge) 0 100% / var(--edge-w) 100% repeat-x;
  pointer-events: none;
}
:root { --edge: url("/assets/img/edge-a.svg"); --edge-h: 22px; --edge-w: 1200px; }
.page main > :is(section, div):nth-child(even)::before { --edge: url("/assets/img/edge-b.svg"); transform: scaleX(-1); }
.site-footer::before { --edge: url("/assets/img/edge-b.svg"); }
@media (max-width: 640px) { :root { --edge-h: 16px; --edge-w: 760px; } }

/* Reveal on scroll (JS adds .reveal-on; nothing hides without JS) */
.reveal-on [data-reveal] { opacity: 0; translate: 0 18px; transition: opacity 500ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal-on [data-reveal].in { opacity: 1; translate: 0 0; }
.reveal-on [data-reveal].in.done { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .reveal-on [data-reveal] { opacity: 1; translate: none; } }

/* 404 */
.lost { min-height: 60vh; display: grid; align-content: center; }

/* Homepage section 1 + page bits */
.intro__lead { max-width: 22em; }
.intro__finder { margin-top: clamp(32px, 4vw, 52px); }
.fyl__finder { margin-top: 28px; }
.gs-intro .ticks { margin-top: 28px; }
.page-hero .split { align-items: start; }
.form-card .h2 { font-size: clamp(28px, 3.2vw, 42px); }

.cta-band .contact-line a { white-space: nowrap; }
.only-phone { display: none; }
@media (max-width: 767px) { .only-phone { display: inline; } .only-wide { display: none; } }
.form-success, .form-summary { scroll-margin-top: calc(var(--header-h) + 24px); }

/* New pages: hero band, card links, sections */
.band-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.band-hero .lede { max-width: 32em; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards--4 { grid-template-columns: 1fr; } }
.card--link {
  height: 100%; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-mech), box-shadow var(--t-fast) var(--ease-mech), background-color var(--t-fast) var(--ease-mech);
}
.card--link:hover { background: var(--cream-shade); }
.card--link:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.card__go { margin-top: auto; color: var(--red); font: 400 24px/1 var(--font-display); }
.section .h4 { margin-bottom: 4px; }
.section--ink .checklist li::before { border-color: var(--cream); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.faq__more { margin-top: 28px; font-size: 18px; }
.lost__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 18px; }
.site-footer__grid { grid-template-columns: minmax(130px, 180px) 1fr 1fr 1fr 1.2fr; }
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .site-footer__mark { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   1.5 LAW CONTENT: status tags, law pages, the tracker, the map legend
   ========================================================================== */
/* status tags (wording from the data: STATEWIDE LAW / STARTS 2030 / GOALS + NARROW RULES / CITY RULES ONLY / WATCHING;
   cities: IN EFFECT / ENFORCEMENT PAUSED / COMING / PENDING) */
.status--active, .status--in-effect { background: var(--red); color: var(--cream); border-color: var(--red); }
.status--enacted, .status--coming { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.status--partial, .status--pending { background: transparent; color: inherit; border-color: currentColor; border-style: dashed; }
.status--local { background: var(--cream); color: var(--red); border-color: var(--red); }
.status--paused { background: var(--ink); color: var(--cream); border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.status--paused::before { content: "‖ "; color: var(--red); }
.facts__title .status--partial, .facts__title .status--pending, .facts__title .status--watching { color: var(--cream); }
.law-hero__tag { margin: 0 0 12px; }
.law-hero__tag .status { font-size: 14px; padding: 7px 10px 6px; }

/* Boulder: paused enforcement is the first thing you read */
.paused-note {
  max-width: 760px; margin: 22px 0 6px; padding: 16px 20px 14px;
  background: var(--ink); color: var(--cream); border-left: 10px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow-print);
}
.paused-note__title { margin: 0 0 6px; color: var(--red); font: 400 22px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-synthesis: none; }
.paused-note p:last-child { margin: 0; font-size: 18px; }
.law-hero .facts + .facts { margin-top: 22px; }
.facts-note { max-width: 860px; margin: 16px 0 0; font-size: 17px; }
.disclaimer { margin: 14px 0 0; font: italic 400 14px/1.45 var(--font-body); opacity: 0.85; max-width: 62ch; }
.site-footer__disclaimer { margin: 36px 0 0 !important; font: italic 400 14px/1.45 var(--font-body); opacity: 0.8; }

/* local rules: one card per city page, then the compact "other places" list */
.local-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.local-card {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px;
  background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print);
}
.local-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.local-card__facts { margin: 0; display: grid; gap: 8px; }
.local-card__row dt { font: 400 12px/1.2 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; opacity: 0.8; }
.local-card__row dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; }
.local-card .arrow-link { margin-top: auto; align-self: flex-start; font: 400 15px/1 var(--font-display); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--red); text-decoration: none; border-bottom: var(--line) solid currentColor; padding-bottom: 3px; }
.others__title { margin: 36px 0 12px; }
.others { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.others li { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(120px, 0.8fr) 2fr; gap: 6px 18px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); font-size: 15px; }
.others__name { font-weight: 700; }
.others__status { font: 400 13px/1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 700px) { .others li { grid-template-columns: 1fr; } }

/* what's changing: a small dated timeline */
.changing__note { margin-bottom: 18px; }
.timeline { list-style: none; margin: 0; padding: 0; max-width: 860px; border-left: 3px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 10px 0 10px 18px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--red); border: 2px solid var(--ink); }
.timeline__date { font: 400 16px/1.3 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.timeline__date--open { opacity: 0.7; }
.timeline__what { font-size: 17px; }
.timeline__what b { font-weight: 700; margin-right: 6px; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* /find-your-law tracker */
.tracker-hero__checked { margin-top: 10px; font-weight: 700; }
.tiles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; max-width: 980px; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.tile {
  display: grid; gap: 4px; width: 100%; height: 100%; padding: 14px 14px 12px; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print);
  transition: transform var(--t-fast) var(--ease-mech), box-shadow var(--t-fast) var(--ease-mech), background-color var(--t-fast) var(--ease-mech);
}
.tile:hover { background: var(--cream-shade); }
.tile:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.tile[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.tile__n { font: 400 40px/1 var(--font-display); font-synthesis: none; color: var(--red); }
.tile[aria-pressed="true"] .tile__n { color: var(--gold); }
.tile__label { font: 400 14px/1.15 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; font-synthesis: none; }
.fyl__finder { margin-top: 28px; max-width: 520px; }
.law-rows { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px 18px; }
.law-row--linked .j-link { min-height: 56px; }
.law-row__cities { margin: 6px 2px 0; font-size: 15px; }
.law-row--plain { display: grid; gap: 2px; padding: 10px 14px; border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: var(--radius); }
.law-row__name { font: 400 18px/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; font-synthesis: none; }
.law-row__none { font-size: 15px; }
.law-row__note { font-size: 14px; font-style: italic; opacity: 0.85; }
.law-group[hidden], .law-rows li[hidden] { display: none; }

/* search: a state with no mandate */
.finder__none { padding: 12px; font-size: 16px; line-height: 1.45; }
.finder__none a { display: inline-block; margin-top: 8px; color: var(--red); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.finder__opt--none small { opacity: 0.85; }

/* ==========================================================================
   1.6 READ THE OFFICIAL RULES: a button near the top of every At a glance panel
   ========================================================================== */
.facts__official { margin: 0; padding: 18px 18px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.btn-official {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px 9px;
  background: var(--red); color: var(--cream); text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--ink);
  font: 400 16px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; font-synthesis: none;
  transition: translate var(--t-fast) var(--ease-mech), box-shadow var(--t-fast) var(--ease-mech);
}
.btn-official:hover { translate: 0 -2px; box-shadow: 4px 5px 0 var(--ink); }
.btn-official:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.btn-official:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* Durango: no official page yet, so the link is a news report and looks like one (cream, not red) */
.facts__official--news .btn-official { background: var(--cream); color: var(--ink); }
.facts__official-note { font-style: italic; }

/* ==========================================================================
   NEWS & DATES (/news; 1.11: one timeline, built like docs/news-dates-mock.html). Cream site paper, the full
   content width; the only newspaper touch is the nameplate (Playfair Display over a thin double rule).
   ========================================================================== */
.page--news main { background: var(--cream); }
.page--news main > .nd::before, .page--news main > .nd > section::before { display: none; }
.nd-top { padding-block: clamp(32px, 5vw, 56px) 18px; }
.nd-plate__name { margin: 0; font: 900 clamp(48px, 8vw, 104px)/0.95 var(--font-news); letter-spacing: -0.01em; font-synthesis: none; }
.nd-plate__name a { color: inherit; text-decoration: none; }
.nd-plate__rule { height: 7px; margin: 14px 0 12px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.nd--story .nd-plate__name { font-size: clamp(30px, 5vw, 44px); }
.nd-dateline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font: 700 13px/1.3 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; }
.nd-dateline span:first-child { font: 400 18px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
/* the one control */
.nd-filter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; padding-block: 18px 6px; }
.nd-filter__label { display: block; margin-bottom: 8px; font: 400 16px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.nd-filter__input { width: 100%; max-width: 560px; min-height: 50px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; font: 18px/1.2 var(--font-body); }
.nd-filter__input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.nd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nd-chips[hidden] { display: none; }
.nd-chip { min-height: 36px; padding: 7px 10px 6px; background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); font: 700 12px/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.nd-chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.nd-chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.nd-showing { margin: 0; font-size: 16px; color: var(--muted); }
.nd-showing button { min-height: 32px; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.nd-showing button:hover { color: var(--red); }
/* the timeline: date column, rail with a dot per item, the entry */
.nd-tl { padding-block: 10px 30px; }
.nd-bucket { display: grid; grid-template-columns: 170px 28px minmax(0, 1fr); }
.nd-bucket[hidden] { display: none; }
.nd-bucket__label { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 30px 0 6px; font: 400 clamp(22px, 2.6vw, 30px)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.nd-bucket__label[hidden] { display: none; }
.nd-bucket__label small { font: 700 12px/1 var(--font-type); letter-spacing: 0.1em; color: var(--muted); }
.nd-bucket__label::after { content: ""; flex: 1; border-top: 2px solid var(--ink); }
.nd-today { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; margin: 14px 0 4px; }
@supports not (grid-template-columns: subgrid) { .nd-today { display: flex; gap: 12px; } }
.nd-today b { grid-column: 1; justify-self: end; padding-right: 12px; font: 700 12px/1.2 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.nd-today i { grid-column: 2; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); }
.nd-item { display: contents; }
.nd-item[hidden] { display: none; }
.nd-when { grid-column: 1; padding: 22px 12px 22px 0; text-align: right; }
.nd-when .m { display: block; font: 700 13px/1 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.nd-when .d { display: block; font: 900 clamp(40px, 4.6vw, 56px)/0.95 var(--font-news); font-synthesis: none; }
.nd-when .y { display: block; margin-top: 4px; font: 700 13px/1 var(--font-type); letter-spacing: 0.1em; color: var(--muted); }
.nd-when .est { display: block; font: 700 13px/1.25 var(--font-type); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.nd-rail { grid-column: 2; position: relative; }
.nd-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--ink); translate: -1px 0; }
.nd-rail::after { content: ""; position: absolute; left: 50%; top: 30px; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); }
.nd-item--soon .nd-rail::after { background: var(--red); }
.nd-bucket--radar .nd-rail::before { border-left-style: dashed; }
.nd-body { grid-column: 3; min-width: 0; padding: 20px 0 22px 14px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.nd-item--soon .nd-body { margin: 10px 0 14px 14px; padding: 18px 20px 20px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.nd-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 12px/1 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; }
.nd-count { padding: 4px 7px 3px; background: var(--red); color: var(--cream); }
.nd-yours { padding: 4px 7px 3px; background: var(--ink); color: var(--cream); }
.nd-yours[hidden] { display: none; }
.nd-body h3 { margin: 8px 0 4px; font: 700 clamp(21px, 2.2vw, 27px)/1.15 var(--font-news); text-wrap: balance; font-synthesis: none; }
.nd-body h3 a { color: inherit; }
.nd-body p { margin: 0; max-width: 62ch; }
.nd-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 16px; }
.nd-links a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.nd-links a:hover { color: var(--red); }
.nd-links .story { font-weight: 700; }
.nd-empty { margin: 18px 0; font-size: 17px; color: var(--muted); }
@media (max-width: 760px) {
  .nd-filter { grid-template-columns: 1fr; }
  .nd-bucket { grid-template-columns: 74px 22px minmax(0, 1fr); }
  .nd-when { padding-right: 8px; }
  .nd-when .d { font-size: 34px; }
  .nd-when .est { font-size: 11px; overflow-wrap: anywhere; }
  .nd-today b { font-size: 10px; padding-right: 6px; }
  .nd-item--soon .nd-body { margin-left: 8px; padding: 14px; }
}
/* the sign-up */
.nd-alerts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 18px 32px; margin-block: 20px 24px; padding: clamp(20px, 3vw, 32px); background: var(--paper); border: var(--line) solid var(--ink); box-shadow: var(--shadow-print-lg); }
.nd-alerts__title { margin: 0 0 6px; font: 700 clamp(24px, 2.8vw, 32px)/1.1 var(--font-news); font-synthesis: none; }
.nd-alerts p { margin: 0; }
@media (max-width: 760px) { .nd-alerts { grid-template-columns: 1fr; } }
.nd-form { display: grid; gap: 16px; }
.nd-field { display: grid; gap: 6px; }
.nd-field > label { font-weight: 700; }
.nd-field input[type="email"], .nd-chipbox { min-height: 52px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: #fff; font: 400 18px/1 var(--font-body); }
.nd-field input[type="email"] { padding: 0 14px; }
.nd-field input[aria-invalid="true"] { border-color: var(--red); }
.nd-chipbox { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
.nd-chipbox:focus-within, .nd-field input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.nd-chipbox input { flex: 1 1 180px; min-height: 40px; border: 0; outline: none; font: inherit; background: transparent; }
.nd-pchips { display: contents; list-style: none; margin: 0; padding: 0; }
.nd-pchip { display: inline-flex; align-items: center; gap: 2px; padding-left: 10px; background: var(--cream); border: 1px solid var(--ink); border-radius: 999px; font-size: 15px; }
.nd-pchip button { width: 34px; height: 34px; border: 0; background: none; font: 400 20px/1 var(--font-body); cursor: pointer; }
.nd-pchip button:hover { color: var(--red); }
.nd-err { min-height: 0; margin: 0; color: #B3180A; font-weight: 700; }
.nd-err:empty { display: none; }
.nd-status { margin: 0; }
.nd-status:empty { display: none; }
.nd-form .btn { justify-self: start; }
.nd-thanks { padding: 6px 0; }
.nd-thanks:focus { outline: none; }
.nd-thanks__title { margin: 0 0 6px; font: 400 28px/1 var(--font-display); text-transform: uppercase; }
.page--news .disclaimer { margin: 20px 0 48px; }
/* story pages: one column, ~680px (the type label and place tags) */
.nd-type { display: inline-block; padding: 3px 7px 2px; border: 1px solid var(--ink); border-radius: 2px; font: 700 11px/1 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; }
.nd-type--new-law { background: var(--ink); color: var(--cream); }
.nd-tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nd-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px 3px; color: var(--ink); border: 1px solid rgb(26 26 26 / 0.55); border-radius: 2px; text-decoration: none; font: 700 12px/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; }
.nd-tag:hover { background: var(--ink); color: var(--cream); }
.nd--story { max-width: 712px; margin: 0 auto; padding: clamp(40px, 7vh, 84px) 16px clamp(48px, 8vh, 96px); }
.nd--story { max-width: 712px; }
.nd--story .crumbs { margin-top: 18px; }
.page--story .story__hl { margin: 18px 0 0; font: 900 clamp(36px, 5vw, 58px)/1.05 var(--font-news); text-transform: none; letter-spacing: -0.01em; font-synthesis: none; }
.story__dateline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; font: 400 14px/1.2 var(--font-type); letter-spacing: 0.04em; text-transform: uppercase; }
.story__dek { margin: 18px 0 0; font: italic 400 clamp(19px, 2vw, 22px)/1.45 var(--font-body); }
.story__body { margin-top: 26px; font-size: 18px; line-height: 1.62; }
.page--story .story__body h2 { margin: 30px 0 8px; font: 700 24px/1.2 var(--font-news); text-transform: none; letter-spacing: 0; }
.page--story .story__body p { margin: 0 0 14px; }
.story__related, .story__sources { margin-top: 34px; }
.story__links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.story__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
@media (max-width: 640px) {
  .nd-when__d { font-size: 40px; }
  .story__actions .btn, .nd-form .btn { width: 100%; justify-content: center; }
}

/* 1.7 hover audit: headings and card titles never underline (they change colour); inline links keep a plain underline */
:is(h1, h2, h3, h4) a { text-decoration: none; }
:is(h1, h2, h3, h4) a:hover { color: var(--red); }
.prose a:not([class]), .lede a:not([class]), .facts a:not([class]), .brief a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* the full list's pointer to News & dates (the dates to watch live there) */
.news-pointer { margin: 28px 0 0; font: 400 18px/1.4 var(--font-body); }

/* ==========================================================================
   FIND YOUR LAW (1.9): "Where do you operate?" One question, one answer card, YOUR CHECK.
   ========================================================================== */
.page--fyl main { background: var(--cream); }
.fyl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1240px; margin: 0 auto; padding: clamp(48px, 10vh, 120px) clamp(16px, 4vw, 48px) clamp(40px, 8vh, 96px); gap: clamp(24px, 4vw, 64px); }
.fyl__ask { width: 100%; max-width: 760px; margin: 0 auto; transition: max-width 400ms var(--ease-mech, ease); }
.fyl__title { margin: 0; font: 400 clamp(46px, 7vw, 96px)/0.95 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; }
.fyl__sub { margin: 14px 0 26px; font-size: clamp(18px, 1.6vw, 22px); }
.fyl__form { position: relative; }
.fyl__box { display: flex; align-items: stretch; background: #fff; border: var(--line-heavy) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg); }
.fyl__box:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.fyl__input { flex: 1; min-width: 0; min-height: 68px; padding: 0 20px; border: 0; background: transparent; font: 400 clamp(20px, 2vw, 26px)/1.2 var(--font-body); color: var(--ink); outline: none; }
.fyl__input::placeholder { color: rgb(26 26 26 / 0.5); }
.fyl__go { width: 68px; border: 0; border-left: var(--line-heavy) solid var(--ink); background: var(--red); color: #fff; font: 400 30px/1 var(--font-body); cursor: pointer; }
.fyl__go:hover { background: var(--red-press); }
.fyl__options { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; margin: 0; padding: 6px 0; list-style: none; background: var(--paper); border: var(--line) solid var(--ink); box-shadow: var(--shadow-print); max-height: 380px; overflow: auto; }
.fyl__opt, .fyl__miss { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px; font-size: 18px; cursor: pointer; }
.fyl__opt small { font: 700 12px/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(26 26 26 / 0.6); }
.fyl__opt[aria-selected="true"], .fyl__opt:hover { background: var(--cream); color: var(--red); }
.fyl__miss { cursor: default; color: rgb(26 26 26 / 0.75); }
.fyl__try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 26px 0 0; }
.fyl__try > span { font: 700 13px/1 var(--font-type); letter-spacing: 0.1em; text-transform: uppercase; }
.fyl__chip { min-height: 44px; padding: 8px 16px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px; font: 400 17px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.fyl__chip:hover { color: var(--red); border-color: var(--red); }
.fyl__chip:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.fyl__note { margin: 22px 0 0; font-size: 15px; color: rgb(26 26 26 / 0.72); }

/* the answer card: paper, a rubber stamp, up to three lines, two actions */
.answer { position: relative; padding: clamp(24px, 3vw, 40px); background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-print-lg); }
.answer:focus { outline: none; }
.answer--miss { font-size: 19px; box-shadow: var(--shadow-print); }
.answer__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.answer__title { margin: 0; font: 400 clamp(34px, 4vw, 54px)/1 var(--font-display); text-transform: uppercase; }
.answer__via { grid-column: 1; margin: 0; font: 700 14px/1.2 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; color: rgb(26 26 26 / 0.65); }
.answer__stamp { grid-column: 2; grid-row: 1 / span 2; width: clamp(190px, 22vw, 300px); rotate: -4deg; margin-top: -6px; }
.stamp-mark { display: block; width: 100%; height: auto; mix-blend-mode: multiply; opacity: 0.94; overflow: visible; }
.answer__none { margin: 22px 0 0; font-size: 19px; line-height: 1.5; }
.answer__note { display: block; margin-top: 8px; font-size: 16px; color: rgb(26 26 26 / 0.75); }
.answer__lines { display: grid; gap: 14px; margin: 24px 0 0; }
.answer__lines div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding-top: 14px; border-top: 1px solid rgb(26 26 26 / 0.18); }
.answer__lines dt { font: 700 13px/1.4 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; }
.answer__lines dd { margin: 0; font-size: 18px; line-height: 1.45; }
.answer__cities { margin-top: 24px; }
.answer__cities p { margin: 0 0 10px; font-weight: 700; }
.answer__cities ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.answer__mark { margin: 26px 0 0; font: 400 14px/1 var(--font-type); color: rgb(26 26 26 / 0.62); }
.answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.answer__add { min-height: 52px; }
.answer__add.is-added, .btn-add.is-added { background: var(--green); border-color: var(--ink); color: #fff; }
.answer__more { font-size: 18px; }
@media (max-width: 640px) {
  .answer__head { grid-template-columns: 1fr; }
  .answer__stamp { grid-column: 1; grid-row: auto; width: min(260px, 80%); margin: 6px 0 0; }
  .answer__lines div { grid-template-columns: 1fr; gap: 4px; }
  .answer__actions .btn { width: 100%; justify-content: center; }
}

/* "Or see every state": the plain grouped list, closed by default (open without JS) */
.fyl-all-wrap { background: var(--cream); }
.fyl-all { border-top: var(--line) solid var(--ink); }
.fyl-all__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 0; font: 400 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; list-style: none; }
.fyl-all__toggle::-webkit-details-marker { display: none; }
.fyl-all__toggle:hover { color: var(--red); }
.fyl-all__toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.fyl-all[open] .fyl-all__toggle span { display: inline-block; rotate: 180deg; }
.fyl-all__body { padding-top: 12px; }

/* "+ Add to my plan" on law pages and the map's pop-ups */
.btn-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: 400 15px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.btn-add:hover { color: var(--red); }
.btn-add:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.btn-add.is-added:hover { color: #fff; }
.facts__official { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.brief__add { margin: 10px 0 0; }
.brief__add .btn-add { width: 100%; }

/* ==========================================================================
   HOW IT WORKS (1.10): three flip cards + Melly's to-do list (js/how.js; copy in src/how-it-works.json).
   Built to match docs/how-it-works-mock.html (approved), on the site's own tokens and fonts.
   ========================================================================== */
.page--how main { background: var(--cream); overflow-x: clip; }
.page--how main > section:not(.hw-end)::before { display: none; }
.hw-hero { padding-block: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 32px); }
.hw-hero .lede { max-width: 46ch; font-size: 20px; }
:root { --line-blue: #9fb3c8; --muted: color-mix(in srgb, var(--ink) 68%, var(--cream)); }

/* the three steps: flip cards (front and back share one grid cell, so they are always the same height) */
.hw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(18px, 2.4vw, 32px); padding-block: 8px 24px; }
@media (max-width: 860px) { .hw-steps { grid-template-columns: minmax(0, 1fr); } }
.hw-step { position: relative; display: grid; perspective: 1400px; }   /* every card the height of the tallest */
.hw-step:focus-within { z-index: 5; }
.hw-step__inner { display: grid; grid-template-columns: minmax(0, 1fr); transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hw-face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 26px 26px 22px; background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-print-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hw-back { transform: rotateY(180deg); }
.hw-step.is-flipped .hw-step__inner { transform: rotateY(180deg); }
.no-js .hw-step__inner { display: grid; gap: 14px; transform: none; }
.no-js .hw-face { grid-area: auto; transform: none; backface-visibility: visible; }
.no-js .hw-hint { display: none; }
.hw-num { margin: 0 0 18px; font: 400 clamp(84px, 9vw, 120px)/0.8 var(--font-display); color: var(--red); }
.hw-who { align-self: flex-start; padding: 6px 9px 5px; border: 1.5px solid var(--ink); background: #fff8ec; font: 700 12px/1 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; rotate: -1.5deg; }
.hw-who--you { background: var(--ink); color: var(--cream); }
.hw-step__title { margin: 14px 0 8px; font: 400 clamp(26px, 2.4vw, 32px)/1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.hw-face p { margin: 0; }
.hw-hint { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 14px 0 0; background: none; border: 0; color: var(--muted); font: 600 12px/1 var(--font-oswald); letter-spacing: 0.16em; text-transform: uppercase; text-align: left; cursor: pointer; }
.hw-hint svg { width: 16px; height: 16px; flex: none; }
.hw-hint:hover { color: var(--red); }
.hw-hint:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.hw-back__title { margin: 0 0 10px; font: 400 22px/1 var(--font-display); text-transform: uppercase; }
.hw-back p + p { margin-top: 10px; }
.hw-small { font-size: 16px; color: var(--muted); }
/* step 1's search (the shared combobox, js/places.js) */
.hw-find { position: relative; margin-top: 16px; }
.hw-find__label { display: block; margin-bottom: 8px; font: 400 15px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.hw-find__row { display: flex; gap: 8px; }
.hw-find__input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 12px; border: 2px solid var(--ink); background: #fff; font: 18px/1.2 var(--font-body); color: var(--ink); }
.hw-find__input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.hw-find__go { flex: none; }
.hw-find__options { top: calc(100% - 28px); }
.hw-find__note { margin-top: 10px !important; min-height: 1.4em; font-size: 15px; color: var(--muted); }
/* the HANDLED stamp on step 3: lands once (scale 1.6 → 1, rotated -8deg) */
.hw-stamp { position: absolute; right: 16px; top: 24px; width: min(190px, 46%); height: auto; rotate: -8deg; mix-blend-mode: multiply; opacity: 0.92; pointer-events: none; }
.hw-stamp.is-waiting { opacity: 0; scale: 1.6; }
.hw-stamp.is-waiting.is-down { animation: hw-stamp 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
@keyframes hw-stamp { 0% { opacity: 0; scale: 1.6; } 60% { opacity: 0.95; scale: 0.96; } 100% { opacity: 0.92; scale: 1; } }

/* WHAT MELLY'S HANDLES: one sheet of lined paper */
.hw-handles { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); scroll-margin-top: calc(var(--header-h, 80px) + 12px); }
.hw-handles__head { display: grid; gap: 10px; margin-bottom: 28px; }
.hw-handles__head .eyebrow { margin: 0; }
.hw-handles__title { margin: 0; font: 400 clamp(38px, 5.4vw, 68px)/0.95 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.hw-handles__head p { margin: 0; max-width: 52ch; font-size: 20px; }
.hw-pad { position: relative; max-width: 920px; background-color: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-print-lg);
  background-image: linear-gradient(90deg, transparent 63px, rgb(233 33 11 / 0.55) 63px, rgb(233 33 11 / 0.55) 65px, transparent 65px), repeating-linear-gradient(180deg, transparent 0 35px, var(--line-blue) 35px 36px); }
.hw-clip { position: absolute; left: 50%; top: -16px; translate: -50% 0; width: 120px; height: 26px; background: var(--gold); border: 2px solid var(--ink); border-radius: 4px 4px 2px 2px; box-shadow: 3px 3px 0 var(--ink); }
.hw-pad__top { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 36px; padding: 30px 28px 18px 84px; border-bottom: 2px solid var(--ink); font: 400 15px/1.3 var(--font-type); text-transform: uppercase; letter-spacing: 0.06em; }
.hw-pad__top b { display: block; font-weight: 700; font-size: 12px; color: var(--muted); letter-spacing: 0.14em; }
.hw-mine { color: var(--red); font-weight: 700; font-size: 20px; }
.hw-pad__title { margin: 0; padding: 18px 28px 6px 84px; font: 400 clamp(24px, 3vw, 34px)/1.05 var(--font-display); text-transform: uppercase; }
.hw-pad__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 24px 22px 84px; border-top: 2px solid var(--ink); }
.hw-tally { margin: 0; font: 700 16px/1.3 var(--font-type); text-transform: uppercase; letter-spacing: 0.06em; }
.hw-tally__n { color: var(--red); }
@media (max-width: 600px) {
  .hw-pad { background-image: linear-gradient(90deg, transparent 27px, rgb(233 33 11 / 0.55) 27px, rgb(233 33 11 / 0.55) 29px, transparent 29px), repeating-linear-gradient(180deg, transparent 0 35px, var(--line-blue) 35px 36px); }
  .hw-pad__top { grid-template-columns: 1fr; padding-left: 44px; }
  .hw-pad__title, .hw-pad__foot { padding-left: 44px; }
  .hw-pad__foot .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* swap faces with a 150ms crossfade instead of turning */
  .hw-step__inner, .hw-step.is-flipped .hw-step__inner { transform: none; transition: none; }
  .hw-face { transform: none; backface-visibility: visible; transition: opacity 150ms linear, visibility 150ms; }
  .hw-back { opacity: 0; visibility: hidden; }
  .hw-step.is-flipped .hw-back { opacity: 1; visibility: visible; }
  .hw-step.is-flipped .hw-front { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   MY PLAN (1.11): the cart in the header (src/partials/plan.html, js/site.js). Hidden while empty; nothing else
   on the page moves when it opens or when a place is added (a toast under the header says so).
   ========================================================================== */
.plan-cart { position: relative; flex: none; }
.plan-cart[hidden] { display: none; }
.site-header__inner > .plan-cart { margin-left: clamp(4px, 1vw, 12px); }
.plan-cart__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: 3px 3px 0 var(--ink); font: 400 14px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.plan-cart__btn:hover { color: var(--red); }
.plan-cart__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.plan-cart__icon { display: none; width: 18px; height: 22px; }
.plan-cart__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--red); color: var(--cream); font: 700 12px/1 var(--font-type); letter-spacing: 0; }
.plan-cart__panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; width: min(360px, calc(100vw - 32px)); padding: 16px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); text-align: left; }
.plan-cart__title { margin: 0 0 10px; font: 400 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.plan-cart__list { display: grid; gap: 0; margin: 0 0 10px; padding: 0; list-style: none; }
.plan-cart__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; min-height: 48px; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); font-size: 16px; }
.plan-cart__name { min-width: 0; overflow-wrap: anywhere; }
.plan-cart__x { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: rgb(26 26 26 / 0.7); font: 400 22px/1 var(--font-body); cursor: pointer; }
.plan-cart__x:hover { color: var(--red); }
.plan-cart__x:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.plan-cart__tally { margin: 6px 0 12px; font: 700 13px/1.3 var(--font-type); letter-spacing: 0.06em; text-transform: uppercase; }
.plan-cart__go { width: 100%; justify-content: center; }
.plan-tag { display: inline-block; padding: 4px 6px 3px; border: 1.5px solid currentColor; font: 700 11px/1 var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.plan-tag--red { color: #C41A07; }
.plan-tag--gold { color: #7A5E1F; }
.plan-tag--sage { color: var(--green); }
.plan-tag--burgundy { color: #82170A; }
.plan-tag--ink { color: var(--ink); }
.plan-tag--red:not(.plan-tag--outline), .plan-tag--burgundy:not(.plan-tag--outline), .plan-tag--ink:not(.plan-tag--outline) { background: currentColor; }
.plan-tag--red:not(.plan-tag--outline) { background: #C41A07; color: #fff; border-color: #C41A07; }
.plan-tag--burgundy:not(.plan-tag--outline) { background: #82170A; color: #fff; border-color: #82170A; }
.plan-tag--ink:not(.plan-tag--outline) { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.plan-toast { position: fixed; left: 50%; top: calc(var(--header-h, 80px) + 12px); z-index: 1300; translate: -50% 0; max-width: calc(100vw - 32px); margin: 0; padding: 12px 16px; background: var(--ink); color: var(--cream); border: 2px solid var(--cream); box-shadow: 4px 4px 0 rgb(26 26 26 / 0.35); font-size: 16px; pointer-events: none; }
.plan-toast[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .plan-toast:not([hidden]) { animation: plan-toast-in 200ms ease-out both; } }
@keyframes plan-toast-in { from { opacity: 0; translate: -50% -8px; } to { opacity: 1; translate: -50% 0; } }
/* phones: the button is an icon (a small paper sheet) with the count; the panel opens full width under the header */
@media (max-width: 1023px) {
  .plan-cart__icon { display: block; }
  .plan-cart__label, .plan-cart__caret { display: none; }
  .plan-cart__btn { gap: 6px; padding: 6px 8px; }
  .site-header .plan-cart { position: static; }
  .site-header .plan-cart__panel { position: absolute; left: 0; right: 0; top: 100%; width: auto; border-width: 0 0 var(--line-heavy); border-radius: 0; box-shadow: 0 10px 24px rgb(26 26 26 / 0.25); padding: 16px var(--gutter) 20px; }
}
/* footer: links never wrap into a hanging indent */
.site-footer ul a { display: inline-block; text-indent: 0; }
.site-footer li { padding-left: 0; text-indent: 0; }

/* ==========================================================================
   THE PLACE POP-UP (1.11, js/place-card.js): a centred paper card over a dimmed page; a bottom sheet on phones.
   The card's insides reuse the .answer styles.
   ========================================================================== */
.pc-layer { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; padding: 16px; }
.pc-layer[hidden] { display: none; }
.pc-backdrop { position: absolute; inset: 0; background: rgb(26 26 26 / 0.55); }
.pc { position: relative; width: min(680px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding-top: clamp(28px, 3vw, 40px); }
.pc:focus { outline: none; }
.pc .answer__head { padding-right: 44px; }
.pc__x { position: absolute; right: 10px; top: 10px; z-index: 2; width: 44px; height: 44px; padding: 0; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 24px/1 var(--font-body); cursor: pointer; }
.pc__x:hover { color: var(--red); border-color: var(--red); }
.pc__x:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.pc-open { overflow: hidden; }
/* Miami: the green band at the bottom of the card */
.pc-miami { display: flex; align-items: center; gap: 12px; margin: 22px calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)); padding: 14px clamp(24px, 3vw, 40px); background: var(--green); color: var(--cream); text-decoration: none; font-size: 17px; line-height: 1.35; }
.pc-miami:hover span:not(.sr-only) { text-decoration: underline; text-underline-offset: 0.18em; }
.pc-miami:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.pc-miami__mark { flex: none; width: 24px; height: 24px; color: var(--cream); }
.miami-band { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 18px; background: var(--green); color: var(--cream); border-radius: var(--radius); text-decoration: none; font-size: 17px; line-height: 1.35; }
.miami-band:hover span:not(.sr-only) { text-decoration: underline; text-underline-offset: 0.18em; }
.miami-band:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px) {
  .pc-layer { place-items: end stretch; padding: 0; }
  .pc { width: 100%; max-height: 88dvh; border-radius: 10px 10px 0 0; border-width: var(--line) 0 0; box-shadow: 0 -10px 30px rgb(40 10 0 / 0.3); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
  .pc-miami { margin-bottom: calc(-1 * max(22px, env(safe-area-inset-bottom))); }
}

/* How it works (1.11): MELLY'S SIGN-OFF SHEET, a three-column table on the lined paper; nothing tickable.
   A HANDLED BY MELLY'S stamp lands in each row (js/how.js); reduced motion / no JS: all down. */
.hw-table { padding: 4px 24px 8px 84px; }
.hw-table__head, .hw-row { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.6fr) minmax(150px, 0.8fr); gap: 18px; }
.hw-table__head { padding: 10px 0 8px; border-bottom: 2px solid var(--ink); font: 700 12px/1 var(--font-type); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hw-rows { margin: 0; padding: 0; list-style: none; }
.hw-row { align-items: center; padding: 16px 0; border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.hw-row__name { display: block; font: 400 clamp(22px, 2.4vw, 28px)/1.05 var(--font-display); text-transform: uppercase; }
.hw-more-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; padding: 0; background: none; border: 0; color: var(--ink); font: 400 16px/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.hw-more-btn:hover { color: var(--red); }
.hw-more-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.hw-row__line { margin: 0; font-size: 17px; line-height: 1.45; color: var(--muted); }
.hw-row__sign { justify-self: start; width: min(170px, 100%); }
.hw-sign { display: block; width: 100%; height: auto; rotate: var(--tilt, -3deg); mix-blend-mode: multiply; opacity: 0.92; }
.hw-pad--anim .hw-row:not(.is-signed) .hw-sign { opacity: 0; scale: 1.4; }
.hw-pad--anim .hw-row.is-signed .hw-sign { animation: hw-sign 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
@keyframes hw-sign { 0% { opacity: 0; scale: 1.4; } 65% { opacity: 0.95; scale: 0.97; } 100% { opacity: 0.92; scale: 1; } }
.hw-more { grid-column: 1 / -1; }
.hw-more ul { display: grid; gap: 6px; margin: 2px 0 4px; padding: 0; list-style: none; font-size: 17px; }
.hw-more li { position: relative; padding-left: 22px; }
.hw-more li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.hw-pad--js .hw-row:not(.is-open) .hw-more { display: none; }
.no-js .hw-more-btn { display: none; }
@media (max-width: 760px) {
  .hw-table { padding: 4px 14px 8px 44px; }
  .hw-table__head { display: none; }
  .hw-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hw-row__sign { width: 150px; }
}
/* the questions (the FAQ, moved here from /faq) */
.hw-faq { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px); scroll-margin-top: calc(var(--header-h, 80px) + 12px); }
.hw-faq .eyebrow { margin: 0 0 10px; }
.hw-faq__lede { margin: 10px 0 24px; max-width: 52ch; font-size: 20px; }
.hw-faq .faq { max-width: 920px; }
.hw-q[hidden] { display: none; }
.hw-faq__more { margin-top: 22px; }
.hw-faq .faq__more { margin-top: 22px; }
/* the closing band: the site's red CTA band with its torn edge */
.page--how main > .hw-end { background-color: var(--red); }

/* /get-started (1.11): the places as dark chips (from My plan), one "Add another location" search, and the
   1 · 2 · 3 promise in the words of the How it works step cards */
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 0; list-style: none; }
.gs-chips:empty { display: none; }
.gs-chip { display: inline-flex; align-items: center; gap: 2px; padding-left: 12px; background: var(--ink); color: var(--cream); border-radius: 999px; font-size: 16px; }
.gs-chip__x { width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--cream); font: 400 20px/1 var(--font-body); cursor: pointer; }
.gs-chip__x:hover { color: var(--gold); }
.gs-chip__x:focus-visible { outline: 3px solid var(--red); outline-offset: -4px; border-radius: 50%; }
.gs-add { position: relative; }
.gs-add__label { display: block; margin-bottom: 6px; font-weight: 700; }
.gs-add__row { display: flex; gap: 8px; }
.gs-add__input { flex: 1 1 auto; min-width: 0; }
.gs-add__options { top: calc(100% + 6px); }
.gs-steps { margin: 26px 0 0; padding: 0; list-style: none; counter-reset: gs; display: grid; gap: 16px; }
.gs-steps li { position: relative; padding-left: 52px; font-size: 18px; line-height: 1.45; counter-increment: gs; }
.gs-steps li::before { content: counter(gs); position: absolute; left: 0; top: -4px; font: 400 40px/1 var(--font-display); color: var(--red); }
.gs-steps b { display: block; font: 400 22px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }

/* ==========================================================================
   PHONE CLEAN-UP (2026-10-17): footer, homepage intro, How it works, News & dates, law pages, forms
   ========================================================================== */
/* step-card hint says "Tap for more" on touch screens */
.hw-hint__tap { display: none; }
@media (hover: none) { .hw-hint__hover { display: none; } .hw-hint__tap { display: inline; } }
.site-footer__every { display: none; }

@media (max-width: 560px) {
  /* footer: about one screen instead of two; every link a full-height tap target */
  .site-footer { padding-block: 40px 24px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .site-footer__mark { grid-column: 1 / -1; }
  .site-footer__mark img { width: 84px; }
  .site-footer ul { gap: 0; }
  .site-footer ul a { display: inline-block; padding-block: 9px; }
  .site-footer h2 { margin-bottom: 6px; }
  .site-footer__states ul { display: none; }
  .site-footer__every { display: inline-block; padding-block: 9px; color: var(--cream); text-decoration: underline; text-underline-offset: 0.18em; }
  .site-footer__grid > div:nth-child(4), .site-footer__grid > div:nth-child(5) { grid-column: 1 / -1; }
  .site-footer__grid > div:nth-child(4) ul { display: flex; flex-wrap: wrap; column-gap: 20px; }
  .site-footer__motto { font-size: 22px; }
  .site-footer__disclaimer { margin-top: 24px !important; }
}

@media (max-width: 767px) {
  /* law pages: the two actions are the same full width */
  .facts__official { flex-direction: column; align-items: stretch; }
  .facts__official .btn-official, .facts__official .btn-add { width: 100%; justify-content: center; text-align: center; }

  /* forms: the big submit stays on one line */
  .btn--big { font-size: clamp(17px, 5vw, 22px); letter-spacing: 0.04em; white-space: nowrap; }
}

@media (max-width: 860px) {
  /* How it works: cards fit their words (no tall empty boxes) */
  .hw-face { min-height: 0; padding: 22px 20px 16px; }
  .hw-num { font-size: 72px; margin-bottom: 12px; }
  .hw-stamp { width: min(150px, 42%); top: 18px; }
}

@media (max-width: 600px) {
  /* sign-off sheet: margin line only (the blue rules never lined up with the text), header in one row */
  .hw-pad { background-image: linear-gradient(90deg, transparent 27px, rgb(233 33 11 / 0.55) 27px, rgb(233 33 11 / 0.55) 29px, transparent 29px); }
  .hw-pad__top { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; padding: 26px 16px 14px 44px; font-size: 14px; }
  .hw-pad__top b { font-size: 10px; }
  .hw-mine { font-size: 16px; }
  .hw-pad__title { font-size: 24px; padding-right: 16px; }
  /* each row reads: job, what it means, the stamp, then "What's included +" */
  .hw-row { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px 0; }
  .hw-row__job { display: contents; }
  .hw-row__name { order: 1; font-size: 24px; }
  .hw-row__line { order: 2; font-size: 16px; }
  .hw-row__sign { order: 3; width: 140px; margin-top: 4px; }
  .hw-more-btn { order: 4; }
  .hw-more { order: 5; }
  .hw-pad__foot { padding: 16px 16px 20px 44px; }
  .hw-pad__foot .btn { font-size: 16px; white-space: nowrap; }
}

@media (max-width: 760px) {
  /* News & dates: a wider date column so "Introduced" and "Today · Sat Oct 17" never break mid-word */
  .nd-bucket { grid-template-columns: 92px 20px minmax(0, 1fr); }
  .nd-when .est { font-size: 12px; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .nd-today b { font-size: 11px; line-height: 1.3; padding-right: 8px; text-align: right; }
  .nd-bucket__label { flex-wrap: wrap; row-gap: 6px; }
  .nd-bucket__label::after { order: 2; }
  .nd-bucket__label small { order: 3; flex-basis: 100%; }
}

/* ==========================================================================
   PHONE 9:16 FILM (2026-10-17): phones play hero-phone (hero.json → phone). The film fills the
   screen (cover); the story cards sit on it near the top, and the landing boxes (headline + FRONT
   DESK search) sit on the film's last frame. No cream band under the film. js/hero.js sets
   .hero--tall on the hero and .home-tall on <body> while the phone film is the one playing.
   ========================================================================== */
@media (max-width: 767px) {
  .hero.hero--tall { aspect-ratio: auto; height: 100vh; height: 100svh; min-height: 560px; }
  .hero--tall .hero__overlay { display: block; }
  /* the map wall is decoration on phones: no pins, legend, leaders or NORTHEAST label */
  .hero--tall .hero__overlay > :not(.panel):not(.desk):not(.plan-states):not(.pin--plan) { display: none !important; }
  .home-tall .hero-after, .js.home-tall .hero-after:not(.is-on) { display: none; }
  .hero--tall .hero__overlay > .panel {
    left: 16px; right: 16px; top: 72px; width: auto; max-width: none; transform: none;
    padding: 10px 14px 12px;
  }
  .hero--tall .panel__eyebrow { font-size: 12px; margin-bottom: 6px; }
  .hero--tall .panel__title { font-size: clamp(25px, 7.6vw, 30px); }
  .hero--tall .panel__lede { font-size: 15px; margin-top: 6px; }
  .hero--tall .hero__overlay > .desk {
    left: 16px; right: 16px; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto;
    flex-direction: column; align-items: stretch; gap: 10px; padding: 14px;
  }
  .hero--tall .hero__overlay > .desk .desk__lead { font-size: 18px; text-wrap: balance; }
  .hero--tall .hero__overlay > .desk .desk__line { font-size: 15px; margin-top: 4px; }
  .hero--tall .hero__overlay > .desk .desk__find { flex-basis: auto; }
  .hero--tall .hero__overlay > .desk .finder__input { min-height: 46px; font-size: 16px; }
  .story--tall { position: absolute; left: 16px; right: 16px; width: auto; z-index: 30; }
  .story--tall .story-card__title { font-size: 21px; }
  .story--tall .story-card__line { font-size: 15px; }
  .story-cue--tall { position: absolute; z-index: 31; }
  .hero--tall .story-dots { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .hero--tall .hero__corner { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* /news/manage/ (2026-10-17): choose which places you get News & dates emails for */
.nd-manage { max-width: 620px; margin: 8px auto 64px; padding: clamp(20px, 3vw, 32px); background: var(--paper, #FBF0DC); border: var(--line) solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); }
.nd-manage__title { margin: 0 0 10px; font: 400 clamp(26px, 3vw, 36px)/1.05 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.nd-manage__lede, .nd-manage__none { margin: 0 0 18px; font-size: 17px; line-height: 1.45; }
.nd-manage fieldset { border: 0; margin: 0; padding: 0; }
.nd-manage__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.nd-manage__place { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; background: var(--cream); border: var(--line) solid var(--ink); border-radius: var(--radius); cursor: pointer; font: 400 18px/1.1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.nd-manage__place input { width: 22px; height: 22px; accent-color: var(--red); flex: none; }
.nd-manage__place:has(input:not(:checked)) span { text-decoration: line-through; opacity: 0.6; }
.nd-manage__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .nd-manage__actions .btn { width: 100%; } }

/* (2026-10-17) Sign-off sheet up to 760px: one tidy layout from tablet down to phones. Margin line only (no
   blue rules), everything right of it; each row = the job with its stamp beside it, the line under it, then
   "What's included +". Step cards: titles always take two lines, so the three cards line up row for row. */
.hw-step__title { min-height: 2em; max-width: 7em; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 860px) { .hw-step__title { min-height: 0; } }
@media (max-width: 760px) {
  .hw-pad { background-image: linear-gradient(90deg, transparent 27px, rgb(233 33 11 / 0.55) 27px, rgb(233 33 11 / 0.55) 29px, transparent 29px); }
  .hw-pad__top { grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 18px; padding: 26px 16px 14px 44px; font-size: 14px; }
  .hw-pad__top b { font-size: 10px; }
  .hw-mine { font-size: 16px; }
  .hw-pad__title { font-size: 26px; padding: 16px 16px 4px 44px; }
  .hw-table { padding: 0 16px 6px 44px; }
  .hw-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name sign" "line line" "btn btn" "more more";
    align-items: center; gap: 4px 12px; padding: 16px 0 12px;
  }
  .hw-row__job { display: contents; }
  .hw-row__name { grid-area: name; order: 0; font-size: 24px; }
  .hw-row__sign { grid-area: sign; order: 0; width: 118px; margin: 0; justify-self: end; }
  .hw-row__line { grid-area: line; order: 0; font-size: 16px; margin-top: 4px; }
  .hw-more-btn { grid-area: btn; order: 0; min-height: 40px; justify-self: start; }
  .hw-more { grid-area: more; order: 0; }
  .hw-pad__foot { padding: 16px 16px 20px 44px; }
}
@media (max-width: 380px) { .hw-row__sign { width: 100px; } .hw-row__name { font-size: 22px; } }

/* News & dates quick chips (2026-10-17): labelled, so they read as shortcuts, not the only places */
.nd-chips__label { align-self: center; margin-right: 2px; font: 700 12px/1 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* (2026-10-17) Sign-off sheet, wider than 760px: the words sit ON the blue rules. The rules are drawn only
   behind the table, on a 32px pitch, and every line of text in the table is 32px tall (name, button, the
   line, the "What's included" items, the column heads), so each line of text rests on a rule. */
@media (min-width: 761px) {
  .hw-pad { background-image: linear-gradient(90deg, transparent 63px, rgb(233 33 11 / 0.55) 63px, rgb(233 33 11 / 0.55) 65px, transparent 65px); }
  .hw-table {
    padding-top: 0; padding-bottom: 32px;
    background: repeating-linear-gradient(180deg, transparent 0 25px, var(--line-blue) 25px 26px, transparent 26px 32px);
  }
  .hw-table__head { height: 32px; padding: 0; line-height: 30px; border-bottom: 0; align-items: end; }
  .hw-table__head span { line-height: 24px; }
  .hw-row { align-items: start; padding: 0 0 32px; border-bottom: 0; row-gap: 0; }
  .hw-row__name { line-height: 32px; height: 32px; font-size: 26px; padding-top: 1px; }
  .hw-more-btn { min-height: 32px; height: 32px; margin: 0; line-height: 32px; }
  .hw-row__line { font-size: 17px; line-height: 32px; margin: 0; }
  .hw-row__sign { height: 64px; display: flex; align-items: center; }
  .hw-more ul { margin: 0; gap: 0; }
  .hw-more li { line-height: 32px; font-size: 17px; }
}
.hw-row__line { color: color-mix(in srgb, var(--ink) 82%, transparent); }   /* darker, easier to read on the rules */

/* (2026-10-17) Card 3's HANDLED stamp in the same solid red as the step numbers (the pale, grainy ink made
   card 3 read lighter than 1 and 2) */
.hw-step .hw-stamp { opacity: 1; mix-blend-mode: normal; }
.hw-step .hw-stamp g { filter: none; stroke: var(--red); }
.hw-step .hw-stamp text { fill: var(--red); }
@keyframes hw-stamp { 0% { opacity: 0; scale: 1.6; } 60% { opacity: 1; scale: 0.96; } 100% { opacity: 1; scale: 1; } }


/* ==========================================================================
   2.0 THE END PANEL on every law page (js/plan-panel.js; markup scripts/lib/home.mjs planPanel): the homepage's
   funnel on the red leather: the five papers as small cards, "Something else", Continue → the scene's brief
   ========================================================================== */
.plan-panel {
  padding-block: clamp(40px, 6vw, 72px); color: var(--cream);
  background:
    radial-gradient(ellipse 70% 80% at 50% 40%, rgb(255 190 120 / 0.22), transparent 70%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 55%, rgb(40 6 2 / 0.45)),
    url("/assets/scene/leather-tile.webp") 0 0 / 460px 460px repeat, #8f2016;
  border-top: var(--line) solid var(--ink);
  box-shadow: inset 0 0 0 10px #8f2016, inset 0 0 0 11.5px rgb(214 168 84 / 0.8);
}
.plan-panel__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.plan-panel .eyebrow { color: var(--cream); }
.plan-panel__title { margin: 0; font: 400 clamp(30px, 3.6vw, 48px)/0.98 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; font-synthesis: none; text-wrap: balance; }
.plan-panel__head p:last-child { margin: 10px 0 0; font-size: 18px; }
.plan-panel__papers { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pp-paper {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.308; padding: 0; border: 0; cursor: pointer; color: var(--ink);
  background: url("/assets/scene/brief-sheet.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgb(30 10 0 / 0.5)); transition: translate 200ms var(--ease-out);
  rotate: var(--r, 0deg);
}
.plan-panel__papers li:nth-child(1) .pp-paper { --r: -3deg; } .plan-panel__papers li:nth-child(2) .pp-paper { --r: 2deg; }
.plan-panel__papers li:nth-child(3) .pp-paper { --r: -1deg; } .plan-panel__papers li:nth-child(4) .pp-paper { --r: 3deg; }
.plan-panel__papers li:nth-child(5) .pp-paper { --r: -2deg; }
.pp-paper img { position: absolute; left: 15%; top: 9%; width: 70%; height: 50%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3)); }
.pp-paper span { position: absolute; left: 6%; right: 6%; top: 64%; font: 400 clamp(13px, 1.5vw, 19px)/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; }
.pp-paper i { position: absolute; right: 9%; bottom: 8%; padding: 3px 6px 1px; font: 400 11px/1 var(--font-display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); border: 1.5px solid var(--red); rotate: -8deg; opacity: 0; scale: 1.4; transition: opacity 180ms, scale 220ms; mix-blend-mode: multiply; }
.pp-paper:hover { translate: 0 -4px; }
.pp-paper[aria-pressed="true"] { translate: 0 -7px; filter: drop-shadow(2.5px 0 0 var(--cream)) drop-shadow(-2.5px 0 0 var(--cream)) drop-shadow(0 2.5px 0 var(--cream)) drop-shadow(0 -2.5px 0 var(--cream)) drop-shadow(0 12px 12px rgb(30 10 0 / 0.55)); }
.pp-paper[aria-pressed="true"] i { opacity: 1; scale: 1; }
.pp-paper:focus-visible { outline: 3px solid var(--cream); outline-offset: 5px; }
.plan-panel__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.plan-panel__else { min-height: 44px; padding: 0; background: none; border: 0; border-bottom: 2px solid var(--cream); color: var(--cream); cursor: pointer; font: 700 13px/1.2 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; }
.plan-panel__more { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-panel__more[hidden] { display: none; }
.pp-chip { min-height: 40px; padding: 8px 14px 6px; background: var(--cream); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 30px; cursor: pointer; font: 400 15px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.pp-chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.pp-chip[aria-pressed="true"]::before { content: "✓ "; color: var(--gold); }
.plan-panel__go { margin-left: auto; }
@media (max-width: 760px) {
  .plan-panel__papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-panel__go { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pp-paper, .pp-paper i { transition: none; } }

/* (2.2) a place name in a sentence never breaks across lines ("Denver, CO") */
.nw { white-space: nowrap; }