:root,
[data-homo-theme="pink"] {
  --lime: #e59aaf;
  --mint: #9f6c86;
  --green: #7a3d6e;
  --ink: #1c141c;
  --ink-2: #2a1d2a;
  --ink-3: #3a2838;
  --paper: #f6efe6;
  --cream: #efe4d6;
  --sand: #e4d3c6;
  --orange: #c55e47;
  --muted: #6d5b61;
  --theme-accent-soft: rgba(229,154,175,.22);
  --theme-secondary-soft: rgba(159,108,134,.18);
  --theme-card-glow: rgba(229,154,175,.2);
  --theme-band: #ead9cc;
  --theme-photo-dark: #211018;
  --theme-caption: #f6efe6;
}

[data-homo-theme="red"] {
  --lime: #d27b6d;
  --mint: #b08779;
  --green: #7d3037;
  --ink: #241416;
  --ink-2: #351d20;
  --ink-3: #47272b;
  --paper: #f8eee7;
  --cream: #f2e5db;
  --sand: #e8d3c9;
  --orange: #b84b3f;
  --muted: #705c5d;
  --theme-accent-soft: rgba(210,123,109,.22);
  --theme-secondary-soft: rgba(176,135,121,.18);
  --theme-card-glow: rgba(210,123,109,.2);
  --theme-band: #ead4ca;
  --theme-photo-dark: #271315;
  --theme-caption: #f8eee7;
}

[data-homo-theme="orange"] {
  --lime: #d68b52;
  --mint: #c58e72;
  --green: #854a28;
  --ink: #241a16;
  --ink-2: #34251f;
  --ink-3: #473229;
  --paper: #f8efe4;
  --cream: #f2e5d6;
  --sand: #e8d2bd;
  --orange: #b45d35;
  --muted: #715f55;
  --theme-accent-soft: rgba(214,139,82,.22);
  --theme-secondary-soft: rgba(197,142,114,.18);
  --theme-card-glow: rgba(214,139,82,.2);
  --theme-band: #ecd7c2;
  --theme-photo-dark: #281912;
  --theme-caption: #f8efe4;
}

[data-homo-theme="yellow"] {
  --lime: #d3b65d;
  --mint: #b5a768;
  --green: #66541f;
  --ink: #241f17;
  --ink-2: #332c20;
  --ink-3: #443a29;
  --paper: #faf3dc;
  --cream: #f3ead1;
  --sand: #e8ddbb;
  --orange: #9a612e;
  --muted: #6e6655;
  --theme-accent-soft: rgba(211,182,93,.24);
  --theme-secondary-soft: rgba(181,167,104,.18);
  --theme-card-glow: rgba(211,182,93,.2);
  --theme-band: #eee2bd;
  --theme-photo-dark: #272116;
  --theme-caption: #faf3dc;
}

[data-homo-theme="green"] {
  --lime: #9fbd82;
  --mint: #74a88b;
  --green: #2f6b56;
  --ink: #14211b;
  --ink-2: #1d3027;
  --ink-3: #294135;
  --paper: #f1f4ea;
  --cream: #e8eee2;
  --sand: #d5dfcc;
  --orange: #a96743;
  --muted: #59695f;
  --theme-accent-soft: rgba(159,189,130,.23);
  --theme-secondary-soft: rgba(116,168,139,.18);
  --theme-card-glow: rgba(159,189,130,.2);
  --theme-band: #dce6d2;
  --theme-photo-dark: #13221a;
  --theme-caption: #f1f4ea;
}

[data-homo-theme="blue"] {
  --lime: #8fb2db;
  --mint: #7ba6c8;
  --green: #2f5c8d;
  --ink: #111d2c;
  --ink-2: #192b40;
  --ink-3: #243b56;
  --paper: #f1f3f5;
  --cream: #e7ebef;
  --sand: #d4dce4;
  --orange: #a65f70;
  --muted: #596674;
  --theme-accent-soft: rgba(143,178,219,.24);
  --theme-secondary-soft: rgba(123,166,200,.18);
  --theme-card-glow: rgba(143,178,219,.2);
  --theme-band: #dce3ea;
  --theme-photo-dark: #101c2a;
  --theme-caption: #f1f3f5;
}

