/* ==========================================================================
   aakarshdalmia.com - shared stylesheet
   One file, hand-written, no build step. Edit here to change every page.
   Type: Fraunces (headings), Karla (body). Palette: ink / paper / brass.
   ========================================================================== */

:root {
  --ink:        #1b1a17;
  --ink-soft:   #4d4a43;
  --ink-faint:  #7a766c;
  --paper:      #fbf9f4;
  --paper-alt:  #f3efe5;
  --brass:      #9c6f26;
  --brass-soft: #b98f4a;
  --rule:       #e2dbca;

  --measure: 34rem;          /* one-column reading width */
  --page:    72rem;          /* outer container */
  --step:    clamp(3.5rem, 9vw, 6.5rem);  /* vertical section rhythm */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding-inline: 1.5rem;
}

.measure { max-width: var(--measure); }

section { padding-block: var(--step); }

.section-alt {
  background: var(--paper-alt);
  border-block: 1px solid var(--rule);
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ---------- type ---------- */

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -0.012em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6.2vw, 3.65rem); }
h2 { font-size: clamp(1.65rem, 3.8vw, 2.35rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 0.5rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brass);
  margin: 0 0 1.25rem;
}

.small { font-size: 0.9375rem; color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--brass-soft);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--ink);
}
blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: "Karla", sans-serif;
  font-size: 0.9375rem;
  font-style: normal;
  color: var(--ink-faint);
}

a { color: var(--ink); text-decoration-color: var(--brass-soft); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

ul.plain { list-style: none; margin: 0 0 1.15rem; padding: 0; }
ul.plain li { padding-left: 1.15rem; position: relative; margin-bottom: 0.5rem; }
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brass-soft);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: "Karla", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { background: transparent; border-color: var(--brass); color: var(--brass); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- header / nav ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding-block: 1.35rem;
}
.brand {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand span { color: var(--ink-faint); font-weight: 400; }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--brass); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(3.5rem, 9vw, 6rem) var(--step); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.portrait {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.9);
  border: 1px solid var(--rule);
}
.portrait-note { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ink-faint); }

.cover {
  width: 100%;
  max-width: 22rem;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -28px rgba(27, 26, 23, 0.55);
}

/* ---------- cards / grids ---------- */

.grid-2, .grid-3 { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { border-top: 2px solid var(--ink); padding-top: 1rem; }
.card p { margin-bottom: 0; color: var(--ink-soft); font-size: 1rem; }

.numbered { counter-reset: n; }
.numbered > .item { counter-increment: n; border-top: 1px solid var(--rule); padding: 2rem 0; }
.numbered > .item:last-child { border-bottom: 1px solid var(--rule); }
.numbered > .item::before {
  content: counter(n, decimal-leading-zero);
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.875rem;
  color: var(--brass);
  margin-bottom: 0.6rem;
  letter-spacing: 0.06em;
}

.numbered.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
.numbered.two-col > .item:last-child { border-bottom: 0; }
.numbered.two-col > .item:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }

/* ---------- key-value list (book details, contact) ---------- */

.kv { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.6rem 1.5rem; }
.kv dt { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 0.28rem; }
.kv dd { margin: 0; }

/* ---------- callout ---------- */

