/* ==========================================================================
   Bartek Ogryczak — résumé
   An editorial, document-like layout: serif display type, letterspaced micro
   labels, hairline rules, and a single restrained accent. Screen styles first;
   the print sheet at the bottom is tuned for exactly two US-Letter pages.
   ========================================================================== */

:root {
  --font-display: "Newsreader", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent:    #10635c;   /* deep teal — links and small marks only */
  --accent-hi: #0b4a45;
  --ink:       #12211f;
  --ink-soft:  #2c3b39;
  --muted:     #677674;
  --rule:      #dde4e2;
  --hairline:  #e9eeec;
  --surface:   #ffffff;
  --ground:    #eef2f1;
  --shadow:    0 1px 1px rgba(18, 33, 31, .03), 0 14px 40px rgba(18, 33, 31, .06);

  --page-width: 52rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent:    #5fbfb4;
    --accent-hi: #86d4ca;
    --ink:       #e7edeb;
    --ink-soft:  #c3d0cd;
    --muted:     #8a9a97;
    --rule:      #24312f;
    --hairline:  #1c2725;
    --surface:   #141b1a;
    --ground:    #0d1312;
    --shadow:    none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible {
  color: var(--accent-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--ink); font-weight: 400; }
p, ul, dl { margin: 0; }

svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.print-only { display: none; }

/* --------------------------------------------------------------- top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem max(1.25rem, calc((100vw - var(--page-width)) / 2 + 1.25rem));
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.topbar__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--accent-hi); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.05em; height: 1.05em; }
@media (prefers-color-scheme: dark) {
  .btn, .btn:hover { color: #0b1211; }
}

/* ------------------------------------------------------------------ page */

.page {
  max-width: var(--page-width);
  margin: 2rem auto 5rem;
  padding: 3.5rem 3.75rem 4rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

/* -------------------------------------------------------------- masthead */

.masthead { margin-bottom: 2.5rem; }

.masthead__name {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -.015em;
  color: var(--ink);
}

.masthead__pronounce {
  margin-top: .15rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .88rem;
  color: var(--muted);
}

.masthead__headline {
  margin-top: .7rem;
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink-soft);
}

.contacts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.75rem;
  margin-top: 1.15rem;
  padding-top: .95rem;
  border-top: 1px solid var(--hairline);
  list-style: none;
  font-size: .89rem;
  color: var(--ink-soft);
}
.contacts li { display: flex; align-items: center; gap: .45rem; }
.ico { width: 1.05em; height: 1.05em; flex: none; color: var(--muted); }

/* -------------------------------------------------------------- sections */

.section { margin-top: 2.25rem; }

/* Small letterspaced label + hairline: keeps colour out of the headings so the
   accent stays reserved for things you can actually click. */
.section__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.1rem;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.section__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.summary { max-width: 64ch; }

/* ---------------------------------------------------------------- skills */

.skills {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .45rem 1.5rem;
}
.skills dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .2em;
}
.skills dd { margin: 0; color: var(--ink-soft); }

/* --------------------------------------------------------------- entries */

.entry { margin-top: 1.5rem; }
.entry:first-of-type { margin-top: 0; }

.entry__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
}

.entry__title { font-size: 1rem; text-wrap: balance; }

.role  { font-weight: 600; color: var(--ink); }
.role--light { font-weight: 400; color: var(--ink-soft); }
.org {
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--ink);
}
.org--plain { font-size: 1.12em; }
a.org:hover { color: var(--accent); }
.where { font-weight: 400; color: var(--muted); white-space: nowrap; }

