/* Amber Lan, interactive CV (/about).
   Built on the site tokens in site.css and claude.css: one ink, one paper, one amber.
   Three reading speeds: the hero and receipts (10 seconds), the career sheet (60 seconds),
   the function and the work (10 minutes). Print turns the page into a two-page paper CV. */

.cv section { scroll-margin-top: 72px; }
.cv main p b, .cv .lead b { font-weight: 500; color: var(--fg); }
.cv section:not(.cv-hero):not(.cv-proof) { padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(3rem, 5vw, 4.5rem); }
.door .cta-row { justify-content: flex-start; }
.cv .sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-6) var(--s-9); align-items: end; }
.cv .sec-head h2 { max-width: 16ch; text-wrap: balance; }
.cv .sec-head .lead { margin: 0; max-width: 46ch; }
.cv .num { font-variant-numeric: tabular-nums; }

/* ---------- 1. Hero ---------- */
.cv-hero { padding-top: clamp(6rem, 11vw, 9rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.cv-hero .profile { align-items: center; }
.cv-hero h1 { max-width: 12ch; letter-spacing: -0.035em; line-height: 0.98; }
.cv-hero h1 span { display: block; color: var(--soft); font-weight: 400; }
.cv-hero .lead { max-width: 44ch; }
.status {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--s-6);
  padding: 0.45rem 0.8rem 0.45rem 0.65rem; border: 1px solid var(--hair-strong); border-radius: 999px;
  color: var(--muted); font-size: 13px; line-height: 1.2;
}
.status i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.status i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); opacity: 0; animation: cv-ping 2.6s var(--ease) infinite; }
@keyframes cv-ping { 0% { transform: scale(0.6); opacity: 0.7; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.cv-hero .cta-row { flex-wrap: wrap; }
.print-cv {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; border-bottom: 1px solid var(--hair-strong);
}
.print-cv:hover, .print-cv:focus-visible { color: var(--fg); border-color: var(--fg); }
.print-cv svg { width: 15px; height: 15px; }

/* ---------- 2. Receipts ---------- */
.receipts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-band); border-top: 1px solid var(--hair);
}
.receipt {
  position: relative; padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--hair);
  text-align: left;
}
.receipt:not(:nth-child(3n + 1)) { padding-left: var(--s-6); border-left: 1px solid var(--hair); }
.receipt::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: var(--accent);
  transition: width 520ms var(--ease);
}
.receipt:not(:nth-child(3n + 1))::before { left: var(--s-6); }
.receipt:hover::before { width: 2.5rem; }
.receipt__n { display: block; color: var(--fg); font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.receipt__n small { font-size: 0.5em; letter-spacing: -0.01em; color: var(--muted); }
.receipt__what { display: block; margin-top: var(--s-3); color: var(--fg); font-size: 15px; font-weight: 500; }
.receipt__how { display: block; margin-top: 0.4rem; max-width: 30ch; color: var(--soft); font-size: 13.5px; line-height: 1.5; }
.receipt__how a { color: inherit; border-bottom: 1px solid var(--hair-strong); }
.receipts-note { margin-top: var(--s-4); color: var(--soft); font-size: 13px; text-align: left; }

/* ---------- 3. The function I run: a switchboard ---------- */
.board {
  margin-top: var(--space-band); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(250, 248, 243, 0.035), rgba(250, 248, 243, 0.012));
  overflow: hidden; text-align: left;
}
.board__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hair); color: var(--soft); font-size: 12.5px; }
.board__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(250, 248, 243, 0.14); }
.board__bar span { margin-left: 0.6rem; font-variant-numeric: tabular-nums; }
.board__body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 25rem; }
.lanes { display: flex; flex-direction: column; padding: 0.6rem; border-right: 1px solid var(--hair); }
.lane-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 0.8rem; border: 0; border-radius: 10px; background: none; color: var(--soft);
  font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lane-tab small { color: var(--soft); font-size: 11.5px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; opacity: 0.7; }
