@layer page {
.pg-home .campaign-hero { --hero-h: clamp(480px, calc(100svh - var(--header-bar) - var(--rule)), 880px); --name: min(50vw, calc((var(--hero-h) - 110px) * 1.55), 760px); --figure: min(62vw, calc(var(--hero-h) * 1.08), 990px); --logo-clear: calc(var(--name) * .053821); position: relative; display: grid; grid-template-columns: var(--name); align-content: center; row-gap: max(var(--s5), var(--logo-clear)); min-height: var(--hero-h); padding-block: max(var(--s5), var(--logo-clear)); padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); background: var(--orange); border-bottom: 2px solid var(--ink); --focus: var(--ink); }
.pg-home .poster-heading { position: relative; z-index: 1; display: grid; justify-items: center; }
.pg-home .poster-identity { position: relative; width: var(--name); max-width: 100%; container-type: inline-size; }
.pg-home .poster-identity > .poster-wordmark { width: 100%; height: auto; }
.pg-home .poster-motto { --motto: .636; width: calc(100cqi * var(--motto)); margin-inline: auto; color: var(--yellow); font-family: var(--font-action); font-size: calc(100cqi * var(--motto) * .131); font-weight: 600; line-height: 1; text-align: center; text-transform: uppercase; transform-origin: 0 0; }
.pg-home .poster-motto-lead { display: block; white-space: nowrap; }
.pg-home .poster-motto-word { display: inline-block; font-size: .79em; }
.pg-home .poster-motto-word::first-letter { font-size: 1.266em; }
.pg-home .poster-motto .city-lettering { display: block; width: 100%; margin-top: .15em; }
.pg-home .poster-figure { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.pg-home .poster-cutout { position: absolute; right: max(-5.5vw, calc(50% - 860px)); bottom: -1px; width: var(--figure); max-width: none; height: auto; }
.pg-home .poster-invitation { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s4); min-width: 0; }
.pg-home .poster-seat { font-family: var(--font-label); font-size: clamp(1.0625rem, calc(var(--name) * .0325), 1.5rem); font-weight: 500; line-height: 1.35; text-align: center; }
.pg-home .poster-seat span { display: block; white-space: nowrap; }
.pg-home .poster-invitation .btn-row { justify-content: center; }
.pg-home .poster-invitation .btn { min-height: 56px; padding-inline: var(--s6); font-size: 1.375rem; }
@media (min-width: 1024px) {
.pg-home .poster-seat span { display: inline-block; }
.pg-home .poster-seat span + span { margin-left: .75em; padding-left: .75em; border-left: 2px solid var(--ink); }
}
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
.pg-home .campaign-hero { --hero-h: clamp(760px, calc(100svh - var(--header-bar) - var(--rule)), 132vw); --name: min(80vw, 700px); --figure: min(84vw, calc((var(--hero-h) - var(--name) * .4701 - max(var(--s6), var(--logo-clear)) - var(--logo-clear)) * 1.125)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: stretch; row-gap: var(--logo-clear); padding: max(var(--s6), var(--logo-clear)) var(--gutter) 0; }
.pg-home .poster-cutout { right: -6vw; }
.pg-home .poster-invitation { align-self: center; justify-self: start; justify-items: stretch; width: min(42vw, 340px); }
.pg-home .poster-invitation .btn-row { flex-direction: column; align-items: stretch; gap: var(--s3); }
}
.pg-home .platform-heading { margin-bottom: var(--s7); }
.pg-home .platform-heading h2 { font-size: clamp(1.5rem, 5.2vw, 4.25rem); white-space: nowrap; }
.pg-home .issue-explorer { overflow: hidden; }
@media (min-width: 768px) { .pg-home .issue-preview-stage { background: transparent; border: 0; border-radius: 0; box-shadow: none; } }
.pg-home .issue-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pg-home .issue-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 112px; padding: var(--s4) var(--s2); text-decoration: none; font-family: var(--font-label); font-size: .9375rem; font-weight: 500; border-bottom: 2px solid var(--ink); }
.pg-home .issue-choice + .issue-choice { border-left: 1px solid var(--ink); }
@media (hover: hover) { .pg-home .issue-choice:hover { box-shadow: inset 0 3px var(--ink); } }
.pg-home .issue-choice[aria-selected="true"] { background: var(--orange); border-bottom-color: var(--ink); box-shadow: inset 0 4px var(--ink); --icon-fill: var(--paper); --focus: var(--ink); }
.pg-home .issue-choice:focus-visible { outline-offset: -5px; }
.pg-home .issue-preview { padding: clamp(24px, 4vw, 48px); }
.pg-home .issue-preview + .issue-preview { border-top: 1px solid var(--line); }
.pg-home .issue-explorer[data-ready] .issue-preview { border: 0; }
.pg-home .issue-preview-intro { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--s5); }
.pg-home .issue-preview-intro h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 600; line-height: 1.12; text-wrap: balance; }
.pg-home .issue-preview-intro h3 .city-lettering { width: 6.8em; }
@supports (mask-image: url('/assets/brand-v04/city-lettering-ink.svg')) {
@media screen {
.pg-home .issue-preview-intro h3 .city-lettering { max-width: calc(100% - 1.25em); margin-left: .18em; }
}
}
.pg-home .issue-preview-detail { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); row-gap: var(--s5); padding-top: var(--s6); margin-top: var(--s6); border-top: 1px solid var(--line); }
.pg-home .issue-preview-detail strong { display: block; font-family: var(--font-label); font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin-bottom: var(--s2); }
.pg-home .issue-preview-detail p { font-size: 1rem; }
.pg-home .issue-read { gap: var(--s3); justify-self: start; grid-column: 1 / -1; }
.pg-home .city-story-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.pg-home .city-photo { margin: 0; min-width: 0; }
.pg-home .city-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.pg-home .city-story-copy { padding: var(--s6) clamp(32px, 5vw, 80px); }
.pg-home .city-story-copy h2 { color: var(--teal); font-size: clamp(2.25rem, 4vw, 3.75rem); }
.pg-home .city-story-copy p { margin-top: var(--s5); max-width: 46ch; }
.pg-home .city-story-copy .btn { margin-top: var(--s5); }
.pg-home .home-volunteer { padding-bottom: var(--s8); }
.pg-home .volunteer-heading { max-width: none; }
.pg-home .volunteer-heading h2 { font-size: clamp(1.5rem, 5.2vw, 4.25rem); white-space: nowrap; }
.pg-home .district-check { padding-block: var(--s8); }
@media (max-width: 1023px) {
.pg-home .city-story-grid { grid-template-columns: 1fr; }
.pg-home .city-story-copy { padding: var(--s6) var(--gutter) var(--s7); }
.pg-home .city-story-copy h2 { font-size: clamp(1.875rem, 8.4vw, 2.25rem); }
}
@media (max-width: 767px) {
.pg-home .campaign-hero { --name: min(100vw - 40px, 90.2vw, 568px); --logo-clear: calc(min(90.2vw, 568px) * .053821); padding-top: max(var(--s5), var(--logo-clear)); --stage: clamp(min(60vw, 260px), calc(100svh - var(--header-bar) - var(--rule) - 2 * max(var(--s5), var(--logo-clear)) - var(--name) * .5609 - 78px), min(88.9vw, 520px)); display: block; min-height: 0; padding-bottom: 0; padding-left: 0; }
.pg-home :is(.poster-heading, .poster-invitation) { padding-inline: var(--gutter); }
.pg-home .poster-heading { padding-bottom: max(var(--s5), var(--logo-clear)); }
.pg-home .poster-identity { width: min(100%, 90.2vw, 568px); }
.pg-home .poster-motto { --motto: 1; margin-top: var(--s1); }
.pg-home .poster-figure { position: relative; inset: auto; display: flex; justify-content: center; align-items: flex-end; height: calc(var(--stage) + 2px); border-bottom: 2px solid var(--ink); }
.pg-home .poster-cutout { position: static; flex: none; width: calc(var(--stage) * 1.125); margin-bottom: -1px; }
.pg-home .poster-invitation { justify-items: stretch; gap: var(--s3); padding-top: var(--s3); padding-bottom: var(--s5); }
.pg-home .poster-seat { order: 1; margin-top: var(--s1); font-size: clamp(1.125rem, 4.8vw, 1.25rem); }
.pg-home .poster-invitation .btn-row { flex-direction: column; align-items: stretch; gap: var(--s3); }
.pg-home .poster-invitation .btn { min-height: 52px; width: 100%; padding-inline: var(--s5); font-size: 1.25rem; }
.pg-home .home-platform { padding-block: var(--s7); }
.pg-home .home-volunteer { padding-block: var(--s8); }
.pg-home .platform-heading { margin-bottom: var(--s5); }
.pg-home .platform-heading h2, .pg-home .volunteer-heading h2 { font-size: clamp(1.375rem, 8vw, 2.125rem); }
.pg-home .issue-explorer { border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none; }
.pg-home .issue-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.pg-home .issue-choice { flex-direction: column; justify-content: center; gap: var(--s1); min-height: 84px; padding: 10px var(--s1); border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--canvas); font-family: var(--font-action); font-size: clamp(.875rem, 4.4vw, 1.125rem); font-weight: 600; line-height: 1.15; }
.pg-home .issue-choice + .issue-choice { border-left: 1px solid var(--ink); }
.pg-home .issue-choice .campaign-icon { width: 34px; height: 34px; }
@media (hover: hover) { .pg-home .issue-choice:hover { box-shadow: inset 0 0 0 1px var(--ink); } }
.pg-home .issue-choice[aria-selected="true"] { --focus: var(--ink); --icon-fill: var(--paper); background: var(--hover); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.pg-home .issue-preview { padding: var(--s5); }
.pg-home .issue-preview-intro { display: block; }
.pg-home .issue-emblem { display: none; }
.pg-home .issue-preview-intro h3 { font-size: clamp(1.375rem, 6.2vw, 1.625rem); }
.pg-home .issue-preview-detail { grid-template-columns: 1fr; gap: var(--s5); padding-top: var(--s5); margin-top: var(--s5); }
.pg-home .issue-preview-detail strong { font-size: 1.25rem; margin-bottom: var(--s2); }
.pg-home .issue-preview-detail p { font-size: 1.0625rem; }
.pg-home .issue-read { width: 100%; gap: var(--s2); padding-inline: var(--s3); font-size: 1.0625rem; }
.pg-home .dc-body { gap: var(--s4); padding: var(--s5); }
.pg-home .dc-heading { margin: 0; }
.pg-home .dc-title { font-size: clamp(1.875rem, 8.4vw, 2.25rem); }
.pg-home .dc-body > .field { margin-top: var(--s2); }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
.pg-home .issue-choice[aria-selected="true"] .campaign-icon { animation: issue-pick 320ms var(--ease-out); }
@keyframes issue-pick { from { transform: scale(.7); } to { transform: none; } }
}
@media (forced-colors: active) { .pg-home :is(.task-tile:active, .issue-choice[aria-selected="true"]) { outline: 2px solid Highlight; outline-offset: -3px; } }
@media print { .pg-home :is(.poster-motto, .platform-heading h2) { color: var(--ink); } }
@media print {
.pg-home .campaign-hero { display: block; min-height: 0; padding: 0; }
.pg-home .poster-figure { position: static; height: auto; border: 0; }
.pg-home .poster-cutout { position: static; display: block; width: min(60%, 320px); margin: var(--s4) auto; }
}
}