/* Wrong Fuel Data Repository — Misfuel Science
   Premium monochrome. Four values, one typeface, capitals for everything
   structural. Pure #000/#FFF is avoided deliberately: black clips on an OLED
   and full-strength white makes a 1px rule glare. Header and footer are
   porcelain; everything between them is ink. No hue anywhere, so nothing can
   become unreadable by accident — hierarchy is size, weight and opacity of one
   colour, and because no child sets its own colour, any surface can invert. */
:root{
--ink:#0B0B0D;--raise:#101014;--paper:#F5F5F7;--graphite:#1D1D1F;
--line:rgba(245,245,247,.30);--line2:rgba(245,245,247,.16);--lineS:rgba(29,29,31,.24);
--fg:var(--paper);--f2:.86;--f3:.62;
--f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--e:cubic-bezier(.2,.65,.3,1);--shell:1320px}

*{box-sizing:border-box;min-width:0}
html,body{overflow-x:hidden;max-width:100vw}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16.5px/1.62 var(--f);
 -webkit-font-smoothing:antialiased;padding-bottom:108px}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,li,td,th,span,div{overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block;margin:1.6rem 0;border:1px solid var(--line2);filter:saturate(.6) contrast(1.04)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--paper);color:var(--graphite);padding:10px;z-index:99}
::selection{background:var(--paper);color:var(--graphite)}

h1,h2,h3{text-transform:uppercase;letter-spacing:.012em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(1.85rem,4vw,3.1rem);line-height:1.02;margin:.2rem 0 1.4rem}
h2{font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.06;margin:3.4rem 0 1rem;padding-top:1.6rem;
 background-image:linear-gradient(90deg,var(--line),var(--line));background-repeat:no-repeat;
 background-size:0 1px;background-position:0 0;animation:rule 1s var(--e) forwards}
h3{font-size:clamp(.95rem,1.3vw,1.1rem);letter-spacing:.05em;margin:1.9rem 0 .55rem}
@keyframes rule{to{background-size:100% 1px}}
p{margin:.9rem 0;opacity:var(--f2)}
strong,b{font-weight:600;opacity:1}
main{width:100%;max-width:var(--shell);margin:0 auto;padding:2.6rem clamp(18px,3vw,44px) 5rem}

/* ── masthead: porcelain, sticky, brand set heavy ───────────────────────── */
.top{position:sticky;top:0;z-index:50;background:var(--paper);color:var(--graphite);
 border-bottom:1px solid var(--lineS);box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.35);
 display:flex;align-items:center;gap:2rem;min-height:84px;
 padding:.8rem clamp(18px,3vw,44px);max-width:none}
.brand{display:grid;line-height:1.1;flex:0 0 auto}
.brand b{font-weight:800;font-size:clamp(19px,2vw,27px);letter-spacing:.06em;text-transform:uppercase}
.brand span{margin-top:5px;font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.62}
.brand img{display:none}
.top nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin-left:.5rem}
.top nav a{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:opacity .25s}
.top nav a:hover{opacity:1}
.tel{margin-left:auto;display:grid;justify-items:end;line-height:1.1;flex:0 0 auto;background:none;padding:0}
.tel small{font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.62}
.tel b{margin-top:5px;font-weight:700;font-size:clamp(17px,1.6vw,22px);letter-spacing:-.012em;font-variant-numeric:lining-nums}
.ribbon{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line2);
 font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:.7rem 1rem;opacity:.72}
