/* Yezimali — site styles.
   Same palette and typefaces as the app, so the site and the file feel like
   one thing. Fonts are served from this folder: nothing is fetched from
   Google or anywhere else, which keeps the privacy claim true of the site
   as well as the app. */

@font-face{
  font-family:'Fraunces';
  font-style:normal; font-weight:100 900; font-display:block;
  src:url(fonts/fraunces.woff2) format('woff2-variations');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal; font-weight:100 900; font-display:block;
  src:url(fonts/hanken.woff2) format('woff2-variations');
}

:root{
  --paper:#F3ECDD;
  --card:#FCFAF3;
  --edge:#E4D9C2;
  --ink:#2B2620;
  --ink-soft:#6B6155;
  --rule:#DBCFB6;
  --green:#2F6B57;
  --bronze:#8C6A2F;
  --measure:34rem;          /* ~68 characters */
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
}

.wrap{ max-width:52rem; margin:0 auto; padding:0 1.5rem }
.measure{ max-width:var(--measure) }

/* ---------- masthead ---------- */
header.top{ border-bottom:1px solid var(--rule) }
header.top .wrap{
  display:flex; align-items:baseline; gap:1.5rem;
  flex-wrap:wrap; padding-top:1.4rem; padding-bottom:1.1rem;
}
.brand{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.5rem; font-weight:600; letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
}
nav.top-nav{ margin-left:auto; display:flex; gap:1.3rem; flex-wrap:wrap }
nav.top-nav a{
  color:var(--ink-soft); text-decoration:none; font-size:.95rem; font-weight:600;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
nav.top-nav a:hover,nav.top-nav a:focus{ color:var(--green); border-bottom-color:var(--green) }

/* ---------- type ---------- */
h1{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600; font-size:clamp(2rem,5vw,2.9rem); line-height:1.15;
  margin:2.5rem 0 .8rem; max-width:22ch;
}
h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600; font-size:1.45rem; line-height:1.25;
  margin:2.8rem 0 .7rem;
}
h3{ font-size:1.05rem; margin:1.8rem 0 .4rem }
p{ margin:0 0 1.1rem; max-width:var(--measure) }
ul,ol{ max-width:var(--measure); padding-left:1.2rem }
li{ margin-bottom:.5rem }
a{ color:var(--green) }
.lede{ font-size:1.16rem; color:var(--ink-soft); line-height:1.55 }
.quiet{ color:var(--ink-soft); font-size:.93rem }

/* ---------- the ledger: the page's one bold idea ----------
   A real statement of position, set the way a balance sheet is set:
   labels left, figures right, ruled between. It is the product's own
   vernacular, and it shows what the app produces before a word of
   explanation. */
.ledger{
  background:var(--card); border:1px solid var(--edge);
  padding:1.4rem 1.6rem; margin:2rem 0 1rem; max-width:30rem;
}
.ledger .ledger-head{
  font-family:'Fraunces',Georgia,serif; font-size:1.05rem;
  padding-bottom:.7rem; margin-bottom:.3rem; border-bottom:2px solid var(--ink);
}
.ledger dl{ margin:0 }
.ledger .row{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.62rem 0; border-bottom:1px solid var(--rule);
}
.ledger .row:last-of-type{ border-bottom:none }
.ledger dt{ color:var(--ink-soft) }
.ledger dd{
  margin:0; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;
}
.ledger .total{ border-top:2px solid var(--ink); border-bottom:none; margin-top:.3rem }
.ledger .total dt,.ledger .total dd{ color:var(--ink); font-weight:700 }
.ledger-note{ color:var(--ink-soft); font-size:.88rem; max-width:30rem; margin-top:0 }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--green); color:#fff;
  text-decoration:none; font-weight:700; font-size:1rem;
  padding:.75rem 1.4rem; border-radius:6px; border:1px solid var(--green);
}
.btn:hover,.btn:focus{ background:#255848 }
.btn.plain{ background:transparent; color:var(--green) }
.btn.plain:hover,.btn.plain:focus{ background:rgba(47,107,87,.08) }
.btn-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin:1.6rem 0 }

/* ---------- lists of facts ---------- */
.facts{ list-style:none; padding:0; max-width:var(--measure) }
.facts li{ padding:.75rem 0; border-top:1px solid var(--rule) }
.facts li:last-child{ border-bottom:1px solid var(--rule) }
.facts b{ display:block }

.callout{
  border-left:4px solid var(--bronze); background:var(--card);
  padding:1rem 1.2rem; margin:1.8rem 0; max-width:var(--measure);
}
.callout p:last-child{ margin-bottom:0 }

/* ---------- footer ---------- */
footer.site{
  margin-top:4rem; border-top:1px solid var(--rule);
  padding:1.8rem 0 3rem; color:var(--ink-soft); font-size:.9rem;
}
footer.site a{ color:var(--ink-soft) }
footer.site p{ max-width:44rem }

:focus-visible{ outline:3px solid var(--green); outline-offset:2px }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important } }

