/* ==========================================================================
   Mat Rospierski, resume
   Hand-written CSS. No framework, no build step.
   Structure: 1 tokens, 2 reset, 3 layout, 4 typography, 5 sections,
              6 responsive, 7 print
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   Light palette is defined on bare :root so it is the default.
   The dark block only overrides the values that change. */

:root {
  --bg: #fbfbfa;
  --surface: #ffffff;
  --text: #17171a;
  --muted: #6c6c72;
  --rule: #e3e3e0;
  --link-underline: #b8b8b4;

  --measure: 44rem;
  --gap: 1rem;
  --section-gap: 3rem;

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0e10;
    --surface: #0e0e10;
    --text: #e9e9e6;
    --muted: #9a9a9f;
    --rule: #26262a;
    --link-underline: #55555c;
  }
}

/* 2. Reset ---------------------------------------------------------------- */

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

body,
h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

/* 3. Layout --------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  max-width: var(--measure);
  margin-inline: auto;
  padding: 5rem 1.5rem 4rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* 4. Typography ----------------------------------------------------------- */

h1 {
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);

  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-color: currentColor;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* 5. Sections ------------------------------------------------------------- */

/* Masthead */

.masthead {
  margin-bottom: var(--section-gap);
}

.tagline {
  color: var(--muted);
  margin-top: 0.15rem;
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Experience */

.role + .role {
  margin-top: 2.25rem;
}

.role-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin-top: 0.2rem;
  margin-bottom: 0.9rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.role-meta .employer {
  color: var(--text);
}

.role ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Hanging bullet, so wrapped lines align under the text and not the marker. */
.role li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}

/* A text glyph rather than a styled background box: browsers strip background
   graphics when printing by default, which would silently drop every marker
   from the printed copy. */
.role li::before {
  content: "\2022";
  position: absolute;
  left: 0.1rem;
  color: var(--muted);
}

/* Certifications and skills share the same two-column definition list. */

dl {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0.9rem var(--gap);
}

dt {
  font-size: 0.875rem;
  font-weight: 600;
}

dd {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Education */

.school {
  font-size: 0.95rem;
  color: var(--muted);
}

/* Footer */

footer {
  margin-top: var(--section-gap);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem;
  color: var(--muted);
}

/* 6. Responsive ----------------------------------------------------------- */

@media (max-width: 34rem) {
  body {
    padding: 3rem 1.25rem 3rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  /* Definition lists stack rather than squeeze the label column. */
  dl {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  dd + dt {
    margin-top: 0.9rem;
  }
}

/* 7. Print ----------------------------------------------------------------
   Ctrl+P produces a clean PDF, so the page doubles as the printable resume. */

@media print {

  /* Nearly every size in this stylesheet is expressed in rem, so scaling the
     root font size scales the whole document in one line. Setting it on body
     would do almost nothing, because rem resolves against the root, not the
     parent. 12px root puts body copy at 9pt. */
  :root {
    font-size: 12px;

    --bg: #ffffff;
    --text: #000000;
    --muted: #333333;
    --rule: #cccccc;
    --section-gap: 1.4rem;
  }

  body {
    max-width: none;
    padding: 0;
    line-height: 1.4;
  }

  .masthead {
    margin-bottom: 1.4rem;
  }

  .role + .role {
    margin-top: 1.4rem;
  }

  /* The first role is taller than a page, so break-inside: avoid on the whole
     article would push it to a fresh page and still overflow, wasting the page
     before it. Glue headings to what follows instead, and keep individual
     bullets and skill rows from splitting. */
  h2,
  h3,
  .role-meta {
    break-after: avoid;
  }

  .role li,
  dt,
  dd {
    break-inside: avoid;
  }

  a {
    text-decoration: none;
  }

  /* The email and LinkedIn URLs are already visible as link text, so there is
     nothing to expand. The visitor counter is screen-only. */
  footer {
    display: none;
  }
}