/* =========================================================================
   chetanpatil.co.in — print stylesheet (loaded with media="print", last).
   The screen themes are dark: their tokens put pale sage text and near-black
   hairlines on a white sheet, and the fluid clamp()/vw type scale resolves
   against the paper width, so headings come out enormous next to the body.
   This file re-points the tokens at an ink-friendly greyscale and pins the
   type scale in points. It loads after themes/<name>/theme.css so it wins on
   source order — no !important and no specificity games needed.
   ========================================================================= */

/* ---------- the sheet: 15mm on all four sides, on every page ----------
   @page contributes nothing on purpose. Chrome's print pipeline was not
   applying @page margins past the first sheet here, so every millimetre of
   margin is part of the document flow instead, where nothing can discard it:

     top/bottom  the empty thead/tfoot of .page-frame (base.php). Table header
                 and footer groups are repeated on every printed page, which is
                 the only CSS mechanism that reliably does so — a pseudo-element
                 with display:table-header-group does NOT (tested, page 1 only).
     left/right  padding on .wrap.

   Consequence: what you see is what you get regardless of the dialog's Margins
   setting, and "Margins: None" no longer strips anything. */
@page { margin: 0; }

.page-frame { display: table; width: 100%; border-collapse: collapse; table-layout: fixed; }
.page-frame > tbody { display: table-row-group; }
.page-frame > tbody > tr { display: table-row; }
.page-frame__body { display: table-cell; vertical-align: top; padding: 0; border: 0; }
.page-frame__edge { display: table-header-group; }
tfoot.page-frame__edge { display: table-footer-group; }
.page-frame__edge td { height: 15mm; padding: 0; border: 0; }

/* ---------- ink-friendly tokens ---------- */
:root {
  --bg:            #ffffff;
  --surface:       #ffffff;
  --surface-alt:   #ffffff;
  --border:        #c4c8c5;
  --border-strong: #9aa09c;
  --text:          #16191b;
  --text-soft:     #2b3033;
  --text-muted:    #43494c;
  --text-faint:    #6a7074;
  /* No orange on paper: it prints muddy in colour and near-white in mono. */
  --accent:        #16191b;
  --accent-hover:  #16191b;
  --on-accent:     #ffffff;
  --success:       #16191b;
  --code-bg:       #f3f4f3;
  --input-bg:      #ffffff;
  --chip-bg:       transparent;
  --chip-border:   #a4a9a5;
  --header-bg:       #ffffff;
  --header-bg-solid: #ffffff;
}

/* ---------- chrome that has no business on paper ---------- */
.site-header,
.site-footer,
.mobile-nav,
.lightbox,
.breadcrumbs,
.cta-band,
.reading-progress,
.skip-link,
.share,
.post__foot-share,
.toc,                 /* a contents list of dead anchors, a third of a page */
.post__head-media,    /* decorative full-bleed backdrop, ignores the margins */
.no-print { display: none !important; }

/* ---------- base ---------- */
/* Pin the rem base to the print body size (10pt) rather than the 16.5px
   screen one, so components not pinned in pt below scale with the page
   instead of printing at desktop size. */
html { font-size: 13px; }

body {
  background: #fff;
  color: var(--text);
  font-size: 10pt;
  line-height: 1.45;
  /* Antialiasing thins glyphs on a printer; let the driver hint them. */
  -webkit-font-smoothing: auto;
  /* The screen rule clips the page box in some engines. */
  overflow: visible;
}

.main { min-height: 0; }

.wrap,
.wrap--prose {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 15mm;   /* the left and right margin, in the flow */
}

.section,
.section--tight { padding-block: 0; }
.section--alt { background: none; border: 0; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; }

/* ---------- type scale, pinned in points ----------
   The screen sizes are clamp(rem, vw, rem): on paper the vw term resolves
   against the sheet, which is what blew the name up to ~30pt. */
.display { font-size: 22pt; line-height: 1.12; }
.h1      { font-size: 20pt; line-height: 1.12; }
.h2      { font-size: 14pt; line-height: 1.2; }
.h3      { font-size: 12.5pt; line-height: 1.25; }
.h4      { font-size: 10.5pt; line-height: 1.35; }