.callout {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.section-alt .callout { background: #fff; }

/* ---------- table of contents (book page) ---------- */

.toc { margin: 0; padding: 0; list-style: none; }
.toc > li { border-top: 1px solid var(--rule); padding: 1.5rem 0; }
.toc > li:last-child { border-bottom: 1px solid var(--rule); }
.toc h3 { margin-bottom: 0.35rem; }
.toc ol { margin: 0.75rem 0 0; padding-left: 1.4rem; color: var(--ink-soft); font-size: 1rem; }
.toc ol li { margin-bottom: 0.3rem; }

/* ---------- footer ---------- */

.site-foot {
  background: var(--paper-alt);
  border-top: 1px solid var(--rule);
  padding-block: 3.25rem 2.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.foot-grid h4 {
  font-family: "Karla", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  font-weight: 700;
}
.foot-grid a { display: block; margin-bottom: 0.4rem; text-decoration: none; color: var(--ink-soft); }
.foot-grid a:hover { color: var(--brass); }

/* Regulatory block. AMFI requires the "AMFI-registered Mutual Fund Distributor"
   tagline and ARN in a clear, legible font of at least 12px. Do not shrink this. */
.disclosure {
  border-top: 1px solid var(--rule);
  padding-top: 1.75rem;
  font-size: 0.8125rem;   /* 13px - above the 12px floor */
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46rem;
}
.disclosure strong { color: var(--ink); font-weight: 700; }
.disclosure p { margin-bottom: 0.75rem; }

/* ---------- responsive: must hold at 375px ---------- */

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid .cover-col { order: -1; max-width: 15rem; }
  .numbered.two-col { grid-template-columns: 1fr; }
  .numbered.two-col > .item:nth-last-child(-n+2) { border-bottom: 0; }
  .numbered.two-col > .item:last-child { border-bottom: 1px solid var(--rule); }
  .hero-grid .portrait-col { order: -1; max-width: 17rem; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  :root { --step: 3.25rem; }
  .wrap { padding-inline: 1.25rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .site-head .wrap { padding-block: 1.1rem; }
  .brand { width: 100%; margin-bottom: 0.35rem; }
  .site-nav { gap: 1.1rem; }
  .site-nav a { font-size: 0.875rem; }
  .kv { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .kv dt { padding-top: 0.9rem; }
  .btn { width: 100%; text-align: center; }
  .btn-row { gap: 0.6rem; }
}

.field select{width:100%;font-family:'Karla',sans-serif;font-size:1.0625rem;padding:.6rem .75rem;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:2px;min-width:0;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select:focus{outline:2px solid var(--brass-soft);outline-offset:-1px;border-color:var(--brass-soft)}
.calc-note .asof{color:var(--ink-faint)}

/* ---------- tools: cards ---------- */
.tool-card{display:block;text-decoration:none;border-top:2px solid var(--ink);padding:1.1rem 0 0;color:var(--ink)}
.tool-card h2{font-size:1.375rem;margin-bottom:.6rem}
.tool-card p{color:var(--ink-soft);font-size:1rem;margin-bottom:.9rem}
.tool-card .tool-go{font-size:.875rem;font-weight:700;letter-spacing:.02em;color:var(--brass);border-bottom:1px solid transparent}
.tool-card:hover .tool-go{border-bottom-color:var(--brass)}

/* ---------- tools: calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.calc-inputs{margin:0}
.calc-h{font-family:'Karla',sans-serif;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin:2.25rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
.calc-inputs .calc-h:first-child{margin-top:0}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.9375rem;margin-bottom:.35rem}
.input-wrap{position:relative;display:flex;align-items:stretch}
.field input{width:100%;font-family:'Karla',sans-serif;font-size:1.0625rem;padding:.6rem .75rem;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:2px;min-width:0}
.field input:focus{outline:2px solid var(--brass-soft);outline-offset:-1px;border-color:var(--brass-soft)}
.input-wrap .suffix{order:2;display:flex;align-items:center;padding:0 .75rem;border:1px solid var(--rule);border-left:0;background:var(--paper-alt);font-size:.9375rem;color:var(--ink-faint);white-space:nowrap}
.field .hint{font-size:.8125rem;color:var(--ink-faint);margin:.35rem 0 0;line-height:1.5}
.calc-output{position:sticky;top:1.5rem}
.result-card{border:1px solid var(--rule);border-top:3px solid var(--brass);background:#fff;padding:clamp(1.5rem,4vw,2.25rem);margin-bottom:1.75rem}
.result-label{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin:0 0 .6rem}
.result-big{font-family:'Fraunces',Georgia,serif;font-size:clamp(2rem,5.5vw,2.875rem);line-height:1.05;margin:0;letter-spacing:-.02em}
.result-big.negative{color:#8c2f1f}
.result-sub{font-size:.9375rem;color:var(--ink-soft);margin:.75rem 0 0}
.kv-tight{grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem}
.kv-tight dt{text-transform:none;letter-spacing:0;font-size:.9375rem;color:var(--ink-soft);padding-top:0}
.kv-tight dd{text-align:right;font-weight:700;font-size:.9375rem}
.bars{margin-top:.75rem}
.bar-row{margin-bottom:.85rem}
.bar-top{display:flex;justify-content:space-between;font-size:.875rem;color:var(--ink-soft);margin-bottom:.3rem}
.bar-track{height:6px;background:var(--paper-alt);border:1px solid var(--rule)}
.bar-fill{height:100%;background:var(--brass-soft)}
.verdict{margin:1.75rem 0 0;padding:1rem 1.1rem;font-size:.9375rem;line-height:1.6;border-left:2px solid var(--brass-soft);background:var(--paper-alt)}
.verdict.good{border-left-color:#3f7d58}
.verdict.warn{border-left-color:var(--brass)}
.calc-note{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--rule);max-width:46rem;font-size:.875rem;line-height:1.65;color:var(--ink-soft)}
.calc-note p{margin-bottom:.75rem}
.calc-note strong{color:var(--ink)}
@media (max-width:56rem){.calc{grid-template-columns:minmax(0,1fr)}.calc-output{position:static}}
@media (max-width:40rem){.kv-tight{grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem}.kv-tight dt{padding-top:0}}

/* ---------- print: save as PDF ---------- */
.print-head{display:none}
@media print{
@page{margin:14mm 12mm}
html,body{background:#fff !important;color:#000;font-size:10pt}
.site-head,.btn-row,.no-print,hr.rule,.foot-grid,.tool-card,.verdict{display:none !important}
.section-alt{display:none !important}
.print-head{display:block;border-bottom:1px solid #999;padding-bottom:6pt;margin-bottom:10pt;font-size:8.5pt;line-height:1.45}
.print-head p{margin:0}
.print-head strong{font-size:10pt}
.wrap{max-width:none;padding-inline:0}
section{padding-block:0 8pt}
.hero{padding-block:0 8pt}
h1{font-size:17pt;margin-bottom:6pt}
h2{font-size:12pt}
.measure,.calc-note{max-width:none}
.lede{font-size:10.5pt;color:#000}
.eyebrow{font-size:7.5pt;color:#666;margin-bottom:4pt}
.calc{grid-template-columns:1fr 1fr;gap:14pt}
.calc-output{position:static}
.calc-h{margin:10pt 0 5pt;font-size:7.5pt}
.field{margin-bottom:4pt;break-inside:avoid}
.field label{font-size:8.5pt;color:#444;margin-bottom:0}
.field input,.field select{border:0;border-bottom:1px solid #ccc;padding:0;font-size:10pt;font-weight:700;background:none;appearance:none;-webkit-appearance:none}
.input-wrap .suffix{border:0;background:none;padding:0 0 0 3pt;font-size:9pt}
.field .hint{display:none}
.result-card{border:1pt solid #000;border-top:2.5pt solid #000;background:none;padding:8pt 10pt;margin-bottom:10pt;break-inside:avoid}
.result-big{font-size:20pt}
.result-label{font-size:7.5pt}
.result-sub{font-size:8.5pt}
.calc-output .kv-tight{gap:2pt 10pt}
.calc-output .kv-tight dt{font-size:9pt;text-transform:none;letter-spacing:0}
.calc-output .kv-tight dd{font-size:9pt}
.bar-track{border:1px solid #999}
.bar-fill{background:#999 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.calc-note{margin-top:10pt;padding-top:6pt;font-size:8pt;break-inside:avoid}
.site-foot{background:none !important;border-top:1px solid #999;padding-block:6pt 0;margin-top:10pt}
.disclosure{border:0;padding-top:0;max-width:none;font-size:7.5pt;line-height:1.45;color:#333}
.disclosure p{margin-bottom:3pt}
}