/* ==========================================================================
   Writing — a quiet reading layer for jayeshsuryavanshi.com
   "Research paper, light": warm paper, ink text, a reading serif, monospace
   furniture, deep ink-blue accent, and Tufte-style margin notes.
   Deliberately free of the main site's jQuery/vendor CSS so posts stay
   light and fast. System fonts only — no webfont round-trips.
   ========================================================================== */

:root {
  /* paper + ink */
  --paper:      #faf8f3;   /* warm off-white canvas   */
  --paper-tint: #f2eee4;   /* faint fill (callouts, code, thead) */
  --paper-deep: #ece7da;   /* slightly deeper tint */
  --ink:        #22201b;   /* warm near-black body text */
  --ink-soft:   #57534a;   /* muted secondary text */
  --ink-faint:  #8a867a;   /* metadata / captions */
  --faint:      #8a867a;   /* alias — posts reference var(--faint) inline */
  --rule:       #e3ddce;   /* hairline */
  --rule-soft:  #ede8db;   /* softer hairline */

  /* one restrained accent — deep ink-blue */
  --accent:     #204a87;
  --accent-2:   #16386b;   /* hover / darker */
  --accent-wash:rgba(32,74,135,.06);

  --good:       #2f7a4f;   /* muted forest — table "wins" */
  --warn:       #9c531f;   /* muted rust — cautions */

  /* type */
  --serif: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style",
           "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", "IBM Plex Mono",
          Menlo, Consolas, monospace;

  --measure: 680px;   /* reading column */
  --gutter:  290px;   /* sidenote width in the right margin */
  --gap:     20px;    /* space between text column and margin note */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(32,74,135,.16); color: var(--ink); }

a { color: var(--accent); text-decoration: none; transition: color .15s ease, border-color .15s ease; }
a:hover { color: var(--accent-2); }

/* Centered stage. The reading column is pinned LEFT inside it; the empty
   right band becomes the margin where sidenotes live on wide screens.
   Content box at full width = 1080 - 80 = 1000 = 680 measure + 20 gap + 290 note. */
.wrap { position: relative; width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 40px; }

/* reading progress bar */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 50; transition: width .1s linear;
}

/* ---- masthead ---------------------------------------------------------- */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 22px; padding: 34px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.brand {
  font-family: var(--serif); font-weight: 600;
  font-size: 18px; letter-spacing: -.01em; color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand .dot { color: var(--accent); }
.masthead nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; }
.masthead nav a { color: var(--ink-faint); }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a.here { color: var(--accent); }

/* ---- article header ---------------------------------------------------- */
article { max-width: var(--measure); }

.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin: 60px 0 20px;
}
h1.title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 5.6vw, 50px); line-height: 1.08;
  letter-spacing: -.015em; margin: 0 0 20px; color: var(--ink);
}
.dek {
  font-size: 21px; line-height: 1.5; color: var(--ink-soft);
  font-weight: 400; font-style: italic; margin: 0 0 30px; max-width: 42ch;
}
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .01em; color: var(--ink-faint);
  padding-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.byline .sep { opacity: .5; }
.byline strong { color: var(--ink-soft); font-weight: 500; }

/* ---- prose ------------------------------------------------------------- */
.prose { max-width: var(--measure); padding: 8px 0 20px; }
.prose > p:first-of-type { margin-top: 38px; }
.prose p { margin: 0 0 26px; }
.prose h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 28px; letter-spacing: -.01em; line-height: 1.22;
  margin: 58px 0 16px; color: var(--ink); scroll-margin-top: 24px;
}
.prose h2 .n {
  font-family: var(--mono); font-size: 14px; font-weight: 400;
  letter-spacing: .04em; color: var(--accent); margin-right: 12px;
  vertical-align: 2px;
}
.prose h3 {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: 20px; letter-spacing: 0; margin: 36px 0 10px; color: var(--ink);
}
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { color: var(--ink); }
.prose a { border-bottom: 1px solid rgba(32,74,135,.32); }
.prose a:hover { border-color: var(--accent-2); }

.prose ul, .prose ol { margin: 0 0 26px; padding-left: 22px; }
.prose li { margin: 0 0 10px; padding-left: 4px; }
.prose li::marker { color: var(--accent); }

.lead { font-size: 21px; line-height: 1.62; color: var(--ink); }
.lead::first-letter {
  float: left; font-weight: 600; font-size: 3.05em; line-height: .82;
  padding: 6px 10px 0 0; color: var(--accent);
}

/* pull quote */
.prose blockquote {
  margin: 34px 0; padding: 2px 0 2px 24px;
  border-left: 3px solid var(--accent);
  font-size: 22px; line-height: 1.5; color: var(--ink); font-style: italic;
}
.prose blockquote cite { display:block; margin-top:12px; font-family: var(--mono); font-size:12.5px; font-weight:400; font-style:normal; color:var(--ink-faint); }

