@layer page {
.ballot { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.ballot-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: clamp(28px, 4vw, 48px); }
.ballot-head h2 { scroll-margin-top: calc(var(--header-bar) + var(--s6)); }
.ballot-head h2:focus { outline: none; }
.ballot-source { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-family: var(--font-label); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.ballot-source .ui-glyph { flex: none; width: 17px; height: 17px; }
.ballot-source:hover { color: var(--teal); text-decoration-thickness: 2px; }
.ballot-paper { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-md); box-shadow: 10px 10px 0 var(--ink); }
.ballot-part, .ballot-cover { padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4.5vw, 64px); }
.ballot-part + .ballot-part, .ballot-cover + .ballot-part { border-top: 2px solid var(--ink); }
.ballot-cover { display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.ballot-instructions, .ballot-instructions-stop { max-width: 34rem; font-weight: 700; text-wrap: balance; }
.ballot-instructions-stop { letter-spacing: .06em; }
.ballot-oval.is-filled { display: inline-block; vertical-align: -.15em; background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ballot-voter-instructions { display: grid; justify-items: center; gap: var(--s1); margin-top: clamp(32px, 4vw, 48px); padding-top: var(--s5); border-top: 1px solid var(--line); font-weight: 700; text-align: center; }
.ballot-voter-instructions-title { letter-spacing: .06em; }
.ballot-part-head { display: grid; justify-items: center; gap: var(--s4); margin-bottom: clamp(28px, 4vw, 44px); text-align: center; }
.ballot-line { display: block; }
.ballot-masthead { font: 700 clamp(1.0625rem, 1rem + .35vw, 1.3125rem)/1.18 var(--font-action); letter-spacing: .05em; }
.ballot-parties { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); max-width: none; font: 500 .8125rem/1.3 var(--font-label); letter-spacing: .05em; }
.ballot-intro { max-width: 62ch; font-weight: 700; text-wrap: balance; }
.ballot-vote-for { width: 100%; max-width: none; padding-bottom: var(--s3); border-bottom: 2px solid var(--ink); font: 700 1rem/1.2 var(--font-action); letter-spacing: .12em; }
.ballot-contests { --after: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); gap: var(--s3) clamp(24px, 4vw, 56px); margin-bottom: calc(-1 * var(--after)); }
.ballot-contest { display: grid; align-content: start; row-gap: var(--s3); min-width: 0; }
.ballot-contest-head { align-self: end; }
.ballot-office { font: 700 1.3125rem/1.15 var(--font-action); letter-spacing: .01em; text-wrap: pretty; }
.ballot-district { margin-top: var(--s1); font-family: var(--font-label); font-weight: 500; }
.ballot-contest > .ballot-choices { margin-bottom: var(--after); }
.ballot-choices { display: grid; align-content: start; gap: 2px; }
.ballot-choice { position: relative; isolation: isolate; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); min-height: 40px; max-width: none; padding: 4px 16px 4px 8px; }
.ballot-choice.is-marked::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-pill); background: var(--yellow); clip-path: inset(0 0 0 0 round var(--r-pill)); }
.ballot-choice.is-marked :is(.ballot-name, .ballot-answer) { font-weight: 700; }
.ballot-name { overflow-wrap: anywhere; }
.ballot-party { min-width: 2.4em; font: 500 .9375rem/1 var(--font-label); }
.ballot-write-in { grid-column: 2 / -1; max-width: 14rem; margin-top: 16px; padding-top: 3px; border-top: 1.5px solid var(--ink); font: 500 .8125rem/1.2 var(--font-label); }
.ballot-oval { position: relative; width: 30px; height: 17px; border: 1.75px solid var(--ink); border-radius: 50%; }
.ballot-choice.is-marked .ballot-oval::after { content: ""; position: absolute; inset: -1.75px; border-radius: 50%; background: var(--ink); clip-path: inset(0 0 0 0); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ballot-yes-no { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s3); }
.ballot-yes-no .ballot-choice { grid-template-columns: 30px auto; }
.ballot-answer { font-family: var(--font-label); font-weight: 500; letter-spacing: .04em; }
.ballot-courts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 56px); }
.ballot-court { display: grid; align-content: start; row-gap: var(--s5); min-width: 0; }
.ballot-court-wide { grid-column: 1 / -1; }
.ballot-court-name { display: flex; flex-direction: column; justify-content: end; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); font: 700 1.0625rem/1.2 var(--font-action); letter-spacing: .05em; text-align: center; }
.ballot-judges { --after: clamp(20px, 2.5vw, 32px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: var(--s2) clamp(24px, 3.5vw, 48px); margin-bottom: calc(-1 * var(--after)); }
.ballot-judge { display: grid; align-content: start; row-gap: var(--s2); min-width: 0; }
.ballot-division { margin: 0; font: 700 1.0625rem/1.2 var(--font-action); letter-spacing: .03em; }
.ballot-question { font-size: 1rem; line-height: 1.5; }
.ballot-judge .ballot-yes-no { margin: var(--s1) 0 0; }
.ballot-choice-note { margin-bottom: var(--after); font-size: .875rem; line-height: 1.4; }
@supports (grid-template-rows: subgrid) {
.ballot-contest { grid-row: span 2; grid-template-rows: subgrid; }
.ballot-court-wide .ballot-judge { grid-row: span 4; grid-template-rows: subgrid; }
}
.ballot-measures { columns: 3 17rem; column-gap: clamp(32px, 4vw, 64px); column-rule: 1px solid var(--line); }
.ballot-measure { break-inside: avoid; margin-bottom: clamp(40px, 5vw, 56px); }
.ballot-measures .ballot-measure:last-child { margin-bottom: 0; }
.ballot-measure-title { display: flex; align-items: center; justify-content: center; gap: var(--s3); margin-bottom: var(--s3); }
.ballot-measure-label { font: 700 1rem/1.08 var(--font-action); letter-spacing: .05em; text-align: right; }
.ballot-measure-number { font: 700 3.25rem/.9 var(--font-action); }
.ballot-proposed { max-width: none; margin-bottom: var(--s4); font: 500 .8125rem/1.4 var(--font-label); text-align: center; }
.ballot-text, .ballot-bullets li { font-size: 1rem; line-height: 1.5; }
.ballot-text + .ballot-text { margin-top: var(--s3); }
.ballot-bullets { display: grid; gap: var(--s2); margin-top: var(--s2); }
.ballot-bullets li { position: relative; padding-left: 18px; }
.ballot-bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.ballot-fiscal { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.5; }
.ballot-part-county .ballot-measure { max-width: 46rem; margin: 0 auto; }
@media (min-width: 601px) {
.ballot-court-name { min-height: calc(2.4em + var(--s3) + 1px); }
}
@media (max-width: 699px) {
.ballot-measures .ballot-measure + .ballot-measure { padding-top: var(--s6); border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
.ballot-paper { box-shadow: 6px 6px 0 var(--ink); }
.ballot-courts { grid-template-columns: minmax(0, 1fr); }
.ballot-court-wide { grid-column: auto; }
.ballot-office { font-size: 1.25rem; }
.ballot-measure-number { font-size: 2.75rem; }
}
@keyframes ballot-ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ballot-highlight { from { clip-path: inset(0 100% 0 0 round var(--r-pill)); } to { clip-path: inset(0 0 0 0 round var(--r-pill)); } }
@media screen and (prefers-reduced-motion: no-preference) {
.ballot[data-ballot-motion] [data-ink="wait"] .is-marked .ballot-oval::after { clip-path: inset(0 100% 0 0); }
.ballot[data-ballot-motion] [data-ink="wait"] .is-marked::before { clip-path: inset(0 100% 0 0 round var(--r-pill)); }
.ballot[data-ballot-motion] [data-ink="drawn"] .is-marked .ballot-oval::after { animation: ballot-ink 360ms var(--ease-out) 100ms backwards; }
.ballot[data-ballot-motion] [data-ink="drawn"] .is-marked::before { animation: ballot-highlight 340ms var(--ease-out) 400ms backwards; }
}
@media (forced-colors: active) {
.ballot-paper, .ballot-part + .ballot-part, .ballot-vote-for, .ballot-oval, .ballot-write-in { border-color: CanvasText; }
.ballot-choice.is-marked .ballot-oval::after, .ballot-bullets li::before { background: CanvasText; forced-color-adjust: none; }
.ballot-choice.is-marked .ballot-name, .ballot-choice.is-marked .ballot-answer { text-decoration: underline; }
}
@media print {
.ballot-paper { box-shadow: none; }
.ballot [data-ink] .is-marked .ballot-oval::after, .ballot [data-ink] .is-marked::before { clip-path: none; animation: none; }
.ballot-measure, .ballot-judge, .ballot-contest { break-inside: avoid; }
}
}