/* CalcuttaCalc guides — "turf & saddle leather" theme, sharing the app's custom properties
   (see public/index.html :root). These pages are plain server-rendered HTML: every word
   below is in the markup before any JavaScript runs. */
:root{
  --saddle:#54351E; --saddle-2:#6B4527; --stitch:#C8A77F;
  --panel:#F2ECDC; --panel-2:#FBF7EB; --ink:#2E2415; --tan:#C0AA84; --mut-ink:#8A7B5C;
  --felt:#1D5538; --felt-2:#2E6B49; --felt-mut:#9DBFA8;
  --hay:#E3B05B; --hay-ink:#3D2E12; --leather-text:#5C3A21;
  --cream:#F2ECDC; --sold:#A8431F; --mut:#C8A77F;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--saddle);color:var(--cream);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;min-height:100vh}
.wrap{max-width:760px;margin:0 auto;padding:0 16px 56px}
a{color:var(--hay)}

/* ---- site header + breadcrumb ---- */
header.site{padding:24px 0 4px;text-align:center}
header.site img{display:block;height:clamp(58px,13vw,88px);width:auto;margin-inline:auto}
nav.crumbs{font-size:13px;color:var(--stitch);text-align:center;margin:6px 0 2px}
nav.crumbs a{color:var(--stitch);text-decoration:none;border-bottom:1px dotted var(--stitch)}
nav.crumbs a:hover{color:var(--hay);border-color:var(--hay)}
nav.crumbs span[aria-current]{color:var(--hay)}

/* ---- the stitched cream card that holds the article ---- */
article.sheet,.sheet{background:var(--panel);color:var(--ink);
  border:1px dashed var(--tan);border-radius:12px;padding:22px 20px;margin:16px 0}
.sheet h1{font-family:Rye,Georgia,serif;font-weight:400;font-size:clamp(25px,5.4vw,34px);
  color:var(--leather-text);line-height:1.25;margin:0 0 6px}
.sheet .standfirst{color:var(--mut-ink);font-size:16px;margin:0 0 14px}
.sheet h2{font-family:Oxanium,system-ui,sans-serif;font-size:21px;color:var(--leather-text);
  margin:26px 0 8px;line-height:1.3}
.sheet h3{font-family:Oxanium,system-ui,sans-serif;font-size:17px;color:var(--leather-text);margin:18px 0 6px}
.sheet p{margin:0 0 12px}
.sheet ul,.sheet ol{margin:0 0 14px 22px}
.sheet li{margin:0 0 7px}
.sheet a{color:#8A4A1F;font-weight:700}
.sheet strong{color:var(--ink)}
.sheet hr{border:0;border-top:1px dashed var(--tan);margin:22px 0}
.byline{font-size:13px;color:var(--mut-ink);margin-top:2px}

/* ---- tables of worked arithmetic ---- */
.sheet table{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 16px}
.sheet th{font-family:Oxanium,system-ui,sans-serif;text-align:left;color:var(--mut-ink);font-weight:500;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--tan)}
.sheet td{padding:7px 8px;border-bottom:1px dashed rgba(192,170,132,.6);vertical-align:top}
.sheet td.r,.sheet th.r{text-align:right}
.money{font-family:Oxanium,system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.pos{color:#2F6B1F}.neg{color:var(--sold)}
.sheet tfoot td{font-weight:700;border-bottom:0;border-top:1px solid var(--tan)}

/* ---- the felt inset: used for worked-example call-outs ---- */
.felt{background:var(--felt);border:1px solid var(--felt-2);color:var(--cream);
  border-radius:12px;padding:16px 18px;margin:16px 0}
.felt h3{font-family:Oxanium,system-ui,sans-serif;color:var(--cream);margin:0 0 6px}
.felt p{margin:0 0 10px}
.felt p:last-child{margin-bottom:0}
.felt strong{color:var(--hay)}

/* ---- legal notice, matching the app's .notice ---- */
.notice{border-left:4px solid var(--sold);background:var(--panel);padding:13px 15px;
  border-radius:0 10px 10px 0;font-size:14px;color:var(--mut-ink);margin:18px 0;line-height:1.55}
.notice strong{color:var(--ink)}
.notice a{color:#8A4A1F;font-weight:700}

/* ---- ad slot: same look as the app's .ad, but these pages are the only place ads run ---- */
.ad{background:var(--panel-2);border:1px dashed var(--tan);border-radius:10px;padding:12px;
  margin:22px 0;text-align:center;font-size:13px;color:var(--mut-ink)}
.ad strong{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:6px;color:rgba(138,123,92,.8);font-weight:400}
.ad ins.adsbygoogle{width:100%}
.ad ins.adsbygoogle[data-ad-status="unfilled"]{display:none}

/* ---- glossary definition lists ---- */
.sheet dl{margin:0 0 16px}
.sheet dt{font-family:Oxanium,system-ui,sans-serif;font-weight:700;font-size:16px;color:var(--leather-text);margin:14px 0 2px}
.sheet dd{margin:0 0 10px}

/* ---- guide index cards + related links ---- */
.guides{list-style:none;margin:0;padding:0}
.guides li{margin:0 0 10px}
.guides a.g{display:block;background:var(--panel);color:var(--ink);border:2px dashed var(--tan);
  border-radius:12px;padding:14px 16px;text-decoration:none}
.guides a.g:hover{border-color:var(--felt)}
.guides a.g .t{display:block;font-family:Oxanium,system-ui,sans-serif;font-weight:700;font-size:17px;
  color:var(--leather-text)}
.guides a.g .d{display:block;font-size:14px;color:var(--mut-ink);margin-top:3px}
.related{margin:22px 0 0}
.related h2{margin-top:0}
.cta{display:inline-block;font-family:Oxanium,system-ui,sans-serif;font-weight:700;font-size:16px;
  background:var(--hay);color:var(--hay-ink);border-radius:9px;padding:11px 18px;text-decoration:none}
.cta:hover{background:#EDBE6C}

/* ---- footer ---- */
footer.site{margin-top:34px;border-top:1px dashed var(--saddle-2);padding-top:16px}
footer.site .fine{font-size:12.5px;color:var(--stitch);line-height:1.55;margin-bottom:8px}
footer.site nav{font-size:13px;color:var(--stitch);margin-bottom:10px}
footer.site nav a{color:var(--stitch);margin-right:4px}
.hide{display:none}