.entry__dates {
  flex: none;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.entry__summary { margin-top: .3rem; }

/* Used for the stealth disclosure -- present, but visibly an aside. */
.entry__note {
  margin-top: .45rem;
  font-size: .88rem;
  font-style: italic;
  color: var(--muted);
}

.bullets {
  margin-top: .45rem;
  padding-left: 1.15rem;
  list-style: none;
}
.bullets > li { position: relative; margin-top: .4rem; }
.bullets > li::before {          /* a hairline dash, not a dot */
  content: "";
  position: absolute;
  left: -1.15rem;
  top: .78em;
  width: .55rem;
  height: 1px;
  background: var(--muted);
}
.bullets b { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 46rem) {
  body { font-size: 15px; }
  .page {
    margin: 0;
    padding: 2.25rem 1.35rem 3rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
  .masthead { margin-bottom: 2rem; }
  .contacts { gap: .3rem 1.25rem; font-size: .86rem; }
  .section { margin-top: 1.85rem; }
  .entry__head { flex-direction: column; gap: 0; }
  .entry__dates { order: -1; font-size: .72rem; }
  .where { white-space: normal; }
  .skills { grid-template-columns: 1fr; gap: 0; }
  .skills dt { margin-top: .8rem; padding-top: 0; }
  .skills dt:first-child { margin-top: 0; }
}

/* Only genuinely tiny screens need one contact per line; phones wrap in pairs. */
@media (max-width: 20rem) {
  .contacts { flex-direction: column; }
}

/* ---------------------------------------------------- wide desktop: two columns

   Above ~1280px the identity block moves into a sticky left rail and the resume
   itself takes the right column. The document's own flow is untouched, so the
   single-column order -- and the print pagination that depends on it -- is
   exactly the same as at every other width. */

@media (min-width: 80rem) {
  :root { --page-width: 72rem; }

  .page {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 0 4rem;
    align-items: start;
    padding: 3.5rem 3.5rem 4rem;
  }

  .masthead {
    position: sticky;
    top: 5.25rem;
    margin-bottom: 0;
    padding-right: 3.25rem;
    border-right: 1px solid var(--hairline);
  }

  /* The name is happier over two lines in a narrow rail than shrunk to fit. */
  .masthead__name { font-size: 2.9rem; line-height: 1.1; }
  .masthead__headline { margin-top: .85rem; font-size: 1rem; }

  .contacts {
    flex-direction: column;
    gap: .55rem;
    margin-top: 1.35rem;
    padding-top: 1.15rem;
  }

  .doc { min-width: 0; }
  .doc > .section:first-child { margin-top: 0; }

  .summary { max-width: none; }

  .print-foot { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   PRINT — exactly two US-Letter pages.
   Sizes are in pt so the result does not depend on the browser window.
   ========================================================================== */

@page {
  size: letter;
  margin: 13mm 15mm 11mm;
}

@media print {
  :root {
    --accent:   #10635c;
    --ink:      #000;
    --ink-soft: #1b1b1b;
    --muted:    #5a625f;
    --rule:     #c3ccca;
    --hairline: #d5dcda;
    --surface:  #fff;
    --ground:   #fff;
  }

  html, body {
    background: #fff;
    color: var(--ink-soft);
    font-size: 9.9pt;
    line-height: 1.4;
  }

  .no-print, .topbar { display: none !important; }
  .print-only { display: block; }
  a { color: var(--accent); text-decoration: none; }

  .page {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
  }

  /* masthead ------------------------------------------------------------ */
  .masthead            { margin-bottom: 11pt; }
  .masthead__name      { font-size: 28pt; }
  .masthead__pronounce { font-size: 8pt; margin-top: 0; }
  .masthead__headline  { font-size: 11.5pt; margin-top: 4pt; }
  .contacts            { font-size: 9pt; gap: 1pt 16pt; margin-top: 6pt; padding-top: 5pt; }

  /* sections ------------------------------------------------------------ */
  .section        { margin-top: 11pt; }
  .section__title { font-size: 7.6pt; letter-spacing: .15em; margin-bottom: 5pt; gap: 7pt; }
  .summary        { max-width: none; text-align: justify; }

  .skills       { gap: 2pt 12pt; }
  .skills dt    { font-size: 8pt; padding-top: .15em; }

  .entry        { margin-top: 8pt; }
  .entry__title { font-size: 9.9pt; }
  .entry__dates { font-size: 7.8pt; }

  .entry__note   { margin-top: 3pt; font-size: 8.6pt; }

  .bullets       { margin-top: 2pt; padding-left: 11pt; }
  .bullets > li  { margin-top: 2pt; }
  .bullets > li::before { left: -11pt; top: .72em; width: 5pt; }

  /* pagination ---------------------------------------------------------- */
  /* Keep an entry with its bullets, but never lock a whole section --
     an unbreakable Experience section would be pushed onto a page of its own. */
  .entry, .bullets > li, .skills, .masthead { break-inside: avoid; }
  .section__title, .entry__head, h1, h2, h3 { break-after: avoid; }
  .section { break-inside: auto; }

  /* footer shown only on paper ------------------------------------------ */
  .print-foot {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-top: 14pt;
    padding-top: 5pt;
    border-top: 1px solid var(--rule);
    font-size: 7.4pt;
    color: var(--muted);
    break-inside: avoid;
  }
  .print-foot a { color: inherit; }
}