[data-homo-theme="purple"] {
  --lime: #b89bc7;
  --mint: #a084b0;
  --green: #684975;
  --ink: #211725;
  --ink-2: #302237;
  --ink-3: #413049;
  --paper: #f6eef5;
  --cream: #eee3ed;
  --sand: #dfd0de;
  --orange: #a95675;
  --muted: #6a5c6d;
  --theme-accent-soft: rgba(184,155,199,.24);
  --theme-secondary-soft: rgba(160,132,176,.18);
  --theme-card-glow: rgba(184,155,199,.2);
  --theme-band: #e5d6e4;
  --theme-photo-dark: #211526;
  --theme-caption: #f6eef5;
}

.scroll-progress span,
.truth-banner::before {
  background: linear-gradient(90deg, var(--green), var(--orange), var(--lime), var(--mint));
}

.g-header,
.g-footer,
.dark,
#why .card:last-child,
th,
.example {
  background-color: var(--ink);
}

.g-header.is-scrolled,
.js .g-header nav {
  background-color: var(--ink);
}

.g-hero {
  background:
    radial-gradient(circle at var(--hero-x,75%) var(--hero-y,20%), var(--theme-accent-soft), transparent 27%),
    radial-gradient(circle at 8% 92%, var(--theme-secondary-soft), transparent 29%),
    var(--ink);
}

.g-hero::after {
  background: conic-gradient(var(--green), var(--orange), var(--lime), var(--mint), var(--green));
}

.band {
  background: var(--sand);
  color: var(--ink);
}

/* The old base scan was an idle six-second loop. Theme styling explicitly
   disables it everywhere; the homepage photo gets its own action-driven sheen. */
.band::after {
  content: none;
  animation: none;
}

.paper .card {
  background: var(--sand);
}

.notice-scan {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: var(--theme-photo-dark);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

.notice-scan::before,
.notice-scan::after {
  content: none;
  background: none;
}

.notice-scan:hover {
  box-shadow: 0 34px 84px rgba(0,0,0,.5);
}

.notice-scan img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
  filter: contrast(1.04) saturate(.92);
}

.card::before {
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), var(--theme-card-glow), transparent 34%);
}

.card::after,
.card:nth-child(6n + 2)::after,
.card:nth-child(6n + 3)::after,
.card:nth-child(6n + 4)::after,
.card:nth-child(6n + 5)::after,
.card:nth-child(6n + 6)::after {
  background: var(--orange);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--orange) 13%, transparent);
}

.card:nth-child(odd)::after {
  background: var(--lime);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--lime) 14%, transparent);
}

#why .card:last-child::after {
  background: var(--lime);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--lime) 14%, transparent);
}

.truth-note::before,
.mini-truth::before {
  background: linear-gradient(var(--green), var(--orange), var(--lime), var(--mint));
}

.pride-hero,
.pride-tiles {
  display: none;
}

.bush-band {
  background: var(--theme-band);
  color: var(--ink);
  padding: clamp(56px, 8vw, 96px) 0;
}

.bush-band p {
  text-align: left;
  font-size: inherit;
}

.bush-exhibit {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--theme-photo-dark);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 22%, transparent);
}

.bush-photo {
  position: relative;
  overflow: hidden;
  background: var(--theme-photo-dark);
}

.bush-photo::after {
  content: "";
  position: absolute;
  inset: -18% -45%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,.34) 49%, rgba(255,255,255,.08) 54%, transparent 64%);
  transform: translateX(-65%);
}

.bush-photo.is-sheening::after {
  animation: bush-sheen .78s cubic-bezier(.2,.72,.22,1) 1;
}

@keyframes bush-sheen {
  0% { opacity: 0; transform: translateX(-65%); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: translateX(65%); }
}

.bush-exhibit img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.04) saturate(.92);
}

