/* ==========================================================================
   Résumé — the portfolio's type, scale and accents, re-grounded for paper.

   `tokens.css` is loaded first for the fonts, the fluid type scale and the
   accent hues; everything below re-points the surface and text tokens at a
   white page, and adds the two deepened accents that survive being printed.
   ========================================================================== */

@layer tokens {
  :root {
    color-scheme: light;

    /* Ink on paper, not paper on ink. */
    --page: #ffffff;
    --ink: #14181f;
    --text-strong: #14181f;
    --text: #333a45;
    --text-muted: #4d5563;
    --text-faint: #6b7280;
    --line: #d9dde3;
    --line-strong: #b9c0c9;
    --fill: #f4f5f7;

    /* The site's sand and sky, darkened until they read on white. */
    --accent: #9c4f38;
    --accent-cool: #1f6f9c;

    /* A résumé is read at arm's length on a fixed page: the fluid scale from
       the site would resize with the preview window, so pin it in points. */
    --size-name: 20pt;
    --size-h2: 9.5pt;
    --size-h3: 11pt;
    --size-body: 9.4pt;
    --size-small: 8.6pt;
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* The desk the sheet sits on, in the site's own ink. */
    background: var(--ink-800);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.42;
    -webkit-font-smoothing: antialiased;
  }

  ul {
    list-style: none;
  }

  a {
    color: var(--accent-cool);
    text-decoration: none;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

@layer layout {
  /* On screen this is a sheet of paper on a desk. In print the @page rule
     owns the margins instead, and the sheet is simply the content. */
  .sheet {
    inline-size: 8.5in;
    min-block-size: 11in;
    margin: 2.5rem auto;
    padding: 0.5in 0.62in;
    background: var(--page);
    box-shadow: 0 30px 80px -40px rgb(0 0 0 / 80%);
    print-color-adjust: exact;
  }

  .toolbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 4vw, 2rem);
    background: color-mix(in srgb, var(--ink-900) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid color-mix(in srgb, var(--paper) 8%, transparent);
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    font-size: 0.8rem;
  }

  .toolbar .back {
    color: color-mix(in srgb, var(--paper) 70%, transparent);
    transition: color var(--speed-fast);
  }

  .toolbar .back:hover {
    color: var(--sand);
  }

  .toolbar .hint {
    flex: 1;
    text-align: center;
  }

  .toolbar .btn {
    padding: 0.5rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--paper);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
      background-color 200ms,
      border-color 200ms;
  }

  .toolbar .btn:hover {
    background: color-mix(in srgb, var(--sand) 15%, transparent);
    border-color: color-mix(in srgb, var(--sand) 90%, transparent);
  }
}

@layer components {
  /* ---- Header -------------------------------------------------------- */
  /* Name and title stacked, contact details on one line beneath. Sitting
     them side by side reflows the moment the name is a little wider than
     expected — on a fixed page that is a layout you cannot see coming. */
  .masthead {
    padding-block-end: 0.4rem;
    border-block-end: 2px solid var(--accent);
  }

  .masthead h1 {
    font-size: var(--size-name);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-transform: uppercase;
  }

  .masthead .title {
    display: block;
    margin-block-start: 0.15rem;
    font-family: var(--font-mono);
    font-size: var(--size-small);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .contact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-block-start: 0.28rem;
    font-size: var(--size-small);
    color: var(--text-muted);
  }

  .contact-line .sep {
    color: var(--line-strong);
    padding-inline: 0.45em;
  }

  /* ---- Sections ------------------------------------------------------ */
  .section {
    margin-block-start: 0.5rem;
    /* Never strand a heading at the foot of a page. */
    break-inside: avoid;
  }

  .section > h2 {
    margin-block-end: 0.45rem;
    padding-block-end: 0.2rem;
    border-block-end: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--size-h2);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .summary {
    color: var(--text);
    text-wrap: pretty;
  }

  /* ---- Skills -------------------------------------------------------- */
  .skills {
    display: grid;
    gap: 0.4rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  }

  .skills dt {
    font-weight: 600;
    font-size: var(--size-small);
    color: var(--accent-cool);
  }

  .skills dd {
    color: var(--text);
    font-size: var(--size-small);
  }

  /* ---- Experience ---------------------------------------------------- */
  .role {
    break-inside: avoid;
  }

  .role + .role {
    margin-block-start: 0.45rem;
  }

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

  .role-head h3 {
    font-size: var(--size-h3);
    font-weight: 700;
    color: var(--ink);
  }

  .role-head .period {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    color: var(--accent-cool);
    white-space: nowrap;
  }

  .employer {
    margin-block-end: 0.3rem;
    font-size: var(--size-small);
    color: var(--text-muted);
  }

  .employer strong {
    font-weight: 600;
    color: var(--text);
  }

  .bullets li {
    position: relative;
    padding-inline-start: 0.85rem;
    margin-block-start: 0.12rem;
    text-wrap: pretty;
  }

  .bullets li::before {
    content: '';
    position: absolute;
    inset-block-start: 0.52em;
    inset-inline-start: 0;
    inline-size: 0.28rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
  }

  /* ---- Stack line ---------------------------------------------------- */
  .stack-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    margin-block-start: 0.28rem;
  }

  .chip {
    padding: 0.08rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--fill);
    font-family: var(--font-mono);
    font-size: 7.4pt;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* ---- Education & certifications ------------------------------------ */
  /* Two columns, the first sized to its content: education needs exactly the
     width of "B.S. Software Engineering · Western Governors University" and
     the longer certification names get everything that is left. */
  .credentials {
    display: grid;
    gap: 0.5rem 1.75rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .credentials h3 {
    margin-block-end: 0.3rem;
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-cool);
  }

  .credentials li {
    font-size: var(--size-small);
    text-wrap: pretty;
  }

  .credentials li + li {
    margin-block-start: 0.22rem;
  }

  .credentials .name {
    font-weight: 600;
    color: var(--ink);
  }

  /* Issuer on the same line as the credential: seven entries stacked two
     lines each is most of a page's worth of height for very little said. */
  .credentials .issuer {
    color: var(--text-faint);
  }

  .credentials .issuer::before {
    content: ' · ';
    color: var(--line-strong);
  }
}

