:root{
  --bg:#fff; --fg:#14181d; --muted:#5f6b78; --accent:#2f5d8a;
  --rule:#e3e7eb; --marker:#a8b6c4; --chip:#f4f6f8; --chip-br:#dfe4e9;
  --maxw:840px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1419; --fg:#e6e9ec; --muted:#97a3b0; --accent:#7fb0dd;
    --rule:#232a32; --marker:#4a5763; --chip:#171d24; --chip-br:#252d36;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:56px 24px 96px}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
strong{font-weight:650; color:var(--fg)}

/* ---- header ---- */
header{display:flex; flex-wrap:wrap; gap:16px 24px; align-items:flex-end; justify-content:space-between}
h1{
  margin:0; font-size:clamp(2rem,6vw,2.65rem); font-weight:800;
  letter-spacing:-.022em; line-height:1.08;
}
.role{
  margin:.4rem 0 0; color:var(--accent);
  font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.contact{font-size:.87rem; color:var(--muted); text-align:right; line-height:1.7; font-style:normal}
.contact a{color:var(--muted)}
.contact a:hover{color:var(--accent)}
.rule{height:1px; background:var(--fg); opacity:.85; margin:18px 0 24px}

.summary{margin:0; font-size:1.02rem}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 4px}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border:1px solid var(--chip-br); border-radius:8px;
  background:var(--chip); color:var(--fg);
  font-size:.87rem; font-weight:600; text-decoration:none;
  transition:border-color .15s ease, color .15s ease;
}
.btn:hover{text-decoration:none; border-color:var(--accent); color:var(--accent)}
.btn svg{width:15px; height:15px; flex:none}

/* ---- sections ---- */
.sec{display:flex; align-items:center; gap:12px; margin:38px 0 18px}
.sec .dash{width:22px; height:2px; background:var(--accent); flex:none}
.sec h2{
  margin:0; font-size:.74rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
}
.sec .line{flex:1; height:1px; background:var(--rule)}

.org{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; justify-content:space-between; margin-bottom:2px}
.org h3{margin:0; font-size:1.14rem; font-weight:750; letter-spacing:-.01em}
.org .place{font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

.job{display:flex; flex-wrap:wrap; gap:2px 16px; align-items:baseline; justify-content:space-between; margin:18px 0 8px}
.job .title{color:var(--accent); font-weight:650; font-size:1rem}
.job .dates{font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}

ul{margin:0; padding:0; list-style:none}
ul li{position:relative; padding-left:19px; margin:7px 0}
ul li::before{
  content:""; position:absolute; left:3px; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--marker);
}

/* ---- internships ---- */
.stint{display:flex; flex-wrap:wrap; gap:2px 16px; align-items:baseline; justify-content:space-between; margin:14px 0}
.stint p{margin:0; flex:1 1 min(100%,460px)}
.stint .dates{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.stint .co{font-weight:700}
.stint .pos{color:var(--accent); font-weight:650}

/* ---- skills ---- */
.skills{display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:12px 26px; align-items:baseline}
.skills dt{font-size:.73rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.skills dd{margin:0}

.edu-extra{margin:10px 0 0}

footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--rule); font-size:.82rem; color:var(--muted)}
/* Underlined because this link sits inline in muted body text: accent-on-muted is only
   1.26:1 in light and 1.12:1 in dark, so colour alone cannot distinguish it (WCAG 1.4.1). */
footer a{text-decoration:underline; text-underline-offset:2px}

@media (max-width:620px){
  .wrap{padding:36px 20px 64px}
  header{align-items:flex-start}
  .contact{text-align:left}
  .rule{margin:16px 0 20px}
  .job,.org,.stint{gap:2px 10px}
  .skills{grid-template-columns:1fr; gap:2px}
  .skills dd{margin-bottom:12px}
  .skills dt{color:var(--muted)}
}

/* ---- print: tuned so Cmd+P lands on a single page, matching the source PDF ---- */
@media print{
  @page{margin:10mm 11mm}
  :root{
    --bg:#fff; --fg:#000; --muted:#444; --accent:#245078;
    --rule:#ccc; --marker:#888;
  }
  body{font-size:7.6pt; line-height:1.28; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .wrap{max-width:none; padding:0}
  .actions,footer{display:none}
  a{color:inherit; text-decoration:none}
  h1{font-size:18pt}
  .role{font-size:6.8pt; margin-top:.1rem}
  .contact{font-size:7.1pt; line-height:1.45}
  .rule{margin:5pt 0 6pt}
  .summary{font-size:7.9pt}
  .sec{margin:8pt 0 3.6pt; break-after:avoid}
  .sec h2{font-size:6.6pt}
  .org h3{font-size:10pt}
  .org .place,.job .dates,.stint .dates{font-size:6.4pt}
  .job{margin:5.6pt 0 2pt}
  .job .title{font-size:8.2pt}
  ul li{margin:1.7pt 0; padding-left:11px}
  ul li::before{width:2.6px; height:2.6px; left:2px}
  .stint{margin:3.4pt 0}
  .skills{gap:3pt 16pt; grid-template-columns:minmax(115px,auto) 1fr}
  .skills dt{font-size:6.6pt}
  .edu-extra{margin-top:3pt}
  .job,.org{break-after:avoid}
  li,.stint{break-inside:avoid}

  /* Browsers default "Background graphics" to OFF when printing, which drops any element
     drawn with background-color. The bullets and rules below are load-bearing, so redraw
     them as borders — borders always print. Do not convert these back to backgrounds. */
  .rule{height:0; background:none; border-top:1px solid var(--fg)}
  .sec .dash{height:0; background:none; border-top:2px solid var(--accent)}
  .sec .line{height:0; background:none; border-top:1px solid var(--rule)}
  /* width/height 0, not 2.8pt: `*` does not match pseudo-elements, so ::before is
     content-box here and a sized box would leave a hollow ring instead of a dot. */
  ul li::before{
    width:0; height:0; background:none;
    border:1.4pt solid var(--marker); border-radius:50%;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}