/* miwlfanfavorite.com — maker's blueprint look */
:root{
  --ink:#10233f; --ink-soft:#33496b; --paper:#f4f7fb; --grid:#d9e3ef; --grid-strong:#c3d2e4;
  --blue:#123f73; --blue-deep:#0b2a4f; --line:#9cc3ea; --chalk:#eaf3ff;
  --safety:#f4b400; --rule:#2d5f97;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px}
a{color:var(--blue)}
a:hover{color:#8a5a00}
.strip{background:var(--blue-deep);color:var(--chalk);font:12.5px/1.4 var(--mono);padding:7px 16px;text-align:center;letter-spacing:.02em}
header.site{background:var(--blue);color:var(--chalk);
  background-image:linear-gradient(rgba(156,195,234,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(156,195,234,.18) 1px,transparent 1px),
  linear-gradient(rgba(156,195,234,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(156,195,234,.08) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,12px 12px,12px 12px;border-bottom:4px solid var(--safety)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:14px;padding:18px 0 10px;text-decoration:none;color:var(--chalk)}
.brand svg{flex:none}
.brand b{display:block;font:700 22px/1.1 var(--sans);letter-spacing:.01em}
.brand small{display:block;font:12px/1.3 var(--mono);color:var(--line);text-transform:uppercase;letter-spacing:.12em}
nav.main{display:flex;flex-wrap:wrap;gap:6px 6px;padding:4px 0 16px}
nav.main a{color:var(--chalk);text-decoration:none;font:13px/1 var(--mono);padding:8px 10px;border:1px dashed rgba(156,195,234,.55)}
nav.main a:hover,nav.main a[aria-current=page]{border-style:solid;border-color:var(--safety);color:#fff;background:rgba(244,180,0,.12)}
main{padding:28px 0 40px}
.sheet{background:#fff;border:1.5px solid var(--rule);box-shadow:6px 6px 0 rgba(18,63,115,.12);padding:28px clamp(18px,4vw,44px) 30px;position:relative}
.sheet::before{content:attr(data-sheet);position:absolute;top:-11px;left:18px;background:var(--safety);color:var(--blue-deep);font:700 11px/1 var(--mono);padding:5px 8px;letter-spacing:.08em;text-transform:uppercase}
.kicker{font:12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);margin:0 0 6px}
h1{font:800 clamp(28px,4.6vw,42px)/1.12 var(--sans);margin:0 0 14px;color:var(--blue-deep);letter-spacing:-.01em}
h2{font:700 23px/1.25 var(--sans);margin:34px 0 10px;color:var(--blue-deep);display:flex;align-items:center;gap:10px}
h2::before{content:"";flex:none;width:28px;height:10px;border-left:2px solid var(--rule);border-right:2px solid var(--rule);
  background:linear-gradient(var(--rule),var(--rule)) center/100% 1.5px no-repeat}
h3{font:700 18px/1.3 var(--sans);margin:22px 0 6px}
.lede{font-size:19px;color:var(--ink-soft);max-width:62ch}
p,li{max-width:70ch}
table{border-collapse:collapse;width:100%;margin:14px 0 20px;font-size:15px;background:#fff}
.tbl{overflow-x:auto}
th,td{border:1px solid var(--grid-strong);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#e7eef7;font:600 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--blue-deep)}
.note{border-left:4px solid var(--safety);background:#fff9e6;padding:12px 16px;margin:18px 0;font-size:15.5px}
.note strong{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:2px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:18px 0}
.card{border:1.5px dashed var(--rule);padding:14px 16px;background:#fbfdff;text-decoration:none;color:var(--ink);display:block}
.card:hover{border-style:solid;background:#fff}
.card b{display:block;font:700 17px/1.3 var(--sans);color:var(--blue-deep);margin-bottom:4px}
.card small{font:12px/1.4 var(--mono);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.flow{margin:20px 0 6px;overflow-x:auto}
.flow svg{display:block;min-width:640px;width:100%;height:auto}
.sources{margin-top:38px;border-top:2px dashed var(--grid-strong);padding-top:8px;font-size:15px}
.sources ol{padding-left:22px}
.sources li{margin:4px 0;word-break:break-word}
.fine{font:12.5px/1.5 var(--mono);color:var(--ink-soft)}
.calc{border:1.5px solid var(--rule);background:#f1f6fc;padding:16px;margin:18px 0}
.calc label{font:600 13px/1.4 var(--mono);display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.calc input{font:18px var(--mono);padding:8px 10px;border:1.5px solid var(--rule);width:100%;max-width:280px;background:#fff;color:var(--ink)}
.calc output{display:block;margin-top:10px;font:600 17px/1.5 var(--mono);color:var(--blue-deep)}
footer.site{background:var(--blue-deep);color:var(--chalk);font:13px/1.6 var(--mono);padding:0 0 24px}
.titleblock{display:grid;grid-template-columns:2fr 1fr 1fr;border:1.5px solid var(--line);margin:0 auto;transform:translateY(-1px)}
.titleblock div{border-right:1px solid var(--line);padding:8px 12px}
.titleblock div:last-child{border-right:0}
.titleblock span{display:block;font-size:10.5px;color:var(--line);text-transform:uppercase;letter-spacing:.12em}
footer.site p{max-width:none;margin:14px 0 0}
footer.site a{color:#fff}
@media (max-width:640px){
  body{font-size:16px}
  .titleblock{grid-template-columns:1fr}
  .titleblock div{border-right:0;border-bottom:1px solid var(--line)}
  .titleblock div:last-child{border-bottom:0}
  .sheet{box-shadow:4px 4px 0 rgba(18,63,115,.12)}
}