/* Work experience: Mini Chris among the marks of the places he has worked (js/work/).
   Sits between the Wild Less Traveled portal and the footer, on the same measure, and reads every
   look's tokens. Everything here is real HTML: the six buttons and the six cards. work.js draws
   the orbit into .xp-stage and sets data-xp-state on the section:
     (none)    no JavaScript: no stage, no buttons, every card reads as a list
     loading   the scene is building (the stage holds a soft pool and the stand-in)
     ready     the 3D orbit; one card open at a time, in the sheet over the stage
     fallback  no WebGL (or it was lost): the buttons become a poster of the marks
   data-xp-open on the section names the open company; .xp-card.is-active is its card. */

.xp {
  position: relative;
  padding: calc(112px * var(--u-space)) var(--edge) calc(72px * var(--u-space)) var(--edge-text);
  background: var(--work-bg);
  backdrop-filter: blur(var(--work-blur));
  -webkit-backdrop-filter: blur(var(--work-blur));
  color: var(--text);
  --xp-radius: calc(18px * var(--u-radius, 1));
  --xp-sheet: color-mix(in srgb, var(--bg) 93%, transparent);
  --xp-sheet-line: color-mix(in srgb, var(--text) 12%, transparent);
  --xp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --xp-ms: calc(520ms * var(--u-motion, 1));
}
html:not([data-work='hidden']) .xp {
  padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
/* the portal is no longer the last section: the footer follows this one (see portal.css) */
html:not([data-work='hidden']) .xp + .site-footer {
  max-width: none;
  padding-left: max(var(--gutter), calc((100% - var(--measure)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--measure)) / 2));
}
.xp-inner { display: grid; gap: calc(36px * var(--u-space)); max-width: var(--measure); }

/* ── Heading, in the portal's voice ─────────────────────────────────────────────────────── */
.xp-head { display: grid; gap: calc(18px * var(--u-space)); position: relative; isolation: isolate; }
.xp-head::before {
  content: ''; position: absolute; inset: -14% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--bg) 62%, color-mix(in srgb, var(--bg) 60%, transparent) 84%, transparent);
}
.xp-kicker {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.xp-kicker::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.xp-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(34px, 4.2vw, 62px) * var(--u-type)); line-height: calc(1.04 * var(--u-leading, 1));
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance; max-width: 18ch;
}
.xp-title-2 { color: var(--text-2); }
.xp-lede {
  font-size: calc(17px * var(--u-type)); line-height: 1.55; color: var(--text-2); max-width: 52ch; text-wrap: pretty;
}
.xp-resume {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 0.35em; white-space: nowrap;
  color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color 200ms;
}
.xp-resume:hover { text-decoration-color: currentColor; }
.xp-resume .xp-arrow { transition: transform calc(420ms * var(--u-motion, 1)) cubic-bezier(0.34, 1.56, 0.64, 1); }
.xp-resume:hover .xp-arrow, .xp-resume:focus-visible .xp-arrow { transform: translateX(3px); }

/* ── The theatre: the orbit, the buttons beneath it, the sheet over its right side ──────── */
.xp-theatre {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'stage' 'list';
  gap: calc(18px * var(--u-space));
}
.xp-stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 16 / 8.6;
  max-height: min(76vh, 720px);
  width: 100%;
  border-radius: var(--xp-radius);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  /* a soft pool for him to stand in while the scene builds */
  background: radial-gradient(34% 22% at 50% 76%, color-mix(in srgb, var(--text) 8%, transparent), transparent 72%);
  display: none;
}
.xp[data-xp-state]:not([data-xp-state='fallback']) .xp-stage { display: block; }  /* holds its space before boot */
.xp-stage.is-pointing { cursor: pointer; }
.xp-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  border-radius: inherit;
  /* the picture melts into the section rather than ending at a hard edge */
  -webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(130% 120% at 50% 50%, #000 62%, transparent 100%);
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity calc(700ms * var(--u-motion, 1)) var(--ease-enter), transform calc(900ms * var(--u-motion, 1)) var(--ease-enter);
}
.xp[data-xp-state='ready'] .xp-canvas,
.xp[data-xp-state='loading'] .xp-canvas.is-live { opacity: 1; transform: none; }

