/* ──────────────────────────────────────────────────────────────────────────
   paperlike — Career.

   `#career` opens the folio (more.css), the same plain surface the pages behind
   More use, so the masthead, the scroller and the fade are all theirs. This file
   is only what goes ON it: a nav of anchors, a sideways timeline of roles,
   the principles, and the case studies. Kept out of more.css for the reason more.css is kept out of
   styles.css — it adds to the sheet and never touches it. Its data is
   content/career.json and its markup is renderCareer() in js/more.js.

   ⚠️ The face has no `%` or `~`. The copy says "percent" and "about" — check
   that when editing content/career.json, or one character of a sentence is set
   in the fallback font.
   ────────────────────────────────────────────────────────────────────────── */

/* ══ The resume button ═════════════════════════════════════════════════════
   Inline with the page title, far right: the header becomes a two-column grid
   (title | button) and the meta line spans under both. A hairline pill, the
   nav row's own type — a control on the paper, not a slab of colour.
   ⚠️ The label's trailing letter-space is taken back the way `.links a > span`
   does it, or the word sits a fifth of an em left of centre in its pill. */
.folio-head--action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
}
.folio-head--action .page-meta { grid-column: 1 / -1; }
/* Career has no meta line any more; an empty one would still hold its margin. */
.folio-head .page-meta:empty { display: none; }

.resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  padding: 0.7em 1.2em 0.7em 1.05em;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.resume-btn > span { margin-right: -0.2em; }
.resume-btn:hover,
.resume-btn:focus-visible {
  border-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  outline: none;
}
.resume-btn:focus-visible { box-shadow: 0 0 0 2px var(--ink-soft); }

/* ══ The page ══════════════════════════════════════════════════════════════
   Three columns: the nav in the left gutter, the measure, and a right gutter
   the same width so the measure stays centred. Only the timeline uses the
   right gutter. The folio's own measure padding is taken off
   (`.folio-scroll--wide`, set by js/more.js) so this grid can span the
   folio's whole width.

   ⚠️ `--inset` is the gutter's width for DESCENDANTS, written in `cqw` (the
   `.career` container). A `%` would resolve against whichever element uses
   the variable, and the timeline uses it from inside the measure column. The
   grid's own tracks use `%`, which here means the same width. */
.folio-scroll--wide { padding-inline: 0; }

.career {
  --measure: 960px;
  --nav-w: 9.5rem;
  --nav-gap: clamp(20px, 3vw, 40px);
  --nav-space: calc(var(--nav-w) + var(--nav-gap));
  --inset: max(var(--nav-space), calc((100cqw - var(--measure)) / 2));
  container-type: inline-size;
  display: grid;
  grid-template-columns:
    [gutter-start] max(var(--nav-space), calc((100% - var(--measure)) / 2))
    [main-start] minmax(0, 1fr)
    [main-end] max(var(--nav-space), calc((100% - var(--measure)) / 2));
}
.career > * { grid-column: main; }

/* ══ The nav ═══════════════════════════════════════════════════════════════
   Page anchors, standing in the left gutter against the measure and staying
   there as the page scrolls. The current section gets the ink and a longer
   tick; the ticks are the role notes' hairline. */
.career-nav {
  grid-column: gutter-start;
  grid-row: 1 / span 4;
  justify-self: end;
  align-self: start;
  position: sticky;
  top: 6px;
  width: var(--nav-w);
  margin-right: var(--nav-gap);
}
.career-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.career-nav button {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px 0 7px 22px;
  border: 0;
  background: none;
  font: inherit;
  font-size: clamp(0.56rem, 0.9vw, 0.68rem);
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 200ms ease;
}
.career-nav button::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--rule);
  transition: width 240ms cubic-bezier(0.2, 0.6, 0.2, 1), background-color 200ms ease;
}
.career-nav button:hover,
.career-nav button:focus-visible,
.career-nav button.is-current { color: var(--ink); outline: none; }
.career-nav button.is-current::before { width: 14px; background: var(--ink); }
.career-nav button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ══ The sections ══════════════════════════════════════════════════════════ */
.career-sec + .career-sec {
  margin-top: clamp(20px, 5vh, 60px);
  padding-top: clamp(26px, 5vh, 52px);
  border-top: 1px solid var(--rule);
}

