/* ============================================================
   SLIDE — FIELD NOTES (Act I calibration: humility / not doctrine)
   Two-column light slide. Left: title + body + tags + footer phrase.
   Right: a tasteful maintainer-desk collage (repo cards, CI sticker,
   terminal snippet) on a faint dotted-grid notebook surface.
   ============================================================ */
.s-fieldnotes .body {
  position: absolute;
  inset: 56px 0 56px 0;
  padding: 70px var(--pad-x);
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 80px;
  align-items: stretch;
}
.s-fieldnotes .info-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.s-fieldnotes .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--type-eyebrow);
  color: var(--accent-ink);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.s-fieldnotes .display {
  font-size: 92px;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 36px 0;
  text-wrap: balance;
}
.s-fieldnotes .display .accent { color: var(--accent); }
.s-fieldnotes .body-copy {
  font-size: 28px;
  line-height: 1.45;
  color: var(--fg-dim);
  margin: 0 0 18px 0;
  max-width: 820px;
}
.s-fieldnotes .body-copy strong { color: var(--fg); font-weight: 600; }
.s-fieldnotes .body-copy + .body-copy { margin-top: 0; }

.s-fieldnotes .tags-row {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.s-fieldnotes .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  background: #FBF9F2;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: 0.03em;
}
.s-fieldnotes .tag .tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.s-fieldnotes .tag:nth-child(2) .tag-dot { background: var(--accent-2); }
.s-fieldnotes .tag:nth-child(3) .tag-dot { background: var(--cyan-ink); }

.s-fieldnotes .footer-phrase {
  margin-top: auto;
  padding-top: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  color: var(--fg);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
}
.s-fieldnotes .footer-phrase .step { color: var(--fg); font-weight: 700; }
.s-fieldnotes .footer-phrase .arrow {
  color: var(--accent);
  font-weight: 600;
  font-size: 24px;
  margin: 0 2px;
}
.s-fieldnotes .footer-phrase .marker {
  color: var(--accent-ink);
  font-size: 20px;
  letter-spacing: 0.18em;
  margin-right: 6px;
}

/* ---- Collage = a notebook page ----
   Ruled-paper background (warm cream + horizontal lines + faint dot grid)
   with a classic red margin rule down the left edge. The cards sit on this
   page as pinned notes; handwritten annotations connect them. */
.s-fieldnotes .collage {
  position: relative;
  min-width: 0;
  background-color: #FBF7EA;
  background-image:
    /* horizontal ruled lines */
    linear-gradient(rgba(10, 21, 84, 0.07) 1px, transparent 1px),
    /* faint dot grid as a subtle texture */
    radial-gradient(circle, rgba(10, 21, 84, 0.05) 1px, transparent 1.2px);
  background-size: 100% 36px, 28px 28px;
  background-position: 0 28px, 14px 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
/* Classic notebook red margin rule */
.s-fieldnotes .collage::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 56px;
  width: 1px;
  background: rgba(240, 42, 90, 0.32);
  pointer-events: none;
}
/* Heading inked at the top, JetBrains Mono — matches left-column eyebrow */
.s-fieldnotes .collage::before {
  content: "// evidence · from real projects";
  position: absolute;
  top: 22px; left: 72px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  z-index: 4;
}

.s-fieldnotes .card {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid var(--line-strong);
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(10, 21, 84, 0.10);
  font-family: 'JetBrains Mono', monospace;
  z-index: 2;
}
/* Push-pin on each repo card — sells the "pinned to a notebook" idea */
.s-fieldnotes .card.repo::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FF5C7A 0%, #D11440 55%, #8A0E2B 100%);
  box-shadow:
    0 2px 4px rgba(10, 21, 84, 0.35),
    inset -1px -1px 1px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
