/* ==========================================================================
   resume.aurochs.agency
   Stefan Kovalik — Designer Engineer · Creator of Perception-First Design™

   Layered: tokens → reset → typography → layout → components → links → print
   ========================================================================== */


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette: warm-neutral, hue 75°, low chroma. */
  --bg:         oklch(98.5% 0.003 75);
  --text:       oklch(18%   0.008 75);
  --text-muted: oklch(38%   0.012 75);
  --text-soft:  oklch(50%   0.010 75);
  --accent:     oklch(28%   0.015 75);
  --rule:       oklch(88%   0.005 75);
  --rule-soft:  oklch(94%   0.003 75);

  /* Type stacks. Self-hosted Fraunces (variable opsz/wght) + Inter (wght). */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Modular spacing scale, 0.25rem base. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
}


/* --------------------------------------------------------------------------
   Reset + document defaults
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) 3rem var(--space-8);
}


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.5rem;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0 0 0.4rem;
  font-variation-settings: "opsz" 96;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule-soft);
  font-variation-settings: "opsz" 48;
}

h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: -0.012em;
  line-height: 1.28;
  margin: var(--space-5) 0 var(--space-1);
  font-variation-settings: "opsz" 24;
}

article:first-of-type > h3,
section > article:first-child > h3 {
  margin-top: 0.4rem;
}

p  { margin: 0 0 var(--space-3); }

ul {
  margin: var(--space-1) 0 var(--space-3);
  padding-left: 1.3rem;
}

ul li {
  margin-bottom: var(--space-1);
  line-height: 1.5;
}

ul li::marker { color: var(--text-soft); }

em     { font-style: italic; }
strong { font-weight: 600; }


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

header { margin-bottom: var(--space-6); }

/* H1 and the Download-PDF button share a flex row.
   When the row can fit both, button sits flush right and vertically centered
   on the h1. When the viewport is too narrow to fit them on one line, the
   row collapses to column-reverse so the button stacks ABOVE the title. */
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: 0.4rem;
}

.header-row h1 { margin: 0; }

.pdf-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}

.pdf-button:hover {
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
}

/* Switch to eyebrow-above-h1 layout well before the natural wrap point
   (~530px) so the button never falls below the title on tablet widths. */
@media (max-width: 640px) {
  .header-row {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .header-row .pdf-button {
    align-self: flex-end;
  }
}

.tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  font-variation-settings: "opsz" 24;
}

.contact,
.links {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.contact { margin-bottom: 0.15rem; }
.links   { margin-bottom: var(--space-5); }

.contact a,
.links a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.contact a:hover,
.links a:hover {
  border-bottom-color: var(--text);
  color: var(--text);
}

.summary {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 var(--space-3);
  color: var(--text);
}

.design-focus {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: var(--text);
}

.design-focus strong {
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.005em;
}


/* --------------------------------------------------------------------------
   Experience items + subtitles
   -------------------------------------------------------------------------- */

.experience-item               { margin-bottom: var(--space-5); }
.experience-item:last-child    { margin-bottom: 0; }
.experience-item h3            { margin-top: 0; }
.experience-item ul            { margin-top: var(--space-1); margin-bottom: 0; }

.subtitle {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.subtitle a {
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.subtitle a:hover {
  border-bottom-color: var(--text);
  color: var(--text);
}


/* --------------------------------------------------------------------------
   Skills table (dl/dt/dd grid)
   -------------------------------------------------------------------------- */

.skills dl {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: 0.95rem;
}

.skills dt {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text);
}

.skills dd {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}


/* --------------------------------------------------------------------------
   Links (body / inline)
   -------------------------------------------------------------------------- */

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 150ms ease;
}

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


/* --------------------------------------------------------------------------
   Print / PDF output
   @page rules suppress browser-injected headers/footers.
   Letter format with generous outer margins to keep line length readable.
   Vertical spacing tightened so the deliverable fits 2 pages.
   -------------------------------------------------------------------------- */

@page {
  size: letter;
  margin: 0.65in 0.85in;
  @top-left    { content: ""; }
  @top-center  { content: ""; }
  @top-right   { content: ""; }
  @bottom-left   { content: ""; }
  @bottom-center { content: ""; }
  @bottom-right  { content: ""; }
}

@media print {
  html, body {
    font-size: 10pt;
    background: white;
    line-height: 1.38;
    widows: 3;
    orphans: 3;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  header        { margin-bottom: 0.55rem; }
  h1            { font-size: 1.85rem; margin-bottom: 0.15rem; line-height: 1.04; }
  .tagline      { font-size: 0.95rem; margin-bottom: 0.5rem; }
  .contact,
  .links        { font-size: 0.8rem;  line-height: 1.5; }
  .links        { margin-bottom: 0.65rem; }
  .summary      { font-size: 0.9rem;  line-height: 1.42; margin-bottom: 0.38rem; }
  .design-focus { font-size: 0.85rem; line-height: 1.42; }

  /* h2 margin-top is the primary section-break breathing room. */
  h2 {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    margin: 0.85rem 0 0.36rem;
    padding-bottom: 0.2rem;
    page-break-after: avoid;
    break-after: avoid;
  }

  h3 {
    font-size: 0.98rem;
    margin: 0.5rem 0 0.08rem;
  }

  article:first-of-type > h3,
  section > article:first-child > h3 {
    margin-top: 0.18rem;
  }

  .subtitle {
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
    line-height: 1.38;
  }

  p     { margin-bottom: 0.36rem; }
  ul    { margin: 0.1rem 0 0.24rem; }
  ul li { margin-bottom: 0.08rem; line-height: 1.36; }

  .experience-item {
    margin-bottom: 0.45rem;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .experience-item ul { margin-top: 0.18rem; }
  .experience-item h3 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .skills dl {
    gap: 0.14rem 0.85rem;
    font-size: 0.82rem;
    grid-template-columns: 9.5rem 1fr;
  }
  .skills dt { font-size: 0.82rem; }
  .skills dd { line-height: 1.38; }

  a {
    color: var(--text);
    text-decoration: none;
    border-bottom: none;
  }

  .contact a,
  .links a,
  .subtitle a { color: inherit; }

  /* PDF download button is meaningless inside a printed PDF; hide it. */
  .pdf-button  { display: none; }
  .header-row  { display: block; margin-bottom: 0; }
}