.career-label {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-weight: 400;
  font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  /* One weight in the face: heavier is a stroke, as on the headings. */
  -webkit-text-stroke: 0.035em currentColor;
}

/* ══ The timeline ══════════════════════════════════════════════════════════
   Sideways, newest first. Each role is a column: the period, then the rail
   with the role's dot on it, then the role. The rail is drawn per role
   (`::before`, from this dot to the next one) so it stays continuous however
   wide the gap, and the last role's stops at its dot.

   `.tl` reaches out of the measure to the folio's right edge (the `--inset`
   margin) and fades to nothing across that gutter; js/more.js blurs each role
   by how far it has crossed the edge (`--out`). The roles' right padding is
   the same gutter, so the last one can be scrolled all the way into the
   measure. Under 1000px there is no gutter, and a 48px fade at the edge of the
   column stands in for it.

   The page's scroll drives it sideways — see "Career: the timeline's lock"
   in js/more.js. */
.tl {
  --fade-r: max(var(--inset), 48px);
  --fade-l: 0px;
  margin-right: calc(-1 * var(--inset));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.tl.is-scrolled { --fade-l: 32px; }

.tl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;          /* no swipe-back at the first role */
  scrollbar-width: none;
  outline: none;
}
.tl-scroll::-webkit-scrollbar { display: none; }

/* Touch only: under a finger the timeline settles on a role. Not with a
   wheel — the lock steps `scrollLeft` a delta at a time, and a mandatory
   snap would pull every step back to the role it started from. */
@media (hover: none) {
  /* The snap point stands in by the left fade, so a settled role is clear of
     it and the one before shows its faded tail there. */
  .tl-scroll { scroll-snap-type: x mandatory; scroll-padding-inline-start: 24px; }
  .tl.is-scrolled { --fade-l: 24px; }
  .role { scroll-snap-align: start; }
}

.roles {
  --card-w: clamp(250px, 24vw, 330px);
  --gap: clamp(28px, 3.4vw, 52px);        /* role to role */
  --row: clamp(1.35rem, 2vw, 1.65rem);
  --dot: 9px;
  --rail: calc(var(--row) + 14px);        /* the rail's height from the top */
  list-style: none;
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0 var(--fade-r) 0 0;
}

.role {
  --out: 0;
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: var(--card-w);
  padding-right: var(--gap);
}

.role::before {                            /* the rail, on to the next dot */
  content: '';
  position: absolute;
  left: calc(var(--dot) / 2);
  right: calc(-1 * var(--dot) / 2);
  top: var(--rail);
  height: 1px;
  background: var(--rule);
}
.role:last-child::before { display: none; }

.role::after {                             /* the dot */
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--rail) - var(--dot) / 2 + 0.5px);
  width: var(--dot);
  height: var(--dot);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  background: var(--paper-mid);
}
.role--now::after {
  border-color: var(--ink);
  background: var(--ink);
}

/* ⚠️ On the children, not the role: the role carries the `settle` entrance,
   whose fill holds its opacity at 1. */
.role > *,
.role::after {
  opacity: calc(1 - var(--out) * 0.6);
  filter: blur(calc(var(--out) * 5px));
}

.role-period {
  margin: 0 0 28px;
  line-height: var(--row);
  font-size: clamp(0.56rem, 0.9vw, 0.68rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.role-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.8rem, 1.3vw, 1rem);
  line-height: var(--row);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.035em currentColor;
}

