/* Résumé — the work history set in the visitor's art direction.
 *
 * base.css supplies the tokens and chrome (theme toggle, name mark, footer, reveals); the look's
 * stylesheet (styles/directions/<id>.css) supplies the palette and type. Everything here uses the
 * .cv-* namespace, which no direction restyles, so a look's landing layout never leaks in.
 *
 * Its own layer, declared after base.css's engine/base/utilities, so it wins on order alone.
 * Sizes go through the ⌘⇧D multipliers (--u-*), as everywhere else on the site. */
@layer resume {

.cv {
  --cv-pad: calc(30px * var(--u-space));
  --cv-co-size: calc(clamp(26px, 2.5vw, 38px) * var(--u-type));
  --cv-co-lh: 1.1;
  --node-y: calc(var(--cv-pad) + var(--cv-co-size) * var(--cv-co-lh) / 2);
  --cv-cols: 8.75rem 44px minmax(0, 5fr) minmax(0, 7fr);
  max-width: calc(1120px * var(--u-measure));
  margin: 0 auto;
  padding: calc(clamp(112px, 16vh, 168px) * var(--u-space)) var(--gutter) 0;
  font-family: var(--font-body);
  color: var(--text);
}
.cv:focus { outline: none; }
:where(.cv) :where(h1, h2, h3, h4, p, ol, ul) { margin: 0; }
:where(.cv) :where(ol, ul) { padding-left: 0; list-style: none; }

/* Small caps-style labels: the story's kicker. */
.cv-kicker {
  font: 500 calc(12px * var(--u-text)) / 1 var(--font-body);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
/* Locked to the entry grid: the contact column starts where the roles do. */
.cv-head {
  display: grid;
  grid-template-columns: var(--cv-cols);
  grid-template-areas:
    'name    name    name    name'
    'title   title   title   contact'
    'actions actions actions contact';
  padding-bottom: calc(64px * var(--u-space));
}
.cv-name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: calc(clamp(52px, 7.4vw, 112px) * var(--u-type));
  font-weight: var(--hero-weight);
  font-style: var(--hero-style);
  text-transform: var(--hero-transform);
  letter-spacing: var(--hero-tracking);
  line-height: 0.95;
  color: var(--text);
  text-wrap: balance;
}
.cv-title {
  grid-area: title;
  margin-top: calc(18px * var(--u-space));
  font-family: var(--tagline-font);
  font-style: var(--tagline-style);
  font-size: calc(clamp(20px, 2vw, 26px) * var(--u-type));
  line-height: 1.3;
  color: var(--text-2);
}
.cv-contact {
  grid-area: contact; align-self: end;
  display: grid; gap: 10px; justify-items: start;
  font: 400 calc(13px * var(--u-text)) / 1.4 var(--font-mono);
}
.cv-contact a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-enter), text-decoration-color var(--dur-fast) var(--ease-enter);
}
.cv-contact a svg { color: var(--text-3); transition: transform calc(320ms * var(--u-motion)) var(--ease-enter), color var(--dur-fast); }
.cv-contact a:hover { color: var(--text); text-decoration-color: var(--line-strong); }
.cv-contact a:hover svg { color: var(--accent); transform: translate(2px, -2px); }

.cv-actions {
  grid-area: actions;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: calc(36px * var(--u-space));
}
.cv-button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 14px; white-space: nowrap;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  font: 500 calc(14px * var(--u-text)) / 1 var(--font-body);
  color: var(--text);
  transition: background-color var(--dur-fast) var(--ease-enter), border-color var(--dur-fast) var(--ease-enter), color var(--dur-fast) var(--ease-enter);
}
.cv-button svg { flex: none; transition: transform calc(320ms * var(--u-motion)) var(--ease-enter); }
.cv-button:hover { background: var(--surface); border-color: var(--text-3); }
.cv-button:hover svg { transform: translateX(-2px); }
.cv-button.is-primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.cv-button.is-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cv-button.is-primary:hover svg { transform: translateY(2px); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.cv-section { margin-top: calc(56px * var(--u-space)); }
.cv-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: calc(16px * var(--u-space));
  border-bottom: 1px solid var(--line-strong);
}
/* The story's accent numeral, nudged toward the text colour: a few looks' accents sit just under AA. */
.cv-count { font: 400 calc(12px * var(--u-text)) / 1 var(--font-mono); color: color-mix(in srgb, var(--accent) 82%, var(--text)); letter-spacing: 0.02em; }

