/* ══════════════════════════════════════════════════════════════
   RESUME / EXPERIENCE PAGE — page-specific styles.
   A one-off page (footer-only entry, not in the Work menu) that
   lives fully in the site system: rainbow serpentine bands from
   case-study.css, kicker anatomy from about.css, tokens from
   styles.css. The print-first sheet this replaced is archived at
   archive/resume-print-v1.html (PDF recipe in its head comment).
   ══════════════════════════════════════════════════════════════ */

/* ── Band padding: same rhythm as about.css (hero sp-7,
     content bands 40 top / 60 bottom) ── */
.exp-hero {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.exp-achievements,
.exp-experience,
.exp-closing {
  padding-top: 40px;
  padding-bottom: 60px;
}

.exp-achievements .about-kicker,
.exp-experience .about-kicker,
.exp-closing .about-kicker { margin-bottom: 16px; }
.exp-achievements .study-h2 { margin-bottom: 28px; }
.exp-experience .study-h2 { margin-bottom: 20px; }

/* ── Hero ── */
.exp-summary {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 760px;
}

/* ── Section prose width matches About's stacked column ── */
.exp-col { max-width: 820px; }

/* ⚑ THE PAGE HAS ONE PROSE MEASURE, 820px, AND THIS IS THE SECOND HALF OF IT.
   .exp-col above caps the Achievements section at 820. Experience never got a
   cap, so its job bullets ran 968px (about 115 characters a line) against the
   achievements' 820 (about 97): the widest prose on the page sat directly under
   the narrowest.
   ⚑ THE CAP GOES ON THE ARTICLE, NOT ON .exp-job-body, AND THE 1060 IS DERIVED,
   NOT PICKED: 200px date rail + 40px column gap + 820px story = 1060, so the
   grid's 1fr story column resolves to exactly the page measure. Capping the body
   directly also gets 820, but it leaves the article at full width and the job
   divider rules (border-top below) then overhang the text they separate by
   148px. The rule must end where the story ends. Change 200 or 40 and this
   number has to move with them. */
.exp-job { max-width: 1060px; }

/* The section's H2 takes the same 1060 so Experience has ONE right edge: the
   heading, every job divider, and every bullet all stop at 1060 from the band's
   left. This mirrors Achievements, where .exp-col caps the H2 and its list
   together at 820. Measured free and at 1060 the heading wraps to two lines
   either way, so the alignment is bought for nothing. */
.exp-experience .study-h2 { max-width: 1060px; }

/* ══ THE PAGE'S ONE COLUMN: 1060px ═══════════════════════════════════════
   ⚑ 2026-09-04, Daniel: the page read "centered, then left with a big gap on
   the right, then full, then left-leaning again". The cause was FOUR content
   widths sharing one left edge: hero 760 centered, achievements 820,
   experience 1060, closing 820. The right edge moved three times.
   Everything below settles on Experience's 1060, which is not a new number:
   it is 200px date rail + 40px gap + the 820px prose measure, so the jobs are
   untouched and every other section is brought to them.
   ⚑ TWO COLUMNS ARE WHAT MAKE 1060 READABLE. 1060 of running prose is about
   125 characters a line. Split at 510 + 40 + 510 it is about 62, inside the
   45 to 75 band, and BETTER than the 820 single column's 102. Measured 2026-08: the
   four achievements ran 5/4/6/3 lines at 510 against 3/2/4/2 at 820, which is
   the same total height. The width is bought for nothing.
   ⚑ RE-MEASURED 2026-09-11, after Transfer & Pay and Banking GPS were added:
   SIX items now, 4/5/8 lines left and 6/5/3 right, columns 477px and 397px at
   1440 and 1280. The 62-character measure this rule exists to buy is unchanged,
   which is the part that matters; the line counts above are history. */

/* Achievements: two columns, and they FLOW (as of 2026-09-11, 1/2/3 left and
   4/5/6 right; it was 1 and 2 against 3 and 4 when there were four bullets)
   rather than sitting in grid rows. Column flow is what keeps the two stacks
   near even as the list grows; a fixed grid would align row tops and leave a
   hole under the shortest bullet. break-inside keeps a bullet whole.
   ⚑ DO NOT HARD-CODE THE SPLIT: the whole point is that adding a bullet
   re-flows instead of stranding one. */
.exp-achievements .exp-col { max-width: 1060px; }
.exp-achievements .exp-list {
  columns: 2;
  column-gap: 40px;
}
.exp-achievements .exp-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* Closing: the two reference blocks side by side on the same 1060. */
.exp-closing-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1060px;
}

