/* Resume design. This file decides what the PDF looks like, so every rule here is print-critical.
   Hard rules (each one fixed a real ATS or print problem, see PENDING.md):
   - fonts are static TrueType files (variable fonts become Type 3 in Chrome PDFs)
   - every font was checked with pdftotext in all modes (narrow-space fonts get word-joined by -raw)
   - no `position:` on anything (positioned content is written later in the PDF, scrambling reading order)
   - no CSS gradients (Chrome rasterises them); decorations are SVG, borders or inline shapes
   - single column only (side-by-side blocks get read across by line-based ATS parsers) */

@font-face{font-family:"Fraunces Display";src:url(../fonts/fraunces-display.ttf) format("truetype");font-weight:560}
@font-face{font-family:"Fraunces Heading";src:url(../fonts/fraunces-heading.ttf) format("truetype");font-weight:600}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-400.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-600.ttf) format("truetype");font-weight:600;font-style:normal}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-700.ttf) format("truetype");font-weight:700;font-style:normal}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-400i.ttf) format("truetype");font-weight:400;font-style:italic}

/* ---- Palette: colour has a job. Rose = structure, ink = what to read first, grey = supporting detail ---- */
:root{
  --ink:#2B2327;
  --text:#4C4247;
  --muted:#85777D;
  --rose:#A24A62;
  --rose-deep:#8C3A52;
  --rose-dot:#CC8C9D;
  --rose-line:#E6C6CF;
  --paper:#FFFFFF;
  --band:#FBEEF1;
  --panel:#FCF3F5;
  --panel-line:#EFD9DF;
  --circles:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 33'><circle cx='65' cy='1' r='31' fill='%23F6DCE3' fill-opacity='.9'/><circle cx='27.5' cy='13.5' r='5.5' fill='%23F6DCE3' fill-opacity='.75'/></svg>");
}
html[data-paper="ivory"]{
  --paper:#FCF8F2; --band:#F6EAE3; --panel:#F7EEE6; --panel-line:#EBDCD3;
  --circles:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 33'><circle cx='65' cy='1' r='31' fill='%23F1D9D7' fill-opacity='.9'/><circle cx='27.5' cy='13.5' r='5.5' fill='%23F1D9D7' fill-opacity='.75'/></svg>");
}
html[data-paper="sage"]{
  --paper:#F6F8F3; --band:#EAF0E7; --panel:#EDF2EA; --panel-line:#DDE5D9; --rose-line:#E3C9CF;
  --circles:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 33'><circle cx='65' cy='1' r='31' fill='%23F3DDE2' fill-opacity='.9'/><circle cx='27.5' cy='13.5' r='5.5' fill='%23F3DDE2' fill-opacity='.75'/></svg>");
}

/* Page box. The background paints the margins too, so tinted paper reaches every edge.
   The empty margin boxes stop Chrome printing its own date/title/URL header and footer even when
   "Headers and footers" is ticked in the print dialog (that text would otherwise be read by an ATS). */
@page{
  size:A4;margin:14mm 0 12mm;background:var(--paper);
  @top-left-corner{content:""} @top-left{content:""} @top-center{content:""} @top-right{content:""} @top-right-corner{content:""}
  @bottom-left-corner{content:""} @bottom-left{content:""} @bottom-center{content:""} @bottom-right{content:""} @bottom-right-corner{content:""}
  @left-top{content:""} @left-middle{content:""} @left-bottom{content:""}
  @right-top{content:""} @right-middle{content:""} @right-bottom{content:""}
}
@page :first{margin-top:0}

