/* =====================================================================
   Work experience: employers with "stints" (timeline layout)
   Section-only CSS. Page-level styles (Jost @font-face, h2, body) come
   from the site's existing Tailwind build.

   Colours map to the Tailwind v4 theme variables already emitted by
   tailwind.css (--color-paper-*, --color-ochre-*). Hex fallbacks let
   the file work standalone.

   Dark mode follows the site convention: a `dark` class on an ancestor
   (the site toggles it on <html id="main">).
   ===================================================================== */

.work {
  /* --- semantic roles (light) ------------------------------------- */
  --stints-ink:      var(--color-paper-900, #2a231c); /* employer + role names        */
  --stints-text:     var(--color-paper-700, #5c4e3e); /* body copy, meta line          */
  --stints-muted:    var(--color-paper-600, #7c6a55); /* dates, durations, gap notes; 4.6:1 on paper-100 */
  --stints-bg:       var(--color-paper-100, #f7f2e7); /* page bg; also fills hollow dots */
  --stints-rule:     var(--color-paper-300, #dfd2bb); /* divider between employers     */
  --stints-rail:     var(--color-paper-400, #c4b299); /* timeline line + separators    */
  --stints-now:      var(--color-ochre-600, #a06f2f); /* current-stint dot             */
  --stints-now-ink:  var(--color-ochre-700, #7f5626); /* "present" date text           */
  --stints-link:     var(--color-ochre-700, #7f5626);
  --stints-chip-bg:  var(--color-ochre-700, #7f5626); /* filled chip, as on live site  */
  --stints-chip-ink: var(--color-paper-50,  #fbf8f1); /* 6.1:1 on ochre-700            */
}

.dark .work {
  --stints-ink:      var(--color-paper-100, #f7f2e7);
  --stints-text:     var(--color-paper-300, #dfd2bb);
  --stints-muted:    var(--color-paper-400, #c4b299);
  --stints-bg:       var(--color-paper-900, #2a231c);
  --stints-rule:     var(--color-paper-800, #3e342a);
  --stints-rail:     var(--color-paper-600, #7c6a55);
  --stints-now:      var(--color-ochre-300, #e3bc6f);
  --stints-now-ink:  var(--color-ochre-300, #e3bc6f);
  --stints-link:     var(--color-ochre-300, #e3bc6f);
  --stints-chip-bg:  var(--color-ochre-300, #e3bc6f);
  --stints-chip-ink: var(--color-paper-950, #1c1714); /* ~9.9:1 on ochre-300 */
}

.work a { color: var(--stints-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.work a:hover { text-decoration-thickness: 2px; }
.work a:focus-visible { outline: 2px solid var(--stints-now); outline-offset: 3px; border-radius: 2px; }

.work .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Employer: no card. Hairline divider + space between employers.
   Mobile: stacked. >=48rem: name column (13rem) | details.
   --------------------------------------------------------------------- */
.jobs { margin-top: 1rem; }

.job {
  display: grid;
  gap: .75rem 3rem;
  padding-block: 2rem;
  border-top: 1px solid var(--stints-rule);
}
.job:first-child { border-top: 0; }

.job__head {
  align-self: start;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.job__name {
  display: flex; align-items: center; gap: .625rem;
  margin: 0;
  font-size: 1.5rem; line-height: 1.2; font-weight: 500; letter-spacing: .01em;
  color: var(--stints-ink);
}
.job__logo { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: 2px; flex: none; }

/* Total tenure: the only place the overall duration appears */
.job__tenure {
  margin: 0;
  font-size: .9375rem; color: var(--stints-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.job__body { min-width: 0; }

/* Company-level description (role-specific text goes in .stint__note) */
.job__blurb {
  margin: 0 0 1.25rem;
  font-size: 1rem; line-height: 1.6; max-width: 62ch;
  color: var(--stints-text);
}

@media (min-width: 48rem) {
  .job { grid-template-columns: 13rem 1fr; padding-block: 2.5rem; }
  .job__head { flex-direction: column; align-items: flex-start; gap: .375rem; }
  .job__tenure { padding-left: 2.375rem; } /* sit under the name, past the logo */
}

/* ---------------------------------------------------------------------
   Stints timeline (newest first)
   li::before = rail segment, li::after = node.
   --------------------------------------------------------------------- */
.stints { list-style: none; margin: 0; padding: 0; --dot: 11px; --dot-y: .5rem; }

.stint { position: relative; padding-left: 1.75rem; padding-bottom: 1rem; }
.stint:last-child { padding-bottom: 0; }

/* rail: starts at the first node, ends at the last node */
.stint::before {
  content: ""; position: absolute;
  left: calc(var(--dot) / 2 - .5px); top: 0; bottom: 0; width: 1px;
  background: var(--stints-rail);
}
.stint:first-child::before { top: var(--dot-y); }
.stint:last-child::before { bottom: auto; height: var(--dot-y); }
.stints--single .stint::before { display: none; }

/* node: hollow for past stints, filled for the current one */
.stint::after {
  content: ""; position: absolute; left: 0;
  top: calc(var(--dot-y) - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--stints-bg);
  border: 1.5px solid var(--stints-muted);
}
.stint.stint--current::after { background: var(--stints-now); border-color: var(--stints-now); }

.stint__range {
  margin: 0;
  font-size: .9375rem; line-height: 1.1rem; color: var(--stints-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stint--current .stint__range { color: var(--stints-now-ink); font-weight: 500; }

.stint__roles { margin-top: .25rem; }
.role {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .5rem;
  line-height: 1.5;
}
.role__title { font-size: 1rem; font-weight: 500; color: var(--stints-ink); }
/* only rendered when the employer has more than one role in total */
.role__dur { font-size: .875rem; color: var(--stints-muted); font-variant-numeric: tabular-nums; }

.stint__note {
  margin: .125rem 0 0;
  font-size: .9375rem; line-height: 1.55; max-width: 58ch;
  color: var(--stints-text);
}

@media (min-width: 40rem) {
  .stints { --dot-y: .75rem; }
  .stint { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: 1rem; }
  .stint__range { line-height: 1.5rem; }
  .stint__roles { margin-top: 0; }
}

/* ---------------------------------------------------------------------
   Metadata: one plain line (focus · languages · cloud) + one tag row
   --------------------------------------------------------------------- */
.job__meta { margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--stints-text); }
.job__meta span + span::before { content: "·"; margin-inline: .5rem; color: var(--stints-rail); }

.job__stack {
  list-style: none; margin: .625rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .375rem;
}
/* Filled chips, matching the live site's brown tags */
.job__stack li {
  font-size: .6875rem; line-height: 1.25rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .0625rem .5rem; border-radius: 2px;
  background: var(--stints-chip-bg); color: var(--stints-chip-ink);
}

/* fullfacing.png is a wide dark wordmark, so a light pad keeps it visible on paper-900. */
.dark .job__logo[src*="fullfacing"] {
  background: var(--color-paper-50, #fbf8f1);
  padding: 2px;
  box-sizing: border-box;
}