.role-company {
  margin: 2px 0 0;
  font-size: clamp(0.56rem, 0.9vw, 0.68rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The one place this page is set in sentence case, like the prose. */
.role-summary,
.principles-intro,
.trait-text {
  margin: 0;
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
  line-height: 1.8;
  color: var(--ink);
}
.role-summary { margin-top: clamp(12px, 1.8vh, 18px); }

.role-notes {
  list-style: none;
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: clamp(0.84rem, 1vw, 0.94rem);
  line-height: 1.7;
}
.role-notes li {
  position: relative;
  padding-left: 22px;
}
.role-notes li + li { margin-top: 6px; }
.role-notes li::before {                   /* a tick, not a bullet: the page's marks are hairlines */
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--rule);
}

/* ══ The principles ════════════════════════════════════════════════════════ */
/* A struck "UX" over a display "A -> X": live type, so it themes and stays
   selectable. ⚠️ The arrow is drawn — the face has no arrow glyph — and its
   stroke is in viewBox units, so it thickens and thins with the letters. */
.ax { display: block; }
.ax-ux {
  display: inline-block;
  font-size: clamp(0.9rem, 1.6vw, 1.25rem);
  letter-spacing: 0.2em;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--ink-soft);
}
.ax-mark {
  display: flex;
  align-items: center;
  gap: 0.28em;
  margin-top: 0.1em;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 1;
}
.ax-letter {
  font-family: var(--font-display);
  -webkit-text-stroke: 0.05em currentColor;
}
.ax-arrow {
  width: 1.05em;
  height: 0.42em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principles-headline {
  margin: clamp(20px, 3.4vh, 34px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.035em currentColor;
}
.principles-intro { margin-top: clamp(12px, 2vh, 20px); max-width: 64ch; }
.principles-lead {
  margin: clamp(22px, 3.6vh, 34px) 0 clamp(14px, 2vh, 20px);
  font-size: clamp(0.56rem, 0.9vw, 0.68rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Six traits, ruled the way the list pages are: a hairline above each. */
.traits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(22px, 3.4vw, 52px);
}
@media (max-width: 900px) { .traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .traits { grid-template-columns: minmax(0, 1fr); } }

.trait {
  border-top: 1px solid var(--rule);
  padding: clamp(16px, 2.4vh, 22px) 0 clamp(20px, 3vh, 30px);
}
.trait .ico { font-size: 1.15rem; color: var(--ink); }
.trait-title {
  margin: 10px 0 6px;
  font-weight: 400;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  line-height: 1.6;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.trait-text { color: var(--ink-soft); font-size: clamp(0.84rem, 1vw, 0.94rem); line-height: 1.7; }

/* ══ The case studies ══════════════════════════════════════════════════════
   White cards (`--frame`, 20px corners, the loose frames' card), a plate and
   a caption. Corners are concentric: the plate's radius is the card's less its
   padding. A case with no `image` in content/career.json gets the placeholder
   plate; one with a `url` is a link. */
.cases {
  --case-r: 20px;
  --case-pad: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 900px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cases { grid-template-columns: minmax(0, 1fr); } }

.case {
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: var(--case-pad) var(--case-pad) 14px;
  border-radius: var(--case-r);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
a.case:hover,
a.case:focus-visible { transform: translateY(-2px); outline: none; }
a.case:focus-visible { box-shadow: 0 0 0 2px var(--ink-soft); }

.case-img {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: max(0px, calc(var(--case-r) - var(--case-pad)));
}
.case-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-img--empty {
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-soft);
}
.case-img--empty .ico { width: 1.75rem; height: 1.75rem; }
/* No case studies listed yet: one card across the measure, the empty plate's
   icon over a "Coming soon" caption. */
.cases-soon {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  min-height: clamp(160px, 22vw, 240px);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.cases-soon .ico { width: 1.75rem; height: 1.75rem; }
.cases-soon > span { margin-right: -0.15em; }

/* The photos index's "Coming soon" badge (`.pset-badge`), inset to match. */
.case-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: clamp(0.54rem, 0.86vw, 0.66rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
}

.case-title,
.case-meta {
  display: block;
  padding-inline: 6px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.case-title {
  margin-top: 14px;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  line-height: 1.5;
}
.case-meta {
  margin-top: 4px;
  font-size: clamp(0.52rem, 0.8vw, 0.62rem);
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .folio-body.is-in .role,
  .folio-body.is-in .trait,
  .folio-body.is-in .case-item {
    animation: settle 520ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
    animation-delay: calc(min(var(--i), 18) * 45ms);
  }
}

/* ══ Narrow screens ════════════════════════════════════════════════════════
   No room for a gutter: the nav becomes a row under the title, scrolling with
   the page, and the measure takes the folio's whole width. */
@media (max-width: 1000px) {
  .career { --nav-space: 0px; }
  .career-nav {
    grid-column: main;
    grid-row: auto;
    justify-self: stretch;
    position: static;
    width: auto;
    margin: 0 0 clamp(18px, 3vh, 28px);
  }
  .career-nav ul { display: flex; flex-wrap: wrap; column-gap: 22px; }
  .career-nav button { width: auto; }
}
@media (max-width: 640px) {
  .roles { --card-w: 72cqw; }
}