.ribbon a{text-decoration:none}
.crumbs{width:100%;max-width:var(--shell);margin:1.6rem auto 0;padding:0 clamp(18px,3vw,44px);
 font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.crumbs i{font-style:normal;padding:0 .45rem;opacity:.5}

/* ── answer-first ──────────────────────────────────────────────────────── */
.ans{border:1px solid var(--line);padding:1.3rem 1.4rem;margin:1.8rem 0}
.ans b{display:block;font-weight:600;font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.62;margin-bottom:.7rem}
.ans p{margin:.5rem 0;opacity:1}
.ansc{opacity:var(--f2)!important;margin-top:1rem!important}
.cta{display:inline-block;background:var(--paper);color:var(--graphite);border:1px solid var(--paper);
 padding:13px 22px;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
 margin:.7rem .5rem .7rem 0;transition:background .25s,color .25s}
.cta:hover{background:transparent;color:var(--paper)}
.cta.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.cta.ghost:hover{background:var(--paper);color:var(--graphite);border-color:var(--paper)}

/* ── figures: bordered cards that invert ───────────────────────────────── */
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:14px;margin:1.8rem 0}
.stat>div{border:1px solid var(--line);padding:20px 20px 22px;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.stat>div:hover{background:var(--paper);color:var(--graphite);border-color:var(--paper);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.stat .n{display:block;font-weight:700;font-size:clamp(1.7rem,2.7vw,2.4rem);line-height:1;
 letter-spacing:-.022em;font-variant-numeric:lining-nums tabular-nums}
.stat .l{display:block;margin-top:12px;font-weight:600;font-size:12.5px;line-height:1.45;
 letter-spacing:.05em;text-transform:uppercase;opacity:.88}
.stat .s{display:block;margin-top:12px;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:var(--f3)}

/* ── tables ────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:15px}
caption{caption-side:top;text-align:left;font-weight:600;font-size:9.5px;letter-spacing:.2em;
 text-transform:uppercase;opacity:var(--f3);padding-bottom:.8rem}
th,td{border:1px solid var(--line2);padding:.7rem .85rem;text-align:left;vertical-align:top}
thead th{font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.facts th{width:32%;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.facts td{opacity:var(--f2)}

/* ── escalation ladder ─────────────────────────────────────────────────── */
.lad{margin:2rem 0;border:1px solid var(--line)}
.lad>b{display:block;padding:.8rem 1rem;font-weight:600;font-size:10px;letter-spacing:.22em;
 text-transform:uppercase;opacity:.72;border-bottom:1px solid var(--line2)}
.lad ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s}
.lad li{padding:1rem .85rem;border-right:1px solid var(--line2);counter-increment:s;position:relative;
 font-size:13.5px;line-height:1.45;opacity:var(--f2)}
.lad li:last-child{border-right:0}
.lad li:before{content:"0" counter(s);display:block;font-weight:600;font-size:9.5px;letter-spacing:.2em;opacity:.5;margin-bottom:.7rem}
.lad li em{display:block;font-style:normal;font-weight:700;font-size:12.5px;letter-spacing:.06em;
 text-transform:uppercase;opacity:1;margin-bottom:.35rem}
.lad li.safe:after,.lad li.warn:after,.lad li.bad:after{content:"";position:absolute;left:.85rem;right:.85rem;top:0;height:2px;background:currentColor}
.lad li.warn:after{opacity:.6}.lad li.bad:after{opacity:1}.lad li.safe:after{opacity:.3}

/* ── triage ────────────────────────────────────────────────────────────── */
.tri{border:1px solid var(--line);padding:1.3rem 1.4rem;margin:2rem 0}
.tri h2{margin:.1rem 0 .4rem;padding:0;background:none;animation:none;font-size:clamp(1.05rem,1.6vw,1.25rem)}
.tri .opts{display:flex;flex-wrap:wrap;gap:6px;margin:1rem 0 .2rem}
.tri button{cursor:pointer;background:transparent;color:var(--paper);border:1px solid var(--line);
 padding:9px 15px;font:600 11px var(--f);letter-spacing:.16em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.tri button:hover{border-color:var(--paper)}
.tri button[aria-pressed=true]{background:var(--paper);color:var(--graphite);border-color:var(--paper)}
.tri .out{display:none;margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line2)}
.tri .out.on{display:block;animation:rise .45s var(--e)}
.tri .out .lv{display:inline-block;font-weight:700;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
 border:1px solid var(--line);padding:.25rem .6rem;margin-bottom:.7rem}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── flow figure ───────────────────────────────────────────────────────── */
.flow{margin:2rem 0;border:1px solid var(--line);padding:1.1rem;overflow:hidden}
.flow figcaption{font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:var(--f3);margin-bottom:.9rem}
.flow svg{width:100%;height:auto;display:block}
.flow .track{stroke:currentColor;stroke-width:1;fill:none;opacity:.28}
.flow .live{stroke:currentColor;stroke-width:2;fill:none;stroke-dasharray:10 340;animation:travel 6s linear infinite}
.flow .node{fill:var(--ink);stroke:currentColor;stroke-opacity:.5}
.flow .drop{fill:currentColor}
.flow text{font:600 8.5px var(--f);fill:currentColor;letter-spacing:.14em;text-transform:uppercase}
@keyframes travel{from{stroke-dashoffset:350}to{stroke-dashoffset:0}}

/* ── cards, index rows, chips ──────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:14px;margin:1.6rem 0}
.card{display:block;border:1px solid var(--line);padding:20px;min-height:7.5rem;
 transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .4s var(--e)}
.card:hover{background:var(--paper);color:var(--graphite);border-color:var(--paper);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.card b{display:block;font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
.card span{font-size:14px;line-height:1.5;opacity:.86}
.card .k{display:block;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:var(--f3);margin-bottom:.6rem}
.meshbox{margin:2.4rem 0}
.meshbox h3{margin:0 0 .8rem}
.mesh{display:flex;flex-wrap:wrap;gap:6px}
.mesh a{border:1px solid var(--line2);padding:.35rem .7rem;font-weight:600;font-size:11px;
 letter-spacing:.1em;text-transform:uppercase;opacity:.8;transition:background .25s,color .25s,border-color .25s,opacity .25s}
.mesh a:hover{background:var(--paper);color:var(--graphite);border-color:var(--paper);opacity:1}
.pillrow{display:flex;flex-wrap:wrap;gap:6px;margin:1.2rem 0}
.pill{border:1px solid var(--line2);padding:.35rem .7rem;font-weight:600;font-size:10.5px;
 letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.pill.hi,.pill.go{border-color:var(--line);opacity:1}

/* ── prose furniture ───────────────────────────────────────────────────── */
.howto{padding-left:0;list-style:none;counter-reset:h;margin:1.4rem 0}
.howto li{counter-increment:h;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;
 padding:1.1rem 0;border-top:1px solid var(--line2);opacity:var(--f2)}
.howto li:before{content:"0" counter(h);font-weight:600;font-size:11px;letter-spacing:.14em;opacity:.55}
details{border:1px solid var(--line2);padding:.85rem 1rem;margin:.6rem 0;transition:border-color .3s}
details:hover{border-color:var(--line)}
summary{cursor:pointer;font-weight:600;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase}
blockquote{margin:1.5rem 0;padding:1.1rem 1.3rem;border:1px solid var(--line2);font-size:16px;opacity:var(--f2)}
.note{font-size:13.5px;opacity:var(--f3)}
.terms{columns:2;column-gap:2.4rem;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:var(--f3);padding-left:1.1rem}
.cite{border-top:1px solid var(--line2);padding:1.1rem 0;font-size:14px;opacity:var(--f2)}
.cite b{font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.cite .grade{display:inline-block;font-weight:600;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
 border:1px solid var(--line2);padding:.15rem .45rem;margin-left:.5rem;opacity:.7}
.fund{border:1px solid var(--line2);padding:1.1rem 1.2rem;margin:2rem auto 0;font-size:13.5px;opacity:var(--f3)}
.fund b{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:1}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line2);padding:3rem clamp(18px,3vw,44px) 4rem;font-size:13.5px;opacity:.9}
.foot>*{width:100%;max-width:var(--shell);margin-left:auto;margin-right:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 22px;margin:1.6rem auto}
.foot nav a{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;transition:opacity .25s}
.foot nav a:hover{opacity:1}
.foot p{opacity:var(--f3)}
.ffline{border-top:1px solid var(--line2);padding-top:1.2rem;margin-top:1.6rem}