/* Hover names: projected from the marks by work.js; never intercept the pointer */
.xp-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; }
.xp-label {
  position: absolute; left: 0; top: 0;
  padding: 6px 10px 6px 11px; border-radius: 999px;
  font: 500 12px/1 var(--font-body); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--text); background: var(--xp-sheet);
  border: 1px solid var(--xp-sheet-line);
  box-shadow: 0 8px 22px -14px color-mix(in srgb, #000 60%, transparent);
  opacity: 0; translate: -50% calc(-100% + 4px);
  transition: opacity 220ms var(--xp-ease), translate 320ms var(--xp-ease);
  will-change: transform;
}
.xp-label.is-on { opacity: 1; translate: -50% -100%; }
.xp-label small { margin-left: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; color: var(--text-2); }

.xp-hint {
  position: absolute; left: 50%; bottom: 3%; z-index: 2;
  transform: translate(-50%, 4px);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 400ms var(--ease-enter), transform 400ms var(--ease-enter);
}
.xp[data-xp-state='ready']:not([data-xp-open]) .xp-stage:hover .xp-hint { opacity: 1; transform: translate(-50%, 0); }
.xp[data-xp-touched] .xp-hint { opacity: 0 !important; }
@media (hover: none) { .xp[data-xp-state='ready']:not([data-xp-open]):not([data-xp-touched]) .xp-hint { opacity: 0.9; transform: translate(-50%, 0); } }

/* ── The six buttons ────────────────────────────────────────────────────────────────────── */
.xp-list {
  grid-area: list;
  list-style: none; margin: 0; padding: 0;
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.xp[data-xp-state] .xp-list { display: grid; }
/* While the 3D orbit runs, its marks are the controls: the row is for keyboard and screen
   readers only, shown while focus is inside it. The no-WebGL fallback keeps it as the poster. */
.xp:not([data-xp-state='fallback']) .xp-list:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.xp:not([data-xp-state='fallback']) .xp-theatre:not(:has(.xp-list:focus-within)) { grid-template-areas: 'stage'; }
@media (max-width: 860px) {
  .xp:not([data-xp-state='fallback']) .xp-theatre:not(:has(.xp-list:focus-within)) { grid-template-areas: 'stage' 'panel'; }
}
.xp-co {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 10px;
  border-radius: calc(12px * var(--u-radius, 1));
  background: transparent;
  border: 1px solid var(--line);
  transition: background-color 220ms, border-color 220ms, transform calc(320ms * var(--u-motion, 1)) var(--xp-ease);
}
.xp-co:hover, .xp-co.is-hover { background: color-mix(in srgb, var(--text) 5%, transparent); border-color: var(--line-strong); }
.xp-co:active { transform: scale(0.98); }
.xp-co[aria-expanded='true'] {
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line-strong));
}
.xp-co:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; border-radius: calc(12px * var(--u-radius, 1)); }
.xp-co-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; }
.xp-co-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xp-co-mark svg.xp-mark--wide { width: 100%; height: auto; }
.xp-co-text { display: grid; gap: 3px; min-width: 0; }
.xp-co-name { font: 500 calc(14px * var(--u-type))/1.2 var(--font-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-co-years { font: 400 calc(12px * var(--u-type))/1.2 var(--font-body); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── The sheet ──────────────────────────────────────────────────────────────────────────── */
.xp-panel { grid-area: stage; position: relative; z-index: 3; }
.xp-panel-sheet { position: relative; }
.xp-card { display: grid; gap: 14px; }
.xp-card-head { display: flex; align-items: center; gap: 14px; }
.xp-card-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; }
.xp-card-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.xp-card-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(26px, 2.4vw, 34px) * var(--u-type)); line-height: 1.05; letter-spacing: -0.015em; color: var(--text);
}
.xp-card-meta { display: block; margin-top: 6px; font: 500 calc(13px * var(--u-type))/1.2 var(--font-body); color: var(--text-2); font-variant-numeric: tabular-nums; }
.xp-card-lede { font-size: calc(18px * var(--u-type)); line-height: 1.5; color: var(--text); text-wrap: pretty; }
.xp-card-body { font-size: calc(16px * var(--u-type)); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.xp-card-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.xp-card-points li {
  position: relative; padding-left: 18px;
  font-size: calc(15.5px * var(--u-type)); line-height: 1.55; color: var(--text-2); text-wrap: pretty;
}
.xp-card-points li::before {
  content: ''; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* No JavaScript: every card, as a readable list; no stage, no buttons, no sheet chrome */
.xp:not([data-xp-state]) .xp-panel-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px 40px; }
.xp:not([data-xp-state]) .xp-card { padding-top: 18px; border-top: 1px solid var(--line); align-content: start; }
.xp:not([data-xp-state]) .xp-panel-nav,
.xp:not([data-xp-state]) .xp-close { display: none; }

/* With script: one card at a time */
.xp[data-xp-state] .xp-card { display: none; }
.xp[data-xp-state] .xp-card.is-active { display: grid; animation: xp-card-in var(--xp-ms) var(--xp-ease) both; }
.xp[data-xp-dir='prev'] .xp-card.is-active { --xp-from: -14px; }
@keyframes xp-card-in { from { opacity: 0; transform: translateX(var(--xp-from, 14px)); } to { opacity: 1; transform: none; } }

.xp[data-xp-state] .xp-panel-sheet {
  display: grid; gap: 20px; align-content: start;
  padding: 26px 28px 18px;
  border-radius: var(--xp-radius);
  background: var(--xp-sheet);
  border: 1px solid var(--xp-sheet-line);
  position: relative; overflow: hidden;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, #000 55%, transparent), 0 2px 0 color-mix(in srgb, #fff 6%, transparent) inset;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
/* a thin band of the open company's colour along the top of the sheet */
.xp[data-xp-state] .xp-panel-sheet::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--xp-brand, var(--accent));
  transition: background-color 300ms;
}
.xp-close {
  position: absolute; top: 14px; right: 14px;
  appearance: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  color: var(--text-2); background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.xp-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.xp-close:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 999px; }
