/* Self-hosted so print embeds real TrueType fonts (Google Fonts CSS produced
   Type 3 fonts in the PDF, which some ATS parsers handle badly). */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
}
/* Without this, bold film titles in bullets get a synthesized Type 3 font. */
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-sans-3-700.woff2") format("woff2");
}

/* Tokyo Night palette (folke/tokyonight.nvim): Day on light screens, Moon on
   dark ones. Day's own fg is blue, so ink tones come from the Moon/Night side
   of the family; Day's mid greys fail WCAG AA for body text. */
:root {
  --text: #222436; /* moon bg */
  --body: #444a73; /* moon terminal_black */
  --muted: #565f89; /* night comment */
  --accent: #3760bf; /* day fg */
  --accent-2: #7847bd; /* day purple */
  --rule: #c4c8da; /* day bg_highlight */
  --bg: #e1e2e7; /* day bg */
  --card: #d0d5e3; /* day bg_dark */
  --selection: #b7c1e3; /* day bg_visual */
  --on-accent: #e1e2e7;
  --item-body: var(--body);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4, p, ul, figure, blockquote {
  margin: 0;
}

::selection {
  background: var(--selection);
  color: var(--text);
}

/* Source Sans 3 is narrow, so a pixel width gives ~95 chars per line; cap the
   measure in ch to stay near the readable 65-80. */
.wrapper {
  max-width: calc(72ch + 48px);
  margin: 0 auto;
  padding: 3rem 24px 4rem;
}

/* Header */

.page-header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar text"
    "actions actions";
  column-gap: 1.5rem;
  row-gap: 1.25rem;
  align-items: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 3px solid var(--accent);
}
.avatar {
  grid-area: avatar;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.header-text {
  grid-area: text;
}
.header-name {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.header-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 0.2rem;
}
.header-contact {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.header-contact a {
  color: var(--muted);
}
.sep {
  color: var(--rule);
}

.header-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.icon-links {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0 auto 0 0;
  list-style: none;
}
.icon-link {
  display: block;
  line-height: 0;
  color: var(--muted);
  transition: color 0.15s ease;
}
.icon-link:hover {
  color: var(--accent);
}
.icon {
  width: 28px;
  height: 28px;
}
/* Overrides the fill baked into the SVG files. */
.icon path {
  fill: currentColor;
}

.button {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.button:hover {
  background: transparent;
  color: var(--accent);
  text-decoration: none;
}
.button-ghost {
  background: transparent;
  color: var(--accent);
}
.button-ghost:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* Sections */

.summary {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.content-section {
  margin-bottom: 2.25rem;
}
.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

ul {
  padding-left: 1.15rem;
}
li {
  margin-bottom: 0.6rem;
}
li::marker {
  color: var(--accent);
}
/* Bullets lead with a bold sentence. Dark lead over lighter detail lets the
   eye skim the leads only, instead of one uniform block of text. */
.role-body li,
.section-impact li {
  color: var(--item-body);
}
.role-body li strong,
.section-impact li strong {
  font-weight: 600;
  color: var(--text);
}

.section-skills .item-list {
  list-style: none;
  padding-left: 0;
}
/* Label column; the text after <strong> becomes its own grid cell. */
.section-skills li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  column-gap: 1rem;
  color: var(--body);
}
.section-skills li strong {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.company {
  margin-bottom: 2.75rem;
}
.company-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent-2);
}
.role {
  margin-top: 0.75rem;
}
.role + .role {
  margin-top: 1.75rem;
}
/* Role titles were smaller than the bullets under them and read as just
   another bullet; they need to be the strongest thing inside a company. */
.role-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
/* Tighter lines inside a bullet, more air between bullets: each bullet reads
   as one chunk instead of the list reading as one block. */
.role-body li {
  line-height: 1.5;
  margin-bottom: 0.9rem;
}
.role-body li:last-child {
  margin-bottom: 0;
}
@media screen {
  .role-body {
    padding-left: 1rem;
    border-left: 2px solid var(--rule);
  }
}
/* The " | " separator keeps title and dates apart in extracted text while
   flexbox pushes the dates to the right visually. */
.role-line .sep {
  font-size: 0;
}
.role-dates {
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.role-note {
  color: var(--muted);
}

/* Recommendations (screen only) */

.quotes {
  display: grid;
  gap: 1rem;
}
.quote {
  background: var(--card);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
}
.quote blockquote {
  font-style: italic;
}
.quote figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.35;
}
.quote figcaption strong {
  color: var(--text);
}

/* Theme toggle: one circle that matches the social icons and cycles
   system -> light -> dark. Hidden until JS runs; it does nothing without it. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--muted);
  color: var(--bg);
  cursor: pointer;
  transition: background 0.15s ease;
}
.theme-toggle[hidden] {
  display: none;
}
.theme-toggle:hover {
  background: var(--accent-2);
}
.theme-toggle svg {
  display: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle[data-choice="system"] .i-system,
.theme-toggle[data-choice="light"] .i-light,
.theme-toggle[data-choice="dark"] .i-dark {
  display: block;
}

/* Wide screens: section titles move to a left column so the page uses the
   width while the text column keeps its ~72ch measure. Screen only; print
   stays single-column for ATS parsers. */
@media screen and (min-width: 1100px) {
  .wrapper {
    max-width: calc(72ch + 13rem + 48px);
  }
  .summary,
  .content-section {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: 2rem;
  }
  .summary > * {
    grid-column: 2;
  }
  .section-title {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    /* Line up with the first line of the section body. */
    padding-top: 0.3rem;
    text-align: right;
  }
  .section-body {
    padding-top: 0;
  }
  .content-section {
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 600px) {
  .wrapper {
    padding-top: 1.5rem;
  }
  .page-header {
    grid-template-columns: 1fr;
    grid-template-areas: "avatar" "text" "actions";
    text-align: center;
    justify-items: center;
  }
  .header-actions {
    justify-content: center;
  }
  .icon-links {
    margin: 0;
    width: 100%;
    justify-content: center;
  }
  .header-name {
    font-size: 2.2rem;
  }
  .section-skills li {
    display: block;
  }
  /* Long titles wrap and push the dates to a lone right-aligned line, which
     reads as detached; stack them under the title instead. */
  .role-line {
    flex-direction: column;
    row-gap: 0.15rem;
  }
  .role-dates {
    font-size: 0.95rem;
  }
}

/* Dark theme: explicit choice (data-theme="dark"), or the system preference
   unless light was chosen. Plain CSS cannot share one block between a media
   query and an attribute selector, hence the copy; keep both in sync. Screen
   only, so printing from a dark browser still gives the light PDF. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --text: #c8d3f5; /* moon fg */
    --body: #a9b1d6; /* night fg_dark; moon's #828bb8 is too dim for paragraphs */
    --muted: #828bb8; /* moon fg_dark */
    --accent: #82aaff; /* moon blue */
    --accent-2: #c099ff; /* moon magenta */
    --rule: #2f334d; /* moon bg_highlight */
    --bg: #222436; /* moon bg */
    --card: #1e2030; /* moon bg_dark */
    --selection: #2d3f76; /* moon bg_visual */
    --on-accent: #222436;
    /* Light text on dark glows, so semibold reads much heavier than on paper;
       a bigger colour gap keeps the bullet lead distinct. 5.4:1 on bg. */
    --item-body: #8f98c2;
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text: #c8d3f5; /* moon fg */
    --body: #a9b1d6; /* night fg_dark; moon's #828bb8 is too dim for paragraphs */
    --muted: #828bb8; /* moon fg_dark */
    --accent: #82aaff; /* moon blue */
    --accent-2: #c099ff; /* moon magenta */
    --rule: #2f334d; /* moon bg_highlight */
    --bg: #222436; /* moon bg */
    --card: #1e2030; /* moon bg_dark */
    --selection: #2d3f76; /* moon bg_visual */
    --on-accent: #222436;
    /* Light text on dark glows, so semibold reads much heavier than on paper;
       a bigger colour gap keeps the bullet lead distinct. 5.4:1 on bg. */
    --item-body: #8f98c2;
  }
}

.print-only {
  display: none;
}

/* Print: two A4 pages, one column, plain text order for ATS parsers. */

@page {
  size: A4;
  margin: 13mm 20mm 12mm;
}

@media print {
  /* Paper is white (browsers drop backgrounds anyway); keep the Day accent. */
  :root {
    --bg: #fff;
  }
  .no-print {
    display: none !important;
  }
  .print-only {
    display: inline;
  }
  body {
    font-size: 10.5pt;
    line-height: 1.4;
  }
  .wrapper {
    max-width: none;
    padding: 0;
  }
  .page-header {
    display: block;
    border-bottom-width: 2pt;
    padding-bottom: 6pt;
    margin-bottom: 8pt;
  }
  .header-name {
    font-size: 22pt;
  }
  .header-title {
    font-size: 12pt;
    margin-top: 1pt;
  }
  .header-contact {
    font-size: 9.5pt;
    margin-top: 2pt;
  }
  .summary {
    font-size: 10.5pt;
    margin-bottom: 14pt;
  }
  .content-section {
    margin-bottom: 14pt;
  }
  /* Letter-spacing makes PDF text extract as "S K I L L S", which breaks
     section detection in ATS parsers. */
  .section-title {
    letter-spacing: 0;
    font-size: 10.5pt;
    padding-bottom: 2pt;
    margin-bottom: 6pt;
    break-after: avoid-page;
  }
  li {
    margin-bottom: 3.5pt;
    break-inside: avoid;
  }
  .section-skills li {
    grid-template-columns: 38mm 1fr;
    column-gap: 4mm;
  }
  ul {
    padding-left: 11pt;
  }
  .company {
    margin-bottom: 11pt;
  }
  .company-name {
    font-size: 11.5pt;
    break-after: avoid-page;
  }
  .role {
    margin-top: 2pt;
  }
  .role + .role {
    margin-top: 8pt;
  }
  .role-body li {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 3.5pt;
  }
  .role-line {
    font-size: 10.5pt;
    margin-bottom: 3pt;
    break-after: avoid-page;
    break-inside: avoid;
  }
  a {
    color: inherit;
  }
}