/* ── sticky consultation bar: the masthead along the bottom edge ────────── */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);color:var(--graphite);
 border-top:1px solid var(--lineS);box-shadow:0 -1px 0 rgba(0,0,0,.06),0 -18px 46px rgba(0,0,0,.6)}
.sticky a{display:flex;align-items:center;gap:16px;width:100%;max-width:var(--shell);margin:0 auto;
 padding:13px clamp(18px,3vw,44px)}
.sticky .ring{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
 background:var(--graphite);color:var(--paper);border:1px solid var(--graphite);flex:0 0 36px;position:relative;
 transition:background .25s,color .25s}
.sticky a:hover .ring{background:transparent;color:var(--graphite)}
.sticky .ring:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--graphite);
 opacity:.28;animation:ring 3s ease-out infinite}
@keyframes ring{0%{transform:scale(.85);opacity:.4}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}
.sticky .lbl{display:grid;line-height:1.15;min-width:0}
.sticky .lbl small{font-weight:600;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.62}
.sticky .lbl em{margin-top:4px;font-style:normal;font-weight:600;font-size:13px;letter-spacing:.08em;
 text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .no{margin-left:auto;font-weight:700;font-size:clamp(16px,1.6vw,21px);letter-spacing:-.012em;
 font-variant-numeric:lining-nums;white-space:nowrap;flex:0 0 auto}

/* ── modal ─────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:80;background:rgba(6,6,8,.86);display:flex;align-items:center;
 justify-content:center;padding:1.2rem;animation:fade .3s ease}
.modal[hidden]{display:none}
.modal .box{background:var(--ink);border:1px solid var(--line);max-width:28rem;width:100%;
 box-shadow:0 30px 90px rgba(0,0,0,.8)}
.modal .in{padding:1.5rem 1.6rem 1.7rem}
.modal h2{margin:.2rem 0 .8rem;padding:0;background:none;animation:none;font-size:1.25rem}
.modal .cta{width:100%;text-align:center;margin:1rem 0 .4rem}
.modal .x{float:right;border:0;background:none;font:400 1.5rem/1 var(--f);cursor:pointer;color:inherit;opacity:.5;padding:0 .2rem}
.modal .x:hover{opacity:1}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── motion: rules draw, blocks enter, figures count ───────────────────── */
[data-r]{background-image:linear-gradient(90deg,var(--line),var(--line));background-repeat:no-repeat;
 background-size:0 1px;background-position:0 0;transition:background-size 1s var(--e)}
[data-r].in{background-size:100% 1px}
[data-rv]{opacity:0;transform:translateY(14px)}
[data-rv].in{opacity:1;transform:none;transition:opacity .9s ease,transform .9s var(--e)}

@media(min-width:1500px){.stat{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.stat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
 .top nav{display:none}
 .stat{grid-template-columns:1fr}
 .lad ol{grid-template-columns:1fr}
 .lad li{border-right:0;border-bottom:1px solid var(--line2)}
 .terms{columns:1}
 .howto li{grid-template-columns:2rem 1fr;gap:.7rem}
 .sticky .lbl em{display:none}
 .stat>div:hover,.card:hover,.mesh a:hover{background:transparent;color:inherit;border-color:var(--line);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 [data-rv]{opacity:1;transform:none}[data-r]{background-size:100% 1px}
}
@media print{.top,.sticky,.modal,.ribbon{display:none}body{background:#fff;color:#000;padding:0}}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}