.resume,.resume *{box-sizing:border-box}
.resume{
  padding:0 17mm;background:var(--paper);color:var(--text);
  font:400 9.8pt/1.47 "Figtree",sans-serif;
  font-variant-ligatures:none;            /* ATS: no fi/fl ligature glyphs in the text layer */
  font-variant-numeric:lining-nums;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
/* :where() keeps these resets at element-level strength, so class rules like .headline{margin-top} win */
:where(.resume) a{color:inherit;text-decoration:none}
:where(.resume) :is(h1,h2,h3,p,ul){margin:0}

/* ---- Masthead ---- */
.masthead{
  margin:0 -17mm 4pt;padding:12mm 17mm 7.5mm;
  background:var(--circles) right top/80mm 33mm no-repeat,var(--band);
}
.name{font:560 32pt/1.05 "Fraunces Display",serif;color:var(--rose-deep);letter-spacing:0}
.headline{margin-top:6pt;font-size:10.6pt;font-weight:600;color:var(--ink)}
.headline .sep,.contact .sep{color:var(--rose-dot);font-weight:400;padding:0 3pt}
.contact{margin-top:2pt;font-size:9.2pt;color:var(--muted)}
.headline+.contact{margin-top:5pt}

/* ---- Section headings ---- */
.resume h2{
  display:flex;align-items:center;gap:8pt;
  margin:17pt 0 8pt;
  font:600 13pt/1.2 "Fraunces Heading",serif;
  color:var(--rose);break-after:avoid;
}
.resume h2::after{content:"";flex:1;height:.8pt;background:var(--rose-line);margin-top:2pt}

/* ---- Summary ---- */
.lede{font-size:10pt;line-height:1.56;text-wrap:pretty}
.lede strong{font-weight:600;color:var(--ink)}

/* ---- Skills: one soft panel, a row per group (label left, items right) ---- */
.skills{background:var(--panel);border-radius:4pt;padding:1pt 13pt}
.skill-row{display:grid;grid-template-columns:132pt 1fr;column-gap:10pt;padding:7.5pt 0}
.skill-row+.skill-row{border-top:.7pt solid var(--panel-line)}
.skill-row h3{font-size:9.8pt;line-height:1.5;font-weight:600;color:var(--ink)}
.skill-row p{font-size:9.8pt;line-height:1.5;color:var(--text)}
.skill-row .sep{color:var(--rose-dot);padding:0 5pt}

/* ---- Item lists (skills, tools, headline, contact): line breaks are placed between items by
   layout.js so a separator never dangles at a line end ---- */
.items .it{white-space:nowrap}
.items .it.long{white-space:normal}
.items .sep.brk{display:none}

/* ---- Experience: timeline down the left, one dot per role ---- */
.job{break-inside:avoid}
.job+.job{margin-top:13pt}
.job .role h3::before{
  content:"";display:inline-block;box-sizing:border-box;width:7.2pt;height:7.2pt;border-radius:50%;
  border:1.5pt solid var(--rose-dot);background:var(--paper);margin-right:8.8pt;vertical-align:.5pt;
}
.job.current .role h3::before{background:var(--rose);border-color:var(--rose)}
.job .body{margin:2pt 0 0 3.15pt;padding:0 0 1pt 11.95pt;border-left:.9pt solid var(--rose-line)}
.job .where{margin-top:0}
.role{display:flex;justify-content:space-between;align-items:baseline;gap:10pt}
.role h3{font-size:11.2pt;line-height:1.3;font-weight:700;color:var(--ink)}
.role .org{font-weight:600;color:var(--rose)}
.role .org .sep{color:var(--rose-dot);font-weight:400;padding:0 3pt}
.dates{flex:none;font-size:9pt;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.where{font-size:9pt;color:var(--muted);margin-top:.5pt}
.where .ctx{font-style:italic}
.points{list-style:none;padding:0;margin-top:3pt}
.points li{padding-left:10.5pt;text-indent:-10.5pt;margin-top:3.7pt;text-wrap:pretty}
.points li::before{content:"\2022 ";white-space:pre;display:inline-block;width:10.5pt;text-indent:0;color:var(--rose-dot);font-weight:700}
.points strong{font-weight:600;color:var(--ink)}
.section-bullets .points{margin-top:0}
.section-bullets .points li:first-child{margin-top:0}

/* ---- Education / inline lists ---- */
.edu-item{break-inside:avoid}
.edu-item+.edu-item{margin-top:8pt}
.edu .role h3{font-size:10.4pt}
.tools{font-size:9.8pt}
.tools .sep{color:var(--rose-dot);padding:0 3.5pt}

/* ---- Empty optional fields never reach the PDF ---- */
@media print{
  .resume .is-empty,
  .resume .org:has(> .is-empty),
  .resume .ctx:has(> .is-empty),
  .resume .where:has(> .loc.is-empty) .dot,
  .resume .where:not(:has(.f:not(.is-empty))),
  .resume .items .sep:has(+ wbr + .it.is-empty),
  .resume .items .sep:has(+ br + wbr + .it.is-empty),
  .resume .items .it.is-empty:first-child + .sep{display:none}
}