/* Side by side, the 56px that used to SEPARATE these two stacked blocks
   becomes a 56px drop on the second column and the two kickers stop aligning.
   Zero it in the grid only; the 860 collapse below restores the stack. */
.exp-closing-cols .exp-section + .exp-section { margin-top: 0; }

/* THE BOOKEND: the closing line and the buttons centre exactly where the hero
   centres, and that is the BAND's axis, not the 1060 column's.
   ⚑ DO NOT CAP THESE AT 1060. I tried it first and it centres them at 646
   while the hero sits at 720, inside a rainbow frame that is symmetric about
   720: a 74px offset that reads as a mistake rather than a choice. The rule
   the page now follows is that ANYTHING CENTRED CENTRES ON THE FRAME, and
   anything left-aligned shares the 116 left edge and the 1060 width. */
.exp-closing .exp-cta-lead { text-align: center; }
.exp-closing .about-cta { justify-content: center; }

/* ⚑ Below the 860 collapse every one of these caps is inert (max-width only
   narrows) EXCEPT the two column rules, which must go back to one column or
   the measure halves again. */
@media (max-width: 860px) {
  .exp-achievements .exp-list { columns: 1; }
  .exp-closing-cols { grid-template-columns: 1fr; gap: 0; }
  .exp-closing-cols .exp-section + .exp-section { margin-top: 56px; }
}

/* ── Achievements: quiet ink dots; the colored dash stays
     unique to the section kickers ── */
.exp-list { list-style: none; margin: 0; padding: 0; }
.exp-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
}
.exp-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* ── Jobs: dates rail left, story right ── */
.exp-job {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 40px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.exp-job:first-of-type { border-top: none; padding-top: 8px; }

.exp-job-when {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: .01em;
  color: var(--text-muted);
  line-height: 1.7;
  padding-top: 5px;
}
.exp-job-where {
  display: block;
  font-weight: 300;
  letter-spacing: 0.5px;
  text-transform: none;
  margin-top: 2px;
}

.exp-job-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 10px;
}
.exp-job-co {
  font-weight: 300;
  font-style: italic;
  color: var(--text-secondary);
}

/* Promotion line — a two-step riser in the ribbon colors, then the
   move stated plainly. Sits between the title and the bullets so the
   first thing read after the current title is how he got to it. */
.exp-promo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.6875rem;
  letter-spacing: .01em;
  color: var(--text-muted);
  margin: -4px 0 14px;
}
.exp-riser {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 12px;
}
.exp-riser i { display: block; width: 5px; border-radius: 1px; }
.exp-riser i:nth-child(1) { height: 6px;  background: var(--rust-4, #E7732D); }
.exp-riser i:nth-child(2) { height: 12px; background: var(--crimson-4, #AD2831); }

.exp-job .exp-list li { margin-bottom: 10px; }
.exp-job p {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── Tools / methods rows ── */
.exp-stack-row { max-width: 820px; margin-top: 12px; }
.exp-stack-row b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: .01em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.exp-stack-row span { color: var(--text-secondary); line-height: 1.65; }

/* ── Placeholders: cannot ship while amber ── */
.todo {
  background: rgba(239, 175, 33, 0.4);
  border-radius: 2px;
  padding: 0 3px;
  font-weight: 500;
  font-style: normal;
}

/* ── Sections stacked inside shared bands ── */
.exp-section + .exp-section { margin-top: 56px; }

/* ── Closing CTA reuses .about-btn from about.css ── */
.exp-cta-lead { margin-top: 56px; }

@media (max-width: 860px) {
  .exp-job {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 24px 0;
  }
  .exp-job-when { padding-top: 0; }
}