.bush-exhibit figcaption {
  position: relative;
  z-index: 1;
  padding: .85rem 1rem 1rem;
  color: var(--theme-caption);
  background: var(--theme-photo-dark);
  font: 700 .72rem/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bush-band h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

@media (prefers-reduced-motion: reduce) {
  .bush-photo::after,
  .bush-photo.is-sheening::after {
    content: none;
    animation: none !important;
  }
}

/* Local editorial direction: a neighborhood field guide, set in paper and ink. */
:root,
:root[data-homo-theme] {
  --ink: #2b202a;
  --ink-2: #392c38;
  --ink-3: #51414f;
  --paper: #fbf7ed;
  --cream: #f6f0e3;
  --lime: #b9a4c4;
  --mint: #9c392a;
  --orange: #9c392a;
  --green: #762d25;
  --line: rgba(43, 32, 42, .2);
  --line-light: rgba(251, 247, 237, .28);
  --muted: #5f535b;
  --sand: #e9dfd0;
  --shadow: 0 12px 30px rgba(43, 32, 42, .08);
  --shadow-strong: 0 18px 40px rgba(43, 32, 42, .12);
  --radius: 3px;
  --sans: Georgia, "Times New Roman", serif;
  --display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --theme-accent-soft: rgba(185, 164, 196, .2);
  --theme-secondary-soft: rgba(156, 57, 42, .1);
  --theme-card-glow: rgba(185, 164, 196, .15);
  --theme-band: #e9dfd0;
  --theme-photo-dark: #2b202a;
  --theme-caption: #fbf7ed;
}

body { background: var(--cream); font-size: 17px; line-height: 1.68; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: .98; }
h1 { font-size: clamp(3.3rem, 7.4vw, 7.5rem); }
h2 { font-size: clamp(2.3rem, 5vw, 4.8rem); }
h3 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1; }
a { color: var(--green); text-decoration-thickness: 1px; }
a:hover { color: var(--orange); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--orange); }
.wrap { width: min(1180px, calc(100% - 56px)); }
.eyebrow { color: var(--orange); letter-spacing: .1em; }
.eyebrow::before { width: 18px; height: 3px; }
.g-skip { border-radius: 0; background: var(--ink); color: var(--paper); }

/* A quiet, square masthead frames the pages without floating over them. */
.g-header,
.g-header.is-scrolled {
  top: 0;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 12px max(28px, calc((100% - 1240px) / 2));
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  transition: min-height .2s ease;
}
.g-header.is-scrolled { min-height: 70px; }
.g-brand, .g-brand:hover { color: var(--ink); }
.g-brand img { filter: sepia(.25) saturate(.8); }
.g-brand strong { font-family: var(--display); font-size: 1.45rem; letter-spacing: .1em; }
.g-brand small { color: var(--muted); font: 11px/1.2 var(--mono); }
.g-header nav { gap: clamp(14px, 2vw, 28px); }
.g-header nav > a:not(.btn) { color: var(--ink); font: 700 .82rem/1.3 var(--sans); }
.g-header nav > a:not(.btn)::after { background: var(--orange); }
.g-menu { border-color: var(--ink); border-radius: 0; color: var(--ink); }

/* The expanded desktop menu sits on the ink bar; keep every state legible. */
.g-header nav > a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.g-header nav > a.btn[aria-current=page] { box-shadow: inset 0 -3px 0 var(--paper); }
@media (min-width: 901px) {
  .js .g-header nav > a:not(.btn) { color: var(--paper); }
  .js .g-header nav > a:not(.btn):hover { color: var(--paper); }
  .js .g-header nav > a:not(.btn)::after,
  .js .g-header nav > a:not(.btn):hover::after,
  .js .g-header nav > a:not(.btn)[aria-current=page]::after { background: var(--lime); }
  .js .g-header nav > a:focus-visible { outline-color: var(--lime); }
  .js .g-header nav > a.btn:focus-visible { outline-color: var(--lime); }
  .js .g-header nav > a.btn {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--ink);
  }
  .js .g-header nav > a.btn:hover {
    border-color: var(--lime);
    background: var(--lime);
    color: var(--ink);
  }
  .js .g-header nav > a.btn[aria-current=page] { box-shadow: inset 0 -3px 0 var(--ink); }
}

.btn,
.btn.small,
.btn.light {
  min-height: 50px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
  font: 700 .9rem/1.2 var(--sans);
}
.btn:hover, .btn.small:hover, .btn.light:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: white;
  box-shadow: none;
  transform: translateY(-2px);
}
.btn.secondary { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--sand); color: var(--ink); }

