/* Fast route: projects. Same visual system as /resume/ (duplicated so each page stands alone).
   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. */

:root {
  --measure: 70rem;
}

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 { 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: var(--jb-s-8) 0 0;
  font: var(--jb-type-display);
  color: var(--jb-ink);
}
@media (min-width: 600px) {
  h1 { font: var(--jb-type-display-xl); }
}
.lede { margin-block-start: var(--jb-s-12); max-inline-size: 40rem; font: var(--jb-type-body); color: var(--jb-ink-2); }

.legend { margin-block-start: var(--jb-s-12); max-inline-size: 40rem; }
.legend summary { display: inline-flex; align-items: center; cursor: pointer; }
.legend .jb-card { margin-block-start: var(--jb-s-8); padding: var(--jb-s-16); }
.legend dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--jb-s-8) var(--jb-s-16);
  margin: 0;
  font: var(--jb-type-callout);
}
.legend dt { font-weight: var(--jb-w-bold); }
.legend dd { margin: 0; color: var(--jb-ink-2); }
@media (max-width: 30em) {
  .legend dl { grid-template-columns: 1fr; gap: 0; }
  .legend dd { margin-block-end: var(--jb-s-8); }
}

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

/* Project cards: .pf-card, text on the left and the evidence (screens or rows) on the right from 56rem. */
.proj { padding: var(--jb-s-20); display: grid; gap: var(--jb-s-24); scroll-margin-block-start: var(--jb-s-16); }
@media (min-width: 56rem) {
  .proj { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--jb-s-32); padding: var(--jb-s-32); }
}
.proj-intro { display: grid; align-content: start; gap: var(--jb-s-12); min-inline-size: 0; }
@media (min-width: 56rem) {
  .proj-intro { position: sticky; inset-block-start: var(--jb-s-16); align-self: start; }
}
.proj-evidence { display: grid; align-content: start; gap: var(--jb-s-16); min-inline-size: 0; }
.proj + .proj { margin-block-start: var(--jb-s-24); }
.proj-text { font: var(--jb-type-body); color: var(--jb-ink-2); }
.status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-s-8); }
.status .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); }

/* Rows inside a card: the real .jb-group of .jb-rows */
.rows .jb-row { align-items: flex-start; padding-block: var(--jb-s-16); }
.rows .jb-row .jb-pill { flex: none; margin: 0; min-block-size: 24px; }
.rows .jb-row__sub { margin-block-start: var(--jb-s-4); }
.rows .jb-row__sub { font: var(--jb-type-callout); color: var(--jb-ink-2); }
.rows .jb-row__title { font: var(--jb-type-label); }
@media (max-width: 30em) {
  .rows .jb-row { flex-wrap: wrap; gap: var(--jb-s-8) var(--jb-s-12); }
  .rows .jb-row__text { flex: 1 1 100%; }
}

/* Screens */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--jb-s-16); }
.shot { margin: 0; display: grid; gap: var(--jb-s-8); align-content: start; min-inline-size: 0; }
.shot a { display: block; border-radius: var(--jb-r-20); box-shadow: inset 0 0 0 1px var(--jb-line); overflow: clip; line-height: 0; }
.shot img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--jb-r-20); }
.game .shot { margin: 0 0 var(--jb-s-4); }
.game .shot img { border-radius: var(--jb-r-20); box-shadow: 0 0 0 1px var(--jb-line); }
.shots-note { max-inline-size: 46rem; }
.shot--one { max-inline-size: 32rem; }
.cap-src { display: block; color: var(--jb-ink-3); }
.nb { white-space: nowrap; }

/* Code excerpt */
.excerpt summary { display: inline-flex; align-items: center; cursor: pointer; }
.excerpt .jb-card { margin-block-start: var(--jb-s-8); padding: var(--jb-s-16); min-inline-size: 0; }
.code { margin: 0; overflow-x: auto; max-inline-size: 100%; font: var(--jb-type-mono); color: var(--jb-ink); white-space: pre; }
.code code { font: inherit; }

/* Games */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: var(--jb-s-24); }
.game { display: grid; align-content: start; gap: var(--jb-s-12); padding: var(--jb-s-20); min-inline-size: 0; scroll-margin-block-start: var(--jb-s-16); }

/* 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 { border: 1px solid CanvasText; }
}

/* Print (secondary): readable, ink on white, no backgrounds */
@media print {
  :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: 10pt/1.4 var(--jb-font-ui); }
  body::before { display: none; }
  .wrap { max-inline-size: none; padding-inline: 0; }
  .skip, .site-header, .legend, .excerpt, .actions, .screen-only { display: none !important; }
  a { color: #000; text-decoration: none; }
  .proj, .game { display: block; padding: 6pt 0; break-inside: auto; border: 0; border-block-start: 1px solid #999; border-radius: 0; background: none; }
  .proj-intro, .proj-evidence { gap: 4pt; position: static; }
  .proj-evidence { margin-block-start: 4pt; }
  .games { display: block; }
  .game { margin-block-end: 4pt; break-inside: avoid; }
  .shots { display: flex; flex-wrap: wrap; gap: 6pt; }
  .shot { flex: 0 0 31%; margin: 0; break-inside: avoid; }
  .shot a { display: block; box-shadow: none; border-radius: 0; }
  .shot img, .game .shot img { max-inline-size: 100%; border-radius: 0; box-shadow: none; }
  .game .shot { max-inline-size: 50%; }
  .shots-note, .jb-note, .pf-caption { font-size: 8.5pt; line-height: 1.3; color: #222; }
  .proj-text, .rows .jb-row__sub, .pf-body { font-size: 9.5pt; line-height: 1.35; color: #000; }
  .rows .jb-row { padding-block: 3pt; min-block-size: 0; break-inside: avoid; }
  .rows .jb-row__title { font-size: 10pt; line-height: 1.3; }
  h1 { font-size: 22pt; line-height: 1.1; margin-block-start: 2pt; }
  .masthead { padding-block: 0 4pt; }
  section { padding-block: 8pt 0; }
  h2.pf-title { font-size: 13pt; line-height: 1.2; margin-block-end: 4pt; break-after: avoid; }
  .pf-heading { font-size: 11pt; line-height: 1.3; }
  .jb-group { box-shadow: none; border-radius: 0; background: none; }
  .jb-pill, .pf-card .jb-pill--status { background: none; box-shadow: none; border: 1px solid #000; color: #000; min-block-size: 0; font-size: 8pt; }
  .jb-card--quiet { background: none; }
  .code { white-space: pre-wrap; }
}