*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#142338;background:#f5f3ee;font-family:Inter,Arial,sans-serif}.mast{background:linear-gradient(110deg,#0c223c,#1d4168);color:white;padding:42px 24px 32px}.mast-inner{max-width:1250px;margin:auto;position:relative}.kicker,.eyebrow{font-size:11px;font-weight:800;letter-spacing:.17em}.mast h1{font:normal clamp(48px,6vw,88px)/.98 Georgia,serif;letter-spacing:-.05em;margin:15px 0 12px}.mast h1 em{font-style:normal;color:#b9d0eb}.mast p{font:20px Georgia,serif;margin:0 0 24px}.switch{display:flex;gap:8px;flex-wrap:wrap}.switch button{border:1px solid #ffffff75;background:#ffffff10;color:white;padding:13px 22px;border-radius:5px;font-weight:700;cursor:pointer}.switch button[aria-pressed=true]{background:white;color:#173456}main{max-width:1250px;margin:auto;padding:0 24px}.intro{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:end;padding:48px 0 38px}.eyebrow{color:#52759f}.intro h2{font:normal clamp(28px,3vw,42px)/1.13 Georgia,serif;margin:12px 0 0}.intro p{line-height:1.7;color:#526174;max-width:490px}.reader{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr);gap:45px;align-items:start}.paper-column{padding:12px 0 50px}.ballot{position:relative;background:#fdfbf4;color:#181818;box-shadow:0 18px 45px #172d4430,0 0 0 1px #b8b4aa; padding:52px 46px 45px;clip-path:polygon(0 1.1%,3% .4%,6% 1%,9% .2%,12% 1%,15% .5%,19% 1%,23% .3%,27% .9%,31% .2%,35% 1%,40% .3%,45% .9%,50% .2%,55% 1%,60% .4%,65% 1%,70% .2%,75% 1%,80% .3%,85% .9%,90% .2%,95% .8%,100% .2%,100% 99%,96% 99.7%,92% 99%,88% 99.8%,84% 99%,80% 99.7%,76% 99%,72% 99.8%,68% 99%,64% 99.7%,60% 99%,56% 99.8%,52% 99%,48% 99.7%,44% 99%,40% 99.8%,36% 99%,32% 99.7%,28% 99%,24% 99.8%,20% 99%,16% 99.7%,12% 99%,8% 99.8%,4% 99%,0 99.7%);background-image:repeating-linear-gradient(0deg,#77777705 0px,#77777705 1px,transparent 1px,transparent 4px),linear-gradient(#fffdf7,#f9f6ed)}.ballot:before,.ballot:after{content:"";position:absolute;top:55px;bottom:55px;width:11px;background:repeating-linear-gradient(to bottom,#252525 0 12px,transparent 12px 32px)}.ballot:before{left:11px}.ballot:after{right:11px}.paper-head{text-align:center;border:2px solid #262626;padding:20px 10px 0;font-family:Arial,sans-serif;font-size:12px;line-height:1.45}.paper-head strong{display:block;font-size:17px;letter-spacing:.06em;margin:8px 0}.smallcaps{font-weight:800;letter-spacing:.14em}.measure-name{margin:17px -10px 0;padding:12px;border-top:2px solid #262626;font-size:16px;font-weight:800;text-transform:uppercase}.passage{border-left:2px solid #252525;border-right:2px solid #252525;padding:22px 18px 25px;scroll-margin-top:24vh;position:relative;transition:background .3s}.passage:last-child{border-bottom:2px solid #252525}.passage.active{background:#e8e0bb}.passage button{display:block;border:0;background:transparent;color:inherit;text-align:left;width:100%;padding:0;cursor:pointer}.passage .num{display:block;color:#51627a;font:700 10px Arial,sans-serif;letter-spacing:.12em;margin-bottom:12px}.passage .ballot-copy{white-space:pre-line;font:17px/1.65 Georgia,serif}.passage.active .ballot-copy{box-shadow:inset 0 -.18em #f3ce72}.passage button:focus-visible{outline:3px solid #3e5a9d;outline-offset:5px}.paper-foot{border:2px solid #252525;border-top:0;font:700 15px/2 Arial,sans-serif;padding:22px 30px}.sidebar{align-self:stretch}.sticky{position:sticky;top:22px;padding:28px 0 30px}.meter{height:4px;background:#d8dee7;margin:15px 0 25px}.meter span{display:block;height:100%;background:#3e5a9d;transition:width .25s}.sticky h2{font:normal clamp(34px,3.6vw,54px)/1.06 Georgia,serif;letter-spacing:-.035em;margin:0 0 17px}.sticky>p{font:19px/1.6 Georgia,serif;color:#34475e}.visual{margin:25px 0;padding:22px;background:#fff;border:1px solid #e2e5e9;box-shadow:0 4px 12px #13253c0a;border-radius:5px}.visual h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px}.bar-row{margin:12px 0}.bar-label{display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:7px}.bar-track{height:11px;background:#e6ebf1;border-radius:2px;overflow:hidden}.bar-fill{height:100%;background:#3e5a9d}.yearline{display:flex;gap:4px}.yearline span{flex:1;text-align:center;background:#dce7f5;padding:13px 2px;font-weight:700;font-size:13px}.rategrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.rategrid div{background:#edf2f8;padding:13px}.rategrid small{display:block;color:#5d6b7a}.rategrid strong{font:26px Georgia,serif}.visual label{display:block;margin:14px 0;font-size:12px;font-weight:700}.visual input,.visual select{display:block;width:100%;padding:11px;margin-top:5px;border:1px solid #bac5d1;background:white;font-size:16px}.result{font:32px Georgia,serif;color:#294d80}.fine{font-size:12px;line-height:1.55;color:#617082}.controls{display:flex;gap:10px;margin-top:24px}.controls button{flex:1;border:1px solid #3e5a9d;background:white;color:#3e5a9d;padding:13px 8px;font-weight:700;cursor:pointer}.controls button:last-child{background:#3e5a9d;color:white}.controls button:disabled{opacity:.35;cursor:default}.sidebar-note{border-top:1px solid #d4d9df;margin-top:25px;padding-top:15px;color:#6b7887;font-size:12px;line-height:1.6}.explain-btn,.mobile-sheet,.sheet-backdrop{display:none}footer{font-size:12px;color:#627083;line-height:1.7;padding:25px 0 55px;border-top:1px solid #d7dce3}@media(max-width:800px){.mast{padding:32px 18px}.intro{grid-template-columns:1fr;gap:7px;padding:30px 0}.reader{display:block}.sidebar{display:none}main{padding:0 15px}.paper-column{padding-top:4px}.ballot{padding:42px 25px 40px}.ballot:before,.ballot:after{width:6px;left:5px}.ballot:after{left:auto;right:5px}.paper-head strong{font-size:13px}.passage{padding:19px 12px}.passage .ballot-copy{font-size:15px;line-height:1.55}.passage{padding-bottom:15px}.passage .num{margin-bottom:8px}.passage .ballot-copy{font-size:15px;line-height:1.6}.passage.active{background:#f6edcf}.explain-btn{display:inline-flex;margin-top:14px;padding:9px 14px;border:1px solid #3e5a9d;border-radius:30px;background:#fff;color:#244c83;font:700 12px Inter,Arial,sans-serif;cursor:pointer;align-items:center;gap:6px}.sheet-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#0a1929a8;z-index:9998}.mobile-sheet:not([hidden]){display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:9999;max-height:87dvh;min-height:30vh;background:#fcfbf8;border-radius:19px 19px 0 0;box-shadow:0 -16px 45px #0005;overflow:hidden}.sheet-handle{width:38px;height:5px;background:#cbd1d7;border-radius:20px;align-self:center;margin:10px 0 5px;flex:none}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 22px 12px;border-bottom:1px solid #e1e4e9;flex:none}.sheet-label{font-size:10px;font-weight:800;letter-spacing:.15em;color:#597396}.sheet-close{width:36px;height:36px;border:1px solid #cbd4dd;border-radius:50%;background:white;font-size:16px;color:#243a53;cursor:pointer}.sheet-content{overflow-y:auto;overscroll-behavior:contain;padding:23px 23px max(30px,env(safe-area-inset-bottom));flex:1}.sheet-content h2{font:normal 34px/1.08 Georgia,serif;letter-spacing:-.03em;margin:0 0 14px}.sheet-content>p{font:17px/1.65 Georgia,serif;color:#33475c}.sheet-content .visual{margin:18px 0;padding:17px}.sheet-content .result{font-size:29px}.sheet-actions{display:flex;gap:9px;margin:20px 0}.sheet-actions button{flex:1;padding:13px 8px;background:#3e5a9d;border:1px solid #3e5a9d;color:white;font-weight:700;border-radius:4px}.sheet-actions button:first-child{background:white;color:#3e5a9d}.sheet-actions button:disabled{opacity:.35}.sheet-content .sheet-disclaimer{font:12px/1.55 Inter,Arial,sans-serif;color:#718094;border-top:1px solid #e2e5e8;padding-top:12px}.sheet-open{overflow:hidden}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
[hidden]{display:none!important}
/* Mobile-only button refinement: retain the original ballot and neutral button styling. */
@media(max-width:800px){.explain-btn{padding:12px 17px;font-size:14px;min-height:44px;border:1.5px solid #242424;background:#242424;color:#fff;font-weight:750;letter-spacing:.005em}.explain-btn:hover{background:#383838}.explain-btn:focus-visible{outline:3px solid #3e5a9d;outline-offset:3px}}
/* The explanation trigger belongs exclusively to the mobile ballot view. */
@media (min-width:801px){.passage .explain-btn{display:none!important}}
@media (max-width:800px){.passage .explain-btn{display:inline-flex}}
/* Reader questions: separate from the printed ballot and annotation experience. */
.reader-questions{max-width:1050px;margin:68px auto 56px;border-top:2px solid #202e40;padding-top:32px}.rq-heading{max-width:700px;margin-bottom:25px}.rq-heading h2{font:normal clamp(31px,4vw,49px)/1.1 Georgia,serif;margin:9px 0 12px}.rq-heading p{color:#566578;line-height:1.6}.rq-list{border-top:1px solid #cdd4dc}.rq-item{border-bottom:1px solid #cdd4dc}.rq-item summary{display:flex;align-items:center;gap:15px;cursor:pointer;list-style:none;padding:22px 5px;font-size:clamp(17px,2vw,22px);font-weight:700}.rq-item summary::-webkit-details-marker{display:none}.rq-number{font:700 11px Arial,sans-serif;color:#65758b;letter-spacing:.1em}.rq-plus{margin-left:auto;font-size:26px;font-weight:400;transition:transform .2s}.rq-item[open] .rq-plus{transform:rotate(45deg)}.rq-answer{max-width:770px;padding:0 10px 26px 43px;color:#344456;line-height:1.7}.rq-answer p{margin:0 0 16px}.rq-caution{font-size:13px;color:#69778a}.rq-class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:15px 0 20px}.rq-class-grid div{padding:15px;background:#f0f3f6;border-radius:4px}.rq-class-grid b,.rq-class-grid span{display:block}.rq-class-grid span{font-size:13px;line-height:1.5;margin-top:5px}.rq-calc{max-width:460px;padding:19px;background:#f0f3f6;margin:15px 0 20px}.rq-calc label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}.rq-calc select,.rq-calc input{display:block;width:100%;box-sizing:border-box;font-size:16px;padding:12px;background:#fff;border:1px solid #b8c3d0;margin:0 0 17px}.rq-estimate{border-top:1px solid #cbd3dc;padding-top:13px}.rq-estimate span,.rq-estimate strong{display:block}.rq-estimate span{font-size:12px}.rq-estimate strong{font:normal 36px Georgia,serif;color:#273e60}.rq-timeline{border-left:2px solid #3e5a9d;padding-left:20px;margin:20px 0}.rq-timeline div{margin:0 0 16px}.rq-timeline b,.rq-timeline span{display:block}.rq-timeline span{font-size:14px}@media(max-width:800px){.reader-questions{margin:40px auto 42px;padding-top:25px}.rq-item summary{padding:18px 0;gap:10px}.rq-answer{padding:0 0 22px 0}.rq-class-grid{grid-template-columns:1fr}.rq-heading h2{font-size:32px}}
/* Editorial allocation pies — emphasized active slice, muted context. */
.pie-layout{display:grid;grid-template-columns:minmax(135px,.92fr) minmax(150px,1.08fr);gap:12px;align-items:center}.allocation-pie{display:block;width:100%;height:auto;overflow:visible;max-width:270px;margin:auto}.pie-slice{transition:fill .25s ease,transform .25s ease}.pie-legend{display:grid;gap:9px}.pie-legend-item{display:grid;grid-template-columns:10px minmax(0,1fr);gap:3px 8px;align-items:center;font-size:12px;padding:6px;border-radius:4px}.pie-dot{width:10px;height:10px;border-radius:50%}.pie-label{line-height:1.25}.pie-value{grid-column:2;font-size:12px;font-variant-numeric:tabular-nums}.pie-legend-item.is-selected{background:#edf2fa;outline:1px solid #c8d7e9}.pie-legend-item.is-muted{color:#7b8490}.explore-panel{margin-top:25px;border-top:1px solid #cbd4df;padding-top:17px}.explore-panel>h3{font:800 11px Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#526d8d;margin:0 0 7px}.explore-panel .rq-item summary{font-size:15px;padding:14px 0;gap:9px}.explore-panel .rq-plus{font-size:23px}.explore-panel .rq-answer{padding:0 0 15px;font-size:14px}.explore-panel .rq-class-grid{grid-template-columns:1fr}.explore-panel .rq-calc{padding:12px}.explore-panel .rq-estimate strong{font-size:29px}.explore-panel .rq-item{border-color:#d7dce2}.reader-questions[hidden]{display:none!important}
@media(max-width:800px){.pie-layout{grid-template-columns:1fr;gap:4px}.allocation-pie{max-width:220px}.pie-legend{gap:4px}.pie-legend-item{grid-template-columns:10px 1fr auto}.pie-value{grid-column:3}.explain-btn,.passage .explain-btn{padding:12px 17px!important;min-height:44px;background:#242424!important;color:white!important;border:1.5px solid #242424!important;border-radius:7px!important;font-size:13px!important;box-shadow:none!important;filter:none!important}.explain-btn:hover,.passage .explain-btn:hover,.explain-btn:active,.passage .explain-btn:active{background:#242424!important;color:#fff!important;box-shadow:none!important;filter:none!important}.explore-panel .rq-item summary{font-size:16px}.sheet-content .explore-panel{margin-bottom:10px}}
@media(min-width:801px){.explain-btn,.passage .explain-btn{display:none!important}}
/* Desktop-only independent annotation scroll. No changes to ballot scroll tracking.
The original IntersectionObserver in app.js remains untouched. */
@media (min-width:801px) {
.reader .sidebar .sticky {
max-height: calc(100vh - 44px);
max-height: calc(100dvh - 44px);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: #aeb9c7 transparent;
padding-right: 12px;
overscroll-behavior-y: auto;
}
.reader .sidebar .sticky::-webkit-scrollbar { width: 7px; }
.reader .sidebar .sticky::-webkit-scrollbar-thumb { background: #aeb9c7; border-radius: 8px; }
.reader .sidebar .sticky::-webkit-scrollbar-track { background: transparent; }
}
/* ARTICLE EMBED OVERRIDES — the host article supplies the background. */
html, body { background: transparent !important; }
body { margin: 0; }
.decoder-main { max-width: none; padding: 0; margin: 0; }
.levy-selector { padding: 8px 0 30px; }
.levy-selector-label { margin: 0 0 13px; color: #142338; font: 700 16px/1.5 Inter,Arial,sans-serif; }
.levy-selector .switch { gap: 10px; }
.levy-selector .switch button {
border: 1px solid #3e5a9d; background: transparent; color: #3e5a9d;
border-radius: 5px; padding: 12px 20px; font: 700 14px Inter,Arial,sans-serif;
}
.levy-selector .switch button[aria-pressed="true"] { background: #3e5a9d; color: #fff; }
.levy-selector .switch button:focus-visible { outline: 3px solid #91a9cf; outline-offset: 3px; }
.decoder-source { margin-top: 12px; }
/* Preserve the original automatic ballot scroll; only allow sidebar content to scroll. */
@media (min-width:801px) {
.sidebar .sticky { max-height: calc(100dvh - 44px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #aeb9c7 transparent; padding-right: 12px; }
}
/* Plain text triggers — no pills, borders, fills or blue. */
@media (max-width:800px) {
.decoder-main { padding: 0; }
.levy-selector { padding: 6px 0 22px; }
.levy-selector .switch button { padding: 11px 14px; }
.passage .explain-btn, .explain-btn,
.passage .explain-btn:hover, .explain-btn:hover,
.passage .explain-btn:active, .explain-btn:active {
display: inline-block !important;
width: auto !important;
min-height: 0 !important;
margin: 12px 0 0 !important;
padding: 3px 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #171717 !important;
font: 700 13px/1.5 Inter,Arial,sans-serif !important;
text-decoration: underline;
text-underline-offset: 3px;
filter: none !important;
}
.passage .explain-btn:focus-visible { outline: 2px solid #3e5a9d !important; outline-offset: 3px; }
}
/* Article inset: 20px of breathing room on both sides, including mobile. */
.decoder-main { padding-left:20px !important; padding-right:20px !important; }
/* Sticky annotation follows the HOST article viewport, not the tall iframe's viewport.
Variables are set by the small same-origin bridge in index.html. */
@media(min-width:801px){
.reader .sidebar .sticky {
top:var(--kvu-host-sticky-top,22px);
max-height:var(--kvu-host-sticky-height,calc(100dvh - 44px));
}
}
/* FINAL EMBED REFINEMENTS */
.decoder-main{padding-left:10%!important;padding-right:10%!important}
@media(min-width:801px){
.reader .sidebar{position:relative;align-self:stretch;min-width:0}
.reader .sidebar .sticky{
position:absolute!important;top:0!important;left:0;right:0;
width:100%;max-height:var(--kvu-host-panel-height,calc(100dvh - 90px));
transform:translate3d(0,var(--kvu-sidebar-offset,0px),0);
will-change:transform;
overflow-y:auto;
scrollbar-width:thin;
overscroll-behavior:contain;
}
}
@media(max-width:800px){
.decoder-main{padding-left:20px!important;padding-right:20px!important}
/* Overlay is positioned within the tall iframe at the actual HOST viewport */
.sheet-backdrop:not([hidden]){position:absolute!important;top:var(--kvu-mobile-overlay-top,0px)!important;bottom:auto!important;height:var(--kvu-mobile-viewport-height,100dvh)!important}
.mobile-sheet:not([hidden]){
position:absolute!important;
top:var(--kvu-mobile-sheet-top,0px)!important;
bottom:auto!important;
height:var(--kvu-mobile-sheet-height,75dvh)!important;
max-height:none!important;
min-height:0!important;
}
}
/* Keep the annotation column stretched for the full ballot height. */
@media(min-width:801px){
.reader{align-items:stretch!important}
.reader .sidebar{align-self:stretch!important;min-height:100%}
}
/* Stable sidebar viewport: annotation content can change length without
changing the panel's dimensions or its sticky position. */
@media(min-width:801px){
.reader .sidebar .sticky{
height:var(--kvu-host-panel-height,calc(100dvh - 90px))!important;
max-height:none!important;
overflow-y:auto!important;
overflow-anchor:none;
}
}
/* Avoid scroll anchoring moving the annotation as charts/FAQs are replaced. */
@media(min-width:801px){
.reader .sidebar,.reader .sidebar .sticky,.reader .sidebar .sticky *{overflow-anchor:none}
.reader .sidebar .sticky{scroll-behavior:auto!important}
}
/* Stable, gently changing annotation content. No scroll-top snapping. */
@media(min-width:801px){
.reader .sidebar .sticky{overflow-anchor:none!important}
.reader .sidebar .sticky.kvu-annotation-updated > :is(.eyebrow,.meter,h2,p,#graphic,#sidebarExplore){
animation:kvuAnnotationReveal 180ms ease-out both;
}
@keyframes kvuAnnotationReveal{
from{opacity:.38}
to{opacity:1}
}
}
@media(prefers-reduced-motion:reduce){
.reader .sidebar .sticky.kvu-annotation-updated > :is(.eyebrow,.meter,h2,p,#graphic,#sidebarExplore){animation:none!important}
}
/* The article host owns the desktop sidebar position; content updates never do. */
@media(min-width:801px){
.reader .sidebar .sticky{
height:var(--kvu-host-panel-height,calc(100dvh - 90px))!important;
max-height:none!important;
transform:translate3d(0,var(--kvu-sidebar-offset,0px),0)!important;
overflow-anchor:none!important;
contain:layout style;
}
}
/* October 2026: WHITE TORN-PAPER BALLOT — cosmetic changes only.
The ballot remains an actual selectable/accessible HTML document.
Shadow lives on the parent because clip-path clips box-shadow on .ballot. */
.paper-column {
filter: drop-shadow(0 5px 5px rgba(19, 35, 56, .12))
drop-shadow(0 13px 11px rgba(19, 35, 56, .14));
}
.ballot {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
box-shadow: none !important;
clip-path: polygon(
0.00% 11.4px,
2.50% 6.0px,
5.00% 9.0px,
7.50% 6.5px,
10.00% 5.7px,
12.50% 9.0px,
15.00% 14.2px,
17.50% 17.0px,
20.00% 12.7px,
22.50% 7.2px,
25.00% 10.4px,
27.50% 7.8px,
30.00% 6.7px,
32.50% 6.1px,
35.00% 11.1px,
37.50% 14.3px,
40.00% 13.3px,
42.50% 13.1px,
45.00% 13.0px,
47.50% 6.9px,
50.00% 8.1px,
52.50% 15.3px,
55.00% 12.3px,
57.50% 13.5px,
60.00% 13.8px,
62.50% 5.9px,
65.00% 11.1px,
67.50% 11.7px,
70.00% 14.1px,
72.50% 6.8px,
75.00% 9.7px,
77.50% 5.9px,
80.00% 14.3px,
82.50% 13.7px,
85.00% 10.5px,
87.50% 12.0px,
90.00% 14.1px,
92.50% 10.7px,
95.00% 13.8px,
97.50% 13.5px,
100.00% 10.1px,
100.00% calc(100% - 10.1px),
97.50% calc(100% - 13.5px),
95.00% calc(100% - 13.8px),
92.50% calc(100% - 10.7px),
90.00% calc(100% - 14.1px),
87.50% calc(100% - 12.0px),
85.00% calc(100% - 10.5px),
82.50% calc(100% - 13.7px),
80.00% calc(100% - 14.3px),
77.50% calc(100% - 5.9px),
75.00% calc(100% - 9.7px),
72.50% calc(100% - 6.8px),
70.00% calc(100% - 14.1px),
67.50% calc(100% - 11.7px),
65.00% calc(100% - 11.1px),
62.50% calc(100% - 5.9px),
60.00% calc(100% - 13.8px),
57.50% calc(100% - 13.5px),
55.00% calc(100% - 12.3px),
52.50% calc(100% - 15.3px),
50.00% calc(100% - 8.1px),
47.50% calc(100% - 6.9px),
45.00% calc(100% - 13.0px),
42.50% calc(100% - 13.1px),
40.00% calc(100% - 13.3px),
37.50% calc(100% - 14.3px),
35.00% calc(100% - 11.1px),
32.50% calc(100% - 6.1px),
30.00% calc(100% - 6.7px),
27.50% calc(100% - 7.8px),
25.00% calc(100% - 10.4px),
22.50% calc(100% - 7.2px),
20.00% calc(100% - 12.7px),
17.50% calc(100% - 17.0px),
15.00% calc(100% - 14.2px),
12.50% calc(100% - 9.0px),
10.00% calc(100% - 5.7px),
7.50% calc(100% - 6.5px),
5.00% calc(100% - 9.0px),
2.50% calc(100% - 6.0px),
0.00% calc(100% - 11.4px)
) !important;
}
/* Keep the ballot's original ink borders, perforation marks and highlighted passages. */
@media (max-width: 800px) {
.paper-column {
filter: drop-shadow(0 4px 4px rgba(19,35,56,.11))
drop-shadow(0 9px 9px rgba(19,35,56,.13));
}
}
/* Mobile: ensure the sheet is flush with the host viewport's lower edge.
No lower radius, margin, or extra bottom offset. */
@media(max-width:800px){
.mobile-sheet:not([hidden]){
margin:0!important;
padding-bottom:0!important;
border-radius:18px 18px 0 0!important;
box-sizing:border-box!important;
}
/* A short, one-time cue on ONLY the first explanation link. */
.passage:first-child .explain-btn.kvu-first-hint{
position:relative!important;
animation:kvuFirstHintPulse 1.4s ease-in-out infinite!important;
transform-origin:left center;
}
.passage:first-child .explain-btn.kvu-first-hint::after{
content:"";
position:absolute;
left:-6px;right:-6px;top:-4px;bottom:-4px;
border:2px solid #3e5a9d;
border-radius:4px;
pointer-events:none;
animation:kvuFirstHintRing 1.4s ease-out infinite;
}
@keyframes kvuFirstHintPulse{
0%,100%{transform:scale(1)}
45%{transform:scale(1.055)}
}
@keyframes kvuFirstHintRing{
0%{opacity:0;transform:scale(.94)}
35%{opacity:.8}
100%{opacity:0;transform:scale(1.08)}
}
}
@media(prefers-reduced-motion:reduce){
.passage:first-child .explain-btn.kvu-first-hint,
.passage:first-child .explain-btn.kvu-first-hint::after{
animation:none!important;
}
}
/* Selector hierarchy and alignment */
.levy-selector{text-align:center!important}
.levy-selector-label{font-size:clamp(19px,2vw,25px)!important;font-weight:750!important;line-height:1.3!important;margin-bottom:18px!important}
.levy-selector .switch{display:flex!important;justify-content:center!important;flex-wrap:wrap!important}
/* Desktop navigation: quiet circular chevrons */
@media(min-width:801px){
.reader .sidebar .sticky{scrollbar-width:none!important;padding-right:0!important}
.reader .sidebar .sticky::-webkit-scrollbar{display:none!important;width:0!important}
.reader .sidebar .controls{display:flex!important;justify-content:center!important;gap:14px!important}
.reader .sidebar .controls button{
flex:0 0 44px!important;width:44px!important;height:44px!important;
border-radius:50%!important;padding:0!important;display:grid!important;place-items:center!important;
font-size:0!important;line-height:1!important;
}
.reader .sidebar .controls button span{font:400 32px/1 Arial,sans-serif;transform:translateY(-2px)}
.reader .sidebar .sticky{position:relative}
.annotation-more:not([hidden]){
display:flex;align-items:center;justify-content:center;gap:6px;
position:sticky;bottom:0;z-index:10;width:100%;min-height:38px;
border:0;border-top:1px solid #dce3ec;cursor:pointer;
background:linear-gradient(180deg,rgba(255,255,255,.94),#fff 35%);
color:#3e5a9d;font:700 12px Inter,Arial,sans-serif;letter-spacing:.025em;
}
.annotation-more span{font-size:21px;line-height:1}
}
@media(max-width:800px){.annotation-more{display:none!important}}
.library-photo-card{margin:15px 0 12px;border:1px solid #d7e0eb;background:#fff;padding:0;border-radius:8px;overflow:hidden}
.library-photo-title{font:700 13px/1.4 Inter,Arial,sans-serif;padding:10px 12px;color:#233d60}
.library-photo{display:block;width:100%;height:155px;object-fit:cover}
/* Refinement: split the desktop navigation to opposite sides. */
@media(min-width:801px){
.reader .sidebar .controls{
width:100%;justify-content:space-between!important;gap:12px!important;
}
.reader .sidebar .controls button{flex:0 0 44px!important}
/* Soft, translucent fade on the cue's upper edge, with a clear call to action. */
.reader .sidebar .annotation-more:not([hidden]){
position:sticky;bottom:0;
isolation:isolate;
min-height:57px;
padding:13px 12px 9px;
border-top:0!important;
font-size:15px!important;
font-weight:800!important;
letter-spacing:.01em;
gap:9px;
background:rgba(255,255,255,.95)!important;
backdrop-filter:blur(9px);
-webkit-backdrop-filter:blur(9px);
box-shadow:0 -14px 18px -11px rgba(255,255,255,.97);
}
.reader .sidebar .annotation-more:not([hidden])::before{
content:"";position:absolute;pointer-events:none;
left:0;right:0;bottom:100%;height:26px;
background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.94));
}
.reader .sidebar .annotation-more span{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;font-size:0!important;
}
.reader .sidebar .annotation-more span::after{
content:"";display:block;width:9px;height:9px;
border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
transform:translateY(-3px) rotate(45deg);
}
}
/* Library building photo: no redundant heading; more generous image height. */
.library-photo-card{margin-top:15px}
.library-photo{height:clamp(230px,24vw,315px)!important;object-fit:cover}
@media(max-width:800px){.library-photo{height:235px!important}}
/* Final navigation polish: apply to both desktop and mobile. */
.levy-selector-label{
font-family:Georgia,"Times New Roman",serif!important;
font-weight:400!important;
letter-spacing:-.025em!important;
font-size:clamp(25px,3vw,36px)!important;
}
@media(max-width:800px){
.sheet-actions{justify-content:space-between!important;gap:12px!important}
.sheet-actions button{
flex:0 0 46px!important;width:46px!important;height:46px!important;
padding:0!important;border-radius:50%!important;
display:grid!important;place-items:center!important;
line-height:1!important;
}
.sheet-actions button span{font:400 33px/1 Arial,sans-serif;transform:translateY(-2px)}
}
@media(min-width:801px){
/* The bottom cue is the final child, so no annotation background can peek below it. */
.reader .sidebar .sticky{padding-bottom:0!important;scrollbar-width:none!important}
.reader .sidebar .annotation-more:not([hidden]){
bottom:0!important;min-height:65px!important;
padding:17px 12px 13px!important;
background:#fff!important;
backdrop-filter:blur(12px)!important;
-webkit-backdrop-filter:blur(12px)!important;
box-shadow:0 -12px 22px -9px rgba(255,255,255,.99)!important;
}
.reader .sidebar .annotation-more:not([hidden])::before{
height:36px!important;
background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)!important;
}
}
/* Final polish: bold serif selector and visible upper torn-paper edge. */
.levy-selector-label{font-weight:700!important}
/* A narrow inset shadow follows the clipped top paper edge. Unlike a large
outer shadow, it does not bleed into the adjacent annotation column. */
.ballot{filter:drop-shadow(0 -5px 3px rgba(26,38,53,.22))!important}
@media(max-width:800px){
.ballot{filter:drop-shadow(0 -5px 3px rgba(26,38,53,.32))!important}
}
/* KVU GRAPHICS BRAND PROFILE — editorial UI only; do not restyle .ballot,
.paper-head, .passage, .paper-foot or any of the ballot's typography. */
:root{--kvu-brand:#3e5a9d;--kvu-ink:#20252b;--kvu-muted:#626b75;--kvu-rule:#dce2e8;--kvu-surface:#fff;--kvu-serif:"abril-tiling", "Abril Titling", Georgia,serif;--kvu-ui:Inter,"Open Sans",Arial,sans-serif}
.decoder-main{color:var(--kvu-ink);font-family:var(--kvu-ui)}
.kvu-graphic-header{padding:15px 0 30px;margin-bottom:28px;border-bottom:1px solid var(--kvu-rule)}
.kvu-graphic-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--kvu-ink);font:700 11px/1.4 var(--kvu-ui);letter-spacing:.085em;text-transform:uppercase}
.kvu-brand-name{display:inline-flex;align-items:center;gap:9px}
.kvu-brand-name::before{content:"";display:block;width:5px;height:17px;background:var(--kvu-brand)}
.kvu-meta-divider{height:13px;width:1px;background:#c6ccd4}
.kvu-graphic-title{font-family:var(--kvu-serif);font-weight:400;font-size:clamp(40px,5.4vw,76px);letter-spacing:-.035em;line-height:1.04;margin:19px 0 9px;color:#17202c}
.kvu-graphic-deck{max-width:690px;font:400 clamp(15px,1.65vw,19px)/1.55 var(--kvu-ui);color:#4e5b68;margin:0}
.levy-selector{text-align:center!important;padding:0 0 34px!important}
.levy-selector-label{font:700 clamp(19px,2vw,24px)/1.3 var(--kvu-ui)!important;color:var(--kvu-ink)!important;margin:0 0 16px!important}
.levy-selector .switch{display:flex!important;justify-content:center!important;gap:12px!important}
.levy-selector .switch button{border-radius:5px!important;min-width:150px;min-height:44px;font-family:var(--kvu-ui)!important;transition:background-color .18s,color .18s}
.reader{gap:clamp(25px,3.4vw,48px)}
.sidebar .eyebrow,.sheet-label{font-family:var(--kvu-ui);color:var(--kvu-brand)}
.sidebar .sticky h2,.sheet-content h2,.rq-heading h2{font-family:var(--kvu-serif);letter-spacing:-.025em}
.sidebar .sticky>p,.sheet-content>p{font-family:var(--kvu-ui);font-size:clamp(16px,1.4vw,18px);line-height:1.62;color:#374657}
.sidebar .visual,.sheet-content .visual{box-shadow:none;border-color:var(--kvu-rule);border-radius:7px}
.sidebar .controls button,.sheet-actions button{font-family:var(--kvu-ui)}
.decoder-source{font-family:var(--kvu-ui);border-color:var(--kvu-rule)}
@media(max-width:800px){
.kvu-graphic-header{padding:10px 0 22px;margin-bottom:22px}
.kvu-graphic-meta{font-size:9px;gap:8px}
.kvu-graphic-title{font-size:clamp(35px,9vw,49px);margin:14px 0 8px}
.kvu-graphic-deck{font-size:14px;line-height:1.55}
.levy-selector{padding:0 0 25px!important}
.levy-selector-label{font-size:18px!important}
.levy-selector .switch{gap:9px!important}
.levy-selector .switch button{min-width:0;flex:1 1 125px;max-width:210px}
.sheet-content h2{font-size:32px}
}
/* Article-integrated edition: the surrounding story supplies the headline.
Apply the shared editorial serif to annotation titles, not the ballot.
Georgia remains a deliberate visible fallback until the site font file is loaded. */
.sidebar .sticky h2, .sheet-content h2, .rq-heading h2 {
font-family: "abril-tiling", "Abril Titling", Georgia, "Times New Roman", serif !important;
font-weight: 700 !important;
letter-spacing: -.025em !important;
}
/* The selector is a UI instruction rather than a headline. */
.levy-selector-label { font-family: Inter, "Open Sans", Arial, sans-serif !important; }
/* Approved treatment: gray active passage + original yellow underline. */
.passage.active{background:#eceef0 !important;transition:background-color .22s ease !important}
.passage.active .ballot-copy{
background:none !important;
box-shadow:inset 0 -.27em #f3ce72 !important;
padding:0 !important;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* Exact KVU-hosted Abril Titling Regular. Loaded inside the iframe. */
@font-face {
font-family: "KVU Abril Titling";
src: url("https://kvupdate.com/fonts/abril-titling/AbrilTitling.ttf") format("truetype");
font-style: normal;
font-weight: 400;
font-display: swap;
}
.sidebar .sticky h2,
.sheet-content h2,
.reader-questions .rq-heading h2 {
font-family: "KVU Abril Titling", Georgia, "Times New Roman", serif !important;
font-weight: 400 !important;
letter-spacing: 0.5px !important;
}
/* Editorial refinements: exact Abril regular with no tracking. */
.sidebar .sticky h2,.sheet-content h2,.reader-questions .rq-heading h2{letter-spacing:0!important}
/* Circular photos are floated inside the explanatory introduction, not the chart. */
.section-intro-photo{float:left;width:112px;height:112px;aspect-ratio:1;object-fit:cover;border-radius:50%;margin:4px 17px 10px 0;shape-outside:circle(50%);background:#edf0f4}
.sheet-content .section-intro-photo{width:96px;height:96px;margin:3px 14px 8px 0}
/* The only pie label appears on the active colored slice. */
.pie-active-label{font:700 15px/1 Inter,Arial,sans-serif;fill:#fff;stroke:#24354b;stroke-width:2.5px;paint-order:stroke fill;pointer-events:none}
/* October 23: circular image placement and containment; preserve existing charts/ballot. */
.section-intro-photo {
float: right;
width: 128px;
height: 128px;
margin: 3px 0 14px 18px;
shape-outside: circle(50%);
}
/* Contain floats so short descriptions never collide with the following chart/card. */
#annotationText, #sheetText { display: flow-root; }
/* Match the breathing room above the selector prompt to the space beneath it. */
.levy-selector { padding-top: 16px !important; }
@media (max-width:800px) {
.section-intro-photo, .sheet-content .section-intro-photo {
float: right;
width: 110px;
height: 110px;
margin: 3px 0 12px 15px;
}
.levy-selector { padding-top: 16px !important; }
}
/* Desktop annotations are scroll-led, not slide-led. Keep the existing
controls and counter in the DOM for app.js, but hide them on desktop only.
Mobile sheet navigation remains fully functional. */
@media (min-width: 801px) {
.reader .sidebar .controls,
.reader .sidebar #step {
display: none !important;
}
}
/* Oct. 23 refinement: right-aligned circular photos with annual amount captions. */
.section-intro-figure {
float:right;
display:flex;
flex-direction:column;
align-items:center;
width:128px;
margin:3px 0 15px 18px;
text-align:center;
}
.section-intro-figure .section-intro-photo {
float:none!important;
display:block;
width:128px;
height:128px;
margin:0 0 8px!important;
shape-outside:none;
}
.section-intro-amount {
display:block;
font:700 20px/1.2 Inter,Arial,sans-serif;
color:#3e5a9d;
white-space:nowrap;
}
.section-intro-period {
display:block;
margin-top:2px;
font:400 12px/1.35 Inter,Arial,sans-serif;
color:#566477;
}
@media(max-width:800px){
.section-intro-figure{width:110px;margin:3px 0 12px 15px}
.section-intro-figure .section-intro-photo{width:110px;height:110px}
.section-intro-amount{font-size:18px}
}
@media (min-width:801px) {
.reader .sidebar .meter {
display:block!important;
height:3px;
margin:0 0 22px;
background:#dce2e8;
border-radius:3px;
overflow:hidden;
}
.reader .sidebar .meter span { background:#3e5a9d; }
}
/* School levy editorial diagrams; inline SVG, no external animation dependencies. */
.calendar-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:14px 0 12px}
.calendar-year{text-align:center;color:#3e5a9d;font:600 12px/1.4 Inter,Arial,sans-serif;min-width:0}
.calendar-year svg{width:100%;max-width:86px;height:auto;display:block;margin:0 auto 4px;overflow:visible}
.calendar-body{fill:#fff;stroke:#cdd7e2;stroke-width:2}
.calendar-top{fill:#3e5a9d}
.calendar-rings{stroke:#243e71;stroke-width:5;stroke-linecap:round}
.calendar-month{font:700 12px Arial,sans-serif;fill:#fff}
.calendar-big{font:700 29px Arial,sans-serif;fill:#3e5a9d}
.calendar-year{animation:calendar-in .55s ease-out both}
.calendar-year:nth-child(2){animation-delay:.08s}.calendar-year:nth-child(3){animation-delay:.16s}.calendar-year:nth-child(4){animation-delay:.24s}.calendar-year:nth-child(5){animation-delay:.32s}
@keyframes calendar-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.levy-flow{margin:10px 0 0}
.levy-flow svg{width:100%;height:auto;display:block;max-width:400px;margin:auto}
.flow-card{fill:#f3f6fa;stroke:#b7c8dd;stroke-width:2}
.flow-destination{fill:#e6eef9}
.flow-text{fill:#263950;font:600 14px Arial,sans-serif}
.flow-arrow,.flow-arrowhead{fill:none;stroke:#3e5a9d;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:130;stroke-dashoffset:130;animation:flow-draw 1.1s .2s ease forwards}
.flow-blocked{stroke:#b38b22}.flow-stop{fill:#fff;stroke:#b15b39;stroke-width:4;animation:flow-pop .4s .65s both}.flow-stop-line{stroke:#b15b39;stroke-width:4;stroke-linecap:round;animation:flow-pop .4s .85s both}
@keyframes flow-draw{to{stroke-dashoffset:0}}@keyframes flow-pop{from{opacity:0;transform:scale(.92);transform-origin:center}to{opacity:1;transform:scale(1);transform-origin:center}}
@media(prefers-reduced-motion:reduce){.calendar-year,.flow-arrow,.flow-arrowhead,.flow-stop,.flow-stop-line{animation:none;stroke-dashoffset:0;opacity:1}}
@media(max-width:480px){.calendar-timeline{gap:1px}.calendar-year{font-size:10px}.calendar-month{font-size:11px}.calendar-big{font-size:25px}}
/* Editorial graphics: comparable bar lengths are clearer than pie slices,
especially for the three library allocations. */
.allocation-bars{display:grid;gap:13px;margin:15px 0 18px}
.allocation-bar-row{padding:9px 10px;border-radius:7px;transition:background .25s}
.allocation-bar-row.is-active{background:#edf2fa}
.allocation-bar-row.is-muted{opacity:.62}
.allocation-bar-heading{display:flex;justify-content:space-between;gap:12px;font:600 12px/1.35 Inter,Arial,sans-serif;margin-bottom:7px}
.allocation-bar-name{flex:1}
.allocation-bar-value{color:#3e5a9d;white-space:nowrap}
.allocation-bar-track{height:20px;background:#e8ebef;border-radius:4px;overflow:hidden}
.allocation-bar-fill{height:100%;width:var(--bar-pct);background:#9daec4;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;min-width:2px;animation:kvu-bar-grow .85s cubic-bezier(.2,.8,.2,1) both}
.is-active .allocation-bar-fill{background:#3e5a9d}
.allocation-bar-percent{font:700 10px Inter,Arial,sans-serif;color:white;padding:0 7px;white-space:nowrap}
@keyframes kvu-bar-grow{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.money-story{margin:15px 0 5px}
.money-story svg{display:block;width:100%;max-width:410px;margin:auto}
.money-stage{fill:#f7f9fc;stroke:#dce2e8}
.money-bill{animation:kvu-stack-rise .6s ease both;animation-delay:calc(var(--bill)*.10s);transform-box:fill-box;transform-origin:center bottom}
.money-bill rect{fill:#e3edf5;stroke:#3e5a9d;stroke-width:1.5}
.money-bill path,.money-bill circle{fill:none;stroke:#3e5a9d;stroke-width:1.4;opacity:.7}
.money-column-1 .money-bill rect{fill:#d7e6d9;stroke:#548568}
.money-column-1 .money-bill path,.money-column-1 .money-bill circle{stroke:#548568}
.money-label{font:600 11px Inter,Arial,sans-serif;fill:#28384a}
.money-transfer,.money-transfer-head{stroke:#3e5a9d;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 5;animation:kvu-money-transfer 1.4s linear infinite}
@keyframes kvu-stack-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes kvu-money-transfer{to{stroke-dashoffset:-20}}
@media(prefers-reduced-motion:reduce){.money-bill,.money-transfer,.money-transfer-head,.allocation-bar-fill{animation:none!important}}
/* Stronger, realistic shadow around both torn edges. The clipped ballot itself
cannot cast a normal box-shadow, so the drop shadows live on its parent. */
.paper-column {
filter: drop-shadow(0 -7px 7px rgba(19,35,56,.24))
drop-shadow(0 -2px 2px rgba(19,35,56,.16))
drop-shadow(0 10px 12px rgba(19,35,56,.18))
drop-shadow(0 18px 18px rgba(19,35,56,.10));
}
/* A single 100%-of-total bar avoids the misleading max-normalized bars. */
.allocation-share{margin:18px 0 8px}
.allocation-share-strip{display:flex;width:100%;height:35px;border-radius:6px;overflow:hidden;background:#e9edf2;box-shadow:0 0 0 1px #dce2e8}
.allocation-share-segment{display:block;height:100%;border-right:2px solid #fff;animation:share-reveal .85s ease both;animation-delay:calc(var(--seg)*.11s);transform-origin:left center}
.allocation-share-segment-0,.allocation-share-dot-0{background:#3e5a9d}
.allocation-share-segment-1,.allocation-share-dot-1{background:#7a9cbd}
.allocation-share-segment-2,.allocation-share-dot-2{background:#b3c4d6}
.allocation-share-segment-3,.allocation-share-dot-3{background:#d7a66c}
.allocation-share-segment.is-active{filter:saturate(1.25) brightness(.92)}
.allocation-share-segment.is-muted{opacity:.74}
.allocation-share-legend{display:grid;gap:3px;margin:15px 0 10px}
.allocation-share-item{display:grid;grid-template-columns:12px minmax(0,1fr) 55px;gap:10px;align-items:center;padding:9px 10px;border-radius:6px;font:500 13px/1.4 Inter,Arial,sans-serif}
.allocation-share-item.is-active{background:#eef3f9;font-weight:700}
.allocation-share-item.is-muted{opacity:.7}
.allocation-share-dot{display:block;width:10px;height:10px;border-radius:2px}
.allocation-share-pct{text-align:right;color:#3e5a9d}
@keyframes share-reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Explanatory SVG scenes: distinct, purposeful movement rather than decorative
money-stack loops. The animation plays when the section is rendered. */
.budget-story{margin:14px 0 0}
.budget-story svg{display:block;width:100%;max-width:470px;margin:auto}
.story-stage{fill:#f7f9fc;stroke:#dbe3eb}
.story-card{fill:white;stroke:#b8c8da;stroke-width:1.6}
.story-label{font:600 12px Inter,Arial,sans-serif;fill:#263e58}
.story-school{fill:#e4edf8;stroke:#3e5a9d;stroke-width:2}
.story-school-roof{fill:none;stroke:#3e5a9d;stroke-width:4;stroke-linecap:round}
.story-door{fill:#3e5a9d}.story-window{fill:white;stroke:#7a9cbd}
.story-student{stroke:#3e5a9d;stroke-width:2.6;stroke-linecap:round;fill:none}
.student-fades{animation:students-fade 4.2s ease-in-out infinite}
.story-student.student-fades:nth-of-type(2){animation-delay:.7s}
.story-arrow,.story-arrow-tip{fill:none;stroke:#3e5a9d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.story-moving{stroke-dasharray:6 6;animation:arrow-move 1.2s linear infinite}
.story-bill rect{fill:#dce9dc;stroke:#568565;stroke-width:1.5}
.story-bill path,.story-bill circle{fill:none;stroke:#568565;stroke-width:1.3}
.story-bill{animation:bill-appear 1.1s ease both;animation-delay:calc(var(--bill)*.15s)}
.story-flow{stroke:#3e5a9d;stroke-width:3;fill:none;stroke-dasharray:7 7;animation:arrow-move 1.2s linear infinite}
.story-flow-right{animation-delay:.35s}
.story-flow-down{animation-delay:.65s}
.story-gauge-bg{fill:#e7ecf2;stroke:#cad6e1}
.story-gauge-full{fill:#7095b9}
.story-gauge-low{fill:#3e5a9d;animation:gauge-low 2.5s ease-in-out both}
.story-gauge-extra{fill:#7ea98d;animation:gauge-extra 2.5s ease-in-out both}
.story-shortfall-line{stroke:#b46b54;stroke-width:2;stroke-dasharray:5 4}
@keyframes gauge-low{from{width:138px}to{width:88px}}
@keyframes gauge-extra{from{width:0px}to{width:51px}}
@keyframes students-fade{0%,18%{opacity:1;transform:translateY(0)}45%,80%{opacity:.15;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes arrow-move{to{stroke-dashoffset:-24}}
@keyframes bill-appear{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
.allocation-share-segment,.student-fades,.story-moving,.story-bill,.story-flow,.story-gauge-low,.story-gauge-extra{animation:none!important}
}
/* Desktop-only slightly smaller annotation headlines; site-hosted Abril Titling Regular. */
@media(min-width:801px){
.sidebar .sticky h2{font-size:clamp(29px,2.7vw,42px)!important;line-height:1.12!important}
.reader-questions .rq-heading h2{font-size:clamp(30px,3vw,42px)!important}
}
.story-coin{fill:#fff;stroke:#3e5a9d;stroke-width:2.2;filter:drop-shadow(0 2px 2px #172d442a)}
.story-coin text{font:700 16px Inter,Arial,sans-serif;fill:#3e5a9d;stroke:none}
.story-central-pool{fill:#edf3fa;stroke:#3e5a9d;stroke-width:2}
.story-pool-label{font:700 13px Inter,Arial,sans-serif;fill:#3e5a9d}
.story-outcome-card{fill:#fff;stroke:#b8c8da;stroke-width:1.6}
.story-option-path{fill:none;stroke:#94a9c2;stroke-width:2;stroke-dasharray:4 5}
@media(prefers-reduced-motion:reduce){.story-coin animateMotion{display:none}}
/* At the end of either measure, invite readers to explore the other one. */
.other-levy{box-sizing:border-box;max-width:940px;margin:52px auto 26px;padding:30px 32px;border:1px solid #dce3ec;background:#f7f9fc;text-align:center;border-radius:9px}
.other-levy-eyebrow{display:block;font:700 11px Inter,Arial,sans-serif;letter-spacing:1.5px;color:#3e5a9d;margin-bottom:9px}
.other-levy h2{font-family:"KVU Abril Titling", "abril-tiling", Georgia,serif;font-weight:400;letter-spacing:0;font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0 0 12px;color:#263b55}
.other-levy p{font:400 14px/1.6 Inter,Arial,sans-serif;color:#435267;max-width:530px;margin:0 auto 20px}
.other-levy button{appearance:none;border:0;border-radius:5px;background:#3e5a9d;color:#fff;padding:13px 20px;font:700 13px Inter,Arial,sans-serif;cursor:pointer}
.other-levy button:hover,.other-levy button:focus-visible{background:#30477e}
.other-levy button:focus-visible{outline:3px solid #e2b14c;outline-offset:3px}
@media(max-width:800px){.other-levy{margin:32px 10px 22px;padding:25px 18px;border-radius:5px}.other-levy button{width:100%;max-width:350px}}
/* Hide money symbols until their motion starts (prevents SVG origin flash). */
.story-coin{opacity:0}
/* Selector: a distinct, comfortably spaced opening section on desktop and mobile.
Keep the bottom gap intentional and compact to avoid unnecessary iframe height. */
.decoder-main > .levy-selector {
box-sizing: border-box;
padding: 42px 16px 38px !important;
margin: 0 0 4px !important;
border-bottom: 1px solid #e2e6eb;
}
.decoder-main > .levy-selector .levy-selector-label { margin: 0 0 20px !important; }
.decoder-main > .levy-selector .switch { margin: 0 auto !important; }
@media (max-width:800px) {
.decoder-main > .levy-selector { padding: 32px 8px 30px !important; margin-bottom: 4px !important; }
.decoder-main > .levy-selector .levy-selector-label { margin-bottom: 17px !important; }
}
/* Keep the end of the embedded document tight; no extra blank footer region. */
.decoder-main > .decoder-source { padding-bottom: 16px !important; margin-bottom: 0 !important; }
/* Final selector spacing: no horizontal divider, with breathing room beneath buttons. */
.decoder-main > .levy-selector {border-bottom:0 !important;padding-bottom:54px !important;margin-bottom:0 !important;}
@media(max-width:800px){.decoder-main > .levy-selector{padding-bottom:44px !important;}}
/* No phantom footer margin inside the embedded document. */
.decoder-main > .decoder-source{padding-bottom:0 !important;margin-bottom:0 !important;}
/* iOS Safari: overdraw the sheet behind the bottom safe area so article
content cannot show through a gap above the browser's toolbar. */
@media(max-width:800px){
.mobile-sheet:not([hidden]){
height:calc(var(--kvu-mobile-sheet-height,75dvh) + 32px + env(safe-area-inset-bottom,0px))!important;
background:#fcfbf8!important;
}
.sheet-content{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))!important}
}
/* Keep the torn ballot's drop shadow in its own compositing layer.
Animate the button's emphasis without scaling (which can disrupt iOS
Safari's filter/drop-shadow rendering on the ballot wrapper). */
@media(max-width:800px){
.paper-column{isolation:isolate;transform:translateZ(0)}
.passage:first-child .explain-btn.kvu-first-hint{
transform:none!important;
animation:kvuExplanationGlow 1.4s ease-in-out infinite!important;
}
.passage:first-child .explain-btn.kvu-first-hint::after{
animation:kvuExplanationRingOpacity 1.4s ease-in-out infinite!important;
transform:none!important;
}
@keyframes kvuExplanationGlow{
0%,100%{box-shadow:0 0 0 0 rgba(62,90,157,.1)!important}
50%{box-shadow:0 0 0 5px rgba(62,90,157,.26)!important}
}
@keyframes kvuExplanationRingOpacity{
0%,100%{opacity:0}
50%{opacity:1}
}
}
@media(prefers-reduced-motion:reduce){
.passage:first-child .explain-btn.kvu-first-hint,
.passage:first-child .explain-btn.kvu-first-hint::after{animation:none!important}
}
/* Mobile: offer an explicit scroll affordance only when explanation content
continues below the visible portion of the sheet. */
@media(max-width:800px){
.mobile-sheet .sheet-view-more:not([hidden]){
display:flex!important;align-items:center;justify-content:center;gap:8px;
position:absolute;z-index:8;left:50%;transform:translateX(-50%);
bottom:calc(40px + env(safe-area-inset-bottom,0px));
border:1px solid #cad6e6;border-radius:999px;
background:#fff;color:#3e5a9d;padding:10px 18px;
font:700 13px/1.2 Inter,Arial,sans-serif;
box-shadow:0 4px 15px rgba(23,47,79,.16);cursor:pointer;
white-space:nowrap;
}
.mobile-sheet .sheet-view-more:focus-visible{outline:3px solid #d9a74d;outline-offset:3px}
.mobile-sheet .sheet-content{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}
}
/* iOS Safari: render the torn-edge shadow in a separate sibling layer.
Animating the Explanation button inside the ballot can invalidate ancestor
filter compositing; the independent layer never contains that animation. */
@media(max-width:800px){
.paper-column{position:relative!important;filter:none!important;isolation:auto!important;transform:none!important}
.paper-column>.ballot{filter:none!important;position:relative;z-index:1}
.paper-column>.kvu-independent-shadow{
position:absolute;z-index:0;pointer-events:none;
background:#fff;clip-path:var(--kvu-paper-clip,none);
filter:drop-shadow(0 -7px 7px rgba(19,35,56,.29))
drop-shadow(0 5px 7px rgba(19,35,56,.19))
drop-shadow(0 12px 13px rgba(19,35,56,.18));
}
}
/* Safari-safe attention cue: animate only paint colors, never transforms,
filters, shadows or pseudo-elements on the clipped paper. */
@media(max-width:800px){
.paper-column{
filter:drop-shadow(0 -7px 7px rgba(19,35,56,.29))
drop-shadow(0 6px 8px rgba(19,35,56,.18))
drop-shadow(0 12px 13px rgba(19,35,56,.14))!important;
isolation:auto!important;
transform:none!important;
}
.paper-column>.ballot{filter:none!important}
.paper-column>.kvu-independent-shadow{display:none!important}
.passage:first-child .explain-btn.kvu-first-hint{
animation:kvuSafeExplanationPulse 1.5s ease-in-out infinite!important;
transform:none!important;
filter:none!important;
box-shadow:none!important;
will-change:auto!important;
}
.passage:first-child .explain-btn.kvu-first-hint::after{
content:none!important;
animation:none!important;
display:none!important;
}
@keyframes kvuSafeExplanationPulse{
0%,100%{background-color:#fff;color:#244c83;border-color:#3e5a9d}
50%{background-color:#dfeafb;color:#163d77;border-color:#163d77}
}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
.passage:first-child .explain-btn.kvu-first-hint{animation:none!important}
}
/* Safari-safe hint: pulse a painted outline, not the button's opacity,
transform, filter or shadow. Those can suppress the torn-paper shadow. */
@media(max-width:800px){
.passage:first-child .explain-btn.kvu-first-hint{
animation:kvuOutlineAttention 1.45s ease-in-out infinite!important;
outline:2px solid transparent;
outline-offset:2px;
transform:none!important;
filter:none!important;
box-shadow:none!important;
}
@keyframes kvuOutlineAttention{
0%,100%{outline-color:transparent;outline-offset:2px}
50%{outline-color:#3e5a9d;outline-offset:7px}
}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
.passage:first-child .explain-btn.kvu-first-hint{animation:none!important;outline-color:#3e5a9d}
}