/* A campaign-like opening built around the existing neighborhood drawing. */
.g-hero {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(64px, 9vw, 128px) max(28px, calc((100% - 1240px) / 2));
  overflow: visible;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .78fr);
  gap: clamp(36px, 6vw, 92px);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: none;
}
.g-hero::before, .g-hero::after { content: none; }
.g-hero .eyebrow { color: var(--orange); }
.g-hero h1 { max-width: 760px; margin-bottom: 1.4rem; font-size: clamp(4rem, 8vw, 7.6rem); }
.g-hero h1 span { white-space: normal; }
.g-hero h1 span:last-child { color: var(--orange); }
.g-hero .lede,
.g-hero .hero-copy > p:not(.eyebrow,.lede,.micro),
.g-hero .micro { color: var(--ink); }
.g-hero .lede { max-width: 650px; }
.g-hero .hero-copy > p:not(.eyebrow,.lede,.micro) { max-width: 620px; }
.g-hero .hero-copy > p strong { color: var(--ink); }
.g-hero .micro { max-width: 620px; font-size: .84rem; }
.g-hero .btn { border-color: var(--orange); background: var(--orange); color: white; }
.g-hero .btn:hover { border-color: var(--ink); background: var(--ink); color: white; }
.g-hero .btn.secondary { border-color: var(--ink); background: transparent; color: var(--ink); }
.g-hero .btn.secondary:hover { background: var(--sand); color: var(--ink); }
.home-neighborhood {
  margin: 0;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid var(--ink);
  background: #eee6d8;
  box-shadow: 8px 8px 0 var(--lime);
}
.home-neighborhood img { display: block; width: 100%; height: auto; }
.home-neighborhood figcaption {
  display: grid;
  margin-top: 12px;
  padding-top: 12px;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font: 700 .72rem/1.45 var(--mono);
}
.home-neighborhood figcaption span + span { padding-left: 12px; border-left: 1px solid var(--line); }

