/* =========================================================================
   resume.css: the résumé page. Screen styles inherit the site tokens from
   main.css; the print block below produces a clean A4 document with no
   chrome, so "save as PDF" gives a proper résumé.
   ========================================================================= */

.resume-body { padding-top: 64px; }

.resume-page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.resume-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.resume-toolbar .back-link { margin-bottom: 0; }
#print-btn { border: 0; font-family: inherit; }

.resume {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 48px;
}

/* ---------- Header ---------- */
.r-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.r-head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.r-tagline { margin: 0; color: var(--text-soft); font-size: 1.02rem; }
.r-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.7;
}
.r-contact a { color: var(--text-soft); text-decoration: none; }
.r-contact a:hover { color: var(--text); }

/* ---------- Sections ---------- */
.r-section { margin-top: 26px; }
.r-section h2 {
  margin: 0 0 12px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-faint);
  font-weight: 650;
}
.r-profile { margin-top: 22px; }
.r-profile p { margin: 0; color: var(--text-soft); font-size: .97rem; max-width: 72ch; }
.r-section-note { margin: -4px 0 10px; font-size: .88rem; color: var(--text-faint); }
.r-section-note a { color: var(--text-soft); }

/* ---------- Two column body ---------- */
.r-grid {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 40px;
  margin-top: 8px;
}

/* ---------- Roles ---------- */
.r-role { margin-bottom: 22px; break-inside: avoid; }
.r-role:last-child { margin-bottom: 0; }
.r-role-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.r-role-head h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }
.r-meta { font-size: 12.5px; color: var(--text-faint); }
.r-role-note { margin: 3px 0 8px; font-size: .88rem; color: var(--text-faint); }
.r-role ul { margin: 0; padding-left: 18px; }
.r-role li { margin-bottom: 5px; font-size: .93rem; color: var(--text-soft); }

/* ---------- Builds ---------- */
.r-builds { margin: 0; padding-left: 18px; }
.r-builds li { margin-bottom: 7px; font-size: .93rem; color: var(--text-soft); }
.r-builds strong { color: var(--text); font-weight: 600; }

/* ---------- Side column ---------- */
.r-list { list-style: none; margin: 0; padding: 0; }
.r-list li {
  font-size: .89rem;
  color: var(--text-soft);
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.r-list li:last-child { border-bottom: 0; }
.r-principles li { border-bottom: 0; padding: 4px 0; }
.r-edu { margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.r-edu strong { font-size: .92rem; font-weight: 600; }
.r-interests { margin: 0; font-size: .89rem; color: var(--text-soft); }

/* ---------- Placeholders ---------- */
.ph {
  border-bottom: 1px dashed color-mix(in srgb, var(--text-faint) 70%, transparent);
  color: var(--text-faint);
  font-style: italic;
}

.resume-note {
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}
.resume-note code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .9em;
}

@media (max-width: 720px) {
  .resume { padding: 28px 22px; }
  .r-grid { grid-template-columns: 1fr; gap: 8px; }
  .r-contact { text-align: left; }
}

/* =========================================================================
   PRINT: produces a clean A4 résumé with no site chrome.
   ========================================================================= */
@media print {
  @page { size: A4; margin: 14mm 14mm; }

  .no-print,
  .site-header,
  .site-footer,
  .resume-toolbar,
  .resume-note { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
  }
  .resume-body { padding-top: 0; }
  .resume-page { max-width: none; padding: 0; margin: 0; }

  .resume {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .r-head { border-bottom: 1px solid #ccc; padding-bottom: 12px; }
  .r-head h1 { font-size: 20pt; }
  .r-tagline, .r-profile p, .r-role li, .r-builds li,
  .r-list li, .r-interests { color: #222 !important; }
  .r-meta, .r-role-note, .r-section-note { color: #666 !important; }
  .r-section h2 { color: #444 !important; }
  .r-contact, .r-contact a { color: #444 !important; }

  .r-grid { gap: 28px; }
  .r-section { margin-top: 18px; }
  .r-role { page-break-inside: avoid; }

  /* Placeholders stay visible in print so nothing ships unnoticed. */
  .ph { color: #999 !important; }

  a { text-decoration: none; }
}

/* ---------- Brain palette override ----------
   main.css still carries the site's original palette; the résumé page pins
   the Brain light tokens instead, matching the rest of the site. Declared
   after main.css in the cascade, so this also wins over its dark media
   block: the résumé is always light, which is what print expects. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e5e7eb;
  --text: #00314f;
  --text-soft: #6b7280;
  --text-faint: #9ca3af;
  --accent: #2d9cdb;
  --accent-soft: #2384bf;
  --shadow: 0 1px 2px rgba(0, 49, 79, .04), 0 8px 24px rgba(0, 49, 79, .06);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, monospace;
  color-scheme: light;
}
.btn-primary { color: #ffffff; }

/* ---------- Footer (index.html's old footer styles retired with it) ---------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  font-size: .85rem;
  color: var(--text-faint);
}
.footer-meta a { color: var(--text-soft); }