/* ---------- handbook ---------- */
.crumb{ font-size:.9rem; color:var(--ink-soft); margin:1.8rem 0 0 }
.crumb a{ color:var(--ink-soft) }
.chapter h2{ font-size:1.3rem; margin-top:2.4rem }
.chapter h3{ font-size:1.02rem; color:var(--bronze); margin-top:1.7rem; letter-spacing:.01em }
.chapter p.aside{
  color:var(--ink-soft); border-left:3px solid var(--rule);
  padding-left:1rem; margin-left:0;
}
.chapter .table-wrap{ overflow-x:auto; margin:1.5rem 0 }
.chapter table{ border-collapse:collapse; font-size:.95rem; min-width:26rem }
.chapter th,.chapter td{
  text-align:left; padding:.55rem .9rem .55rem 0;
  border-bottom:1px solid var(--rule); vertical-align:top;
}
.chapter th{ font-weight:700; border-bottom:2px solid var(--ink) }

.chapter-nav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin:3rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule);
  font-size:.95rem; font-weight:600;
}
.chapter-nav a{ text-decoration:none }
.chapter-nav a:hover{ text-decoration:underline }

ol.toc{ list-style:none; padding:0; counter-reset:none; max-width:40rem }
ol.toc li{ padding:.85rem 0; border-top:1px solid var(--rule) }
ol.toc li:last-child{ border-bottom:1px solid var(--rule) }
ol.toc a{ text-decoration:none }
ol.toc a:hover b{ text-decoration:underline }
ol.toc .d{ display:block; color:var(--ink-soft); font-size:.92rem; margin-top:.15rem }

/* the page you are currently on, marked in the navigation */
nav.top-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--bronze) }

/* ---------- specimens: what the app's own screens look like ----------
   The site is paper; the app is a screen. These panels borrow the app's
   own chrome — a tab strip and a working area — so a visitor can tell at a
   glance that they are looking at output rather than at more website. Same
   palette, same typefaces, no new ideas. */
.spec{
  background:var(--card); border:1px solid var(--edge);
  margin:1.5rem 0 2.6rem; max-width:42rem;
}
.spec-bar{
  display:flex; gap:.15rem; padding:.5rem .7rem 0;
  border-bottom:1px solid var(--edge); overflow-x:auto;
}
.spec-bar span{
  font-size:.78rem; color:var(--ink-soft); white-space:nowrap;
  padding:.3rem .55rem .4rem; border-bottom:2px solid transparent;
}
.spec-bar span.on{ color:var(--ink); font-weight:700; border-bottom-color:var(--green) }
.spec-body{ padding:1.15rem 1.35rem 1.35rem }
.spec-cap{ color:var(--ink-soft); font-size:.88rem; max-width:42rem; margin:-1.9rem 0 2.6rem }

/* figures in a specimen line up like a set of accounts */
.spec table{ width:100%; border-collapse:collapse; font-size:.93rem }
.spec th{
  text-align:left; font-weight:700; font-size:.82rem; color:var(--ink-soft);
  padding:0 0 .45rem; border-bottom:2px solid var(--ink);
}
.spec th.n, .spec td.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.spec td{ padding:.5rem 0; border-bottom:1px solid var(--rule) }
.spec tr:last-child td{ border-bottom:none }
.spec tr.sum td{ border-top:2px solid var(--ink); border-bottom:none; font-weight:700; padding-top:.55rem }
.spec tr.sub td{ font-weight:700 }
.spec .grp td{ padding-top:1.1rem; border-bottom:none; font-family:'Fraunces',Georgia,serif; font-size:1rem }
.spec .neg{ color:var(--bronze) }
.spec h4{
  font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.05rem;
  margin:0 0 .8rem; padding-bottom:.5rem; border-bottom:2px solid var(--ink);
}

/* the horizontal fill used for envelopes and children's goals */
.bar{ background:var(--paper); border:1px solid var(--edge); height:.55rem; margin-top:.35rem }
.bar i{ display:block; height:100%; background:var(--green) }
.bar.over i{ background:var(--bronze) }

/* the one-line verdict the app prints after a change */
.verdict{
  border-left:4px solid var(--green); background:var(--paper);
  padding:.85rem 1.05rem; margin:.9rem 0 0; font-size:.95rem; max-width:none;
}
.verdict:first-of-type{ margin-top:0 }
.verdict b{ display:block; font-size:.8rem; color:var(--ink-soft); margin-bottom:.15rem }

.jars{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1.2rem }
.jar{ flex:1 1 7rem; border:1px solid var(--edge); background:var(--paper); padding:.7rem .8rem }
.jar u{ display:block; text-decoration:none; font-size:.8rem; color:var(--ink-soft) }
.jar b{ font-size:1.15rem; font-variant-numeric:tabular-nums }

.chart{ width:100%; height:auto; display:block }
.chart .grid{ stroke:var(--rule); stroke-width:1 }
.chart .axis{ stroke:var(--ink); stroke-width:1.5 }
.chart .line{ fill:none; stroke:var(--green); stroke-width:2.5 }
.chart .fill{ fill:var(--green); opacity:.10 }
.chart .lbl{ font-family:'Hanken Grotesk',sans-serif; font-size:11px; fill:var(--ink-soft) }
.chart .dot{ fill:var(--green) }

@media (max-width:30rem){
  .spec-body{ padding:1rem .9rem 1.1rem }
  .spec table{ font-size:.88rem }
}