/* ==========================================================================
   Small screens. The sheet is a fixed 8.5in, which a phone cannot show
   without zooming the whole page out to about half size — 9.4pt body text
   lands around 6px and nobody reads that.

   So below the width where a sheet actually fits, the paper metaphor is
   dropped: the résumé becomes an ordinary full-width document with type
   sized for a screen held at arm's length rather than for print. Only the
   `screen` media is touched, so the printed PDF is byte-for-byte what it
   was — the same one Letter page whether it is sent from a phone or a
   desktop.
   ========================================================================== */
@media screen and (width < 56em) {
  :root {
    /* Points describe paper. On a screen these want to be screen units. */
    --size-name: 1.7rem;
    --size-h2: 0.78rem;
    --size-h3: 1.06rem;
    --size-body: 0.95rem;
    --size-small: 0.86rem;
  }

  body {
    /* No desk to sit the sheet on at this width; the document is the page. */
    background: var(--page);
    line-height: 1.5;
  }

  .sheet {
    inline-size: 100%;
    min-block-size: 0;
    margin: 0;
    padding: 1.5rem clamp(1rem, 5vw, 2rem) 3rem;
    box-shadow: none;
  }

  /* The hint is print advice; it is noise next to the button that gives it. */
  .toolbar .hint {
    display: none;
  }

  .section {
    margin-block-start: 1.25rem;
  }

  .section > h2 {
    margin-block-end: 0.6rem;
  }

  .role + .role {
    margin-block-start: 1.1rem;
  }

  .bullets li {
    margin-block-start: 0.4rem;
  }

  .chip {
    padding: 0.12rem 0.5rem;
    font-size: 0.72rem;
  }

  .stack-line {
    gap: 0.3rem;
    margin-block-start: 0.5rem;
  }

  /* One column each: two columns of anything at 375px is a column of
     fragments. */
  .credentials {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .credentials li + li {
    margin-block-start: 0.4rem;
  }

  .skills {
    gap: 0.6rem 1.5rem;
  }

  .role + .role,
  .credentials > div {
    break-inside: auto;
  }
}

@media screen and (width < 30em) {
  .skills {
    grid-template-columns: 1fr;
  }

  /* Wrapped, the contact row strands a separator at the end of every line.
     At phone width each item gets its own line instead — no dangling
     middots, and every link becomes a full-width tap target. */
  .contact-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .contact-line .sep {
    display: none;
  }
}

/* ==========================================================================
   Print. The @page box owns the margins, so the sheet drops its own and
   becomes plain content; colours are forced through because a résumé
   printed without its accents loses the structure they carry.
   ========================================================================== */
@page {
  size: letter;
  margin: 0.5in 0.62in;
}

@media print {
  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body {
    background: var(--page);
  }

  .toolbar {
    display: none;
  }

  .sheet {
    inline-size: auto;
    min-block-size: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  a {
    color: var(--accent-cool);
  }
}