/* Lessons from Bali · Sarendia house style.
   Tokens and article anatomy follow the May 2026 dispatch; chart classes extend them. */

:root{
  --paper:#F4EEE3;--paper-card:#FAF5EB;--ink:#1B1813;--ink-soft:#4A4239;--ink-mute:#6A5F4E;
  --accent:#2C4A3C;--accent-soft:#6B8678;--warn:#9C5A3C;--warn-soft:#B07C5C;
  --rule:rgba(27,24,19,0.10);--rule-strong:rgba(27,24,19,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--paper);}
body{font-family:'Source Serif 4',Georgia,serif;color:var(--ink);background:var(--paper);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;}

/* masthead */
.masthead{max-width:1080px;margin:0 auto;padding:28px 32px;border-bottom:1px solid var(--rule);}
.masthead-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:24px;}
.wordmark{font-family:'Fraunces';font-weight:400;font-size:30px;letter-spacing:-0.008em;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;justify-self:start;
  font-variation-settings:"opsz" 72,"SOFT" 50;}
.wordmark:hover{color:var(--accent);}
.masthead .dateline{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--ink-soft);justify-self:center;text-align:center;}
.masthead-back{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:underline;text-decoration-thickness:0.5px;
  text-underline-offset:5px;justify-self:end;white-space:nowrap;}
.masthead-back:hover{color:var(--accent);}

/* article column */
article{max-width:680px;margin:0 auto;padding:60px 20px 48px;}
h1{font-family:'Fraunces';font-weight:300;font-size:46px;line-height:1.12;letter-spacing:-0.018em;
  font-variation-settings:"opsz" 144,"SOFT" 50;margin-bottom:20px;}
h1 em{color:var(--accent);}
.dek{font-size:20px;line-height:1.5;color:var(--ink-soft);margin-bottom:26px;}
.byline{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.12em;color:var(--ink-mute);
  text-transform:uppercase;margin-bottom:34px;}
.byline a{color:var(--ink-mute);text-decoration:none;border-bottom:0.5px solid var(--ink-mute);}
.byline a:hover{color:var(--accent);border-color:var(--accent);}

/* headline stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-bottom:36px;
  border-bottom:1px solid var(--rule-strong);margin-bottom:46px;}
.stat-n{font-family:'Fraunces';font-weight:300;font-size:38px;line-height:1.02;letter-spacing:-0.02em;
  font-variation-settings:"opsz" 144,"SOFT" 30;color:var(--ink);margin-bottom:8px;}
.stat-n.warn{color:var(--warn);}
.stat-c{font-size:13px;font-style:italic;color:var(--ink-soft);line-height:1.45;margin-bottom:0;}

/* body */
p{margin-bottom:25px;hyphens:auto;-webkit-hyphens:auto;}
.dropcap::first-letter{font-family:'Fraunces';font-weight:400;font-size:74px;line-height:0.83;
  float:left;padding:6px 10px 0 0;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 50;}
.secnum{font-family:'IBM Plex Mono',monospace;font-size:44px;color:var(--ink-mute);font-weight:400;
  letter-spacing:-0.02em;margin:74px 0 6px;}
h2{font-family:'Fraunces';font-weight:500;font-size:25px;line-height:1.25;margin:0 0 18px;
  font-variation-settings:"opsz" 48,"SOFT" 50;}
a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
a:hover{color:var(--accent);}
em{font-style:italic;}
.gloss-link{color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--accent);text-underline-offset:3px;}
.gloss-link:hover{color:var(--accent);}
:target{scroll-margin-top:24px;}
sup.fn{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);}
sup.fn a{text-decoration:none;color:var(--accent);display:inline-block;padding:15px 6px;margin:-15px -6px;min-width:24px;text-align:center;}

/* figures and charts */
figure{margin:38px 0 48px;}
.fig-title{font-family:'Fraunces';font-weight:500;font-size:18px;line-height:1.35;margin-bottom:6px;
  font-variation-settings:"opsz" 30,"SOFT" 50;}
.fig-caption{font-size:14px;font-style:italic;color:var(--ink-soft);line-height:1.5;margin-bottom:14px;}
.chartscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Every chart renders a dedicated layout per breakpoint (see charts.js), so each
   one fits the viewport at any width instead of horizontal-scrolling on mobile. */
