/* ============================================================
   steeptech.dev — resume
   Same brand as home: executive, refined, near-monochrome.
   ============================================================ */
:root {
  --bg: #FAFBFC;
  --ink: #15171B;
  --ink-soft: #474C55;
  --ink-faint: #8A9099;
  --hairline: #E6E8EC;
  --hairline-strong: #C6CACF;
  --accent: #3F5A76;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--bg); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 40px 24px 96px; }

/* ---------- Topbar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; }
.back { font-size: 0.86rem; color: var(--ink-faint); text-decoration: none; transition: color 0.15s ease; }
.back:hover { color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500; font-size: 0.82rem;
  padding: 9px 16px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--ink);
  cursor: pointer; transition: all 0.18s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Header ---------- */
.resume-header h1 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 2.6rem);
}
.contact { margin-top: 0.6rem; color: var(--ink-faint); font-size: 0.94rem; }
.contact a { color: var(--ink-faint); text-decoration: none; transition: color 0.15s ease; }
.contact a:hover { color: var(--accent); }
.contact .dot { margin: 0 8px; color: var(--hairline-strong); }

/* ---------- Sections ---------- */
.resume-section { margin-top: 2.6rem; }
.resume-section h2 {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1.1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--hairline);
}
.resume-section > p { color: var(--ink-soft); font-size: 0.96rem; }

/* ---------- Skills ---------- */
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.skills li {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  color: var(--ink-soft); background: rgba(21, 23, 27, 0.05);
  padding: 6px 12px; border-radius: 4px;
}

/* ---------- Roles ---------- */
.role { padding: 20px 0; border-top: 1px solid var(--hairline); }
.role:first-of-type { border-top: none; padding-top: 0; }
.role__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.role__head h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; }
.role__dates { font-size: 0.8rem; color: var(--ink-faint); white-space: nowrap; }
.role__org { color: var(--ink-soft); font-size: 0.88rem; margin-top: 2px; }
.role ul { margin-top: 0.8rem; padding-left: 1.1rem; display: grid; gap: 0.45rem; }
.role li { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Earlier / Education ---------- */
.earlier, .education { list-style: none; display: grid; gap: 0.5rem; }
.earlier li, .education li { color: var(--ink-soft); font-size: 0.92rem; }
.earlier strong, .education strong { color: var(--ink); }

/* ---------- Print ---------- */
@media print {
  .no-print { display: none !important; }
  @page { margin: 0.6in; }

  .wrap { max-width: 100%; padding: 0; }

  /* Tighten vertical rhythm so pagination isn't dominated by whitespace. */
  .resume-section { margin-top: 1.1rem; }
  .resume-section h2 { margin-bottom: 0.7rem; padding-bottom: 0.5rem; }
  .role { padding: 10px 0; }

  /* Keep a role's title/org together, and don't split a bullet mid-line —
     but let long roles flow across a page break instead of being pushed
     whole onto the next page (which is what caused the huge gaps/6 pages). */
  .role__head, .role__org { break-inside: avoid; }
  .resume-section h2 { break-after: avoid; }
  .role__head { break-after: avoid; }
  .role li { break-inside: avoid; }

  p, li { orphans: 3; widows: 3; }
}