/* Strong rules and open space do the work that rounded cards used to do. */
.band, .bush-band {
  width: 100%;
  margin: 0;
  padding: clamp(58px, 8vw, 110px) 0;
  border-radius: 0;
  background: var(--sand);
  color: var(--ink);
}
.band::after { content: none; animation: none; }
.bush-band .wrap { align-items: center; }
.bush-exhibit { border: 1px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--lime); }
.bush-exhibit figcaption { color: var(--paper); font-size: .68rem; letter-spacing: .07em; }
.cards { gap: 18px; }
.card {
  min-height: 270px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
.card::before, .card::after { content: none; }
.card:hover { border-color: var(--ink); background: white; box-shadow: 5px 5px 0 var(--lime); transform: translateY(-3px); }
.card .eyebrow { margin-bottom: 24px; }
.card h3 a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.card h3 a:hover { color: var(--orange); text-decoration-color: currentColor; }
.card p { color: var(--muted); font-size: .95rem; }
.card-link { right: 22px; bottom: 20px; left: 28px; color: var(--ink); font-size: .82rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.card-link:hover { color: var(--orange); text-decoration-color: currentColor; }
#why .card:last-child { border-color: var(--ink); background: #e7dfe8; color: var(--ink); }
#why .card:last-child h3 a, #why .card:last-child .card-link { color: var(--ink); }
#why .card:last-child p { color: var(--muted); }
#why .card:last-child::after { content: none; }
.dark, .g-footer {
  width: 100%;
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
}
.dark { padding-block: clamp(64px, 9vw, 126px); }
.dark .eyebrow { color: #d8c8de; }
.dark p { color: #e3dce2; }
.dark .lede { color: white; }
.dark .btn.light { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.dark .btn.light:hover { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.truth-banner::before { height: 5px; background: var(--lime); opacity: 1; }
.paper { width: 100%; margin: 0; padding-inline: max(28px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: var(--paper); }
.paper .card { border-color: var(--ink); background: var(--sand); }
#conversion {
  width: min(1180px, calc(100% - 56px));
  margin: clamp(28px, 5vw, 64px) auto;
  padding: clamp(38px, 6vw, 76px) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}
#conversion .eyebrow { color: var(--orange); }
#conversion p { color: var(--muted); }
#conversion p strong, #conversion a { color: var(--ink); }
#conversion .truth-note { background: var(--sand); color: var(--ink); }
#conversion .truth-note p { color: var(--ink); }
.article { max-width: 980px; padding-top: 48px; }
.article > h1 { max-width: 850px; font-size: clamp(3.5rem, 7vw, 6.7rem); }
.article > h2 { max-width: 800px; margin-top: 4rem; font-size: clamp(2.1rem, 4.5vw, 3.8rem); }
.article > p, .article > ul, .article > ol { max-width: 720px; }
.article > p, .article > ul, .article > ol, .guide-steps p { font-family: var(--sans); font-size: 1.06rem; line-height: 1.78; }
.crumb { margin-bottom: 46px; color: var(--muted); font-size: .68rem; letter-spacing: .03em; }
.byline { padding: 8px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: .72rem; }
.warning { padding: 24px 26px; border: 0; border-left: 4px solid var(--orange); border-radius: 0; background: #eee3d8; }
.guide-steps li { grid-template-columns: 54px minmax(0, 1fr); gap: 18px; }
.guide-steps li > span { width: 42px; height: 42px; border-radius: 0; border-color: var(--orange); background: var(--paper); color: var(--orange); }
.guide-steps h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.truth-note, .mini-truth { padding: 22px 24px; border-radius: 0; background: var(--sand); }
.truth-note::before, .mini-truth::before { width: 4px; background: var(--orange); }
.code-list article, .sources, .example { border-radius: 0; }
.faq { margin-top: 58px; }
.faq h2 { margin-bottom: 25px; }
.faq details { border-color: var(--line); }
.faq summary { padding-block: 20px; font-family: var(--sans); font-size: 1.06rem; font-weight: 700; }
.faq summary::after { top: 14px; width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); }
.faq details[open] summary::after { border-color: var(--orange); background: var(--orange); color: white; }
.faq details p { font-family: var(--sans); font-size: 1rem; line-height: 1.75; }
.g-footer { margin: 0; padding: 66px 0 24px; border-top: 5px solid var(--lime); }
.wordmark { font-family: var(--display); letter-spacing: .02em; }
.footer-grid nav a { color: #eee5ed; }
.footer-grid nav a:hover, .wordmark:hover { color: #d8c8de; }
.fineprint { border-color: var(--line-light); color: #d0c4ce; }

@media (max-width: 900px) {
  .g-header { flex-wrap: wrap; }
  .g-header nav { gap: 10px 18px; }
  .js .g-header nav {
    inset: calc(100% + 1px) 0 auto;
    padding: 20px max(24px, calc((100% - 1180px) / 2));
    border: 1px solid var(--ink);
    border-top: 0;
    border-radius: 0;
    background: var(--cream);
    box-shadow: 0 10px 14px rgba(43, 32, 42, .08);
  }
  .g-header nav > a:not(.btn) { color: var(--ink); }
  .js .g-header nav > a:focus-visible { outline-color: var(--ink); }
  .g-header nav .btn { flex-basis: auto; }
  .g-hero { grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); }
  .g-hero .actions { flex-direction: row; }
  .dark, .paper { width: 100%; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .g-header, .g-header.is-scrolled { width: 100%; min-height: 68px; padding: 9px 18px; }
  .g-brand small { display: block; font-size: 9px; }
  .g-hero { width: 100%; padding: 52px 20px 58px; grid-template-columns: 1fr; gap: 32px; }
  .g-hero h1 { font-size: clamp(3.4rem, 15vw, 5rem); }
  .g-hero h1 span { white-space: normal; }
  .g-hero .actions { flex-direction: column; align-items: stretch; }
  .g-hero .btn { width: 100%; }
  .home-neighborhood { width: calc(100% - 10px); margin-inline: auto; }
  .home-neighborhood figcaption { grid-template-columns: 1fr; font-size: .68rem; }
  .home-neighborhood figcaption span + span { padding: 9px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .band, .bush-band { padding: 52px 0; }
  .bush-band .split { gap: 28px; }
  .bush-exhibit { width: min(100%, 440px); margin-inline: auto; }
  .section { padding-block: 64px; }
  .cards, .article .cards, .split, .footer-grid, .code-list { grid-template-columns: 1fr; }
  #why .cards { grid-template-columns: 1fr; }
  #why .card, #why .card:first-child, #why .card:nth-child(2), #why .card:last-child { grid-column: auto; min-height: 245px; }
  .card { padding: 24px; }
  .dark { width: 100%; border-radius: 0; }
  .paper { padding-inline: 20px; }
  #conversion { width: calc(100% - 40px); margin-block: 24px; padding-block: 38px; }
  .article { padding: 30px 0 72px; }
  .article > h1 { font-size: clamp(3rem, 13vw, 4.5rem); }
  .article > h2 { margin-top: 3.2rem; font-size: clamp(2rem, 9vw, 3rem); }
  .article > p, .article > ul, .article > ol, .guide-steps p { font-size: 1rem; }
  .crumb { margin-bottom: 34px; }
  .byline { display: flex; width: fit-content; }
  .warning, .sources { padding: 20px; }
  .faq summary { padding-right: 48px; }
  .faq details p { padding-right: 6px; }
  .guide-steps li { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .guide-steps li > span { width: 36px; height: 36px; }
  .footer-grid { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-header, .g-header.is-scrolled, .card, .btn { transition: none; }
  .notice, [data-tilt] { transform: none !important; }
}

/* One neighborhood object moves from enforced sameness to lived-in color. */
.home .g-hero { min-height: min(820px, calc(100svh - 78px)); padding-block: clamp(76px, 8vw, 116px); grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(24px, 4vw, 72px); overflow: hidden; border-bottom: 0; background: #20252a; color: #f7eee2; }
.home .g-hero .hero-copy { position: relative; z-index: 1; }
.home .g-hero h1 { color: #fff7eb; font-size: clamp(4rem, 7.3vw, 7.2rem); line-height: 1.02; letter-spacing: -.055em; }
.home .g-hero h1 span:last-child { color: #ebaa88; }
.home .g-hero .lede, .home .g-hero .hero-copy > p:not(.eyebrow,.lede,.micro) { color: #f1e5d7; }
.home .g-hero .btn { border-color: #eab396; background: #eab396; color: #241a1d; }
.home .g-hero .btn:hover { border-color: #fff5e8; background: #fff5e8; color: #241a1d; }
.home .g-hero .btn.secondary { border-color: #ddd0c1; background: transparent; color: #fff7eb; }
.home .g-hero .btn.secondary:hover { background: #fff5e8; color: #241a1d; }
.street-switch { display: block; align-self: center; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: #f7eee2; text-align: left; cursor: pointer; }
.street-switch svg { display: block; width: 100%; height: auto; }
.street-switch:focus-visible { outline: 3px solid #ffe061; outline-offset: 8px; }
.street-switch .scene-bright { opacity: 0; transition: opacity .65s ease; }
.street-switch:hover .scene-bright, .street-switch:focus-visible .scene-bright, .street-switch[aria-pressed="true"] .scene-bright { opacity: 1; }
.street-caption { display: block; margin-top: 12px; color: #ead6c3; font: 700 .85rem/1.4 var(--sans); }
.home-plan { display: grid; padding-block: clamp(68px, 8vw, 112px); grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(32px, 7vw, 110px); }
.home-plan .eyebrow { color: var(--orange); }
.home-plan h2 { margin: 16px 0 0; font: 900 clamp(3rem, 5vw, 5.6rem)/1.02 var(--display); letter-spacing: -.045em; }
.home-plan ol { margin: 0; padding: 0; list-style: none; counter-reset: plan; }
.home-plan li { padding: 18px 0; border-top: 1px solid var(--line); font: 400 1.12rem/1.6 var(--sans); counter-increment: plan; }
.home-plan li:last-child { border-bottom: 1px solid var(--line); }
.home-plan li::before { content: '0' counter(plan) ' / '; margin-right: 8px; color: var(--orange); font: 700 .78rem/1 var(--mono); }
.home-plan li strong { font-weight: 800; }
.home-plan-links { display: flex; margin: 24px 0 12px; flex-wrap: wrap; gap: 10px 22px; }
.home-plan-links a { color: var(--ink); font: 750 .95rem/1.4 var(--sans); text-underline-offset: 4px; }
.home-plan .micro { color: var(--muted); font-size: .86rem; }
@media (max-width: 900px) { .home .g-hero { grid-template-columns: 1fr; min-height: 0; } .street-switch { width: min(100%, 740px); margin: 16px auto 0; } .home-plan { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .home .g-hero { padding: 68px 20px 62px; } .home .g-hero h1 { font-size: clamp(3.15rem, 14vw, 5rem); } .home-plan { padding-block: 62px; } .home-plan li { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .street-switch .scene-bright { transition: none; } }

.guide-street { display: grid; margin: 4rem 0 3rem; padding: clamp(22px, 4vw, 44px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: center; background: radial-gradient(ellipse at 75% 55%, #405755, #1b2930 62%, #131c25); color: #fff2e4; }
.guide-street .eyebrow { color: #f1bd9c; }
.guide-street h2 { margin: 1rem 0; font: 900 clamp(2.1rem, 3.2vw, 3.7rem)/1.04 var(--display); letter-spacing: -.035em; }
.guide-street p:last-child { max-width: 35rem; color: #f1e5d8; font: 400 1rem/1.65 var(--sans); }
.guide-street img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 27px rgba(0,0,0,.3)); }
.route-list { max-width: 850px; margin: 1rem 0 4rem; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.route-list li { display: grid; padding: 23px 0; grid-template-columns: 52px minmax(0,1fr); gap: 15px; border-bottom: 1px solid var(--line); }
.route-list li > span { color: var(--orange); font: 800 .75rem/1.5 var(--mono); }
.route-list h3 { margin: 0 0 .45rem; font: 800 clamp(1.45rem, 2.3vw, 2rem)/1.2 var(--display); }
.route-list h3 a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.route-list h3 a:hover { color: var(--orange); }
.route-list p { margin: 0; font: 400 1rem/1.6 var(--sans); }

@media (max-width: 900px) {
  .home .g-hero { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 680px) {
  .home .g-hero { padding: 68px 20px 62px; }
  .home .g-hero h1 { font-size: clamp(3.6rem, 15vw, 5.2rem); }
  .guide-street { grid-template-columns: 1fr; margin-block: 3rem; padding: 26px 20px 10px; }
  .guide-street img { margin-top: -16px; }
  .route-list li { grid-template-columns: 40px minmax(0,1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
}

/* Warnings and editorial notes read as prose, not tinted cards. */
.warning,
.truth-note,
.mini-truth,
#conversion .truth-note {
  position: static;
  margin: 1.6rem 0 2rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: 400 1.06rem/1.68 var(--sans);
}
.article > .warning { max-width: 720px; }
.warning strong { display: inline; margin: 0 .25em 0 0; }
.truth-note::before,
.mini-truth::before,
.mini-truth.truth-banner::before { content: none; display: none; }
#conversion .truth-note { max-width: 760px; color: var(--ink); }
.mini-truth h2 { margin-top: .7rem; }
@media (max-width: 680px) {
  .warning, .truth-note, .mini-truth, #conversion .truth-note { padding: 0; font-size: 1rem; }
}

/* An open editorial beat, with no card or inset panel. */
.fun-line { display: grid; width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: clamp(70px, 9vw, 126px) 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 84px); align-items: end; border-top: 1px solid var(--ink); }
.fun-line h2 { max-width: 9ch; margin: 0; color: var(--ink); font: 900 clamp(3.5rem, 6.5vw, 7rem)/.98 var(--display); letter-spacing: -.05em; }
.fun-line p { max-width: 30rem; margin: 0 0 .4rem; color: var(--ink); font: 450 clamp(1.28rem, 2.2vw, 2rem)/1.45 var(--sans); }
@media (max-width: 680px) {
  .fun-line { width: calc(100% - 40px); grid-template-columns: 1fr; padding-block: 72px; }
  .fun-line h2 { font-size: clamp(3.5rem, 15vw, 5rem); }
}

/* Two practical entry routes use rules and whitespace, never cards. */
.home .g-hero .micro strong { display: block; margin-bottom: .3rem; color: #fff7eb; font-size: 1rem; }
.decision-paths { display: grid; width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: clamp(58px, 7vw, 104px) 0; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(40px, 8vw, 128px); }
.decision-paths article { min-width: 0; padding-top: 24px; border-top: 2px solid var(--ink); }
.decision-paths .eyebrow { color: var(--orange); }
.decision-paths h2 { max-width: 14ch; margin: 1rem 0 1.25rem; color: var(--ink); font: 900 clamp(2.3rem, 3.6vw, 4.2rem)/1.04 var(--display); letter-spacing: -.035em; }
.decision-paths article > p:not(.eyebrow) { max-width: 34rem; color: var(--ink); font: 400 1.08rem/1.65 var(--sans); }
.decision-paths ul { max-width: 35rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.decision-paths li { border-top: 1px solid var(--line); }
.decision-paths li:last-child { border-bottom: 1px solid var(--line); }
.decision-paths a { display: block; padding: 13px 0; color: var(--ink); font: 750 1rem/1.4 var(--sans); text-underline-offset: 4px; }
.decision-paths a:hover { color: var(--orange); }
.decision-paths a:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.question-line .wrap { display: grid; max-width: 1180px; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: 16px clamp(36px,6vw,100px); align-items: end; }
.question-line .eyebrow { grid-column: 1 / -1; color: var(--orange); }
.question-line h2 { margin: 0; color: var(--ink); font-size: clamp(2.7rem, 4.8vw, 5.2rem); }
.question-line p:not(.eyebrow) { margin: 0; color: var(--ink); font: 400 clamp(1.2rem, 2vw, 1.65rem)/1.55 var(--sans); }
.question-line .btn { grid-column: 2; justify-self: start; margin-top: 12px; }
@media (max-width: 680px) {
  .decision-paths { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 46px; padding-block: 64px; }
  .decision-paths h2 { font-size: clamp(2.3rem, 9vw, 3.7rem); }
  .decision-paths article > p:not(.eyebrow) { font-size: 1rem; }
  .question-line .wrap { grid-template-columns: 1fr; }
  .question-line .eyebrow, .question-line .btn { grid-column: 1; }
}

/* Type stays on one left edge; responsive sizing keeps each hero sentence on one line. */
.home .g-hero h1 { font-size: clamp(4rem, 7.3vw, 7.2rem); line-height: 1.02; }
.home .g-hero h1 span { display: block; margin: 0; padding: 0; text-indent: 0; transform: none; white-space: nowrap; }
.home .g-hero .hero-copy > * { animation: none; }
.fun-line h2, .decision-paths h2 { max-width: none; text-indent: 0; transform: none; }
@media (max-width: 680px) {
  .home .g-hero h1 { font-size: clamp(3.15rem, 14vw, 5rem); }
}

.g-header nav { gap: clamp(12px, 1.45vw, 20px); }
@media (min-width: 901px) { .js .g-header nav { padding-inline: 0; } .g-header nav > a:not(.btn) { white-space: nowrap; } }

/* Center the masthead; each edge has the same gutter at desktop and phone widths. */
.g-header, .g-header.is-scrolled { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; }
.g-header-inner { display: flex; width: min(1180px, calc(100% - 56px)); min-height: 78px; margin-inline: auto; align-items: center; justify-content: space-between; gap: 32px; }
.g-header.is-scrolled .g-header-inner { min-height: 70px; }
@media (min-width: 901px) {
  .js .g-header nav { padding: 0; gap: clamp(15px, 1.8vw, 24px); background: transparent; }
  .js .g-header nav > a:not(.btn), .js .g-header nav > a:not(.btn):hover { color: var(--ink); }
  .js .g-header nav > a:not(.btn):hover { color: var(--orange); }
  .js .g-header nav > a:not(.btn)::after, .js .g-header nav > a:not(.btn):hover::after, .js .g-header nav > a:not(.btn)[aria-current=page]::after { background: var(--orange); }
  .js .g-header nav > a:focus-visible, .js .g-header nav > a.btn:focus-visible { outline-color: var(--ink); }
  .js .g-header nav > a.btn { min-height: 44px; margin-left: 0; padding-inline: 20px; border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .js .g-header nav > a.btn:hover { border-color: var(--orange); background: var(--orange); color: white; }
  .js .g-header nav > a.btn[aria-current=page] { box-shadow: inset 0 -3px 0 var(--paper); }
}
@media (max-width: 900px) {
  .g-header, .g-header.is-scrolled { width: 100%; padding: 0; }
  .g-header-inner { position: relative; width: calc(100% - 36px); min-height: 68px; flex-wrap: wrap; gap: 8px; }
  .g-header.is-scrolled .g-header-inner { min-height: 68px; }
}
.fineprint .affiliation-note { margin-top: 8px; color: #eadfe7; font: 400 .82rem/1.5 var(--sans); }

/* Keep the next step reachable without opening the phone navigation. */
.g-mobile-plan { display: none; }
@media (max-width: 900px) {
  .g-mobile-plan { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; margin-left: auto; padding: 0 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 750 .85rem/1 var(--sans); text-decoration: none; }
  .g-mobile-plan:hover { background: var(--orange); border-color: var(--orange); color: white; }
  .g-mobile-plan:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .g-menu { min-height: 44px; flex: none; padding-inline: 8px; gap: 8px; }
}
@media (max-width: 600px) {
  .g-brand small { display: none; }
  .g-brand { gap: 8px; }
}