/* Résumé page (resume.html) — the only light-theme page on the site, by
   request: editorial content on the left, a sticky section sidebar on the
   right, styled after a reference screenshot (a split content/sector-nav
   layout). Fixed, hand-picked colors below (not the vendor's light-scheme
   CSS variables, which follow the visitor's OS prefers-color-scheme and are
   a warm off-white, not this cool lavender-gray palette) so the page reads
   correctly regardless of visitor theme. See ./README.md */

:root {
  --wm-resume-header-bg: #e9e8ec;
  --wm-resume-content-bg: #dfe1e5;
  --wm-resume-sidebar-bg: #ffffff;
  --wm-resume-sidebar-active-bg: #e5e5e5;
  --wm-resume-navy: #1b2947;
  --wm-resume-muted: #8890a3;
  --wm-resume-border: rgba(27, 41, 71, 0.14);
}

body {
  background: var(--wm-resume-content-bg);
}

/* This page has no full-viewport hero to scroll past, so cancel header.css's
   fade-after-one-viewport rule (same technique as work.css) — and force the
   reused logo/menu-toggle to this page's navy regardless of the visitor's
   OS color scheme, since both read var(--t-bright), which otherwise flips
   white in a dark-mode OS and disappears against this light header. */
body.wm-past-hero .wm-logo-mark,
body.wm-past-hero .wm-menu-toggle {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mxd-header {
  --t-bright: var(--wm-resume-navy);
  background: var(--wm-resume-header-bg);
}
/* Bigger wordmark + a taller, more generously padded header strip, matching
   the reference. Desktop-only (900px+) for now — mobile is untouched until
   asked for separately. */
@media (min-width: 900px) {
  .mxd-header {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .wm-logo-mark {
    font-size: 3.2rem;
    gap: 1.4rem;
  }
}
@media (min-width: 1600px) {
  .mxd-header {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .wm-logo-mark {
    font-size: 3.6rem;
  }
}

.wm-resume {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .wm-resume {
    flex-direction: row;
    align-items: flex-start;
  }
}

.wm-resume__left {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 13rem 3rem 6rem 5rem;
}
@media (min-width: 768px) {
  .wm-resume__left {
    padding: 15rem 6rem 8rem 8rem;
  }
}
/* The header's own 900px+ enlargement (see .mxd-header above) needs more
   clearance here than the pre-900px tiers above provide. */
@media (min-width: 900px) {
  .wm-resume__left {
    padding-top: 19rem;
  }
}
@media (min-width: 1600px) {
  .wm-resume__left {
    padding: 22rem 8rem 10rem 11rem;
  }
}

/* Vertical rotated wayfinding label along the far-left edge. */
.wm-resume__vert-label {
  display: none;
}
@media (min-width: 768px) {
  .wm-resume__vert-label {
    display: block;
    position: absolute;
    left: 2rem;
    top: 15rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: normal 600 1.2rem/1 var(--_font-accent);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: var(--wm-resume-muted);
  }
}
@media (min-width: 900px) {
  .wm-resume__vert-label {
    top: 19rem;
  }
}

.wm-resume__section {
  padding-top: 5rem;
}
.wm-resume__section:first-of-type {
  padding-top: 0;
}
.wm-resume__section + .wm-resume__section {
  border-top: 1px solid var(--wm-resume-border);
}
/* No divider between Summary and Experience specifically, and an exact
   48px gap instead of the shared 5rem section padding-top. */
#education {
  border-top: none;
  padding-top: 4.8rem;
}
/* Same treatment between Experience and Core Skills. */
#skills {
  border-top: none;
  padding-top: 2.4rem;
}
/* No divider between Core Skills and Certifications. */
#tools {
  border-top: none;
}

.wm-resume__eyebrow {
  font: normal 700 1.2rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  color: var(--wm-resume-muted);
  margin-bottom: 1.6rem;
}
.wm-resume__section .wm-resume__eyebrow {
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--wm-resume-border);
}

.wm-resume__heading {
  font: normal 400 3.2rem/1.15 var(--_font-default);
  color: var(--wm-resume-navy);
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .wm-resume__heading {
    font-size: 4rem;
  }
}
/* Experience section's role title reads smaller than the other sections'
   large display headings. */
#education .wm-resume__heading,
#contact .wm-resume__heading {
  font-size: 2.4rem;
  letter-spacing: 0.1rem;
  color: #333333;
}
/* Experience section holds multiple role entries (heading + body pairs)
   stacked one after another — separate each new role from the previous
   one's body with a divider and extra breathing room. */
/* Between every role entry in Experience: no divider line, just an exact
   32px gap before the next role's heading. */
#education .wm-resume__body + .wm-resume__heading {
  margin-top: 3.2rem;
  padding-top: 0;
  border-top: none;
}