.lane-tab:hover { color: var(--fg); background: rgba(250, 248, 243, 0.03); }
.lane-tab[aria-selected="true"] { color: var(--fg); background: rgba(250, 248, 243, 0.06); }
.lane-tab[aria-selected="true"] small { color: var(--accent); opacity: 1; }
.lane-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-6); padding: var(--s-6); }
.js .lane[hidden] { display: none; }
.lane h3 { grid-column: 1 / -1; font-size: var(--h3); letter-spacing: -0.02em; }
.split-list { display: grid; gap: var(--s-5); align-content: start; }
.split-list div { border-top: 1px solid var(--hair); padding-top: var(--s-4); }
.split-list dt { margin-bottom: 0.4rem; color: var(--soft); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.split-list dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.split-list .keep dt { color: var(--accent); }
.split-list .keep dd { color: var(--fg); }

/* artefacts: small, real-looking working surfaces, drawn in code */
.art {
  align-self: start; padding: 1.1rem 1.15rem; border: 1px solid var(--hair); border-radius: 12px;
  background: var(--surface); color: var(--muted); font-size: 13.5px; line-height: 1.55;
}
.art__label { display: flex; justify-content: space-between; margin-bottom: 0.85rem; color: var(--soft); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.art__label b { color: var(--accent); font-weight: 500; letter-spacing: 0.04em; text-transform: none; }
.art code, .art pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; }
.art pre { margin: 0; white-space: pre-wrap; color: var(--muted); }
.art pre em { font-style: normal; color: var(--accent); }
.art s { color: var(--soft); text-decoration-color: var(--accent); }
.art ins { text-decoration: none; color: var(--fg); background: var(--accent-soft); border-radius: 3px; padding: 0 0.2em; }
.checks { display: grid; gap: 0.45rem; margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px dashed var(--hair-strong); }
.checks span { display: flex; justify-content: space-between; }
.checks span::after { content: "passed"; color: var(--soft); font-size: 12px; }
.checks span.wait::after { content: "waiting for Amber"; color: var(--accent); }
.rows-art { display: grid; gap: 0.5rem; }
.rows-art span { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.65rem; border-radius: 8px; background: rgba(250, 248, 243, 0.03); }
.rows-art em { font-style: normal; color: var(--soft); font-size: 12px; white-space: nowrap; }
.rows-art em.on { color: var(--accent); }
.flow-art { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.flow-art span { padding: 0.55rem 0.3rem; border-radius: 8px; background: rgba(250, 248, 243, 0.035); text-align: center; font-size: 12px; }
.flow-art span.human { background: var(--accent-soft); color: var(--fg); }
.flow-note { margin-top: 0.8rem; color: var(--soft); font-size: 12.5px; }
.cards-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.cards-art span {
  position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden;
  background: radial-gradient(circle at 30% 30%, rgba(250, 248, 243, 0.16) 1px, transparent 1.6px) 0 0 / 7px 7px, #1d1c19;
}
.cards-art span::before { content: ""; position: absolute; left: 12%; right: 30%; bottom: 14%; height: 18%; border-radius: 3px; background: rgba(250, 248, 243, 0.82); }
.cards-art span::after { content: ""; position: absolute; left: 12%; top: 12%; width: 18%; height: 6%; border-radius: 2px; background: rgba(250, 248, 243, 0.4); }
.cards-art span.no { opacity: 0.38; }
.cards-art span.no i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg); font-style: normal; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; z-index: 1; }
.cards-art span.yes { outline: 1px solid var(--accent); outline-offset: 2px; }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.quad span { min-height: 4.4rem; padding: 0.55rem 0.65rem; border-radius: 8px; background: rgba(250, 248, 243, 0.03); font-size: 12px; }
.quad span b { display: block; margin-bottom: 0.3rem; color: var(--soft); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.quad span:first-child { background: var(--accent-soft); color: var(--fg); }
.board__foot { padding: 0.8rem 1.1rem; border-top: 1px solid var(--hair); color: var(--soft); font-size: 12.5px; }

/* ---------- 4. Career sheet: paper on the ink ---------- */
.cvsheet {
  --paper: #faf8f3; --pink: #0e0e0d; --pmute: rgba(14, 14, 13, 0.6); --phair: rgba(14, 14, 13, 0.12);
  position: relative; margin-top: var(--space-band); padding: clamp(1.75rem, 4.5vw, 3.75rem);
  border-radius: 6px; background: var(--paper); color: var(--pink); text-align: left;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(250, 248, 243, 0.06);
}
.sheet__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 2px solid var(--pink); }
.sheet__name { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.sheet__role { margin-top: 0.5rem; color: var(--pmute); font-size: 15px; }
.sheet__contact { align-self: end; color: var(--pmute); font-size: 13.5px; text-align: right; line-height: 1.6; }
.sheet__contact a { color: var(--pink); border-bottom: 1px solid var(--phair); }
.sheet__kicker { margin-top: var(--s-6); color: var(--pmute); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.sheet__legend { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; color: var(--pmute); font-size: 12.5px; }
.sheet__legend i { display: block; width: 4.5rem; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(14, 14, 13, 0.14), #e4a43c); }
.roles { position: relative; margin-top: var(--s-5); }
.role {
  --w: 2px; --c: rgba(14, 14, 13, 0.18);
  position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--s-2) var(--s-6); padding: var(--s-5) 0 var(--s-5) var(--s-6); border-top: 1px solid var(--phair);
}
.role::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--c); }
.role:first-child { border-top: 0; }
.role__when { color: var(--pmute); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.role__title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.role__org { margin-top: 0.15rem; color: var(--pmute); font-size: 14px; }
.role__what { margin-top: 0.55rem; max-width: 56ch; color: rgba(14, 14, 13, 0.78); font-size: 14.5px; line-height: 1.55; }
.role__win { align-self: start; padding: 0.6rem 0.75rem; border-radius: 6px; background: rgba(14, 14, 13, 0.045); font-size: 13.5px; line-height: 1.45; }
.role__win b { display: block; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sheet__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--pink); }
.sheet__cols h3 { margin-bottom: 0.6rem; color: var(--pmute); font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.sheet__cols p, .sheet__cols li { color: rgba(14, 14, 13, 0.8); font-size: 14px; line-height: 1.55; }
.sheet__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }

/* ---------- 5. Selected work ---------- */
.work-lead {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin-top: var(--space-band);
  border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; text-align: left;
  color: inherit; transition: border-color 300ms var(--ease);
}
.work-lead:hover { border-color: var(--hair-strong); }
.work-lead figure { margin: 0; min-height: 22rem; background: #0b0b0a; }
.work-lead img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work-lead:hover img { transform: scale(1.025); }
.work-lead__text { display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); padding: clamp(1.5rem, 4vw, 3rem); }
.work-lead__text h3 { font-size: var(--h3); letter-spacing: -0.02em; text-wrap: balance; }
.work-lead__text p { color: var(--muted); }
.tagline { color: var(--soft); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.go { color: var(--fg); font-size: 15px; }
.go::after { content: " \2192"; color: var(--accent); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); text-align: left; }
.work-card {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); min-height: 16rem;
  border: 1px solid var(--hair); border-radius: var(--radius-lg); color: inherit;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease);
}
.work-card:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.work-card h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
.work-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.work-card .shows { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hair); color: var(--soft); font-size: 13px; }
.work-card .shows b { color: var(--accent); font-weight: 500; }
.glyph { width: 2.6rem; height: 2.6rem; color: var(--soft); }

