/* EP trace: the front page (#/). The shared header lives in theme.css.
   Colours follow the approved reference (MEP profile mockup). Every front-page rule is scoped to .eph,
   so app.css and this file cannot change each other's pages. Texture only on the hero paper. */

/* ---------- Front page container ---------- */
body.is-home main{padding-bottom:0}
body.is-home main>.wrap{max-width:none;padding:0}
body.is-home #app{animation:none}
.fp-tip{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:#FDFCF8;color:#101D40;border:1px solid #101D40;padding:7px 11px;font:13px/1.3 'Inter',system-ui,sans-serif;white-space:nowrap;box-shadow:0 10px 24px -12px rgba(16,29,64,.4)}
.fp-tip b{display:block;font:600 15px/1.2 'Newsreader',Georgia,serif}
.eph{
  /* colours sampled from the approved MEP-profile reference */
  --blue:#164ABA; --blue-deep:#123C99; --gold:#FBC838; --gold-deep:#D9A61C; --paper:#F8F7F1; --slate:#AEC2F2; --ink:#101D40;
  --white:#FFFFFF; --surface:#EFEFEA; --line:#D3D3D1; --track:#EAECEB; --muted:#5F6478;
  --pos:#16775D; --neg:#C43D48; --neu:#8792A3;
  --card:#FFFFFF; --blue-ink:#164ABA; --clip:#FDFCF8; --dot:#F8F7F1;
  /* political groups: one hue each, toned to the brand palette (never brand blue or brand gold) */
  --h-GUE_NGL:#D9879A; --h-GREEN_EFA:#86C49B; --h-SD:#F49A8A; --h-RENEW:#FBCA3B; --h-EPP:#9DB4EE;
  --h-ECR:#6C86D1; --h-PFE:#9B8DCB; --h-ESN:#BE9F84; --h-NI:#B7BEC8;
  --g-GUE_NGL:var(--h-GUE_NGL); --g-GREEN_EFA:var(--h-GREEN_EFA); --g-SD:var(--h-SD); --g-RENEW:var(--h-RENEW); --g-EPP:var(--h-EPP);
  --g-ECR:var(--h-ECR); --g-PFE:var(--h-PFE); --g-ESN:var(--h-ESN); --g-NI:#BFC5CC;

  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:var(--serif);
  --type:var(--sans);

  --max:1440px; --gut:40px; --hdr:64px; --band:112px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r:2px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .11 0 0 0 0 .25 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .15 0 0 0 0 .3 0 0 0 .03 -.01'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --grit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .eph{
  --paper:#0C1530; --ink:#EEF1F7; --surface:#141F42; --card:#111B3A; --line:#27345F; --muted:#A3AEC4; --blue-ink:#9DB1F4;
  --pos:#3FB58E; --neg:#E2646E; --clip:#E8E5D8;
  --g-GUE_NGL:#C9637C; --g-GREEN_EFA:#66B88B; --g-SD:#EE837B; --g-RENEW:#F2C45A; --g-EPP:#93B3F0; --g-ECR:#7189D6; --g-PFE:#9A8CD0; --g-ESN:#B48D6E; --g-NI:#AEB7C6;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .eph{
  --paper:#0C1530; --ink:#EEF1F7; --surface:#141F42; --card:#111B3A; --line:#27345F; --muted:#A3AEC4; --blue-ink:#9DB1F4;
  --pos:#3FB58E; --neg:#E2646E; --clip:#E8E5D8;
  --g-GUE_NGL:#C9637C; --g-GREEN_EFA:#66B88B; --g-SD:#EE837B; --g-RENEW:#F2C45A; --g-EPP:#93B3F0; --g-ECR:#7189D6; --g-PFE:#9A8CD0; --g-ESN:#B48D6E; --g-NI:#AEB7C6;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .85 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
}
@media (max-width:1024px){
.eph{--gut:24px;--band:88px}
}
@media (max-width:640px){
.eph{--gut:16px;--band:64px}
}
/* the front page sets its own paper, type and links */
.eph{--hdr:68px;font:400 16px/1.55 var(--sans);color:var(--ink);background:var(--noise),var(--paper);-webkit-font-smoothing:antialiased;padding-bottom:var(--band);overflow-x:clip}
.eph *,.eph *::before,.eph *::after{box-sizing:border-box}
.eph a{color:inherit;text-decoration:none}
.eph button{font:inherit;color:inherit}
.eph img{display:block;max-width:100%}
.eph :focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px;border-radius:var(--r)}
.eph .tnum{font-variant-numeric:tabular-nums lining-nums}
.eph .on-blue :focus-visible,.eph .on-blue:focus-visible{outline-color:var(--paper)}
.eph .fwrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.eph .ic svg{width:1em;height:1em;display:block}
/* ---------- Shared print pieces ---------- */
.eph .ht{position:absolute;pointer-events:none;background-image:radial-gradient(circle,var(--htc,rgba(16,29,64,.35)) 0 1.15px,transparent 1.6px);background-size:7px 7px}
.eph .slug{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:14px;margin-bottom:var(--s6)}
.eph .slug span{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.eph .slug .fr{font:400 13px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.eph .eyebrow{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:var(--s4)}
.eph .flat{background:var(--card);border:1px solid var(--line)}
.eph h2.sh{font:500 clamp(34px,3.6vw,52px)/1.04 var(--serif);letter-spacing:-.02em;margin:0 0 var(--s4);max-width:20ch}
.eph .sl{font:400 19px/1.45 var(--serif);color:var(--muted);max-width:56ch;margin:0 0 var(--s7)}
.eph .fmore{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--blue-ink);border-bottom:2px solid var(--gold);padding-bottom:2px}
.eph .fmore .ic{transition:transform .2s var(--ease-out)}
.eph .fmore:hover .ic,.eph a:hover .fmore .ic{transform:translateX(4px)}
.eph .flat{background:var(--card);border:1px solid var(--ink)}
/* ---------- Header ---------- */
/* ---------- Hero: pinned, scroll-driven chamber ---------- */
.eph .hs{position:relative;height:210vh;--p:0}
.eph .pin{position:sticky;top:var(--hdr);height:calc(100dvh - var(--hdr));overflow:clip}
.eph .pin-in{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--s6)}
.eph .dateline{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--ink);padding:10px 0 9px;font:13px/1 var(--sans);color:var(--muted);position:relative}
.eph .dateline .c{font:italic 500 16px/1 var(--serif);color:var(--ink)}
.eph .copy{grid-column:1 / span 5;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);position:relative;z-index:3;padding:var(--s5) 0}
.eph .cap{grid-area:1 / 1;align-self:center;transition:opacity .45s var(--ease-out),transform .6s var(--ease-out),visibility 0s .45s;opacity:0;visibility:hidden;transform:translateY(28px)}
.eph .hs[data-s="0"] .c0,.eph .hs[data-s="1"] .c1,.eph .hs[data-s="2"] .c2{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease-out) .12s,transform .7s var(--ease-out) .12s,visibility 0s}
.eph .hs[data-s="1"] .c0,.eph .hs[data-s="2"] .c0{transform:translateY(-28px)}
.eph .fhero h1{font:500 clamp(46px,5.1vw,80px)/.96 var(--serif);letter-spacing:-.03em;margin:0 0 var(--s5);position:relative;z-index:0}
.eph .fhero h1 .ln{display:block;white-space:nowrap;clip-path:inset(-.2em -100vw 0 -.3em);padding-bottom:.1em;margin-bottom:-.1em}
.eph .fhero h1 .ln>span{display:inline-block}
.eph .fhero h1 em{font-style:italic;font-weight:400;color:var(--blue-ink)}
.eph .mk{position:relative;display:inline-block}
.eph .mk::before{content:"";position:absolute;left:-.07em;right:-.1em;top:.5em;bottom:.04em;z-index:-1;background:var(--gold);
  clip-path:polygon(0 18%,6% 6%,19% 12%,33% 2%,51% 9%,68% 0,84% 8%,100% 4%,98% 38%,100% 71%,96% 100%,79% 92%,61% 99%,44% 91%,27% 100%,11% 93%,2% 100%,3% 62%);transform-origin:left;transform:scaleX(0)}
