/* Pete Beatty CV: one stylesheet for the webpage (screen) and the PDF (print).
   Name and headings: Facultad. Body: Newsreader. */

@font-face { font-family: "Facultad"; src: url(fonts/facultad.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(fonts/newsreader-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #fcfcfa;
  --ink: #1c2126;
  --muted: #5d6670;
  --rule: #d9dcdf;
  --accent: #1f5a85;
  --display: "Facultad", "DM Sans", system-ui, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ---------- Shared ---------- */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); }
header { display: grid; }
header h1, h2, h3, .sub { font-family: var(--display); font-weight: 400; }
header h1 { margin: 0; line-height: 1.1; }
.sub { margin: 0; color: var(--muted); }
.contact { display: flex; flex-wrap: wrap; column-gap: 3em; row-gap: 0.6em; color: var(--muted); }
.contact p { margin: 0; }
.contact strong { color: var(--ink); font-weight: 400; font-family: var(--display); }
h2 { border-bottom: 1px solid var(--rule); text-wrap: balance; }
h3 { color: var(--muted); }
p { margin: 0 0 0.75em; }
strong { font-weight: 600; }
ul { list-style: none; padding: 0; margin: 0 0 0.75em; }
li { padding-left: 1.1em; text-indent: -1.1em; }
li::before { content: "–"; display: inline-block; width: 1.1em; text-indent: 0; color: var(--muted); }
hr { display: none; }
a { color: var(--accent); }

/* ---------- Screen (the webpage) ---------- */
@media screen {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: #15181b; --ink: #e6e8ea; --muted: #9aa3ac; --rule: #2e3439; --accent: #7fb2dc; color-scheme: dark; }
  }
  :root[data-theme="dark"] { --bg: #15181b; --ink: #e6e8ea; --muted: #9aa3ac; --rule: #2e3439; --accent: #7fb2dc; color-scheme: dark; }
  body { font-size: 19px; line-height: 1.55; }
  .page { max-width: 44rem; margin: 0 auto; padding-block: 56px 96px;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  header { gap: 6px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
  header h1 { font-size: 44px; }
  .sub { font-size: 19px; }
  .contact { font-size: 16px; line-height: 1.5; margin-top: 10px; }
  .pdf-link { font-family: var(--display); font-size: 16px; margin-top: 14px; }
  h2 { font-size: 25px; line-height: 1.2; margin: 48px 0 14px; padding-bottom: 6px; }
  h3 { font-size: 19px; margin: 28px 0 8px; }
  ul { display: grid; gap: 8px; }
  @media (max-width: 520px) {
    body { font-size: 17px; }
    header h1 { font-size: 34px; }
    h2 { font-size: 22px; }
    .page { padding-block: 32px 64px; }
  }
}

/* ---------- Print (the PDF) ---------- */
@page {
  size: letter;
  margin: 1in 1in 0.9in;
  @bottom-left  { content: "Pete Beatty · Curriculum Vitae"; font: 8.5pt "Facultad", sans-serif; color: #5d6670; }
  @bottom-right { content: counter(page) " of " counter(pages); font: 8.5pt "Facultad", sans-serif; color: #5d6670; }
}
@media print {
  :root { --bg: #ffffff; --ink: #1a1a1a; --muted: #555b61; --rule: #c9ccd0; --accent: #1a1a1a; }
  body { font-size: 10.5pt; line-height: 1.38; }
  header { gap: 2pt; padding-bottom: 12pt; border-bottom: 0.75pt solid var(--rule); }
  header h1 { font-size: 22pt; }
  .sub { font-size: 10.5pt; }
  .contact { font-size: 9.5pt; line-height: 1.35; margin-top: 8pt; }
  .pdf-link { display: none; }
  h2 { font-size: 13pt; margin: 18pt 0 7pt; padding-bottom: 3pt; border-bottom-width: 0.75pt; break-after: avoid; }
  h3 { font-size: 10.5pt; margin: 11pt 0 4pt; break-after: avoid; }
  p { margin-bottom: 5pt; }
  ul { margin-bottom: 5pt; }
  li { margin-bottom: 2.5pt; }
  li, p { break-inside: avoid; }
  a { text-decoration: none; }
}