/* Fast route: résumé. Plain, accessible, no scripts.
   Built on the same vendored JUWEL layer as the film (../film/vendor/tokens.css, jb.css, porcelain.css, all read-only
   exports from the product's main branch): every colour, radius, size and type style below is a --jb-* / --pf-* token,
   and every surface is a real .pf-* / .jb-* class. This file only places them on the page. No palette of its own.
   Follows the system light/dark setting through the tokens. Contrast comes from the tokens (ink 16.6:1, violet text 7.4:1). */

:root {
  --measure: 46rem;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--jb-paper);
  color: var(--jb-ink);
  font: var(--jb-type-body);
  overflow-wrap: break-word;
}
/* The product's static page wash (a token, not new art), fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--jb-depth-wash);
}

.wrap {
  inline-size: 100%;
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

a { color: var(--jb-violet-text); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.16em; }
a.pf-btn { text-decoration: none; }
a.pf-btn--primary, a.pf-btn--secondary { color: inherit; }
a.pf-btn--primary { color: var(--pf-surface); }
a.pf-btn--secondary { color: var(--pf-ink); }
a.pf-btn--quiet { color: var(--pf-ink-2); }
a.pf-btn--quiet:hover { color: var(--pf-ink); }
main:focus { outline: none; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Skip link: the real primary button, parked off-screen until focused. */
.skip { position: absolute; inset-inline-start: var(--jb-s-8); inset-block-start: -4rem; z-index: 10; }
.skip:focus { inset-block-start: var(--jb-s-8); }

/* Header: the product's own plain row (.pf-header), same as the film. */
.site-header { border-block-end: 1px solid var(--jb-line); }
.site-header .pf-header { flex-wrap: wrap; padding-block: var(--jb-s-8); row-gap: 0; }
.site-header .pf-header__actions { flex-wrap: wrap; }
.pf-btn[aria-current="page"] { color: var(--pf-ink); background: var(--jb-surface-2); }

/* Masthead */
.masthead { padding-block: var(--jb-s-40) var(--jb-s-8); }
h1 {
  margin: 0;
  font: var(--jb-type-display);
  color: var(--jb-ink);
}
@media (min-width: 600px) {
  h1 { font: var(--jb-type-display-xl); }
}
.headline { margin-block-start: var(--jb-s-8); font: var(--jb-type-headline); color: var(--jb-ink-2); }
.avail { margin-block-start: var(--jb-s-16); }
.meta a { display: inline-block; padding-block: var(--jb-s-4); }
.meta { display: flex; flex-wrap: wrap; gap: var(--jb-s-4) var(--jb-s-24); margin-block-start: var(--jb-s-16); color: var(--jb-ink-2); font: var(--jb-type-callout); }

/* Sections */
section { padding-block: var(--jb-s-32) 0; scroll-margin-block-start: var(--jb-s-16); }
h2.pf-title { margin-block-end: var(--jb-s-16); }
h3 { margin: 0; }

.summary { font: var(--jb-type-headline); color: var(--jb-ink); max-inline-size: 38rem; }

.how-card { padding: var(--jb-s-20); gap: var(--jb-s-12); }
.how { font: var(--jb-type-headline); color: var(--jb-ink); }

/* Experience: one .jb-group of .jb-rows */
.jobs .job { align-items: flex-start; flex-wrap: wrap; gap: var(--jb-s-4) var(--jb-s-16); padding-block: var(--jb-s-16); }
.jobs .job + .job { border-block-start: 1px solid var(--jb-line); }
.job .jb-row__text { flex: 1 1 18rem; }
.org { color: var(--jb-violet-text); font-weight: var(--jb-w-bold); }
.dates { white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.lines { margin-block-start: var(--jb-s-4); }
.lines li { margin-block-start: var(--jb-s-4); color: var(--jb-ink-2); font: var(--jb-type-callout); }
.line { margin-block-start: var(--jb-s-4); color: var(--jb-ink-2); font: var(--jb-type-callout); }
.job-note { min-block-size: 0; padding-block: var(--jb-s-8); }

/* Skills: the product's own tag chip (.jb-chip--tag) */

/* Selected work: .pf-card */
.work { padding: var(--jb-s-20); margin-block-start: var(--jb-s-16); }
.work:first-of-type { margin-block-start: 0; }
.work-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-s-8) var(--jb-s-12); }
.work-head .jb-pill { margin: 0; min-block-size: 24px; }
/* a neutral status pill sits on a white card: give it the same 1px rim the product's .jb-chip--file uses */
.pf-card .jb-pill--status { box-shadow: inset 0 0 0 1px var(--jb-line); }
.work-text { margin-block-start: var(--jb-s-8); color: var(--jb-ink-2); font: var(--jb-type-callout); }
.work-list { margin-block-start: var(--jb-s-8); }
.work-list li { margin-block-start: var(--jb-s-8); }
.work-list strong { color: var(--jb-ink); }
.more { white-space: nowrap; font-weight: var(--jb-w-bold); }