/* ── Entries: dates · timeline rail · company · roles ──────────────────────── */
.cv-entry {
  display: grid;
  grid-template-columns: var(--cv-cols);
  align-items: start;
}
.cv-date {
  padding-top: calc(var(--node-y) - 0.75em);
  font: 400 calc(12.5px * var(--u-text)) / 1.5 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.cv-company, .cv-roles { padding-block: var(--cv-pad); }
.cv-company {
  padding-right: calc(32px * var(--u-space));
  font-family: var(--font-display);
  font-size: var(--cv-co-size);
  font-weight: clamp(300, var(--hero-weight), 560);
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: var(--cv-co-lh);
  color: var(--text);
}
.cv-entry + .cv-entry .cv-company, .cv-entry + .cv-entry .cv-roles { border-top: 1px solid var(--line); }
.cv-roles {
  display: grid; gap: calc(20px * var(--u-space));
  /* First role's first line sits on the company's line. */
  padding-top: calc(var(--cv-pad) + (var(--cv-co-size) * var(--cv-co-lh) - 1.45em) / 2);
  font-size: calc(16px * var(--u-text));
}
.cv-role-title {
  font: 500 1em / 1.45 var(--font-body);
  color: var(--text);
}
.cv-role-desc {
  margin-top: 4px; max-width: 52ch;
  font-size: calc(15px * var(--u-text)); line-height: calc(1.55 * var(--u-leading));
  color: var(--text-2);
  text-wrap: pretty;
}

/* The rail: one hairline from the first node to the last, drawn down as the rows arrive. */
.cv-rail { position: relative; align-self: stretch; }
.cv-rail::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px;
  background: var(--line-strong);
  transform: scaleY(0); transform-origin: top;
  transition: transform calc(900ms * var(--u-motion)) var(--ease-move) calc(var(--i, 0) * var(--stagger) + 120ms);
}
.cv-entry:first-child .cv-rail::before { top: var(--node-y); }
.cv-entry:last-child .cv-rail::before { bottom: calc(100% - var(--node-y)); }
.cv-entry:only-child .cv-rail::before { display: none; }
.cv-node {
  position: absolute; left: 50%; top: var(--node-y);
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--text-3);
  transform: scale(0);
  transition: transform calc(520ms * var(--u-motion)) var(--ease-enter) calc(var(--i, 0) * var(--stagger) + 200ms), background-color 600ms var(--ease-move);
}
.cv-entry[data-current] .cv-node {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cv-entry.is-in .cv-rail::before, .cv-entry.is-in .cv-node { transform: none; }

/* ── Footer (the landing's, re-seated in the column) ──────────────────────── */
.cv-footer.site-footer {
  max-width: none; margin-top: calc(96px * var(--u-space));
  padding: calc(32px * var(--u-space)) 0 calc(96px * var(--u-space));
  border-top: 1px solid var(--line-strong);
  background: none;
}

.cv-noscript { padding: 24px 0; }
.cv-noscript a { text-decoration: underline; }

/* ── Narrower: roles fold under the company ───────────────────────────────── */
@media (max-width: 980px) {
  .cv { --cv-cols: 7.25rem 36px minmax(0, 1fr); }
  .cv-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name .' 'title contact' 'actions contact'; column-gap: calc(40px * var(--u-space)); }
  .cv-roles { grid-column: 3; padding-top: 0; }
  .cv-entry + .cv-entry .cv-roles { border-top: 0; }
  .cv-company { padding-bottom: calc(14px * var(--u-space)); padding-right: 0; }
  .cv-rail { grid-row: 1 / span 2; }
  .cv-date { grid-row: 1; }
}

/* ── Phone: one column, the rail on the left edge ─────────────────────────── */
@media (max-width: 640px) {
  .cv {
    --cv-pad: calc(26px * var(--u-space));
    --node-y: calc(var(--cv-pad) + 0.75 * 12.5px * var(--u-text) + 1px);
    --cv-cols: 22px minmax(0, 1fr);
    padding-top: calc(104px * var(--u-space));
  }
  .cv-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'name' 'title' 'contact' 'actions'; padding-bottom: calc(48px * var(--u-space)); }
  .cv-contact { margin-top: calc(28px * var(--u-space)); }
  .cv-section { margin-top: calc(32px * var(--u-space)); }
  .cv-actions { margin-top: calc(28px * var(--u-space)); }
  .cv-actions .cv-button { flex: 1 1 auto; justify-content: center; height: 44px; }
  .cv-rail { grid-column: 1; grid-row: 1 / span 3; }
  .cv-rail::before, .cv-node { left: 4.5px; }
  .cv-date { grid-column: 2; grid-row: 1; padding-top: var(--cv-pad); }
  .cv-company { grid-column: 2; grid-row: 2; padding: 8px 0 12px; }
  .cv-roles { grid-column: 2; grid-row: 3; padding: 0 0 var(--cv-pad); gap: calc(16px * var(--u-space)); }
  .cv-entry + .cv-entry .cv-company { border-top: 0; }
  .cv-entry + .cv-entry .cv-date { border-top: 1px solid var(--line); }
  .cv-entry:not(:has(.cv-date span)) .cv-company { padding-top: 0; }
  .cv-footer.site-footer { grid-template-columns: 1fr; padding-bottom: calc(72px * var(--u-space)); }
}