/* built for this site: a quiet strip of live tools */
.tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--space-band); border-top: 1px solid var(--hair); text-align: left; }
.tool { display: block; padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--hair); color: inherit; }
.tool + .tool { padding-left: var(--s-4); border-left: 1px solid var(--hair); }
.tool b { display: block; color: var(--fg); font-weight: 500; font-size: 15px; }
.tool span { display: block; margin-top: 0.35rem; color: var(--soft); font-size: 13.5px; line-height: 1.5; }
.tool:hover b { color: var(--accent); }

/* ---------- 6. How I work + writing ---------- */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--space-band); text-align: left; counter-reset: rule; }
.rules div { counter-increment: rule; border-top: 1px solid var(--hair); padding-top: var(--s-4); }
.rules div::before { content: "0" counter(rule); display: block; margin-bottom: var(--s-4); color: var(--soft); font-size: 12px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.rules h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
.rules p { margin-top: 0.5rem; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.reads { margin-top: var(--space-band); text-align: left; border-top: 1px solid var(--hair); }
.read { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); color: inherit; }
.read em { color: var(--soft); font-style: normal; font-size: 13px; }
.read b { color: var(--fg); font-weight: 500; font-size: 16px; }
.read span { color: var(--accent); }
.read:hover b { text-decoration: underline; text-decoration-color: var(--hair-strong); text-underline-offset: 4px; }

/* ---------- 7. Hire + doors ---------- */
.cvhire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--space-band); text-align: left; }
.door { height: 100%; display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(1.5rem, 3.5vw, 2.5rem); border: 1px solid var(--hair); border-radius: var(--radius-lg); }
.door--hire { background: linear-gradient(160deg, rgba(228, 164, 60, 0.09), transparent 55%); border-color: rgba(228, 164, 60, 0.28); }
.door h3 { font-size: var(--h3); letter-spacing: -0.02em; }
.door p { color: var(--muted); }
.door dl { display: grid; gap: var(--s-3); margin: 0; }
.door dt { color: var(--soft); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.door dd { margin: 0.2rem 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.door .cta-row { margin-top: auto; padding-top: var(--s-3); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .cv .sec-head { grid-template-columns: 1fr; }
  .board__body { grid-template-columns: 1fr; }
  .lanes { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--hair); scrollbar-width: none; }
  .lanes::-webkit-scrollbar { display: none; }
  .lane-tab { flex: none; }
  .lane-tab small { display: none; }
  .lane { grid-template-columns: 1fr; }
  .work-lead { grid-template-columns: 1fr; }
  .work-lead figure { min-height: 14rem; aspect-ratio: 16 / 10; }
  .work-grid { grid-template-columns: 1fr; }
  .tools { grid-template-columns: 1fr 1fr; }
  .tool, .tool + .tool { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-left: 0; }
  .rules { grid-template-columns: 1fr 1fr; }
  .cvhire { grid-template-columns: 1fr; }
  .role { grid-template-columns: 1fr; padding-left: var(--s-5); }
  .sheet__cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .receipts { grid-template-columns: 1fr 1fr; }
  .receipt, .receipt:not(:nth-child(3n + 1)) { padding: var(--s-5) var(--s-3) var(--s-5) 0; border-left: 0; }
  .receipt:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--hair); }
  .receipt::before, .receipt:not(:nth-child(3n + 1))::before { left: 0; }
  .receipt:nth-child(even)::before { left: var(--s-4); }
  .rules { grid-template-columns: 1fr; }
  .read { grid-template-columns: 1fr; gap: 0.2rem; }
  .read span { display: none; }
  .sheet__contact { text-align: left; }
  .flow-art { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .status i::after { animation: none; }
  .work-lead img, .work-card, .receipt::before { transition: none; }
}

