/* GNCash — site-specific styles. A reading site: the month line once, then the guides, then long-form text. */

h1,h2,h3{font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,1.5rem + 3.4vw,3.9rem);line-height:1.04}
h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.1rem)}
h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em}
.brand img{height:26px;width:auto}
.nav a{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--brand)}
.btn{font-family:var(--font-display)}
.lede{color:var(--ink-2);font-size:var(--fs-lg);max-width:54ch;line-height:1.5}

/* ---- Homepage intro + the month line (the memorable thing) ------------ */
.intro{padding-block:clamp(2.2rem,6vw,4.5rem) 0}
.intro h1{max-width:15ch;margin-bottom:var(--s-5)}
.month{margin:clamp(1.8rem,4vw,3rem) 0 0;background:var(--wash);border-radius:var(--radius);padding:clamp(1rem,3vw,2rem) clamp(.75rem,3vw,2rem) clamp(1rem,2.5vw,1.6rem)}
.month svg{width:100%;height:auto;max-width:760px;overflow:visible}
@media(min-width:900px){.month{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:var(--s-6);align-items:end}}
.month .axis{stroke:#b9c2d0;stroke-width:2}
.month .tick{stroke:#b9c2d0;stroke-width:2}
.month .bal{fill:none;stroke:var(--brand);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.month .in{fill:var(--brand)}
.month .out{fill:var(--ink-2)}
.month text{font-family:var(--font-display);font-size:22px;font-weight:600;fill:var(--ink)}
.month text.small{font-size:20px;font-weight:600;fill:var(--ink-2)}
@media(max-width:600px){.month text{font-size:30px}.month text.small{font-size:27px}}
.month text.pay{fill:var(--brand);font-weight:800}
.month figcaption{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--s-3);max-width:62ch;line-height:1.5}
.month figcaption strong{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .month .bal{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.6s .2s var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}

/* ---- Guides, grouped by situation ------------------------------------ */
.guides{padding-block:var(--section)}
.guides>h2{margin-bottom:var(--s-2)}
.guides>.lede{margin-bottom:var(--s-6)}
.group{display:grid;gap:var(--s-3) var(--s-6);padding-block:var(--s-5);border-top:2px solid var(--ink)}
@media(min-width:900px){.group{grid-template-columns:17rem 1fr}}
.group-head{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:800;line-height:1.25;margin:0;max-width:20ch}
.group .list-rows{border-top:0}
.group .list-rows li{grid-template-columns:1fr;padding:var(--s-3) 0 var(--s-4)}
.group .list-rows li:first-child{padding-top:0}
.group .list-rows li:last-child{border-bottom:0}
.group .list-rows h3{font-size:var(--fs-lg)}
.group .list-rows h3 a{color:var(--ink);text-decoration:none}
.group .list-rows h3 a:hover{color:var(--brand);text-decoration:underline}
.group .list-rows p{font-size:var(--fs-md);max-width:62ch}
.group .meta{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Long-form reading ------------------------------------------------ */
.prose{font-size:1.1rem;line-height:1.7;max-width:44rem}
.prose p,.prose li{max-width:65ch}
.prose h2{margin-top:var(--s-7);font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)}
.prose ul,.prose ol{padding-left:1.15em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--brand)}
.prose .checklist{list-style:none;padding:0}
.prose .checklist li{padding-left:1.6em;position:relative}
.prose .checklist li::before{content:"";position:absolute;left:.1em;top:.62em;width:.7em;height:.38em;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.overview{padding-block:var(--section);border-top:1px solid var(--line)}
.overview .prose>h2:first-child{margin-top:0}
.takeaways{border-radius:var(--radius);padding:var(--s-5) var(--s-5) var(--s-4);margin:var(--s-6) 0;background:var(--wash)}
.prose .takeaways-title{font-size:var(--fs-lg);margin:0 0 var(--s-3)}
.takeaways ul{margin:0}

/* ---- Article pages --------------------------------------------------- */
.article{padding-block:clamp(1.25rem,3vw,2.5rem) var(--section)}
.crumbs{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--ink-2)}
.crumbs a{color:var(--ink-2);display:inline-block;padding-block:.65rem}
.article-head{max-width:46rem;margin-bottom:var(--s-6)}
.article-head h1{font-size:clamp(2rem,1.45rem + 2.5vw,3.2rem);margin:var(--s-2) 0 var(--s-4)}
.byline{font-family:var(--font-display);font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s-5)}
.article-head .lede{color:var(--ink);font-size:clamp(1.12rem,1.05rem + .35vw,1.3rem);line-height:1.55}
.article-head .lede+.lede{margin-top:var(--s-3)}
.article-grid{display:grid;gap:var(--s-6)}
@media(min-width:1000px){.article-grid{grid-template-columns:14rem minmax(0,1fr)}.rail{position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start}}
.rail-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);margin-bottom:var(--s-2)}
.toc{list-style:none;padding:0;margin:0;font-family:var(--font-display);font-size:var(--fs-sm);border-left:2px solid var(--line)}
.toc li{margin:0}
.toc a{display:block;padding:.45rem 0 .45rem .9rem;color:var(--ink-2);text-decoration:none;line-height:1.35}
.toc a:hover{color:var(--brand)}
.prose section{scroll-margin-top:calc(var(--header-h) + 1rem)}
.faq-block{margin-top:var(--s-7)}
.faq details{font-size:var(--fs-md);border-radius:var(--radius)}
.faq summary{font-family:var(--font-display);font-weight:700}
.faq details>div p{max-width:62ch}
.note{margin-top:var(--s-7);padding-top:var(--s-4);border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink-2)}
.keep{margin-top:var(--section);max-width:56rem}
.keep h2{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.keep .list-rows li{grid-template-columns:1fr}
.keep .list-rows h3{font-size:var(--fs-lg)}
.keep .list-rows h3 a{color:var(--ink);text-decoration:none}
.keep .list-rows h3 a:hover{color:var(--brand);text-decoration:underline}

/* ---- Simple pages ---------------------------------------------------- */
.page{padding-block:clamp(2rem,5vw,4rem) var(--section)}
.page .prose h1{margin-bottom:var(--s-5)}
.page .form{font-size:var(--fs-md);max-width:36rem;margin-top:var(--s-6)}
.form button{min-height:48px}

/* ---- Footer: ledger navy --------------------------------------------- */
.site-footer{background:var(--navy);color:#c9d3ea}
.site-footer .wordmark{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);color:#fff;text-decoration:none;letter-spacing:-.02em}
.site-footer h2{font-family:var(--font-display);color:#fff;font-size:var(--fs-sm);font-weight:700;letter-spacing:0;margin-bottom:var(--s-3)}
.footer-grid{grid-template-columns:1fr}
@media(min-width:900px){.footer-grid{grid-template-columns:1.1fr 2fr 1fr}}
.footer-grid p{max-width:34ch;margin-top:var(--s-3)}
.site-footer ul a{display:inline-block;padding-block:.3rem;line-height:1.35}
.footer-bottom{color:#9fb0d4}