/* Vary pin colors slightly across cards for a "different days, different notes" feel */
.s-fieldnotes .card.repo-2::before {
  background: radial-gradient(circle at 35% 35%, #FFA15C 0%, #D26309 55%, #843E04 100%);
}
.s-fieldnotes .card.repo-3::before {
  background: radial-gradient(circle at 35% 35%, #88D9E5 0%, #1B98A8 55%, #0C5965 100%);
}
.s-fieldnotes .card.repo-4::before {
  background: radial-gradient(circle at 35% 35%, #FF5C7A 0%, #D11440 55%, #8A0E2B 100%);
}

/* Repo card — header row + meta row */
.s-fieldnotes .card.repo .repo-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.s-fieldnotes .card.repo .repo-icon {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--fg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.s-fieldnotes .card.repo .repo-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-fieldnotes .card.repo .repo-org {
  font-size: 13px;
  color: var(--fg-mute);
  margin-top: 2px;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-fieldnotes .card.repo .repo-head > div {
  min-width: 0;
  flex: 1;
}
.s-fieldnotes .card.repo .repo-meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--fg-mute);
}
.s-fieldnotes .card.repo .lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.s-fieldnotes .card.repo .lang-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.s-fieldnotes .card.repo .lang-dot.java { background: #B07219; }
.s-fieldnotes .card.repo .lang-dot.go   { background: #00ADD8; }
.s-fieldnotes .card.repo .lang-dot.js   { background: #D9B81E; border: 1px solid rgba(0,0,0,0.1); }
.s-fieldnotes .card.repo .star { color: var(--accent); }
.s-fieldnotes .card.repo .pr-icon { color: #2A8E47; font-weight: 700; }
.s-fieldnotes .card.repo .issue-icon { color: var(--accent-2-ink); font-weight: 700; }

/* Positions — four real projects pinned in a 2×2 arrangement,
   with a console card below tying back to the "real CI pain" note.
   Slight rotations keep the "scattered notes" feel without chaos. */
.s-fieldnotes .card.repo-1 {
  top: 138px;
  left: 84px;
  width: 254px;
  transform: rotate(-2deg);
}
.s-fieldnotes .card.repo-2 {
  top: 124px;
  right: 36px;
  width: 254px;
  transform: rotate(1.8deg);
}
.s-fieldnotes .card.repo-3 {
  top: 316px;
  left: 96px;
  width: 254px;
  transform: rotate(1.4deg);
}
.s-fieldnotes .card.repo-4 {
  top: 304px;
  right: 30px;
  width: 254px;
  transform: rotate(-1.6deg);
}

/* CI post-it (sticky note) — small yellow square, tilted, with a hint of
   "torn from a pad" feel. Pairs with the snippet card in the bottom row. */
.s-fieldnotes .card.ci {
  bottom: 144px;
  right: 38px;
  width: 184px;
  transform: rotate(3deg);
  text-align: center;
  padding: 14px 16px;
  background: #FFF4C2;
  border-color: rgba(176, 114, 25, 0.45);
  box-shadow:
    0 8px 18px rgba(10, 21, 84, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
/* Tape strip across the top of the post-it */
.s-fieldnotes .card.ci::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 70px;
  height: 18px;
  background: rgba(255, 235, 130, 0.7);
  border: 1px solid rgba(176, 114, 25, 0.30);
  box-shadow: 0 1px 2px rgba(10, 21, 84, 0.10);
  z-index: 3;
}
.s-fieldnotes .card.ci .ci-label {
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.s-fieldnotes .card.ci .ci-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.s-fieldnotes .card.ci .ci-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: 'JetBrains Mono', monospace;
}
.s-fieldnotes .card.ci .ci-pill.pass {
  background: rgba(34, 134, 58, 0.18);
  color: #1E6427;
  border: 1px solid rgba(34, 134, 58, 0.40);
}
.s-fieldnotes .card.ci .ci-pill.warn {
  background: rgba(225, 99, 9, 0.16);
  color: var(--accent-2-ink);
  border: 1px solid rgba(225, 99, 9, 0.42);
}
.s-fieldnotes .card.ci .ci-pill .glyph {
  font-size: 11px;
  font-weight: 900;
}

/* Console card — light cream surface; tied to "real CI pain" annotation above */
.s-fieldnotes .card.snippet {
  bottom: 122px;
  left: 84px;
  width: 360px;
  transform: rotate(-1deg);
  padding: 14px 18px;
  background: #FBF7EA;
  box-shadow: 0 10px 24px rgba(10, 21, 84, 0.12);
}
.s-fieldnotes .card.snippet::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFA15C 0%, #D26309 55%, #843E04 100%);
  box-shadow:
    0 2px 4px rgba(10, 21, 84, 0.35),
    inset -1px -1px 1px rgba(0, 0, 0, 0.18);
  z-index: 3;
}
.s-fieldnotes .card.snippet .snip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.s-fieldnotes .card.snippet .snip-label {
  font-size: 13px;
  color: var(--fg-mute);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.s-fieldnotes .card.snippet .snip-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  text-transform: uppercase;
}
.s-fieldnotes .card.snippet .snip-row {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-fieldnotes .card.snippet .prompt { color: var(--accent); margin-right: 4px; }
.s-fieldnotes .card.snippet .cmd { color: var(--fg); }
.s-fieldnotes .card.snippet .flag { color: var(--cyan-ink); }
.s-fieldnotes .card.snippet .arg { color: var(--accent-2-ink); }
.s-fieldnotes .card.snippet .out { color: var(--fg-dim); padding-left: 16px; }
.s-fieldnotes .card.snippet .out .fail { color: #B81742; font-weight: 700; }
.s-fieldnotes .card.snippet .out .ok { color: #1E6427; font-weight: 700; }
.s-fieldnotes .card.snippet .out .warn { color: var(--accent-2-ink); font-weight: 700; }

/* Handwritten field-notebook annotations — Caveat is a casual script that
   stays legible at 28+ px on a conference-room screen. */
.s-fieldnotes .annotation {
  position: absolute;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  color: var(--accent-ink);
  letter-spacing: 0.005em;
  z-index: 3;
  white-space: nowrap;
  line-height: 1.05;
}
.s-fieldnotes .annotation.a-top {
  top: 72px;
  left: 296px;
  font-size: 32px;
  transform: rotate(-2.5deg);
}
.s-fieldnotes .annotation.a-mid {
  top: 472px;
  left: 96px;
  font-size: 34px;
  color: #8A2B05;            /* darker rust ink — stronger than accent-2-ink on cream */
  transform: rotate(-1.5deg);
}
.s-fieldnotes .annotation.a-bottom {
  bottom: 34px;
  right: 38px;
  font-size: 36px;
  color: var(--accent-ink);
  transform: rotate(2deg);
}
/* Subtle pencil arrow drawn off the handwritten note, for that "see this →" feel */
.s-fieldnotes .annotation .ink {
  display: inline-block;
}
.s-fieldnotes .annotation .arr {
  display: inline-block;
  font-size: 0.9em;
  color: var(--accent);
  margin-left: 6px;
  transform: translateY(2px);
}

/* Chromium's page.pdf() rasterises large-blur box-shadows as opaque
   rectangles, which made the cards look like they had hard pink
   backplates in the PDF. Drop the lift shadows in print; the card
   border + push-pin still sell the "pinned note" effect. */
@media print {
  .s-fieldnotes .card,
  .s-fieldnotes .card.snippet { box-shadow: none; }
  .s-fieldnotes .card.ci { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); }
}