/* ---------- print: the page becomes a two-page paper CV ---------- */
@media print {
  @page { size: A4; margin: 14mm 15mm; }
  html, body { background: #fff !important; color: #0e0e0d !important; }
  .grain, .site-header, .site-footer, .skip-link, .no-print, .cv-hero, .board, .work-lead, .work-grid, .tools, .rules, .reads, .cvhire, #questions, #contact, .sec-head .lead { display: none !important; }
  .cv .sec { padding: 0 !important; }
  .cv .sec-head { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .print-only { display: block !important; }
  .print-receipts { display: grid !important; }
  .cvsheet { margin: 0; padding: 0; box-shadow: none; border-radius: 0; background: #fff; }
  .sheet__cols { break-inside: avoid; }
  .role { break-inside: avoid; padding-top: 3.2mm; padding-bottom: 3.2mm; grid-template-columns: 26mm minmax(0, 1fr) 42mm; }
  .role__what { font-size: 10pt; }
  .role__title { font-size: 11pt; }
  .role__win { background: #f3f1eb; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .role::before, .sheet__legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet__contact a { border: 0; }
  #receipts-print { margin-top: 5mm; }
  a[href]::after { content: none !important; }
  .sheet__top { display: flex !important; flex-wrap: nowrap; padding-bottom: 3.5mm; }
  .sheet__name { font-size: 22pt; }
  .sheet__role { font-size: 10pt; margin-top: 1.5mm; }
  .sheet__contact { font-size: 8.5pt; text-align: right !important; }
  .sheet__kicker { margin-top: 5mm; font-size: 7.5pt; }
  .sheet__legend { font-size: 8pt; margin-top: 1.5mm; }
  .print-only[style] { font-size: 9.5pt !important; margin-top: 4mm !important; }
  .print-receipts { gap: 2mm 6mm; margin-top: 3mm; }
  .print-receipts div { font-size: 8pt; }
  .print-receipts b { font-size: 12.5pt; }
  .roles { margin-top: 2mm; }
  .role { grid-template-columns: 24mm minmax(0, 1fr) 36mm !important; gap: 1mm 5mm; padding: 2.6mm 0 2.6mm 4.5mm !important; }
  .role__when { font-size: 8pt; }
  .role__title { font-size: 10pt; }
  .role__org { font-size: 8.5pt; margin-top: 0.5mm; }
  .role__what { font-size: 8.8pt; line-height: 1.45; margin-top: 1.2mm; }
  .role__win { font-size: 8pt; padding: 1.8mm 2.2mm; }
  .role__win b { font-size: 11pt; }
  .sheet__cols { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 5mm; margin-top: 4mm; padding-top: 3mm; }
  .sheet__cols h3 { font-size: 7.5pt; }
  .sheet__cols p, .sheet__cols li { font-size: 8.5pt; line-height: 1.45; }
}
.print-only { display: none; }
.print-receipts { display: none; grid-template-columns: repeat(3, 1fr); gap: 3mm 6mm; margin-top: 4mm; }
.print-receipts div { font-size: 9.5pt; color: rgba(14, 14, 13, 0.75); }
.print-receipts b { display: block; font-size: 15pt; font-weight: 500; color: #0e0e0d; }

.cv #contact h2 { max-width: 20ch; margin-inline: auto; }

/* =====================  the life layer (v2)  ===================== */
.cv-hero h1 { font-size: clamp(3.4rem, 7.2vw, 6.6rem); letter-spacing: -0.045em; line-height: 0.92; max-width: none; }
.cv-hero h1 span { margin-top: 0.12em; font-size: 0.5em; letter-spacing: -0.03em; line-height: 1.04; max-width: 14ch; }
.eyebrow .ch { margin-right: 0.85rem; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* spotlight: a soft light under the pointer */
[data-spot] { position: relative; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, -999px) var(--my, -999px), rgba(228, 164, 60, 0.075), transparent 60%);
  opacity: 0; transition: opacity 400ms var(--ease);
}
[data-spot]:hover::after { opacity: 1; }

/* the board: lit ground, a timing line on the live lane, lanes that play */
.board { position: relative; box-shadow: 0 60px 140px -60px rgba(228, 164, 60, 0.22); }
.board::before { content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 50% at 70% 0%, rgba(228, 164, 60, 0.09), transparent 70%); }
.lane-tab { position: relative; overflow: hidden; }
.lane-tab.is-timing::after { content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.3rem; height: 1px; background: var(--accent); transform-origin: left; animation: cv-dwell var(--dwell, 7000ms) linear forwards; }
@keyframes cv-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cv-strike { to { background-size: 100% 1.5px; } }
@keyframes cv-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cv-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(228, 164, 60, 0); } 50% { box-shadow: 0 0 0 6px rgba(228, 164, 60, 0.12); } }
.lane.play h3 { animation: cv-rise 500ms var(--ease) both; }
.lane.play .split-list div { animation: cv-rise 600ms var(--ease) both; }
.lane.play .split-list div:nth-child(2) { animation-delay: 120ms; }
.lane.play .art { animation: cv-rise 700ms var(--ease) 180ms both; }
.lane.play .art s { text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 58% / 0% 1.5px; animation: cv-strike 500ms var(--ease) 800ms forwards; }
.lane.play .art ins { animation: cv-rise 500ms var(--ease) 1250ms both; }
.lane.play .checks span, .lane.play .rows-art span, .lane.play .quad span, .lane.play .cards-art span, .lane.play .flow-art span { animation: cv-rise 450ms var(--ease) both; }
.lane.play .checks span:nth-child(1), .lane.play .rows-art span:nth-child(1), .lane.play .quad span:nth-child(1), .lane.play .cards-art span:nth-child(1), .lane.play .flow-art span:nth-child(1) { animation-delay: 600ms; }
.lane.play .checks span:nth-child(2), .lane.play .rows-art span:nth-child(2), .lane.play .quad span:nth-child(2), .lane.play .cards-art span:nth-child(2), .lane.play .flow-art span:nth-child(2) { animation-delay: 900ms; }
.lane.play .checks span:nth-child(3), .lane.play .rows-art span:nth-child(3), .lane.play .quad span:nth-child(3), .lane.play .cards-art span:nth-child(3), .lane.play .flow-art span:nth-child(3) { animation-delay: 1200ms; }
.lane.play .checks span:nth-child(4), .lane.play .rows-art span:nth-child(4), .lane.play .quad span:nth-child(4), .lane.play .flow-art span:nth-child(4) { animation-delay: 1500ms; }
.lane.play .flow-art span:nth-child(5) { animation: cv-rise 450ms var(--ease) 1800ms both, cv-glow 1800ms ease-in-out 2300ms infinite; }
.lane.play .checks span.wait { animation: cv-rise 450ms var(--ease) 1500ms both; }
.lane.play .checks span.wait::after { animation: cv-pulse 1600ms ease-in-out 2000ms infinite; }
@keyframes cv-pulse { 50% { opacity: 0.45; } }
.lane.play .art pre { animation: cv-wipe 1400ms var(--ease) 500ms both; }

/* career: the rules draw in, top to bottom */
.cvsheet .role::before { transform-origin: top; transition: transform 1100ms var(--ease); }
.cvsheet.is-waiting .role::before { transform: scaleY(0); }
.cvsheet.is-drawn .role:nth-child(2)::before { transition-delay: 140ms; }
.cvsheet.is-drawn .role:nth-child(3)::before { transition-delay: 280ms; }
.cvsheet.is-drawn .role:nth-child(4)::before { transition-delay: 420ms; }
.cvsheet.is-drawn .role:nth-child(5)::before { transition-delay: 560ms; }
.cvsheet.is-drawn .role:nth-child(6)::before { transition-delay: 700ms; }
.cvsheet .role:first-child::before { box-shadow: 0 0 18px rgba(228, 164, 60, 0.55); }

/* the closer stands on its own ground */
.cv #contact h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; }


@media (prefers-reduced-motion: reduce) {
  .lane.play *, .lane.play, .lane-tab.is-timing::after, .role-panel.play * { animation: none !important; }
  .lane.play .art s { background-size: 100% 1.5px; }
  .cvsheet.is-waiting .role::before { transform: none; }
}
@media print {
  .cv-proof, .cvc, .portrait { display: none !important; }
  .cvsheet { display: block !important; }
  /* PDF engines flatten a blurred shadow into a solid box, so the glow stays on screen only. */
  .cvsheet .role:first-child::before { box-shadow: none; }
}

.cv .cv-proof { padding-block: 0 clamp(1rem, 2vw, 1.5rem); }
.cv .cv-proof::before { display: none; }
.cv .cv-proof .receipts { margin-top: 0; }

/* =====================  v3: trust, elegance, an interactive career  ===================== */

/* hero portrait: the real photo, a halo of light behind it, nothing drawn over the face */
.cv .portrait {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--hair);
  background:
    radial-gradient(70% 55% at 50% 34%, rgba(228, 164, 60, 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 110%, rgba(250, 248, 243, 0.05), transparent 60%),
    #121210;
}
.portrait__halo { position: absolute; inset: 0; z-index: 0; }
.portrait__img {
  position: absolute; left: 50%; bottom: 0; z-index: 1; width: 96%; height: auto; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
  filter: saturate(0.92) contrast(1.02);
}
.portrait__tag {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.95rem; z-index: 2; display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 0.75rem; border-top: 1px solid var(--hair); color: var(--soft); font-size: 12.5px;
}
.portrait__tag b { color: var(--fg); font-weight: 500; font-size: 14px; }

/* the trust line under the buttons */
.trust { margin-top: var(--s-6); color: var(--soft); font-size: 13.5px; line-height: 1.7; }
.trust span { color: var(--muted); white-space: nowrap; }
.trust span + span::before { content: "\00B7"; margin: 0 0.55rem; color: var(--soft); }
.cv-hero .profile__links { margin-top: var(--s-4); }

/* tool logos: small, quick, quiet */
.logos { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-block: 1rem; border-block: 1px solid var(--hair); }
.logos .hero-proof { display: flex; gap: 0 clamp(1.6rem, 3vw, 2.5rem); margin: 0; padding: 0 clamp(0.8rem, 1.5vw, 1.25rem); list-style: none; }
.logos .hero-proof li { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--soft); font-size: 14px; white-space: nowrap; transition: color 250ms var(--ease); }
.logos .hero-proof li:first-child::before { display: none; }
.logos svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.logos .mono { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 5px; font-size: 10px; font-weight: 600; }
.logos .hero-proof li:hover { color: var(--fg); }
.logos .ticker__inner { animation-duration: 560s !important; }

