:root{
  --paper:#F5F7FA; --ink:#1F2430; --steel:#5A6476; --rule:#D9DEE6; --sky:#E8EEF6; --red:#C4302B; --red-dk:#9E2420; --white:#fff;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#161A22; --ink:#E7EAF0; --steel:#9AA4B6; --rule:#2C3442; --sky:#1F2632; --white:#1C222C; --red:#E0524C; --red-dk:#B83A35; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body)}
a{color:inherit;text-decoration-color:var(--red);text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.prose{max-width:68ch}

/* Header */
.top{border-bottom:1px solid var(--rule);background:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:700 1.2rem/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.brand svg{flex:none}
.top nav{display:flex;gap:18px;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--steel);font-weight:700}
.top nav a:hover{color:var(--ink)}
select{font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:6px 8px}

/* Headings */
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.3rem);margin:.2em 0 .3em;font-weight:800}
h2{font-size:1.55rem;margin:2em 0 .5em}
h3{font-size:1.15rem;margin:1.4em 0 .4em}
.lede{font-size:1.12rem;color:var(--steel);max-width:62ch;margin:0 0 1.6em}
.crumbs{font-size:.9rem;color:var(--steel);padding-top:18px}
.crumbs a{color:var(--steel)}

/* Tool */
.tool{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px;background:var(--white);border:1px solid var(--rule);border-radius:14px;padding:26px;margin:8px 0 10px}
@media (max-width:760px){.tool{grid-template-columns:1fr;padding:18px}}
.calc label{display:block;font-weight:700;margin:0 0 6px}
.calc .field{margin-bottom:16px}
.calc input{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border:1.5px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.calc input:focus{border-color:var(--ink);outline:none}
.calc button{font:700 1.05rem var(--display);background:var(--ink);color:var(--paper);border:0;border-radius:8px;padding:13px 26px;cursor:pointer}
.calc button:hover{background:var(--red)}
.facts{margin:18px 0 0;display:grid;gap:10px}
.facts div{border-top:1px solid var(--rule);padding-top:8px}
.facts dt{font-size:.85rem;color:var(--steel)}
.facts dd{margin:0;font-weight:700;font-size:1.05rem}

/* The tear-off calendar sheet: the one memorable element */
.sheet{position:relative;width:min(260px,100%);margin:0 auto;background:var(--white);border-radius:10px;box-shadow:0 1px 0 var(--rule),0 14px 30px -18px rgba(20,30,50,.45);overflow:hidden;text-align:center;border:1px solid var(--rule)}
.sheet::before{content:"";position:absolute;top:8px;left:0;right:0;height:8px;background:radial-gradient(circle at 50% 50%,var(--paper) 3px,transparent 3.5px) 0 0/22px 8px repeat-x;z-index:2}
.sheet-top{background:var(--red);color:#fff;font:700 1rem var(--display);padding:26px 10px 12px;min-height:58px}
.sheet-day{font:800 clamp(4rem,9vw,5.6rem)/1 var(--display);padding:18px 8px 4px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;word-break:break-word}
.sheet-sub{color:var(--steel);font-weight:700;padding:0 10px 20px;min-height:44px}
.sheet.flip{animation:tear .45s cubic-bezier(.2,.7,.2,1)}
@keyframes tear{from{transform:translateY(-10px) rotate(-1.5deg);opacity:.2}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet.flip{animation:none}}

/* Lists */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 24px;padding:0;list-style:none}
.grid li{border-top:1px solid var(--rule)}
.grid a{display:block;padding:10px 0;text-decoration:none;font-weight:700}
.grid a:hover{color:var(--red)}
.lang-row{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.lang-row a{display:inline-block;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;font-size:.95rem;background:var(--white)}
.lang-row a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Content */
ol.steps{padding-inline-start:1.3em}
ol.steps li{margin:.35em 0}
details{border-top:1px solid var(--rule);padding:12px 0}
details summary{font-weight:700;cursor:pointer}
table{border-collapse:collapse;width:100%;margin:1em 0;font-variant-numeric:tabular-nums}
th,td{text-align:start;padding:9px 10px;border-bottom:1px solid var(--rule)}
th{font-family:var(--display);font-size:.95rem;color:var(--steel)}
tr.hit td{background:var(--sky);font-weight:700}
.answer{background:var(--white);border:1px solid var(--rule);border-inline-start:6px solid var(--red);border-radius:10px;padding:18px 20px;margin:1.2em 0}
.answer strong{font:800 1.35rem/1.3 var(--display);display:block}
.cta{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font:700 1rem var(--display);padding:12px 22px;border-radius:8px;margin:.6em 0}
.cta:hover{background:var(--red);color:#fff}
.post-list{list-style:none;padding:0}
.post-list li{border-top:1px solid var(--rule);padding:14px 0}
.post-list a{font:700 1.12rem var(--display);text-decoration:none}
.post-list p{margin:.25em 0 0;color:var(--steel);font-size:.95rem}
.pager{display:flex;gap:6px;flex-wrap:wrap;margin:24px 0}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--rule);border-radius:6px;text-decoration:none}
.pager span{background:var(--ink);color:var(--paper)}
.meta{color:var(--steel);font-size:.92rem}

/* Hero (home) */
.hero{padding:34px 0 10px}
.hero h1{max-width:16ch}

/* Footer */
footer{margin-top:70px;border-top:1px solid var(--rule);padding:34px 0 50px;color:var(--steel);font-size:.95rem}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}
footer h3{color:var(--ink);font-size:1rem;margin:0 0 8px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:4px 0}
footer a{text-decoration:none}
[dir=rtl] .sheet::before{direction:ltr}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}