.xp[data-xp-state] .xp-card-head { padding-right: 40px; }
.xp-panel-nav {
  display: flex; justify-content: space-between; gap: 8px;
  margin: 2px -10px 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.xp-step {
  appearance: none; font: inherit; color: var(--text-2); cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px;
  background: transparent; border: 0; border-radius: 10px; min-width: 0;
  transition: color 200ms, background-color 200ms;
}
.xp-step--next { text-align: right; }
.xp-step:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.xp-step:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.xp-step > span { display: grid; gap: 2px; min-width: 0; }
.xp-step-dir { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.xp-step-name { font: 500 calc(14px * var(--u-type))/1.25 var(--font-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-step svg { flex: none; }

/* Wide, with the orbit: the sheet floats over the stage's right side; the scene slides left */
@media (min-width: 861px) {
  .xp[data-xp-state='ready'] .xp-panel,
  .xp[data-xp-state='loading'] .xp-panel {
    justify-self: end; align-self: center;
    width: min(43%, 460px);
    margin-right: clamp(8px, 2vw, 28px);
    max-height: 92%;
    overflow: auto;
    border-radius: var(--xp-radius);
    visibility: hidden; opacity: 0; transform: translateX(28px) scale(0.985);
    transition:
      opacity calc(360ms * var(--u-motion, 1)) var(--xp-ease),
      transform var(--xp-ms) var(--xp-ease),
      visibility 0s linear var(--xp-ms);
  }
  .xp[data-xp-open][data-xp-state='ready'] .xp-panel,
  .xp[data-xp-open][data-xp-state='loading'] .xp-panel {
    visibility: visible; opacity: 1; transform: none;
    transition-delay: 90ms, 40ms, 0s;
  }
}

/* No WebGL: the buttons become a poster of the marks, and the sheet reads below it */
.xp[data-xp-state='fallback'] .xp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xp[data-xp-state='fallback'] .xp-co {
  flex-direction: column; align-items: center; text-align: center; gap: 14px;
  min-height: 0; padding: 26px 14px 20px;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.xp[data-xp-state='fallback'] .xp-co-mark { width: 72px; height: 72px; }
.xp[data-xp-state='fallback'] .xp-co-text { justify-items: center; }
.xp[data-xp-state='fallback'] .xp-co-name { font-size: calc(16px * var(--u-type)); }
.xp[data-xp-state='fallback'] .xp-panel { grid-area: auto; }
.xp[data-xp-state='fallback'] .xp-theatre { grid-template-areas: 'list' 'panel'; }

/* In flow (narrow screens and the poster): the sheet opens under the buttons, never over them */
.xp[data-xp-state='fallback'] .xp-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--xp-ms) var(--xp-ease), opacity calc(360ms * var(--u-motion, 1)) var(--xp-ease);
}
.xp[data-xp-state='fallback'][data-xp-open] .xp-panel { grid-template-rows: 1fr; opacity: 1; }
.xp[data-xp-state='fallback'] .xp-panel > .xp-panel-sheet { min-height: 0; overflow: hidden; }
.xp[data-xp-state='fallback']:not([data-xp-open]) .xp-panel > .xp-panel-sheet { padding-top: 0; padding-bottom: 0; border-width: 0; visibility: hidden; }

/* ── Narrow: the orbit, the buttons as a 3 × 2 grid, then the sheet ─────────────────────── */
@media (max-width: 860px) {
  .xp { padding-top: calc(88px * var(--u-space)); padding-bottom: calc(48px * var(--u-space)); }
  .xp-inner { gap: calc(22px * var(--u-space)); }
  .xp-title { max-width: 16ch; }
  .xp-theatre { grid-template-areas: 'stage' 'list' 'panel'; gap: 12px; }
  .xp-stage { aspect-ratio: 1 / 0.82; max-height: none; margin: 0 -8px; width: calc(100% + 16px); }
  .xp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xp-co { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 10px 11px; min-height: 0; }
  .xp-co-mark { width: 26px; height: 26px; }
  .xp-co-name { font-size: calc(13.5px * var(--u-type)); }
  .xp-co-years { font-size: calc(11.5px * var(--u-type)); }
  .xp[data-xp-state] .xp-panel {
    grid-area: panel;
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows var(--xp-ms) var(--xp-ease), opacity calc(360ms * var(--u-motion, 1)) var(--xp-ease);
    scroll-margin: 24px;
  }
  .xp[data-xp-state][data-xp-open] .xp-panel { grid-template-rows: 1fr; opacity: 1; }
  .xp[data-xp-state] .xp-panel > .xp-panel-sheet { min-height: 0; overflow: hidden; padding: 22px 20px 12px; }
  .xp[data-xp-state]:not([data-xp-open]) .xp-panel > .xp-panel-sheet { padding-top: 0; padding-bottom: 0; border-width: 0; visibility: hidden; }
  .xp[data-xp-state='fallback'] .xp-co { align-items: center; padding: 18px 8px 14px; }
  .xp[data-xp-state='fallback'] .xp-co-mark { width: 52px; height: 52px; }
}
@media (max-width: 480px) {
  .xp-lede { font-size: calc(16px * var(--u-type)); }
  .xp-card-lede { font-size: calc(17px * var(--u-type)); }
  .xp-step-dir { display: none; }
  .xp-co-years { white-space: normal; }
  .xp-co-name { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Copy in each look's hand ───────────────────────────────────────────────────────────── */
html[data-direction^='swiss'] .xp-kicker::before { width: 32px; height: 4px; background: var(--color-swiss-red, var(--accent)); opacity: 1; }
html[data-direction^='swiss'] .xp-title { font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; }
html[data-direction^='swiss'] .xp-title-2 { color: var(--text); display: block; }
html[data-direction^='swiss'] .xp-co,
html[data-direction^='swiss'] .xp-stage,
html[data-direction^='swiss'] .xp-panel-sheet { border-radius: 0 !important; }
html[data-direction^='ink'] .xp-title-2,
html[data-direction^='stilllife'] .xp-title-2 { font-style: italic; }
html[data-direction^='toybox'] .xp-co[aria-expanded='true'] { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000); }
html[data-direction^='paper'] .xp-panel-sheet { border-radius: 2px !important; }
html[data-direction^='observatory'] .xp-kicker::before,
html[data-direction^='zenith'] .xp-kicker::before {
  width: 9px; height: 9px; opacity: 1; background: color-mix(in srgb, var(--accent) 82%, var(--text));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
html[data-direction^='observatory'] .xp-kicker { font-family: var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .xp-canvas { transform: none; transition: opacity 300ms linear; }
  .xp[data-xp-state] .xp-card.is-active { animation: none; }
  .xp-label { transition: none; }
}
/* base.css zeroes every transition under reduced motion with a layered !important; the sheet's
   appearance is a plain fade (no movement), so it keeps a short duration in the same layer. */
@layer engine { @media (prefers-reduced-motion: reduce) {
  .xp .xp-panel { transition-property: opacity, visibility !important; transition-duration: 200ms, 0s !important; transform: none !important; }
} }