/* Resume page. Builds on site.css for tokens, header, top rule, eyebrow, headline
   and footer, so it reads as the same site as the landing page. */

:root {
  --meta: #3f5b65;          /* secondary text on paper, 6:1 */
  --rule-paper: rgba(56, 110, 122, 0.32);
  --panel-paper: #ece2d0;
}

/* ---------- Header band ---------- */
.r-head {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  background: linear-gradient(180deg, #0a1420 0%, #0c1a24 100%);
}
/* The glow is its own layer so the page-load entrance can open it (js/resume.js). */
.r-head-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 140% at 85% 0%, rgba(87, 140, 153, 0.22), transparent 55%); }
.r-head-inner { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 33px 56px 56px; }
.r-head .headline-accent { transform-origin: left center; }

/* Page-load entrance: hidden before first paint by the head script, then handed to the entrance. */
.is-entering .r-head-bg, .is-bg-pending .r-head-bg { visibility: hidden; }
.is-entering-text :is(.r-head .top-rule, .r-head .eyebrow, .r-head .headline, .r-head .headline-accent, .r-contact, .r-print, .r-stat, .r-body),
.is-text-pending :is(.r-head .top-rule, .r-head .eyebrow, .r-head .headline, .r-head .headline-accent, .r-contact, .r-print, .r-stat, .r-body) { opacity: 0; }
.r-intro .intro-block { padding-left: 16px; }
.headline-accent { width: 47px; height: 4px; margin-top: 0; background: var(--amber); }
:root { --cut: 13px; }

.r-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; align-items: end; }

.r-contact { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 22px 0 0; padding: 0; list-style: none; font: 600 16px/22px var(--body); color: var(--muted); }
.r-contact li + li::before { content: "·"; margin: 0 10px; color: var(--card-stroke); }
.r-contact a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 5px; }

.r-print {
  display: inline-block; margin-top: 26px; padding: 11px 20px;
  text-decoration: none;
  font: 600 16px/22px var(--body); color: var(--ink);
  background: var(--amber);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: background-color 160ms ease;
}
.r-print:hover { background: #f5b85e; }
.r-print:focus-visible { outline: 2px solid var(--cream); outline-offset: -5px; }

.r-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.r-stat {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  min-height: 150px; padding: 30px 18px 18px;
  background: var(--card-stroke);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.r-stat::before {
  content: ""; position: absolute; inset: 1px; z-index: 0; background: var(--card);
  clip-path: polygon(12.6px 0, calc(100% - 12.6px) 0, 100% 12.6px, 100% calc(100% - 12.6px), calc(100% - 12.6px) 100%, 12.6px 100%, 0 calc(100% - 12.6px), 0 12.6px);
}
.r-stat::after { content: ""; position: absolute; left: 18px; top: 14px; width: 36px; height: 3px; background: var(--amber); }
.r-stat > * { position: relative; z-index: 1; }
.r-stat-num { font: 500 30px/36px var(--display); color: var(--cream); }
.r-stat-label { font: 400 15px/20px var(--body); color: var(--muted); }

/* ---------- Body ---------- */
.r-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px;
  max-width: 1440px; margin: 0 auto; padding: 56px 56px 72px;
}
.r-main { max-width: 820px; }

.r-section + .r-section { margin-top: 64px; }
.r-h2 { margin: 0 0 22px; font: 500 32px/40px var(--display); }
.r-h2::before { content: ""; display: block; width: 50px; height: 4px; margin-bottom: 12px; background: var(--amber); }

.r-body p { margin: 0 0 14px; font: 400 18px/27px var(--body); }
.r-body .r-lede { font-size: 20px; line-height: 30px; }

.r-company { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--rule-paper); }
.r-company h3 { margin: 0; font: 500 24px/30px var(--display); }
.r-body .r-meta { margin: 0; font: 600 15px/21px var(--body); color: var(--meta); }

/* Roles: a timeline on the left edge, amber tick per role. */
.r-roles { margin: 0; padding: 0; list-style: none; }
.r-role { position: relative; padding: 24px 0 4px 28px; border-left: 1px solid var(--rule-paper); }
.r-role::before { content: ""; position: absolute; left: -5px; top: 31px; width: 9px; height: 9px; background: var(--amber); transform: rotate(45deg); }
.r-role-title { margin: 0 0 4px; font: 500 22px/29px var(--display); }
.r-role .r-meta { margin-bottom: 12px; }

.r-list { margin: 0 0 8px; padding: 0; list-style: none; }
.r-list li { position: relative; padding-left: 20px; font: 400 17px/26px var(--body); }
.r-list li + li { margin-top: 10px; }
.r-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 2px; background: var(--card-stroke); }

.r-sub { margin: 28px 0 8px; font: 500 20px/26px var(--display); }

/* ---------- Sidebar ---------- */
.r-side { display: flex; flex-direction: column; gap: 20px; }
.r-panel {
  position: relative; padding: 26px 24px 24px;
  background: var(--panel-paper);
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.r-panel--dark { padding-top: 34px; background: var(--card); color: var(--cream); }
.r-panel-h { margin: 0 0 14px; font: 600 13px/19px var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--meta); }
.r-panel--dark .r-panel-h { color: var(--eyebrow); }
.r-panel .amber-edge { position: absolute; left: 22px; top: 14px; width: 36px; height: 3px; background: var(--amber); }

.r-quals { margin: 0; }
.r-quals dt { font: 500 18px/24px var(--display); color: var(--cream); }
.r-quals dd { margin: 4px 0 0; font: 400 15px/22px var(--body); color: var(--muted); }
.r-quals dd + dt { margin-top: 18px; }

.r-edu { margin: 0; padding: 0; list-style: none; }
.r-edu li { display: flex; flex-direction: column; gap: 2px; }
.r-edu li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-paper); }
.r-edu strong { font: 500 17px/23px var(--display); }
.r-edu span { font: 400 15px/21px var(--body); color: var(--meta); }

.r-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.r-tags li { padding: 5px 10px; font: 600 14px/19px var(--body); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-paper); }
.r-body .r-note { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--meta); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .r-intro { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .r-stats { max-width: 720px; }
  .r-body { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .r-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .r-panel--dark { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .r-head-inner { padding: 22px 20px 40px; }
  .r-intro .intro-block { padding-left: 0; }
  .r-intro { margin-top: 32px; }
  .r-stats { grid-template-columns: minmax(0, 1fr); }
  .r-stat { min-height: 0; flex-direction: row; align-items: baseline; gap: 14px; }
  .r-stat-num { flex: 0 0 96px; font-size: 26px; }
  .r-body { padding: 40px 20px 56px; }
  .r-side { display: flex; }
  .r-h2 { font-size: 28px; line-height: 34px; }
  .r-role { padding-left: 20px; }
  .r-body .r-lede { font-size: 18px; line-height: 27px; }
}