/* ---- Tufte-style margin note ------------------------------------------- */
/* in-text reference marker */
.sn-ref {
  font-family: var(--mono); font-size: .62em; font-weight: 600;
  color: var(--accent); vertical-align: super; line-height: 0;
  padding: 0 1px; cursor: default;
}
/* the note itself — inline on narrow screens, in the margin on wide */
.sidenote {
  display: block; margin: 16px 0; padding: 3px 0 3px 16px;
  border-left: 2px solid var(--rule);
  font-family: var(--mono); font-size: 13px; line-height: 1.62;
  color: var(--ink-soft);
}
.sidenote .sn-num { color: var(--accent); font-weight: 600; margin-right: 7px; }
.sidenote a { border-bottom: 1px solid rgba(32,74,135,.3); }

/* method / note callout */
.callout {
  margin: 34px 0; padding: 20px 24px;
  background: var(--paper-tint); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: 4px;
}
.callout .label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.callout p { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); }
.callout p + p { margin-top: 12px; }
.callout strong { color: var(--ink); }

/* tables */
.table-scroll { overflow-x: auto; margin: 30px 0; border: 1px solid var(--rule); border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; min-width: 480px; }
.prose thead th {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: left; color: var(--ink-faint); font-weight: 600;
  padding: 12px 18px; background: var(--paper-tint);
  border-bottom: 1px solid var(--rule);
}
.prose tbody td { padding: 12px 18px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); vertical-align: top; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody td:first-child { color: var(--ink); font-weight: 600; }
/* category winner — the one accent marks who wins (class is on the <td>) */
.prose td.win { background: var(--accent-wash); }
.prose td.win, .prose td.win strong, .prose .win { color: var(--accent); font-weight: 700; }
.prose td.warn, .prose td.warn strong, .prose .warn { color: var(--warn); font-weight: 700; }

/* code */
.prose :not(pre) > code {
  font-family: var(--mono); font-size: .8em;
  background: var(--paper-deep); color: var(--accent-2);
  padding: 2px 6px; border-radius: 4px;
}
.prose pre {
  margin: 28px 0; padding: 20px 22px; overflow-x: auto;
  background: var(--paper-tint); border: 1px solid var(--rule);
  border-radius: 6px; font-family: var(--mono); font-size: 13.5px; line-height: 1.62;
  color: var(--ink);
}
.prose pre code { color: inherit; background: none; padding: 0; font-size: inherit; }
.prose pre .c { color: var(--ink-faint); }   /* comment */
.prose pre .k { color: var(--accent); }       /* keyword/accent */

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

/* takeaways box */
.takeaways { margin: 8px 0; padding: 24px 26px 6px; background: var(--paper-tint); border: 1px solid var(--rule); border-radius: 6px; }
.takeaways h2 { margin-top: 0; }
.takeaways h2 .n { display: none; }

/* footnote / sources */
.sources { margin-top: 22px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink-faint); }
.sources h3 { font-family: var(--mono); font-size: 11px; letter-spacing:.18em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; font-weight:600; }
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li { margin-bottom: 8px; }
.sources a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.sources a:hover { color: var(--accent); }

/* ---- article footer ---------------------------------------------------- */
.post-foot { max-width: var(--measure); margin: 22px 0 0; padding: 28px 0 72px; border-top: 1px solid var(--rule); }
.post-foot .back { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.post-foot .back:hover { color: var(--accent); }
.post-foot .made { margin-top: 16px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink-faint); }

/* =====================  blog index (listing)  ========================== */
.index-hero { max-width: var(--measure); padding: 68px 0 8px; }
.index-hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 7vw, 60px); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 18px; color: var(--ink);
}
.index-hero p { font-size: 20px; font-style: italic; color: var(--ink-soft); margin: 0; max-width: 46ch; }

.post-list { list-style: none; padding: 0; margin: 26px 0 56px; max-width: var(--measure); }
.post-list li { border-top: 1px solid var(--rule); }
.post-list li:last-child { border-bottom: 1px solid var(--rule); }
.post-list a.card {
  display: block; padding: 30px 0; color: var(--ink);
  transition: padding-left .2s ease;
}
.post-list a.card:hover { padding-left: 10px; color: var(--ink); }
.post-list .p-meta { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.post-list .p-title { font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 9px; color: var(--ink); }
.post-list .p-dek { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 62ch; }
.post-list a.card:hover .p-title { color: var(--accent); }

/* ---- Tufte margin layout: only when there's room for a real margin -----
   At >=1120px the wrap is at its 1080 max (1000 content), so the 290 note +
   20 gap sits flush inside the gutter beside the 680 column — no overflow. */
@media (min-width: 1120px) {
  .sidenote {
    float: right; clear: right;
    width: var(--gutter);
    margin: 5px calc(-1 * (var(--gutter) + var(--gap))) 20px 0;
    padding: 0; border-left: 0;
  }
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 17.5px; line-height: 1.7; }
  .wrap { padding: 0 22px; }
  .kicker { margin-top: 44px; }
  .dek { font-size: 19px; }
  .prose h2 { font-size: 25px; margin-top: 48px; }
  .masthead { padding-top: 26px; }
  .masthead nav { gap: 16px; }
  .callout, .takeaways { padding-left: 20px; padding-right: 20px; }
  .lead::first-letter { font-size: 2.7em; }
}