.eph.ready .mk::before{transform:scaleX(1);transition:transform .75s var(--ease-out) .75s}
.eph .cap .lede{font:400 20px/1.45 var(--serif);color:var(--ink);max-width:40ch;margin:0 0 var(--s6)}
.eph .cap h2{font:500 clamp(36px,3.8vw,58px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 var(--s5)}
.eph .cap p{font:400 19px/1.5 var(--serif);margin:0;max-width:40ch}
.eph .htabs{grid-area:2 / 1;display:flex;gap:22px;margin-top:var(--s7);position:relative;padding-bottom:10px;border-bottom:1px solid var(--line);justify-self:start;min-width:min(100%,380px)}
.eph .htabs::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(calc(var(--p) / 2))}
.eph .htabs button{border:0;background:none;padding:0;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .2s}
.eph .htabs button[aria-selected="true"]{color:var(--ink)}
/* search */
.eph .find{position:relative;max-width:520px}
.eph .find label{display:block;font:600 13px/1 var(--sans);margin-bottom:10px;color:var(--ink)}
.eph .find-box{display:flex;align-items:stretch;border:1.5px solid var(--ink);background:var(--card);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}
.eph .find-box:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 35%,transparent)}
.eph .find-box>.ic{display:grid;place-items:center;padding-left:16px;font-size:18px}
.eph .find input{flex:1;min-width:0;width:100%;border:0;background:transparent;font:500 16px var(--sans);color:var(--ink);padding:16px 12px;outline:none}
.eph .find input::placeholder{color:var(--muted)}
.eph .find button.fgo{border:0;background:var(--gold);color:#101D40;font-weight:700;font-size:15px;padding:0 20px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap}
.eph .find button.fgo:hover{background:#F0C65A}
.eph .find button.fgo .ic{font-size:16px;transition:transform .15s}
.eph .find button.fgo:hover .ic{transform:translateX(3px)}
.eph .fres{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(16,29,64,.35);max-height:min(420px,52vh);overflow:auto;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .16s,transform .2s var(--ease-out)}
.eph .fres.open{opacity:1;transform:none;pointer-events:auto}
.eph .fres h3{font:700 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0;padding:14px 16px 6px}
.eph .fres a{display:flex;gap:12px;align-items:center;padding:10px 16px;border-left:4px solid transparent}
.eph .fres a.fhl{background:var(--surface);border-left-color:var(--gold)}
.eph .fres a b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.eph .fres a small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.eph .fres .fempty{padding:16px;color:var(--muted);font-size:14px}
.eph .fres .vt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eph .fav{flex:none;position:relative;overflow:hidden;display:grid;place-items:center;color:#fff;font-weight:700;border-radius:50%}
.eph .fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.eph .vglyph{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%}
.eph .vglyph svg{width:16px;height:16px}
/* the collage */
.eph .art{grid-column:6 / span 7;position:relative;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:0;margin-right:calc(var(--gut) * -.6)}
.eph .pw{position:relative;width:min(calc(100cqw - 20px),calc((100cqh - 80px) * 1.14));aspect-ratio:1000/880;--mx:0;--my:0}
.eph .ly{position:absolute}
.eph .poster{left:0;bottom:0;width:80%;height:66%;transform:translate3d(calc(var(--mx) * 10px),calc(var(--my) * 8px),0) rotate(-.6deg);filter:drop-shadow(0 22px 26px rgba(16,29,64,.22))}
.eph .poster .edge{position:absolute;inset:0;background:var(--paper)}
.eph .poster-in{position:absolute;inset:6px;background:#FBFBF8;overflow:hidden}
.eph .poster-in .ht{--htc:rgba(168,184,212,.75)}
.eph .poster-in .ht.a{left:0;top:0;width:48%;height:55%;-webkit-mask-image:radial-gradient(circle at 0 0,#000,transparent 70%);mask-image:radial-gradient(circle at 0 0,#000,transparent 70%)}
.eph .poster-in .ht.b{right:0;bottom:0;width:55%;height:60%;-webkit-mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%);mask-image:radial-gradient(circle at 100% 100%,#000,transparent 70%)}
.eph .poster-in::after{content:"";position:absolute;inset:0;background-image:var(--grit);opacity:0;mix-blend-mode:multiply;pointer-events:none}
.eph .bscrap{left:-4%;bottom:-4%;width:52%;height:46%;transform:translate3d(calc(var(--mx) * -24px),calc(var(--my) * -18px),0) rotate(-5deg)}
.eph .bscrap .f{position:absolute;inset:5px;background:var(--blue)}
.eph .bscrap .ht{inset:0;--htc:rgba(10,22,80,.5)}
.eph .dots{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.eph .dots circle{
  --a:clamp(0,(var(--p) - var(--k) * .3) / .7,1);
  --b:clamp(0,(var(--p) - 1 - var(--k) * .3) / .7,1);
  fill:var(--c,var(--dot));transform-box:fill-box;transform-origin:center;cursor:pointer;
  transform:translate(calc((var(--dx1) * var(--a) + var(--dx2) * var(--b)) * 1px),calc((var(--dy1) * var(--a) + var(--dy2) * var(--b)) * 1px)) scale(calc(1 - .35 * var(--a) - .1 * var(--b)));
  transition:fill .5s var(--ease-out) var(--td,0s),opacity .5s var(--ease-out)}
.eph .dots circle.nodata{opacity:calc(1 - var(--b))}
.eph .dots circle{stroke:rgba(16,29,64,.3);stroke-width:1.2}
.eph .hs[data-s="2"] .dots circle.low{stroke:#101D40;stroke-width:3.5}
.eph .dots circle:hover{stroke:#101D40;stroke-width:3}
.eph .dots.intro circle{animation:fpSeatIn .8s var(--ease-out) backwards;animation-delay:var(--d)}
@keyframes fpSeatIn{from{opacity:0;scale:.2;translate:0 46px}}
.eph .dots text{fill:#101D40;font-family:var(--sans)}
.eph .dots .strong{font-weight:700}
.eph .dots .lab1{opacity:calc(clamp(0,(var(--p) - .65) / .35,1) - clamp(0,(var(--p) - 1.05) / .25,1))}
.eph .dots .lab2{opacity:clamp(0,(var(--p) - 1.65) / .35,1)}
.eph .dots .gname{font-size:19px;font-weight:600}
.eph .dots .gn{font-family:var(--serif);font-weight:600;font-size:24px}
.eph .dots .bl{font-size:16px;font-weight:600}
.eph .dots .bn{font-family:var(--serif);font-weight:600;font-size:19px}
.eph .dots .fax{font-family:var(--type);font-size:17px;opacity:.85}
.eph .htip{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:var(--clip);color:#101D40;border:2px solid #101D40;padding:7px 11px;font-size:13px;line-height:1.3;white-space:nowrap;box-shadow:3px 3px 0 #101D40}
.eph .htip b{display:block;font:600 15px/1.2 var(--serif)}
/* entrance */
.eph .fhero h1 .ln>span{transform:translateY(108%)}
.eph .fhero .lede,.eph .fhero .find,.eph .pw .ly{opacity:0}
.eph .pw .poster{clip-path:inset(100% 0 0 0)}
.eph.ready .fhero h1 .ln>span{transform:none;transition:transform 1s var(--ease-out) calc(var(--i) * 110ms)}
.eph.ready .fhero .lede{opacity:1;transition:opacity .8s .4s}
.eph.ready .fhero .find{opacity:1;transition:opacity .8s .55s}
.eph.ready .pw .poster{opacity:1;clip-path:inset(-40px -40px -40px -40px);transition:clip-path 1.1s var(--ease-io) .05s}
.eph.ready .pw .bscrap{opacity:1;transition:opacity .5s 1.1s}
/* ---------- Glance: torn royal-blue band ---------- */
.eph .fband{padding:var(--band) 0}
.eph .glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s6) 0}
.eph .glance>div{padding:0 var(--s6)}
.eph .glance>div:first-child{padding-left:0}
.eph .glance>div+div{border-left:1px solid var(--line)}
.eph .glance .lab{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s4)}
.eph .glance .fbig{display:block;font:600 clamp(48px,5.4vw,80px)/.95 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;margin-bottom:var(--s3)}
.eph .glance .fbig small{font-size:.55em;font-weight:500}
.eph .glance p{margin:0;font-size:15px;color:var(--muted);max-width:26ch}
.eph .glance .src{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
@media (max-width:900px){
.eph .glance{grid-template-columns:1fr 1fr;row-gap:var(--s6)}
.eph .glance>div:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:480px){
.eph .glance{grid-template-columns:1fr}
.eph .glance>div,.eph .glance>div+div{padding:0;border-left:0}
.eph .glance>div+div{border-top:1px solid var(--line);padding-top:var(--s5)}
}
/* ---------- Stories: front-page layout ---------- */
.eph .front{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s7);position:relative}
.eph .brief{grid-column:span 4;border-left:1px solid var(--line);padding-left:var(--s7)}
.eph .brief .slug{margin-bottom:var(--s5)}
.eph .bi{display:block;padding:0 0 var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--line)}
.eph .bi:last-child{border-bottom:0;margin-bottom:0}
.eph .bi .fnum{display:block;font:600 clamp(56px,5vw,84px)/.9 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;margin-bottom:var(--s3)}
.eph .bi.neg .fnum{color:var(--neg)}
.eph .bi h3{font:500 25px/1.18 var(--serif);margin:0 0 var(--s2)}
.eph .bi p{margin:0 0 var(--s4);font-size:14.5px;color:var(--muted)}
.eph .bi:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:4px}
@media (max-width:1000px){
.eph .brief{grid-column:1 / -1}
.eph .brief{border-left:0;padding-left:0;margin-top:var(--s8)}
}
/* ---------- Who votes with whom ---------- */
.eph .agree{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s7);align-items:start}
.eph .agree-h{grid-column:1 / span 4}
.eph .agree-c{grid-column:5 / span 8;padding:var(--s6)}
.eph .gtabs{display:flex;flex-wrap:wrap;gap:8px}
.eph .gtabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r);background:transparent;padding:8px 12px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s,transform .15s}
.eph .gtabs button i{width:10px;height:10px;border-radius:50%}
.eph .gtabs button:hover{border-color:var(--blue);color:var(--blue)}
.eph .gtabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.eph .take{font:400 clamp(22px,2.1vw,30px)/1.3 var(--serif);margin:0 0 var(--s6);min-height:2.6em}
.eph .take b{font-weight:600}
.eph .agbars{display:grid;gap:12px}
.eph .brow{display:grid;grid-template-columns:110px 1fr 52px;align-items:center;gap:14px;font-size:14px;position:relative}
.eph .brow .flbl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eph .brow .agbar{height:22px;position:relative;background:var(--track)}
.eph .brow .agbar i{position:absolute;left:0;top:0;bottom:0;width:100%;transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease-out) var(--bd,0s)}
.eph .brow .agbar::after{content:"";position:absolute;top:-4px;bottom:-4px;left:50%;border-left:1px dashed var(--muted);opacity:.5}
.eph .brow .fval{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.eph .axis{display:grid;grid-template-columns:110px 1fr 52px;gap:14px;font-size:12px;color:var(--muted);margin-top:8px}
.eph .axis span{display:flex;justify-content:space-between}
.eph .axis i{font-style:normal}
@media (max-width:1000px){
.eph .agree-h,.eph .agree-c{grid-column:1 / -1}
.eph .agree-c{margin-top:var(--s6);padding:var(--s5)}
.eph .brow,.eph .axis{grid-template-columns:84px 1fr 44px;gap:10px}
}
/* ---------- Explore: print boxes ---------- */
.eph .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:var(--s5)}
.eph .tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:var(--s6);border:1px solid var(--ink);background:var(--card);isolation:isolate;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.eph .tile:active{transform:scale(.995)}
.eph .tile h3{font:500 clamp(30px,2.6vw,40px)/1.05 var(--serif);margin:0 0 var(--s2);letter-spacing:-.015em}
.eph .tile p{margin:0;font-size:15px;max-width:34ch;opacity:.85}
.eph .tile .fcnt{font:600 clamp(36px,3.2vw,52px)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.eph .tile .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:var(--s5)}
.eph .tile .farr{width:44px;height:44px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none;transition:background-color .2s,color .2s}
.eph .tile:hover .farr{background:currentColor}
.eph .tile:hover .farr .ic{color:var(--card)}
.eph .t-meps{grid-column:span 7;grid-row:span 2}
.eph .t-votes{grid-column:span 5;background:var(--blue);color:#fff}
.eph .t-votes:hover .farr .ic{color:var(--blue)}
.eph .t-meet{grid-column:span 5;background:var(--gold);color:#101D40}
.eph .t-meet:hover .farr .ic{color:var(--gold)}
.eph .t-money,.eph .t-speech,.eph .t-cty{grid-column:span 4}
.eph .t-speech{background:var(--surface);color:var(--ink)}
.eph .t-speech:hover .farr .ic{color:var(--surface)}
.eph .minihemi{position:absolute;right:-4%;top:-10%;width:58%;z-index:-1;transition:transform .8s var(--ease-out)}
.eph .minihemi circle{fill:rgba(246,247,244,.28)}
.eph .minihemi circle.g{fill:var(--gold)}
.eph .t-votes:hover .minihemi{transform:rotate(-5deg) scale(1.05)}
.eph .tile{opacity:0;transform:translateY(30px)}
.eph .tile.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out) var(--rd,0s),transform .9s var(--ease-out) var(--rd,0s),box-shadow .25s}
.eph .tile.in:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(16,29,64,.35);border-color:var(--ink);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
@media (max-width:1024px){
.eph .t-meps{grid-column:1 / -1;grid-row:auto}
.eph .t-votes,.eph .t-meet,.eph .t-money,.eph .t-speech{grid-column:span 6}
.eph .t-cty{grid-column:1 / -1}
}
@media (max-width:640px){
.eph .bento>*{grid-column:1 / -1!important}
}
/* ---------- Faces ---------- */
.eph .ffaces{padding:var(--band) 0 calc(var(--band) - 24px);overflow:hidden}
.eph .lanes{display:grid;gap:12px;margin-top:var(--s6)}
.eph .flane{display:flex;gap:12px;width:max-content;animation:fpLane var(--dur,140s) linear infinite;padding:6px 0}
.eph .flane.frev{animation-direction:reverse}
.eph .lanes:hover .flane,.eph .lanes:focus-within .flane{animation-play-state:paused}
.eph .fface{width:104px;height:128px;flex:none;background:var(--paper);padding:4px;position:relative;transition:transform .35s var(--ease-out);box-shadow:0 6px 10px -6px rgba(16,29,64,.3)}
.eph .fface:nth-child(3n){transform:rotate(-1.5deg)}
.eph .fface:nth-child(3n+1){transform:rotate(1.2deg)}
.eph .fface:hover,.eph .fface:focus-visible{transform:rotate(0) scale(1.06);z-index:2}
@keyframes fpLane{to{transform:translateX(-50%)}}
/* ---------- About the figures ---------- */
@media (max-width:1000px){
}
@media (max-width:560px){
}
/* ---------- Footer ---------- */
/* generic reveal */
.eph .frv{opacity:0;transform:translateY(26px)}
.eph .frv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out) var(--rd,0s),transform .9s var(--ease-out) var(--rd,0s)}
.eph [data-speed]{will-change:transform}
/* ---------- Hero responsive ---------- */
@media (max-width:1100px){
.eph .fhero h1{font-size:clamp(42px,5vw,64px)}
.eph .copy{grid-column:1 / span 6}
.eph .art{grid-column:7 / span 6}
}
@media (max-width:900px){
.eph .hs{height:190vh}
.eph .pin-in{grid-template-rows:auto auto minmax(0,1fr);column-gap:0}
.eph .dateline .c{display:none}
.eph .copy,.eph .art{grid-column:1 / -1}
.eph .copy{align-self:start;padding:var(--s5) 0 var(--s3)}
.eph .fhero h1{font-size:clamp(38px,10.4vw,60px)}
.eph .cap .lede{font-size:17px;margin-bottom:var(--s5)}
.eph .cap h2{font-size:clamp(30px,8vw,44px);margin-bottom:var(--s3)}
.eph .cap p{font-size:17px}
.eph .htabs{margin-top:var(--s5)}
.eph .pw{width:min(calc(100cqw - 24px),calc((100cqh - 30px) * 1.14))}
}
@media (max-width:420px){
.eph .cap .lede{display:none}
.eph .find label{display:none}
}
@media (max-height:760px) and (min-width:901px){
.eph .cap .lede{font-size:17px;margin-bottom:var(--s5)}
.eph .htabs{margin-top:var(--s5)}
.eph .fhero h1{font-size:clamp(42px,4.8vw,70px)}
}
/* static hero (reduced motion): no pin, tabs switch the chart */
.eph .hs.static{height:auto}
.eph .hs.static .pin{position:relative;top:0;height:calc(100dvh - var(--hdr));min-height:620px}
@media (prefers-reduced-motion: reduce){
.eph *,.eph *::before,.eph *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
.eph .flane{animation:none!important;flex-wrap:wrap;width:auto}
.eph .ly,.eph [data-speed]{transform:none!important}
}
/* narrow screens: collapse the 12-column grids so their gaps cannot push the page wider than the phone */
@media (max-width:1000px){
.eph .front,.eph .agree,.eph .about{grid-template-columns:minmax(0,1fr);column-gap:0}
}
@media (max-width:640px){
.eph .bento{grid-template-columns:minmax(0,1fr)}
}
/* chamber legend */
.eph .hleg{position:relative;z-index:4;margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;max-width:min(100%,760px);transition:opacity .4s}
.eph .hleg span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.eph .hleg i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(16,29,64,.3)}
.eph .hleg b{font-weight:700;font-variant-numeric:tabular-nums}
.eph .hs[data-s="1"] .hleg{opacity:0}
.eph .hleg{opacity:0}
.eph.ready .hs[data-s="0"] .hleg,.eph.ready .hs[data-s="2"] .hleg{opacity:1;transition:opacity .6s 1.2s}
@media (max-width:900px){
.eph .hleg{font-size:11.5px;gap:4px 10px}
.eph .art{margin-right:0;gap:12px}
}
/* hero photo: the Parliament building, greyscale, tucked behind the chamber sheet */
/* the Parliament building stands behind the sheet: the chamber on the paper is the room inside it */
.eph .bldg{right:-5%;top:0;width:76%;transform:translate3d(calc(var(--mx) * 22px),calc(var(--my) * 16px),0)}
.eph .gblk{right:-9%;top:7%;width:28%;height:40%;transform:translate3d(calc(var(--mx) * 30px),calc(var(--my) * 22px),0) rotate(3deg)}
.eph .gblk .e{position:absolute;inset:0;background:var(--paper)}
.eph .gblk .f{position:absolute;inset:5px;background:var(--gold)}
.eph.ready .pw .gblk{opacity:1;transition:opacity .6s .9s}
.eph .bldg img{width:100%;height:auto;filter:grayscale(1) contrast(1.12) brightness(1.03);filter:grayscale(1) contrast(1.12) brightness(1.03) drop-shadow(0 16px 18px rgba(16,29,64,.18))}
.eph.ready .pw .bldg{opacity:1;transition:opacity .8s .7s}
@media (max-width:900px){
.eph .bldg{width:72%}
}
/* ---------- explore tiles ---------- */
.eph .tile .foot>span:first-child{display:flex;flex-direction:column;gap:6px}
.eph .tile .foot small{font-size:13.5px;opacity:.85;max-width:30ch;line-height:1.35}
.eph .tilehemi{display:block;width:min(100%,520px);margin:var(--s5) auto;height:auto}
.eph .tilehemi circle{stroke:rgba(16,29,64,.25);stroke-width:1.5}
/* ---------- latest final votes ---------- */
.eph .latest{grid-column:span 8}
.eph .fv{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.eph .fv li{border-bottom:1px solid var(--line)}
.eph .fv a{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s6);align-items:center;padding:var(--s5) 0;transition:background-color .15s}
.eph .fv a:hover b{color:var(--blue-ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.eph .fv-t b{display:block;font:500 20px/1.3 var(--serif)}
.eph .fv-t small,.eph .fv-r small{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.eph .res-tag{font-weight:700;font-size:13px}
.eph .res-tag.ADOPTED{color:var(--pos)}
.eph .res-tag.REJECTED{color:var(--neg)}
.eph .fv-bar{display:flex;height:10px;gap:2px;margin-top:8px}
.eph .fv-bar i{display:block;min-width:2px}
.eph .fv-bar .vF{background:var(--pos)}
.eph .fv-bar .vA{background:var(--neg)}
.eph .fv-bar .vB{background:var(--neu)}
@media (max-width:1000px){
.eph .latest{grid-column:1 / -1}
}
@media (max-width:640px){
.eph .fv a{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
}
/* ---------- faces: plain greyscale portraits ---------- */
.eph .fface{padding:0;background:var(--surface)}
.eph .fface img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .35s}
.eph .fface:hover img,.eph .fface:focus-visible img{filter:none}
.eph .fface:nth-child(3n),.eph .fface:nth-child(3n+1){transform:none}
/* the page heading stays in the accessibility tree when the hero shows another view */
.eph .cap{pointer-events:none}
.eph .hs[data-s="0"] .c0,.eph .hs[data-s="1"] .c1,.eph .hs[data-s="2"] .c2{pointer-events:auto}
.eph .hs:not([data-s="0"]) .c0{visibility:visible}

/* app.css sizes every .ic to its glyph; inside the front page the icons size to their box */
.eph .ic{width:auto;height:auto;display:inline-grid;place-items:center;vertical-align:middle}
.eph .find-box>.ic{display:grid;align-self:stretch;padding:0 0 0 16px}

/* ---------- About these figures ---------- */
.eph .about{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);background:var(--card);border:1px solid var(--line);border-top:4px solid var(--blue-ink);overflow:hidden}
.eph .about-h{position:relative;padding:var(--s7) var(--s7) calc(var(--s7) + 40px);border-right:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 60%,var(--card)),var(--card))}
.eph .about-h h2{font:500 clamp(32px,3vw,44px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 var(--s4)}
.eph .about-h p{font:400 18px/1.5 var(--serif);color:var(--muted);margin:0 0 var(--s6);max-width:32ch}
.eph .about-cta{display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:#101D40;font-weight:600;font-size:15px;padding:12px 18px;border-radius:2px;transition:background-color .15s}
.eph .about-cta .ic{transition:transform .2s var(--ease-out)}
.eph .about-cta:hover{background:#F0BC24}
.eph .about-cta:hover .ic{transform:translateX(4px)}
.eph .about-mark{position:absolute;right:-30px;bottom:-26px;width:190px;opacity:.12;pointer-events:none}
.eph .about-mark circle{fill:var(--blue-ink)}.eph .about-mark circle.g{fill:var(--gold);opacity:1}
.eph .about-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.eph .about-grid li{padding:var(--s6) var(--s7);border-bottom:1px solid var(--line)}
.eph .about-grid li:nth-child(odd){border-right:1px solid var(--line)}
.eph .about-grid li:nth-last-child(-n+2){border-bottom:0}
.eph .about-grid .ak{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:var(--s3)}
.eph .about-grid b{display:block;font:500 24px/1.2 var(--serif);letter-spacing:-.01em;margin-bottom:var(--s3)}
.eph .about-grid p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.eph .about-grid a.fu{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.eph .about-grid a.fu:hover{color:var(--blue-ink)}
.eph .fresh{display:flex;align-items:baseline;gap:10px}
.eph .fresh i{width:9px;height:9px;border-radius:50%;background:var(--pos);flex:none;transform:translateY(1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--pos) 18%,transparent)}
@media (max-width:1000px){
  .eph .about{grid-template-columns:minmax(0,1fr)}
  .eph .about-h{border-right:0;border-bottom:1px solid var(--line);padding:var(--s6) var(--s6) calc(var(--s6) + 30px)}
  .eph .about-grid li{padding:var(--s5) var(--s6)}
}
@media (max-width:600px){
  .eph .about-grid{grid-template-columns:minmax(0,1fr)}
  .eph .about-grid li:nth-child(odd){border-right:0}
  .eph .about-grid li:nth-last-child(2){border-bottom:1px solid var(--line)}
}