/* Contact */
.email { margin-block-start: var(--jb-s-8); font: var(--jb-type-label); color: var(--jb-ink); user-select: all; }
.actions { display: flex; flex-wrap: wrap; gap: var(--jb-s-8); margin-block-start: var(--jb-s-16); }

/* Footer */
.site-footer { margin-block-start: var(--jb-s-56); padding-block: var(--jb-s-20) var(--jb-s-32); border-block-start: 1px solid var(--jb-line); }

@media (forced-colors: active) {
  body::before { display: none; }
  .jb-pill, .jb-chip { border: 1px solid CanvasText; }
}

/* ---------- Print: 1-2 pages, ink on white, no backgrounds ---------- */
@page { margin: 13mm 15mm; }

@media print {
  /* The system dark setting must not turn the page into light ink on white: re-pin the few tokens used. */
  :root:root:root {
    --jb-paper: #fff; --jb-surface: #fff; --jb-surface-2: #fff;
    --jb-ink: #000; --jb-ink-2: #111; --jb-ink-3: #222;
    --jb-violet-text: #000; --jb-line: #999;
    --jb-tint-mint: #fff; --jb-tint-mint-ink: #000; --jb-tint-lilac: #fff; --jb-tint-lilac-ink: #000;
    --pf-paper: #fff; --pf-surface: #fff; --pf-ink: #000; --pf-ink-2: #111; --pf-line: #999;
    color-scheme: light;
  }
  html, body { background: none !important; }
  body { font: 9.5pt/1.35 var(--jb-font-ui); color: #000; }
  body::before { display: none; }
  .wrap { max-inline-size: none; padding-inline: 0; }
  .skip, .site-header, .more, .actions { display: none !important; }
  a { color: #000; text-decoration: none; }
  .masthead { padding-block: 0 2pt; }
  h1 { font-size: 24pt; line-height: 1.1; }
  .headline { font-size: 12pt; line-height: 1.3; margin-block-start: 2pt; }
  .avail { margin-block-start: 4pt; }
  .meta a { padding-block: 0; }
  .meta { margin-block-start: 4pt; gap: 0 14pt; font-size: 9.5pt; color: #000; }
  section { padding-block: 8pt 0; break-inside: auto; }
  h2.pf-title { font: 800 9pt/1.2 var(--jb-font-ui); letter-spacing: .12em; text-transform: uppercase; margin-block-end: 4pt; padding-block-end: 2pt; border-block-end: 1px solid #000; break-after: avoid; }
  .pf-heading { font-size: 10.5pt; line-height: 1.3; }
  .summary, .how { font-size: 10.5pt; line-height: 1.35; font-weight: 600; }
  .how-card { padding: 0; background: none; gap: 2pt; }
  .jb-note { font-size: 8.5pt; line-height: 1.3; color: #222; }
  .jb-group { box-shadow: none; border-radius: 0; background: none; }
  .jobs .job { padding: 3pt 0; min-block-size: 0; break-inside: avoid; border-block-start: 0; gap: 0 12pt; }
  .jobs .job + .job { border-block-start: 1px solid #bbb; }
  .jb-row__title { font-size: 10.5pt; line-height: 1.3; }
  .jb-row__sub { font-size: 9pt; line-height: 1.3; color: #222; }
  .lines li, .line, .work-text { font-size: 9.5pt; line-height: 1.35; color: #000; }
  .lines li { margin-block-start: 1pt; }
  .jb-chips { gap: 3pt 4pt; }
  .jb-chip { min-block-size: 0; padding-inline: 6pt; background: none; box-shadow: none; border: 1px solid #000; color: #000; font-size: 9pt; line-height: 1.5; }
  .pf-card { border: 0; border-block-start: 1px solid #bbb; border-radius: 0; background: none; }
  .work { padding: 4pt 0 2pt; margin-block-start: 0; break-inside: avoid; }
  .work:first-of-type { border-block-start: 0; }
  .work-text, .work-list { margin-block-start: 2pt; }
  .work-head { gap: 2pt 8pt; }
  .jb-pill, .pf-card .jb-pill--status { min-block-size: 0; padding-inline: 6pt; background: none; box-shadow: none; border: 1px solid #000; color: #000; font-size: 8pt; line-height: 1.5; }
  .pf-body { font-size: 9.5pt; line-height: 1.35; color: #000; }
  .email { font-size: 9.5pt; margin-block-start: 2pt; }
  /* The preview note is for the web page; the printed or saved copy is the deliverable. */
  .site-footer { display: none; }
}