/* career: one track of years, a panel for the chosen role */
.cvsheet { display: none; }
.cvc { margin-top: var(--space-band); text-align: left; }
.cvc__legend { display: flex; align-items: center; gap: 0.75rem; color: var(--soft); font-size: 12.5px; }
.cvc__legend i { flex: 0 0 5rem; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(250, 248, 243, 0.16), var(--accent)); }
.cvc__legend em { margin-left: auto; font-style: normal; }
.cvc__track { display: flex; gap: 6px; margin-top: var(--s-4); }
.seg {
  flex: var(--grow) 1 0; min-width: 5.25rem; display: grid; gap: 0.35rem; padding: 0 0 0.8rem; border: 0; background: none;
  color: var(--soft); font: inherit; text-align: left; cursor: pointer;
}
.seg__bar {
  display: block; height: 10px; border-radius: 3px; margin-bottom: 0.5rem;
  background: color-mix(in srgb, var(--accent) calc(var(--sys) * 100%), rgba(250, 248, 243, 0.16));
  opacity: 0.55; transition: opacity 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.seg__when { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.seg__org { overflow: hidden; color: var(--muted); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.seg:hover .seg__bar { opacity: 0.85; }
.seg[aria-selected="true"] .seg__bar { opacity: 1; transform: scaleY(1.3); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) calc(var(--sys) * 60%), transparent); }
.seg[aria-selected="true"] .seg__org { color: var(--fg); }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.cvc__panels { margin-top: var(--s-5); padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--hair); border-radius: var(--radius-lg); background: rgba(250, 248, 243, 0.025); }
.role-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--s-5) var(--s-7); align-items: start; }
.js .role-panel[hidden] { display: none; }
.role-panel__when { color: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.role-panel h3 { margin-top: 0.4rem; font-size: 1.3rem; letter-spacing: -0.02em; }
.role-panel__org { margin-top: 0.3rem; color: var(--muted); font-size: 14.5px; }
.role-panel__what { color: var(--muted); font-size: 15px; line-height: 1.6; }
.role-panel__win { padding-left: var(--s-4); border-left: 2px solid var(--accent); color: var(--soft); font-size: 13.5px; line-height: 1.45; }
.role-panel__win b { display: block; color: var(--fg); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; }
.role-panel.play > * { animation: cv-rise 450ms var(--ease) both; }
.role-panel.play > *:nth-child(2) { animation-delay: 70ms; }
.role-panel.play > *:nth-child(3) { animation-delay: 140ms; }
.cvc__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.cvc__cols div { border-top: 1px solid var(--hair); padding-top: var(--s-4); }
.cvc__cols h3 { margin-bottom: 0.5rem; color: var(--soft); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.cvc__cols p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.cvc__cols .print-cv { display: inline-flex; margin-top: 0.85rem; font-size: 14px; }

/* the case study, told as its five phases */
.cvphases { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--s-4); min-height: 22rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); background: radial-gradient(90% 70% at 20% 0%, rgba(228, 164, 60, 0.1), transparent 70%), #0f0f0e; }
.cvphases__span { display: flex; justify-content: space-between; max-width: 30rem; color: var(--soft); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.cvphases ol { position: relative; display: grid; gap: 0.95rem; margin: 0; padding: 0 0 0 1.6rem; list-style: none; counter-reset: ph; }
.cvphases ol::before { content: ""; position: absolute; left: 0.32rem; top: 0.45rem; bottom: 0.45rem; width: 1px; background: linear-gradient(var(--accent), rgba(228, 164, 60, 0.15)); transform-origin: top; transition: transform 900ms var(--ease); }
.cvphases li { position: relative; display: grid; gap: 0.15rem; counter-increment: ph; }
.cvphases li::before { content: ""; position: absolute; left: -1.6rem; top: 0.38rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #0f0f0e; border: 1px solid var(--accent); }
.cvphases li:last-child::before { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.cvphases b { color: var(--fg); font-weight: 500; font-size: 15.5px; }
.cvphases span { color: var(--soft); font-size: 13.5px; line-height: 1.45; }
.cvphases__end { color: var(--fg); font-size: 15px; }
.work-lead:hover .cvphases li::before { border-color: var(--fg); }

/* in short: a profile card and the answers, open */
.short { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); margin-top: var(--space-band); text-align: left; }
.idcard { align-self: start; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--hair); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(250, 248, 243, 0.035), transparent); }
.idcard img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hair-strong), 0 0 0 6px rgba(228, 164, 60, 0.12); }
.idcard__name { margin-top: var(--s-4); color: var(--fg); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.idcard__role { margin-top: 0.2rem; color: var(--soft); font-size: 14px; }
.idcard dl { display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; }
.idcard dl div { border-top: 1px solid var(--hair); padding-top: var(--s-3); }
.idcard dt { color: var(--soft); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.idcard dd { margin: 0.25rem 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.idcard__links { display: flex; gap: var(--s-5); margin-top: var(--s-5); }
.idcard__links a { color: var(--fg); font-size: 14px; border-bottom: 1px solid var(--hair-strong); }
.idcard__links a:hover { border-color: var(--accent); }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.qa-card { padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius); transition: border-color 250ms var(--ease); }
.qa-card:hover { border-color: var(--hair-strong); }
.qa-card h3 { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.qa-card p { margin-top: 0.55rem; color: var(--muted); font-size: 14px; line-height: 1.6; }
.qa-card a { color: var(--fg); border-bottom: 1px solid var(--hair-strong); }

@media (max-width: 960px) {
  .role-panel { grid-template-columns: 1fr; gap: var(--s-4); }
  .cvc__cols, .short, .qa-grid { grid-template-columns: 1fr; }
  .cvc__legend em { display: none; }
  .cvphases { min-height: 0; }
}
@media (max-width: 640px) {
  .cvc__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.5rem; }
  .seg { min-width: 0; }
}

/* =====================  edit pass: six sections  ===================== */
.mini-head { margin-bottom: var(--s-4); color: var(--soft); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; }
.howiwork { margin-top: var(--space-band); }
.howiwork .rules { margin-top: 0; }
.writing { margin-top: var(--space-band); }
.writing .reads { margin-top: 0; }
.doors-wrap { margin-top: var(--space-band); scroll-margin-top: 90px; }
.doors-wrap .cvhire { margin-top: 0; }
@media print { .writing, .howiwork { display: none !important; } }
/* comfortable tap targets for the small text links */
.cv-hero .profile__links a, .idcard__links a { display: inline-block; padding-block: 0.3rem; }
.qa-card a, .receipt__how a { padding-block: 0.15rem; }
.cvc__cols .print-cv { padding-block: 0.25rem; }
/* the closer's dot wave runs behind the two doors, never over them */
.doors-wrap { position: relative; z-index: 2; }
.door { background-color: #131311; }
.door--hire { background: linear-gradient(160deg, rgba(228, 164, 60, 0.09), transparent 55%), #131311; }

/* =====================  fewer words, more seeing  ===================== */
/* receipts: before and after, drawn to scale per result */
.ba { display: grid; gap: 6px; margin-top: var(--s-4); max-width: 17rem; }
.ba__row { display: grid; grid-template-columns: 1fr 3.4rem; align-items: center; gap: 0.6rem; }
.ba__row i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: rgba(250, 248, 243, 0.18); transform-origin: left; }
.ba__row--after i { background: var(--accent); }
.ba__row em { color: var(--soft); font-size: 11.5px; font-style: normal; letter-spacing: 0.06em; }
.receipt__src { display: block; margin-top: 0.7rem; color: var(--soft); font-size: 13px; }
.receipt__src a { color: var(--muted); border-bottom: 1px solid var(--hair-strong); }
.receipt__src .key { display: inline-block; width: 7px; height: 7px; margin-right: 0.45rem; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.lanes-dots { display: flex; gap: 6px; margin-top: var(--s-4); }
.lanes-dots i { width: 22px; height: 8px; border-radius: 4px; background: var(--accent); opacity: 0.85; }
.lanes-dots i:nth-child(even) { opacity: 0.55; }
.skills-dots { display: grid; grid-template-columns: repeat(25, 6px); gap: 4px; margin-top: var(--s-4); }
.skills-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(250, 248, 243, 0.16); }
.skills-dots i.mine { background: var(--accent); }
.js .receipts .ba__row i { transform: scaleX(0); transition: transform 900ms var(--ease); }
.js .receipts.is-live .ba__row i { transform: scaleX(1); }
.js .receipts.is-live .ba__row--after i { transition-delay: 250ms; }

/* chips: short phrases in place of paragraphs */
.cvchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cvchips li { padding: 0.32rem 0.65rem; border: 1px solid var(--hair-strong); border-radius: 999px; color: var(--muted); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.cvchips--me li { border-color: rgba(228, 164, 60, 0.45); background: var(--accent-soft); color: var(--fg); }
.lsplit { display: grid; gap: var(--s-4); align-content: start; }
.lsplit__who { margin: 0 0 0.45rem; color: var(--soft); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.lsplit__col--me .lsplit__who { color: var(--accent); }
.lsplit__bar { display: flex; gap: 4px; height: 6px; margin-top: 0.2rem; }
.lsplit__bar i { flex: var(--a) 1 0; border-radius: 3px; background: rgba(250, 248, 243, 0.2); }
.lsplit__bar b { flex: var(--m) 1 0; border-radius: 3px; background: var(--accent); }
.lane.play .lsplit__col { animation: cv-rise 500ms var(--ease) both; }
.lane.play .lsplit__col--me { animation-delay: 140ms; }
.role-panel__tags { align-self: center; }
.door__rows { display: grid; gap: 0.5rem; }
.door__rows .lsplit__who { margin-top: 0.6rem; }
.door__where { margin-top: 0.8rem; color: var(--muted); font-size: 14.5px; }

/* Q&A: three lines, then open */
.js .qa-card[data-qa] p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.js .qa-card[data-qa].is-open p { display: block; -webkit-line-clamp: unset; }
.qa-more { margin-top: 0.6rem; padding: 0.25rem 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; }
.qa-more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media print { .ba, .lanes-dots, .skills-dots, .cvchips { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .js .receipts .ba__row i { transform: none; transition: none; } }

/* =====================  lanes as strategy to execution to judgement to metric  ===================== */
.lane-group { display: block; padding: 0.9rem 0.8rem 0.35rem; color: var(--soft); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.lane-group:first-child { padding-top: 0.35rem; }
.lane__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; }
.stage { padding: 0.22rem 0.6rem; border: 1px solid var(--hair-strong); border-radius: 999px; color: var(--soft); font-size: 11.5px; letter-spacing: 0.06em; }
.flow { position: relative; display: grid; gap: 1rem; align-content: start; padding-left: 1.4rem; }
.flow::before { content: ""; position: absolute; left: 0.3rem; top: 0.4rem; bottom: 0.6rem; width: 1px; background: linear-gradient(rgba(250, 248, 243, 0.28), var(--accent)); }
.flow__step, .flow__kpi { position: relative; }
.flow__step::before, .flow__kpi::before { content: ""; position: absolute; left: -1.4rem; top: 0.2rem; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #151513; border: 1px solid rgba(250, 248, 243, 0.4); }
.flow__step--me::before { border-color: var(--accent); }
.flow__kpi::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.flow .lsplit__who { margin-bottom: 0.4rem; }
.flow__step--me .lsplit__who, .flow__kpi .lsplit__who { color: var(--accent); }
.cvchips--strat li { border-color: rgba(250, 248, 243, 0.32); color: var(--fg); }
.kpis { display: flex; flex-wrap: wrap; gap: 0.3rem 0; margin: 0; color: var(--fg); font-size: 14px; font-weight: 500; }
.kpis span + span::before { content: "\00B7"; margin: 0 0.55rem; color: var(--accent); }
.lane.play .flow > * { animation: cv-rise 480ms var(--ease) both; }
.lane.play .flow > *:nth-child(2) { animation-delay: 110ms; }
.lane.play .flow > *:nth-child(3) { animation-delay: 220ms; }
.lane.play .flow > *:nth-child(4) { animation-delay: 330ms; }
.board__body { min-height: 30rem; }
@media (max-width: 960px) {
  .lane-group { display: none; }
}

/* =====================  minimal: the 30-second page  ===================== */
.cv--min section:not(.cv-hero):not(.cv-proof) { padding-block: clamp(4rem, 7vw, 6rem) clamp(1rem, 2vw, 2rem); }
.cv--min .cv-hero .lead { max-width: 30ch; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.45; color: var(--muted); }
.cv--min .cv-hero .cta-row { margin-top: var(--s-6); }

.min-head { text-align: left; }
.min-head h2 { margin-top: var(--s-4); max-width: 20ch; }

/* three proofs, nothing else */
.proof3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; border-top: 1px solid var(--hair); text-align: left; }
.p3 { display: grid; gap: 0.35rem; padding: var(--s-6) var(--s-5) var(--s-6) 0; border-bottom: 1px solid var(--hair); }
.p3 + .p3 { padding-left: var(--s-6); border-left: 1px solid var(--hair); }
.p3__n { color: var(--fg); font-size: clamp(2.8rem, 5.4vw, 4.4rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.p3__what { margin-top: var(--s-3); color: var(--fg); font-size: 15.5px; }
.p3__src { color: var(--soft); font-size: 13px; }

/* the function as one map and one loop */
.map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.2fr); gap: var(--s-4); margin-top: var(--s-7); text-align: left; }
.map__col { padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius-lg); background: rgba(250, 248, 243, 0.02); }
.map__group { margin-bottom: var(--s-4); color: var(--accent); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; }
.map ul { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.map li { padding: 0.4rem 0.75rem; border: 1px solid var(--hair-strong); border-radius: 999px; color: var(--fg); font-size: 14px; white-space: nowrap; }
.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: lp; text-align: left; }
.loop li { position: relative; padding: 1.1rem 1rem 0 0; border-top: 2px solid rgba(250, 248, 243, 0.2); color: var(--muted); font-size: 14.5px; counter-increment: lp; }
.loop li::before { content: "0" counter(lp); display: block; margin-bottom: 0.3rem; color: var(--soft); font-size: 11.5px; letter-spacing: 0.1em; }
.loop li.me { border-top-color: var(--accent); color: var(--fg); }
.loop li.kpi { border-top-color: var(--accent); color: var(--fg); }
.loop li:not(:last-child)::after { content: ""; position: absolute; right: 0.6rem; top: -6px; width: 10px; height: 10px; border-top: 2px solid rgba(250, 248, 243, 0.35); border-right: 2px solid rgba(250, 248, 243, 0.35); transform: rotate(45deg); }
.lanes-more { margin-top: var(--s-6); text-align: left; }
.lanes-more > summary, .quick > summary {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none;
  color: var(--fg); font-size: 15px; border-bottom: 1px solid var(--hair-strong); padding-bottom: 0.2rem;
}
.lanes-more > summary::-webkit-details-marker, .quick > summary::-webkit-details-marker { display: none; }
.lanes-more > summary::after, .quick > summary::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; transition: transform 250ms var(--ease); }
.lanes-more[open] > summary::after, .quick[open] > summary::after { transform: rotate(45deg); }
.lanes-more .board { margin-top: var(--s-5); }

/* career: track and the one open role */
.cv--min .cvc { margin-top: var(--s-7); }
.cv--min .role-panel { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr); }

/* work: three cards, a title each */
.work3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); text-align: left; }
.w3 { display: flex; flex-direction: column; gap: var(--s-3); min-height: 12rem; padding: var(--s-5); border: 1px solid var(--hair); border-radius: var(--radius-lg); color: inherit; transition: border-color 300ms var(--ease), transform 300ms var(--ease); }
.w3:hover { border-color: var(--hair-strong); transform: translateY(-3px); }
.w3__tag { color: var(--soft); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; }
.w3 b { color: var(--fg); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.3; text-wrap: balance; }
.w3 .go { margin-top: auto; }

/* the close */
.cv--min #hire h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; max-width: 14ch; margin-inline: auto; }
.end-links { display: flex; justify-content: center; gap: var(--s-5); margin-top: var(--s-5); }
.end-links a, .linklike { padding: 0.3rem 0; border: 0; border-bottom: 1px solid var(--hair-strong); background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.end-links a:hover, .linklike:hover { color: var(--fg); }
.quick { position: relative; z-index: 2; max-width: 44rem; margin: var(--space-band) auto 0; text-align: left; }
.quick > summary { color: var(--muted); }
.quick__list { margin-top: var(--s-4); }
.qa { border-bottom: 1px solid var(--hair); }
.qa summary { padding: 0.9rem 0; color: var(--fg); font-size: 15px; cursor: pointer; }
.qa p { padding-bottom: 1rem; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.qa p a { color: var(--fg); border-bottom: 1px solid var(--hair-strong); }

@media (max-width: 960px) {
  .map, .work3 { grid-template-columns: 1fr; }
  .loop { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .loop li::after { display: none; }
  .cv--min .role-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .proof3 { grid-template-columns: 1fr; }
  .p3 + .p3 { padding-left: 0; border-left: 0; }
}
@media print {
  .cv section:not(#career) { display: none !important; }
  #career .wrap > *:not(.cvsheet) { display: none !important; }
  #career { padding: 0 !important; }
}
.quick { text-align: center; }
.quick__list { text-align: left; }
.trust span { display: inline-block; }
.status { max-width: 100%; }
.linklike-cta { border: 0; border-bottom: 1px solid var(--hair-strong); background: none; font: inherit; cursor: pointer; padding: 0 0 0.15rem; }

/* =====================  depth on demand  ===================== */
.more { margin-top: var(--s-5); text-align: left; }
.more > summary {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none;
  color: var(--muted); font-size: 14.5px; border-bottom: 1px solid var(--hair-strong); padding-bottom: 0.2rem;
}
.more > summary:hover { color: var(--fg); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; color: var(--accent); font-size: 18px; line-height: 1; transition: transform 250ms var(--ease); }
.more[open] > summary::after { transform: rotate(45deg); }
.more[open] > summary { color: var(--fg); }
.more__body { margin-top: var(--s-5); animation: cv-rise 420ms var(--ease) both; }
.more__body .mini-head { margin-top: var(--s-7); }
.receipts--all { margin-top: 0; }
.work3--more { margin-top: 0; }
.more__body .cvc__cols { margin-top: 0; }
.more__body .rules, .more__body .reads { margin-top: 0; }
.map li button {
  padding: 0.4rem 0.75rem; border: 1px solid var(--hair-strong); border-radius: 999px; background: none;
  color: var(--fg); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.map li button:hover, .map li button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.map li { padding: 0; border: 0; }
.quick .idcard { margin-bottom: var(--s-5); }
@media print { .more { display: none !important; } }
.cv--min .role-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); align-items: center; }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--accent); transition: transform 250ms var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
@media (max-width: 960px) { .cv--min .role-panel { grid-template-columns: 1fr; } }