/* ============================================================================
   Ted Kulp — resume stylesheet
   ----------------------------------------------------------------------------
   Everything visual lives in this file. To change content, edit index.html.
   The knobs you are most likely to want are in :root right below.
   ========================================================================= */

@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin-var.woff2') format('woff2-variations'),
       url('fonts/jost-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-var.woff2') format('woff2-variations'),
       url('fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- colors ----------------------------------------------------------- */
  --accent:      #1d6f6a;   /* teal used for headings, dates, links        */
  --accent-soft: #eef4f3;   /* tint behind the highlights panel            */
  --ink:         #191e24;   /* names, headings                             */
  --body:        #3b434d;   /* paragraph text                              */
  --muted:       #7b838e;   /* locations, secondary detail                 */
  --rule:        #e2ded7;   /* hairlines                                   */
  --sheet:       #ffffff;   /* the page itself                             */
  --desk:        #f1eee9;   /* area around the page, screen only           */

  /* --- type ------------------------------------------------------------- */
  --display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  --text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --size-body: 10.2pt;      /* bump to 10.6pt if you want it roomier       */
  --leading:   1.44;      /* drop to ~1.42 to claw back a line or two    */

  /* --- page ------------------------------------------------------------- */
  --page-width:  8.5in;
  --page-pad-x:  0.72in;
  --page-pad-y:  0.62in;
}

/* --------------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--desk);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--size-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sheet {
  max-width: var(--page-width);
  margin: 2.5rem auto;
  padding: var(--page-pad-y) var(--page-pad-x);
  background: var(--sheet);
  box-shadow: 0 1px 2px rgba(25, 30, 36, .06), 0 12px 32px rgba(25, 30, 36, .08);
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 111, 106, .28);
}
a:hover { border-bottom-color: var(--accent); }

ul { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Masthead
   ----------------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: .85rem;
  border-bottom: 2px solid var(--accent);
}

.masthead h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 30pt;
  line-height: 1.05;
  letter-spacing: .045em;
  color: var(--ink);
}

.masthead .role {
  margin: .32rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 12.5pt;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
}

.contact {
  text-align: right;
  font-size: 8.9pt;
  line-height: 1.75;
  color: var(--muted);
  white-space: nowrap;
}
.contact a { border-bottom-color: transparent; color: var(--body); }
.contact a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.contact .sep { color: var(--rule); padding: 0 .3em; }

/* --------------------------------------------------------------------------
   Sections
   ----------------------------------------------------------------------- */

section { margin-top: 1.4rem; }

section > h2 {
  margin: 0 0 .75rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.5pt;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink);
}

/* thin rule that runs from the heading to the right edge */
section > h2 { display: flex; align-items: center; gap: .9rem; }
section > h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   Highlights panel
   ----------------------------------------------------------------------- */

.highlights {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem .95rem;
  background: var(--accent-soft);
  border-radius: 3px;
}

.highlights ul {
  display: grid;
  gap: .38rem;
}

.highlights li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--body);
}

.highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.highlights strong { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Proficiencies
   ----------------------------------------------------------------------- */

.skills {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.4rem;
  row-gap: .55rem;
  align-items: baseline;
}

.skills dt {
  font-family: var(--display);
  font-weight: 500;
  font-size: 9pt;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.skills dd { margin: 0; }
.skills .lapsed { color: var(--muted); }

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

.role-entry {
  margin-bottom: 1rem;
}
.role-entry:last-child { margin-bottom: 0; }

/* Keep the company/title header glued to whatever follows it. */
.role-head, .role-title {
  break-after: avoid;
  page-break-after: avoid;
}

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

.role-head .org {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12pt;
  letter-spacing: .012em;
  color: var(--ink);
}

.role-head .where {
  margin-left: .15rem;
  font-family: var(--text);
  font-weight: 400;
  font-size: 9pt;
  letter-spacing: 0;
  color: var(--muted);
}

.role-head .when {
  flex: none;
  font-family: var(--display);
  font-weight: 400;
  font-size: 9.8pt;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

.role-title {
  margin: .06rem 0 .45rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 10.3pt;
  letter-spacing: .05em;
  color: var(--accent);
}

.role-entry p {
  margin: 0 0 .45rem;
  max-width: 62em;
  orphans: 2;
  widows: 2;
}

.role-entry ul {
  display: grid;
  gap: .26rem;
}

.role-entry li {
  position: relative;
  padding-left: .95rem;
  break-inside: avoid;
  page-break-inside: avoid;
}

.role-entry li::before {
  content: '';
  position: absolute;
  left: .08rem;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9c6c5;
}

.role-entry strong { font-weight: 600; color: var(--ink); }

/* --------------------------------------------------------------------------
   Earlier roles — one compact line each
   ----------------------------------------------------------------------- */

.earlier {
  display: grid;
  gap: .5rem;
  break-inside: avoid;
  page-break-inside: avoid;
}

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

.earlier .what { color: var(--body); }
.earlier .what b {
  font-family: var(--display);
  font-weight: 600;
  font-size: 10.8pt;
  color: var(--ink);
}
.earlier .what .role-inline { color: var(--muted); }
.earlier .what .role-inline::before {
  content: '\00b7';
  color: var(--rule);
  padding: 0 .5em 0 .35em;
}

.earlier .when {
  flex: none;
  font-family: var(--display);
  font-size: 9.8pt;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   PDF download button — screen only
   ----------------------------------------------------------------------- */

.pdf-link { display: none; }

@media screen {
  .pdf-link {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    padding: .5em .95em;
    font-family: var(--display);
    font-weight: 500;
    font-size: 9pt;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--sheet);
    border: 1px solid rgba(29, 111, 106, .35);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(25, 30, 36, .06), 0 4px 12px rgba(25, 30, 36, .08);
    transition: background .15s, color .15s, border-color .15s;
  }
  .pdf-link::before {
    content: '\2193';          /* down arrow */
    font-size: 1.1em;
    line-height: 1;
  }
  .pdf-link:hover,
  .pdf-link:focus-visible {
    color: var(--sheet);
    background: var(--accent);
    border-color: var(--accent);
  }
}

/* --------------------------------------------------------------------------
   Print / PDF
   ----------------------------------------------------------------------- */

/* Literal values, not var(): the interactive print dialog doesn't reliably
   resolve custom properties inside @page (headless --print-to-pdf does), so
   cmd-P came out with no margins. Keep in sync with --page-pad-y/x. */
@page {
  size: letter;
  margin: 0.62in 0.72in;
}

@media print {
  body { background: #fff; }

  /* Bullets and section rules are backgrounds. The print dialog drops those
     unless "Background graphics" is ticked; headless Chrome always keeps them.
     Force them on so cmd-P matches build-pdf.sh. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ------------------------------------------------------------------------
     Tracking caps for PDF text extraction.

     CSS letter-spacing makes Chrome position each glyph individually. Text
     extractors (and the ATS parsers built on them) insert a word break
     wherever the gap gets wide enough, so "SENIOR PLATFORM ENGINEER" at
     .13em comes out of the PDF as "S E N I O R  P L AT F O R M  E N G I N E E R"
     and matches no keyword search at all.

     Measured against pdftotext: breaks at .10em, partial at .07em, clean at
     .05em and below. Screen keeps the wider tracking, print tightens.
     Raising these past .06em will silently break parsing again.
  ------------------------------------------------------------------------ */
  .masthead .role { letter-spacing: .05em; }
  .skills dt     { letter-spacing: .04em; }
  section > h2   { letter-spacing: .08em; }

  .sheet {
    margin: 0;
    padding: 0;
    max-width: none;
    box-shadow: none;
  }

  a { border-bottom: none; }

  /* Don't let a heading end up alone at the bottom of a page. */
  section > h2 { break-after: avoid; page-break-after: avoid; }
}

/* --------------------------------------------------------------------------
   Narrow screens
   ----------------------------------------------------------------------- */

@media screen and (max-width: 46rem) {
  :root { --page-pad-x: 1.25rem; --page-pad-y: 1.5rem; }

  .sheet { margin: 0; box-shadow: none; }

  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
  .masthead h1 { font-size: 26pt; }
  .contact { text-align: left; white-space: normal; }

  .role-head { flex-direction: column; gap: .1rem; }
  .earlier li { flex-direction: column; gap: .1rem; }

  .skills { grid-template-columns: 1fr; row-gap: .2rem; }
  .skills dd { margin-bottom: .5rem; }
}