/* ── Print: ink on paper, one sheet, no chrome ────────────────────────────── */
@media print {
  @page { size: letter; margin: 13mm 15mm 12mm; }
  :root, :root[data-theme] {
    --bg: #fff; --surface: #fff; --text: #111; --text-2: #3b3b3b; --text-3: #5c5c5c;
    --accent: #111; --accent-ink: #fff; --line: rgb(0 0 0 / 0.12); --line-strong: rgb(0 0 0 / 0.32);
    color-scheme: light !important; /* beats the pre-paint inline style, or Chrome paints dark page margins */
  }
  html { background: #fff !important; font-size: 9.5pt; transition: none; }
  body > :not(.cv) { display: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cv {
    --cv-pad: 9pt;
    --cv-co-size: 15.5pt;
    --cv-cols: 8.6rem 24px minmax(0, 0.8fr) minmax(0, 1.4fr);
    --node-y: calc(var(--cv-pad) + var(--cv-co-size) * var(--cv-co-lh) / 2);
    max-width: none; padding: 0;
  }
  .cv-head { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'name contact' 'title contact'; padding-bottom: 20pt; }
  .cv-actions, .cv-contact svg, .cv-footer .footer-links { display: none; }
  .cv-name { font-size: 40pt; }
  .cv-title { margin-top: 8pt; font-size: 14pt; }
  .cv-contact { gap: 3pt; font-size: 8.5pt; margin: 0; justify-items: end; }
  .cv-contact a { color: var(--text-2); }
  .cv-section { margin-top: 18pt; }
  .cv-section-head { padding-bottom: 6pt; }
  .cv-kicker, .cv-count { font-size: 7.5pt; }
  .cv-entry { grid-template-columns: var(--cv-cols); break-inside: avoid; }
  .cv-date { grid-column: 1; grid-row: 1; padding-top: calc(var(--node-y) - 0.75em); font-size: 8.5pt; border: 0 !important; }
  .cv-rail { grid-column: 2; grid-row: 1; }
  .cv-rail::before, .cv-node { left: 50%; transform: none; transition: none; }
  .cv-company { grid-column: 3; grid-row: 1; padding: var(--cv-pad) 12pt var(--cv-pad) 0; }
  .cv-roles {
    grid-column: 4; grid-row: 1; gap: 6pt; font-size: 10pt;
    padding: calc(var(--cv-pad) + (var(--cv-co-size) * var(--cv-co-lh) - 1.45em) / 2) 0 var(--cv-pad);
  }
  .cv-entry + .cv-entry .cv-company, .cv-entry + .cv-entry .cv-roles { border-top: 1px solid var(--line); }
  .cv-role-desc { margin-top: 1.5pt; font-size: 9.25pt; line-height: 1.4; max-width: none; }
  .cv-node { box-shadow: inset 0 0 0 1px #5c5c5c; }
  .cv-entry[data-current] .cv-node { background: #111; box-shadow: none; }
  .cv-footer.site-footer { margin-top: 16pt; padding: 8pt 0 0; grid-template-columns: 1fr; color: var(--text-3); }
  .cv-footer .footer-credit { font-size: 7.5pt; }
}

}