.wm-resume__body {
  display: flex;
  gap: 2rem;
  margin-top: 2.8rem;
  max-width: 60ch;
}
.wm-resume__tick {
  flex: none;
  width: 2.4rem;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--wm-resume-muted);
}
.wm-resume__meta {
  font: normal 600 1.3rem/1.4 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: var(--wm-resume-navy);
  margin-bottom: 1rem;
}
.wm-resume__body p:not(.wm-resume__meta) {
  font: normal 400 1.6rem/1.6 var(--_font-default);
  color: #555555;
}
/* Contact's mailto/tel links otherwise pick up the browser's default
   link blue instead of matching the rest of the placeholder copy. */
.wm-resume__body p:not(.wm-resume__meta) a {
  color: inherit;
}
.wm-resume__list {
  margin: 0;
  padding-left: 1.8rem;
  list-style: disc;
}
.wm-resume__list li {
  font: normal 400 1.6rem/1.6 var(--_font-default);
  color: #555555;
}
.wm-resume__list li + li {
  margin-top: 1.6rem;
}
/* Experience section's bullets are long sentences, so it gets the full
   column width instead of the shared 60ch cap, same reasoning as the
   Summary section's paragraph. */
#education .wm-resume__body {
  max-width: 100%;
}
/* Core Skills' category lists are long comma-separated runs, so they get
   the full column width too, same reasoning as Summary/Experience. */
#skills .wm-resume__body {
  max-width: 100%;
}
/* Summary section's copy reads darker than the other sections' muted body
   text — closer to the reference's near-black paragraph color. */
#experience .wm-resume__body p {
  color: #555555;
}
/* Summary's paragraph is much longer than the other sections' placeholder
   copy, so it gets the full column width instead of the shared 60ch cap —
   fewer, longer lines instead of a tall narrow block. */
#experience .wm-resume__body {
  max-width: 100%;
  margin-bottom: 0;
}

.wm-resume__next {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 5rem;
  padding-top: 5rem;
  border-top: 1px solid var(--wm-resume-border);
  font: normal 400 2.4rem/1 var(--_font-default);
  color: var(--wm-resume-navy);
  transition: gap 0.3s ease, opacity 0.3s ease;
}
.wm-resume__next:hover {
  gap: 1.6rem;
  opacity: 0.75;
}
.wm-resume__next span {
  font-size: 1.8rem;
}

/* --- Sidebar: full-height, sticky beside the scrolling left column at
   900px+; a plain stacked block above the content below that. --- */
.wm-resume__sidebar {
  flex: none;
  width: 100%;
  background: var(--wm-resume-sidebar-bg);
  order: -1;
  /* Stacked above the content at this width (not sticky yet, see 900px+
     below), so its first link needs its own clearance under the fixed
     header instead of inheriting the sticky tier's padding-top. */
  padding-top: 10rem;
}
@media (min-width: 900px) {
  .wm-resume__sidebar {
    order: 0;
    width: 30rem;
    /* Inset from the right edge instead of flush against it. */
    margin-right: 16rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Stacks above the fixed header (z-index: 10, see header.css) so
       this box's own white background overlays the header's band
       instead of sitting behind it — the header itself keeps its own
       position/size untouched, it's just no longer the topmost layer
       in the columns where the two overlap. */
    z-index: 11;
    /* Clearance above "Sections" — the fixed header only covers part
       of this (it overlays the sticky box, which itself already spans
       the full 100vh from the true viewport top), so the remainder
       reads as open white space above the eyebrow. */
    padding-top: 18rem;
    /* Links below stretch (flex:1 each) to fill this full height instead
       of stacking at their own natural height with empty space left over
       at the bottom. */
    display: flex;
    flex-direction: column;
  }
}
@media (min-width: 1600px) {
  .wm-resume__sidebar {
    width: 36rem;
    margin-right: 18rem;
    padding-top: 18rem;
  }
}

.wm-resume__sidebar-eyebrow {
  display: none;
}
@media (min-width: 900px) {
  .wm-resume__sidebar-eyebrow {
    display: block;
    flex: none;
    padding: 0 4rem 2rem;
    border-bottom: 1px solid var(--wm-resume-border);
    font: normal 700 1.2rem/1 var(--_font-default);
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: var(--wm-resume-muted);
  }
}

.wm-resume__sidebar-link {
  display: block;
  padding: 2.4rem 4rem;
  border-bottom: 1px solid var(--wm-resume-border);
  font: normal 400 1.4rem/1 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #333333;
  transition: background-color 0.3s ease;
}
@media (min-width: 900px) {
  .wm-resume__sidebar-link {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 4rem;
  }
}
.wm-resume__sidebar-link:hover {
  background: var(--wm-resume-sidebar-active-bg);
}
.wm-resume__sidebar-link.is-current {
  background: var(--wm-resume-sidebar-active-bg);
}
.wm-resume__sidebar-link.is-current::before {
  content: "—";
  margin-right: 1.6rem;
}
.wm-resume__sidebar-link-icon {
  flex: none;
  margin-right: 0.8rem;
  vertical-align: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .wm-resume__next {
    transition: none;
  }
}