.chartscroll svg{width:100%;height:auto;display:block;min-width:0;}
.fig-source{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-top:10px;line-height:1.6;}
.fig-source a{color:var(--ink-mute);}
svg .grid{stroke:rgba(27,24,19,0.10);stroke-width:1;}
svg .axm{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--ink-mute);}
svg .lblm{font-family:'IBM Plex Mono',monospace;font-size:11.5px;fill:var(--ink-soft);}
svg .val{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;fill:var(--ink);}
svg .anno{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink-mute);letter-spacing:0.04em;}
svg .island-name{font-family:'Fraunces',serif;font-size:19px;font-weight:500;fill:var(--ink);}

/* closing ledger */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:34px 0 8px;padding-top:24px;
  border-top:1px solid var(--rule-strong);}
.ledger-hed{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 16px;font-weight:500;}
.ledger ul{list-style:none;}
.ledger li{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;}
.ledger-fig{font-family:'Fraunces';font-weight:400;font-size:23px;color:var(--ink);flex:0 0 auto;min-width:56px;
  line-height:1;letter-spacing:-0.01em;font-variation-settings:"opsz" 40,"SOFT" 40;}
.ledger-fig.warn{color:var(--warn);}
.ledger-txt{font-size:15px;color:var(--ink-soft);line-height:1.25;}
.ledger-span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-mute);
  letter-spacing:0.03em;margin-top:3px;}

/* footnotes */
.fnotes{margin-top:72px;padding-top:24px;border-top:1px solid var(--rule);}
.fnotes p{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);line-height:1.7;
  margin-bottom:14px;hyphens:none;}
.fnnum{color:var(--accent);font-weight:500;margin-right:6px;}

/* end matter */
.furn{margin-top:50px;padding-top:28px;border-top:1px solid var(--rule);}
.furn-hed{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 14px;font-weight:500;}
.furn p,.furn li,.furn dd{font-size:15px;color:var(--ink-soft);line-height:1.65;}
.furn ul{list-style:none;}
.furn li{margin-bottom:10px;}
.furn p{margin-bottom:12px;max-width:560px;}
.furn dt{font-family:'Fraunces';font-style:italic;font-size:16px;color:var(--ink);margin-top:14px;}
.furn dd{margin-bottom:4px;}
/* footer */
footer.footer{background:#2A2620;color:var(--paper);padding:56px 32px 64px;margin-top:80px;}
.footer-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.8fr 1fr;gap:48px;}
.footer-col{font-family:'Source Serif 4',Georgia,serif;}
.footer-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(244,238,227,0.55);margin:0 0 22px;font-weight:500;}
.footer-body{font-size:14px;line-height:1.6;color:rgba(244,238,227,0.86);}
.footer-body p{margin-bottom:8px;hyphens:none;}
.author-name{font-weight:600;color:var(--paper);font-size:16px;margin-bottom:14px;}
.footer-link{color:var(--paper);text-decoration:underline;text-decoration-thickness:0.5px;text-underline-offset:4px;}
.footer-link:hover{color:#8AA597;}
.footer-body strong{font-weight:600;color:var(--paper);}
.footer-colophon{max-width:1080px;margin:38px auto 0;padding-top:20px;border-top:0.5px solid rgba(244,238,227,0.18);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;color:rgba(244,238,227,0.55);}
.footer-colophon a{color:rgba(244,238,227,0.72);}

/* mobile */
@media(max-width:720px){
  .masthead{padding:18px 24px;}
  .masthead-grid{grid-template-columns:1fr;gap:10px;}
  .wordmark,.masthead-back{justify-self:center;}
  .masthead .dateline{display:none;}
  article{padding-top:44px;}
  .stats{grid-template-columns:1fr 1fr;gap:18px;}
  .stat-n{font-size:30px;}
  body{font-size:16.5px;}
  h1{font-size:33px;}
  .dek{font-size:18px;}
  .secnum{font-size:36px;margin-top:58px;}
  h2{font-size:22px;}
  .ledger{grid-template-columns:1fr;}
  .ledger-col + .ledger-col{margin-top:8px;padding-top:20px;border-top:1px solid var(--rule);}
  footer.footer{padding:40px 24px 48px;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
}