p { margin: 0 0 3mm; }
p:last-child { margin-bottom: 0; }
p, li { orphans: 3; widows: 3; }

.lead    { font-size: 10.5pt; line-height: 1.45; color: var(--text-soft); }
.small   { font-size: 9pt; line-height: 1.45; color: var(--text-muted); }
.eyebrow { font-size: 8pt; letter-spacing: .1em; color: var(--text-muted); }
.chip {
  font-size: 7.5pt; letter-spacing: .04em; line-height: 1.2;
  padding: 1mm 2mm; border-color: var(--chip-border); color: var(--text-muted);
}

/* ---------- pagination ---------- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 { break-after: avoid-page; page-break-after: avoid; }

.chips,
.resume-contact,
.resume__entry,
.resume__skills > div,
figure, table, blockquote, pre { break-inside: avoid; page-break-inside: avoid; }

/* ---------- page head ---------- */
.page-head {
  border: 0;
  /* No top padding at all: @page owns the vertical, so page one and page two
     start at the same place. Anything spent here lands on page one only. */
  padding-block: 0 5mm;
}
/* Optical, not structural. The 20pt name carries far more ascender leading
   above its cap line than the 10.5pt job title that happens to open page two,
   so equal boxes still read as an unequal top margin. This trims the
   difference. */
.page-head .h1 { margin-top: -2mm; }
.page-head__grid { display: block; margin-top: 2mm; }

/* ---------- resume ---------- */
.resume-contact {
  margin-top: 3mm;
  gap: 1.5mm 5mm;
  font-size: 9pt;
}
.resume-contact li,
.resume-contact a { color: var(--text-soft); }
.resume-contact svg { width: 3.4mm; height: 3.4mm; stroke-width: 1.8; }

.resume { padding-bottom: 3mm; }
.resume__grid { display: block; }
/* The screen gaps (64px between blocks) are a page and a half of air on A4. */
.resume__body  { gap: 6mm; }
.resume__block { gap: 2.5mm; }

.resume__entry {
  gap: 1mm;
  padding-bottom: 3mm;
  border-bottom: 1px solid var(--border);
}
.resume__entry--tight { padding-bottom: 2mm; }
.resume__entry:last-child { border-bottom: 0; padding-bottom: 0; }
.resume__entry-head { gap: 2mm 4mm; }
.resume__org { font-size: 10pt; }

.resume__entry ul {
  margin-top: 1.5mm;
  padding-left: 4.5mm;
  gap: 1mm;
  color: var(--text-soft);
}
.resume__entry ul.chips { margin-top: 2mm; gap: 1.5mm; padding-left: 0; }

.resume__skills { gap: 2.5mm; }
.resume__skills > div { grid-template-columns: 34mm 1fr; gap: 4mm; }
.resume__skills dd { color: var(--text-soft); }

/* ---------- posts (they print too) ---------- */
.post__head,
.post__head--media { padding-block: 3mm 4mm; }
.post__head .post__title { font-size: 20pt; line-height: 1.12; }
.post__head .post__standfirst,
.post__standfirst { margin-top: 2mm; font-size: 11pt; line-height: 1.4; max-width: none; }
.post__kicker { margin: 0 0 2.5mm; font-size: 8.5pt; }
.post__byline { margin-top: 4mm; padding-top: 3mm; gap: 3mm; }
.post__body,
.post__body--with-toc { display: block; padding-block: 4mm 0; }
.post__body .prose { max-width: none; margin-inline: 0; }

/* ---------- prose (post and project bodies) ---------- */
.prose { max-width: none; font-size: 10pt; line-height: 1.55; }
.prose > * + * { margin-top: 3mm; }
.prose h2 { font-size: 13pt; margin-top: 7mm; padding-top: 3mm; }
.prose h3 { font-size: 11.5pt; margin-top: 5mm; }
.prose p, .prose ul, .prose ol { color: var(--text-soft); }
.prose li::marker { color: var(--text-muted); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .anchor { display: none; }
.prose img, .prose figure { margin-block: 4mm; break-inside: avoid; }
.prose blockquote { margin: 4mm 0; font-size: 11pt; border-left-color: var(--border-strong); }
.prose hr { margin-block: 6mm; }
.prose code { background: none; border: 1px solid var(--border); }