/* ============================================================
   Gediminas Strelčiūnas — portfolio
   Apple HIG, dark and light appearances. Two layers:
     · functional layer (floating nav, pills, the contact panel)
       uses the Liquid Glass material, over soft colour fields
       so the blur has something to refract
     · content layer (chart, roles, cards) stays opaque
   Contrast ratios noted beside each colour are WCAG, measured.
   ============================================================ */

/* ---------- Dark appearance (default) ---------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:          #000000;
  --surface:     #1d1d1f;   /* elevated card                          */
  --surface-2:   #2c2c2e;   /* fills, chips                           */
  --hairline:    rgba(255,255,255,0.10);
  --hairline-2:  rgba(255,255,255,0.18);
  --track:       rgba(255,255,255,0.06);

  /* Content */
  --text:        #f5f5f7;   /* 19.29:1 on bg · 15.46:1 on surface     */
  --text-2:      #a1a1a6;   /*  8.16:1 on bg ·  6.54:1 on surface     */
  --chip-text:   #a1a1a6;   /*  5.42:1 on surface-2                   */

  /* Accent — interactive only */
  --accent:      #2997ff;   /*  6.96:1 on bg ·  5.58:1 on surface     */
  --accent-fill: #0071e3;   /* white label on it = 4.70:1             */
  --accent-hi:   #47a9ff;

  /* Signal — "this is happening now", never anything else */
  --live:        #30d158;

  /* Chart ink — non-text graphic, needs 3:1 */
  --bar:         #636366;   /*  3.51:1 on bg                          */

  /* Glass material */
  --glass-bg:     rgba(38, 38, 42, 0.52);
  --glass-edge:   rgba(255,255,255,0.12);
  --glass-hi:     rgba(255,255,255,0.16);   /* specular top edge */
  --glass-shadow: 0 10px 36px rgba(0,0,0,0.45);
  --glass-solid:  #1d1d1f;                  /* Reduce Transparency */
  --material-bg:  rgba(28, 28, 30, 0.72);

  /* Colour fields behind the glass */
  --glow-1: rgba(41, 151, 255, 0.30);
  --glow-2: rgba(191, 90, 242, 0.24);
  --glow-3: rgba(48, 209, 88, 0.12);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Metrics */
  --maxw: 980px;
  --gutter: 22px;
  --r-card: 18px;
  --r-panel: 30px;
  --r-pill: 980px;
  --nav-h: 52px;
  --nav-top: calc(env(safe-area-inset-top, 0px) + 12px);

  /* Cadence chart columns */
  --lbl: 116px;
  --len: 52px;
  --colgap: 16px;
}

/* ---------- Light appearance ----------
   Applied when the system is light and the visitor hasn't chosen dark,
   or when the visitor chose light. Same tokens, redefined. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:          #f5f5f7;
    --surface:     #ffffff;
    --surface-2:   #e8e8ed;
    --hairline:    rgba(0,0,0,0.09);
    --hairline-2:  rgba(0,0,0,0.16);
    --track:       rgba(0,0,0,0.06);
    --text:        #1d1d1f;   /* 15.46:1 on bg */
    --text-2:      #6e6e73;   /*  4.66:1 on bg · 5.07:1 on surface */
    --chip-text:   #636366;   /*  4.90:1 on surface-2 (text-2 was 4.15) */
    --accent:      #0066cc;   /*  5.11:1 on bg */
    --accent-fill: #0071e3;
    --accent-hi:   #0077ed;
    --live:        #34c759;
    --bar:         #86868b;   /*  3.33:1 on bg */
    --glass-bg:     rgba(255,255,255,0.58);
    --glass-edge:   rgba(0,0,0,0.07);
    --glass-hi:     rgba(255,255,255,0.9);
    --glass-shadow: 0 10px 34px rgba(0,0,0,0.10);
    --glass-solid:  #ffffff;
    --material-bg:  rgba(255, 255, 255, 0.72);
    --glow-1: rgba(0, 113, 227, 0.20);
    --glow-2: rgba(175, 82, 222, 0.17);
    --glow-3: rgba(52, 199, 89, 0.12);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f5f5f7;
  --surface:     #ffffff;
  --surface-2:   #e8e8ed;
  --hairline:    rgba(0,0,0,0.09);
  --hairline-2:  rgba(0,0,0,0.16);
  --track:       rgba(0,0,0,0.06);
  --text:        #1d1d1f;
  --text-2:      #6e6e73;
  --chip-text:   #636366;
  --accent:      #0066cc;
  --accent-fill: #0071e3;
  --accent-hi:   #0077ed;
  --live:        #34c759;
  --bar:         #86868b;
  --glass-bg:     rgba(255,255,255,0.58);
  --glass-edge:   rgba(0,0,0,0.07);
  --glass-hi:     rgba(255,255,255,0.9);
  --glass-shadow: 0 10px 34px rgba(0,0,0,0.10);
  --glass-solid:  #ffffff;
  --material-bg:  rgba(255, 255, 255, 0.72);
  --glow-1: rgba(0, 113, 227, 0.20);
  --glow-2: rgba(175, 82, 222, 0.17);
  --glow-3: rgba(52, 199, 89, 0.12);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;                 /* Apple's default body size */
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; }
p { margin: 0; }
figure { margin: 0; }

::selection { background: var(--accent-fill); color: #fff; }

/* Keyboard focus — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 6px;
}
.button:focus-visible,
.link-chevron:focus-visible,
.theme-toggle:focus-visible,
.skip:focus-visible { border-radius: var(--r-pill); }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The nav floats, so anchored sections must land below it */
section[id] { scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 12px); }

.skip {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
}
.skip:focus { transform: translate(-50%, 0); }

/* ============================================================
   Glass material — functional layer only
   ============================================================ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
/* Standard material for the content layer (status pill, contact panel):
   thicker, no specular edge — depth without competing with the controls. */
.material {
  background: var(--material-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  backdrop-filter: blur(30px) saturate(1.2);
  border: 1px solid var(--hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .material { background: var(--glass-solid); }
}

/* Soft colour fields. Decorative, fixed to their section, never behind text
   strongly enough to hurt contrast. */
.hero, .section-contact { position: relative; isolation: isolate; overflow: clip; }
.hero::before,
.section-contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: blur(30px);
}
.hero::before {
  inset: -10% -10% 0;
  background:
    radial-gradient(38% 46% at 18% 22%, var(--glow-1), transparent 70%),
    radial-gradient(34% 42% at 82% 12%, var(--glow-2), transparent 70%),
    radial-gradient(30% 36% at 62% 78%, var(--glow-3), transparent 72%);
}
.section-contact::before {
  inset: 10% 0 0;
  background:
    radial-gradient(34% 50% at 24% 58%, var(--glow-2), transparent 70%),
    radial-gradient(36% 52% at 78% 40%, var(--glow-1), transparent 70%);
}

/* ---------- Floating capsule nav ---------- */
.chrome {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: 50;
  padding-inline: 12px;
  pointer-events: none;          /* only the capsule itself takes input */
}

.bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 6px 0 20px;
  height: var(--nav-h);
  border-radius: var(--r-pill);
}

.mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* comfortable hit region */
  padding-inline: 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}

.bar-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
  min-width: 0;
}
.bar-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.bar-links a:hover { color: var(--text); }

.theme-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { background: var(--hairline); color: var(--text); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { display: block; }
/* Show the appearance you would switch *to* */
.theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun  { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .i-moon { display: block; }
}
:root[data-theme="light"] .theme-toggle .i-sun  { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* ---------- Buttons & links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.button-primary { background: var(--accent-fill); color: #fff; }
.button-primary:hover { background: #0064d1; }   /* white on it 5.61:1 — the lighter hi tone fell to 2.5:1 */
.button-primary:active { transform: scale(0.98); }
.button-sm { min-height: 34px; padding: 0 16px; font-size: 14px; flex: none; }

.link-chevron {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 400;
}
.link-chevron::after {
  content: "›";
  margin-left: 5px;
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.link-chevron:hover { color: var(--accent-hi); }
.link-chevron:hover::after { transform: translateX(3px); }

/* ============================================================
   Content layer
   ============================================================ */
.hero { padding: calc(var(--nav-top) + var(--nav-h) + 96px) 0 92px; }
.section { padding: 84px 0; border-top: 1px solid var(--hairline); }
.section-contact { padding: 72px 0 96px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--text-2);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}

.display {
  font-size: clamp(46px, 9vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.standfirst {
  max-width: 34em;
  margin-top: 26px;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--text-2);
}
.standfirst-sm { font-size: clamp(17px, 1.9vw, 20px); margin-top: 18px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 34px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: 12px;
}

.title {
  max-width: 20ch;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.028em;
}
.title-lg { max-width: 16ch; font-size: clamp(32px, 5.2vw, 54px); }

.sub {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  margin-bottom: 16px;
}

/* ---------- Signature: roles drawn to scale on one time axis ---------- */
.cadence {
  margin-top: 44px;
  padding: 26px 0 22px;
  border-top: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline);
}

.cadence-caption {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 20px;
}

.cadence-chart {
  display: grid;
  grid-template-columns: var(--lbl) 1fr var(--len);
  column-gap: var(--colgap);
}

.cadence-axis {
  grid-column: 2;
  position: relative;
  height: 22px;
}
.tick {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tick i {
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 4px;
  background: var(--hairline-2);
}

.cadence-rows {
  grid-column: 1 / -1;
  display: grid;
  row-gap: 15px;
}
.cadence-row {
  display: grid;
  grid-template-columns: var(--lbl) 1fr var(--len);
  column-gap: var(--colgap);
  align-items: center;
}
.cadence-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.cadence-label .logo { color: var(--text-2); }
.cadence-label .logo-oxylabs { --h: 13px; }
.cadence-label .logo-nortal  { --h: 14px; }
.cadence-label .logo-telia   { --h: 12px; }
.cadence-label .logo-shift4  { --h: 10px; }
.cadence-label .logo-ibm     { --h: 13px; }
.cadence-label .logo-barclays { --h: 12px; }
.cadence-label .logo-hass     { --h: 12px; }

.cadence-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--track);
}
.cadence-bar {
  position: absolute;
  inset: 0 auto 0 var(--s);
  width: calc(var(--w) - 2px);   /* a hairline notch where one role hands over to the next */
  min-width: 6px;
  border-radius: var(--r-pill);
  background: var(--bar);
  transform-origin: left center;
}
/* A role that overlaps an earlier one at the same company sits on top of it,
   slightly thinner and lighter, so the longer role still shows around it —
   an overlap, not a hand-over. */
.cadence-bar.overlap {
  z-index: 1;
  top: 2px;
  bottom: 2px;
  background: color-mix(in srgb, var(--bar) 45%, var(--text));
}
.cadence-bar.overlap::before { inset: -11px 0; }
/* Each segment is a link: give it a comfortable hit area beyond its 10px */
.cadence-bar::before { content: ""; position: absolute; inset: -9px 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cadence-len {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.is-current .cadence-len { color: var(--text); font-weight: 600; }
.is-current .cadence-label .logo { color: var(--text); }
.is-current .cadence-bar { background: var(--text); }

.cadence-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}

/* ---------- Roles ---------- */
.roles {
  display: grid;
  row-gap: 0;
  margin-top: 16px;
}
.role {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 28px;
  padding: 34px 0;
  border-top: 1px solid var(--hairline);
}
.role:first-child { border-top: none; }

.role-when { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.role-period { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--chip-text);
}
.badge-live { color: var(--text); }

.role-title { font-size: 21px; letter-spacing: -0.02em; }
.role-org {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 13px;
  margin-top: 9px;
  font-size: 15px;
  color: var(--text-2);
}

/* Company wordmarks. Masked, so each one takes the colour of the text beside it
   and follows the appearance; every mark sits at the same optical weight. */
.logo {
  display: block;
  height: var(--h, 17px);
  width: calc(var(--h, 17px) * var(--ratio));
  background: currentColor;
  color: var(--text);
  -webkit-mask: var(--src) no-repeat center / contain;
  mask: var(--src) no-repeat center / contain;
}
.logo-oxylabs { --src: url("logos/oxylabs.svg?v=20260923-9"); --ratio: 5.19; --h: 16px; }
.logo-nortal  { --src: url("logos/nortal.svg?v=20260923-9");  --ratio: 2.93; --h: 19px; }
.logo-telia   { --src: url("logos/telia.svg?v=20260923-9");   --ratio: 2.54; --h: 15px; }
.logo-shift4  { --src: url("logos/shift4.png?v=20260923-10"); --ratio: 3.53; --h: 12px; }
.logo-ibm     { --src: url("logos/ibm.svg?v=20260923-11");     --ratio: 2.68; --h: 17px; }
.logo-barclays { --src: url("logos/barclays.svg?v=20260923-11"); --ratio: 5.93; --h: 15px; }
.logo-hass     { --src: url("logos/hass.png?v=20260924-1");      --ratio: 3.27; --h: 16px; }

.role-dept { font-size: 15px; color: var(--text-2); }
.role-link { margin-top: 10px; }

.points { margin-top: 16px; display: grid; row-gap: 9px; }
.points li {
  position: relative;
  padding-left: 19px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bar);
}
.points b { color: var(--text); }

/* ---------- Work cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 26px;
  background: var(--surface);
  border-radius: var(--r-card);
}
.card-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}
.card-title { margin-top: 14px; font-size: 19px; letter-spacing: -0.02em; }
.card-body { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.card-facts span {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--chip-text);
}

/* ---------- Approach ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-2);
}

.creds { display: grid; }
.creds li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
}
.creds li:first-child { border-top: none; padding-top: 0; }
.cred-year { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cred-name { font-size: 16px; }

/* ---------- Contact ---------- */
.contact-panel {
  padding: 56px 52px 52px;
  border-radius: var(--r-panel);
}

/* ---------- Footer ---------- */
.foot {
  padding: 32px 0 calc(env(safe-area-inset-bottom, 0px) + 44px);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--text-2);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
.foot-edge { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.foot-edge[hidden] { display: none; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--text); }

/* ============================================================
   Interaction & motion
   Everything here is transform/opacity only, and all of it is
   switched off under Reduce Motion (see the end of the file).
   Hidden states apply only when JS is running, so the page is
   fully readable without it.
   ============================================================ */
:root { --spring: cubic-bezier(0.34, 1.36, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* Cross-document crossfade when switching EN ↔ LT */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Theme switch: the new appearance grows out of the toggle */
.theme-vt::view-transition-old(root),
.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-vt::view-transition-new(root) {
  animation: theme-reveal 0.62s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* Hero entrance: a short stagger, once */
.hero .wrap > * { animation: rise 0.9s var(--ease-out) both; }
.hero .wrap > :nth-child(2) { animation-delay: 0.06s; }
.hero .wrap > :nth-child(3) { animation-delay: 0.14s; }
.hero .wrap > :nth-child(4) { animation-delay: 0.22s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* The colour fields drift slowly, so the glass always has something moving behind it */
.hero::before { animation: drift 22s ease-in-out infinite alternate; will-change: transform; }
.section-contact::before { animation: drift 26s ease-in-out infinite alternate-reverse; will-change: transform; }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-3%, -1%, 0) scale(1.02); }
}

/* Live signal: a soft ring leaves the dot */
.status .status-dot { position: relative; }
.status .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--live);
  animation: ping 2.4s var(--ease-out) 4;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
}

/* Career bars draw themselves to scale, staggered */
.js .cadence .cadence-bar { transform: scaleX(0); }
.js .cadence.in .cadence-bar {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--i, 0) * 0.07s),
              background-color 0.2s ease;
}
.cadence-rows > li:nth-child(2) { --i: 1; }
.cadence-rows > li:nth-child(3) { --i: 2; }
.cadence-rows > li:nth-child(4) { --i: 3; }
.cadence-rows > li:nth-child(5) { --i: 4; }
.cadence-rows > li:nth-child(6) { --i: 5; }
.cadence-rows > li:nth-child(7) { --i: 6; }
.cadence-rows > li:nth-child(8) { --i: 7; }
.cadence-rows > li:nth-child(9) { --i: 8; }

/* The current role breathes at its leading edge */
.is-current .cadence-bar::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--live);
  opacity: 0;
  animation: ping 2.4s var(--ease-out) 1.4s 4;
}

/* ---------- Chart rows are links to their role ---------- */
.cadence-row {
  position: relative;
  margin-inline: -10px;
  padding: 5px 10px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}
.cadence-bar:focus-visible { border-radius: var(--r-pill); outline-offset: 3px; }
.cadence-bar { transition: background-color 0.2s ease; }
.cadence-row:hover { background: var(--track); }
.cadence-bar:hover,
.cadence-bar:focus-visible { background: var(--accent); }
.cadence-row:hover .cadence-label .logo,
.cadence-row:hover .cadence-len { color: var(--text); }

/* Glass tooltip with the role and dates */
.cadence-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transform-origin: left bottom;
  transition: opacity 0.18s ease, transform 0.25s var(--spring);
}
.cadence-tip span { font-size: 12px; font-weight: 400; color: var(--text-2); font-variant-numeric: tabular-nums; }
.tip-end .cadence-tip { left: auto; right: 0; transform-origin: right bottom; }
.cadence-bar:hover .cadence-tip,
.cadence-bar:focus-visible .cadence-tip { opacity: 1; transform: none; }
/* Touch: no hover, so the tip text stays for screen readers but is visually hidden */
@media (hover: none) {
  .cadence-tip {
    width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden;
    clip-path: inset(50%);
  }
}

/* A role reached from the chart glows briefly */
.role { position: relative; isolation: isolate; }
.role::before {
  content: "";
  position: absolute;
  inset: 10px -18px;
  z-index: -1;
  border-radius: 22px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
.role.is-flash::before { animation: flash 1.8s var(--ease-out); }
@keyframes flash {
  0%   { opacity: 0; }
  18%  { opacity: 0.12; }
  100% { opacity: 0; }
}

/* ---------- Nav: scroll-spy pill, scrolled state, language ---------- */
.bar-links { position: relative; isolation: isolate; }
.nav-pill {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  height: 32px;
  width: var(--pill-w, 0);
  margin-top: -16px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  opacity: 0;
  transform: translateX(var(--pill-x, 0));
  transition: transform 0.5s var(--spring), width 0.5s var(--spring), opacity 0.25s ease;
}
.nav-pill.on { opacity: 1; }
.bar-links a[aria-current="true"] { color: var(--text); }

.bar { transition: box-shadow 0.35s ease, background-color 0.35s ease; }
.chrome.is-scrolled .bar { --glass-shadow: 0 12px 40px rgba(0,0,0,0.28); }

/* Scroll edge effect: content fades out where it meets the floating bar
   instead of colliding with it. */
.chrome::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--nav-top));
  height: calc(var(--nav-top) + var(--nav-h) + 22px);
  background: linear-gradient(to bottom, var(--bg) 20%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.chrome.is-scrolled::before { opacity: 0.85; }

.lang-switch {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-switch:hover { background: var(--hairline); color: var(--text); }
.lang-switch:focus-visible { border-radius: 50%; }
.theme-toggle svg { transition: transform 0.5s var(--spring); }
.theme-toggle:hover svg { transform: rotate(-18deg); }

/* ---------- Glass & tinted buttons ---------- */
.button { gap: 8px; }
.button svg { flex: none; margin-left: -3px; }
.button-glass { color: var(--text); }
.button-glass:hover { background: var(--surface); }
.button-glass:active,
.button-tinted:active { transform: scale(0.98); }
.button-tinted { background: var(--hairline); color: var(--text); }
.button-tinted:hover { background: var(--hairline-2); }
.button:hover svg { animation: nudge 0.6s var(--spring); }
@keyframes nudge { 40% { transform: translateY(2px); } }


/* ---------- Career phases: revealed while the pointer is over the chart ---------- */
.cadence-chart { position: relative; }
.cadence-phases {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.phase {
  position: absolute;
  top: 0;
  bottom: -6px;
  left: var(--s);
  width: var(--w);
  border-left: 1px dashed var(--hairline-2);
  background: linear-gradient(to bottom, var(--track), transparent 70%);
}
.phase:nth-child(even) { background: linear-gradient(to bottom, var(--hairline), transparent 70%); }
.phase b {
  position: absolute;
  top: 0;
  left: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}
.phase-end b { left: auto; right: 0; }
.cadence-axis { grid-row: 1; transition: opacity 0.25s ease; }
.cadence-rows { grid-row: 2; position: relative; z-index: 1; }
@media (hover: hover) and (min-width: 641px) {
  .cadence-chart:hover .cadence-phases,
  .cadence-chart:focus-within .cadence-phases { opacity: 1; }
  .cadence-chart:hover .cadence-axis,
  .cadence-chart:focus-within .cadence-axis { opacity: 0; }
}

/* ---------- Role rail: a pinned, to-scale index beside the roles ---------- */
.role-rail { display: none; }

@media (min-width: 1000px) {
  .roles-layout {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 48px;
    margin-top: 16px;
  }
  .roles-layout .roles { margin-top: 0; }
  .roles-layout .role { grid-template-columns: 1fr; gap: 12px; }
  .roles-layout .role-when { flex-direction: row; align-items: center; gap: 12px; }

  .role-rail {
    display: block;
    position: sticky;
    top: calc(var(--nav-top) + var(--nav-h) + 28px);
    align-self: start;
    padding-top: 30px;
  }
  .role-rail ol { display: grid; gap: 2px; }
  .role-rail a {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    padding: 8px 12px 10px;
    border-radius: 12px;
    color: var(--text-2);
    transition: background-color 0.25s ease, color 0.25s ease;
  }
  .role-rail a:hover { background: var(--surface); color: var(--text); }
  .rail-org { font-size: 13px; font-weight: 600; }
  .rail-title {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rail-track {
    position: relative;
    height: 4px;
    margin-top: 6px;
    border-radius: var(--r-pill);
    background: var(--track);
  }
  .rail-bar {
    position: absolute;
    inset: 0 auto 0 var(--s);
    width: var(--w);
    min-width: 4px;
    border-radius: var(--r-pill);
    background: var(--bar);
    transition: background-color 0.25s ease;
  }
  .role-rail a[aria-current="true"] { background: var(--surface); color: var(--text); }
  .role-rail a[aria-current="true"] .rail-bar { background: var(--accent); }
}

/* ============================================================
   Adaptive: narrower widths
   ============================================================ */
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .role { grid-template-columns: 1fr; gap: 14px; }
  .role-when { flex-direction: row; align-items: center; gap: 12px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; --nav-h: 50px; --nav-top: calc(env(safe-area-inset-top, 0px) + 10px); }
  .hero { padding: calc(var(--nav-top) + var(--nav-h) + 60px) 0 64px; }
  .section { padding: 60px 0; }
  .section-contact { padding: 44px 0 64px; }
  .contact-panel { padding: 36px 24px 32px; border-radius: 26px; }

  .chrome { padding-inline: 10px; }
  .bar { gap: 4px; padding: 0 4px 0 16px; }
  .bar .button { display: none; }
  .bar-links {
    margin-left: 6px;
    margin-right: auto;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar-links::-webkit-scrollbar { display: none; }
  .bar-links {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 22px), transparent);
  }
  .bar-links a { padding-inline: 8px; font-size: 13px; }

  /* Timeline: stack each label above a full-width bar, like the charts in
     Screen Time, so ten years get the whole screen width instead of a
     sliver between two fixed columns. */
  .cadence-chart { grid-template-columns: 1fr; }
  .cadence-axis { grid-column: 1; margin-bottom: 4px; }
  .cadence-phases { display: none; }
  .tick:nth-child(even) { display: none; }   /* every four years fits a phone */
  .cadence-rows { row-gap: 18px; }
  .cadence-row {
    grid-template-columns: 1fr auto;
    row-gap: 8px;
  }
  .cadence-label { justify-content: flex-start; }
  .cadence-len { grid-column: 2; grid-row: 1; }
  .cadence-track { grid-column: 1 / -1; grid-row: 2; }

  .cards { grid-template-columns: 1fr; }
  .actions { gap: 4px 18px; }
}

@media (pointer: coarse) {
  .theme-toggle, .lang-switch { width: 44px; height: 44px; }
  .foot a { display: inline-block; padding-block: 12px; }
}

@media (max-width: 370px) {
  .bar-links a { padding-inline: 6px; }
}

/* ============================================================
   Accessibility settings
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal,
  .js .cadence .cadence-bar {
    opacity: 1;
    transform: none;
  }
}

/* Reduce Transparency — glass becomes an opaque surface */
@media (prefers-reduced-transparency: reduce) {
  .glass, .material, .cadence-tip {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Increase Contrast — stronger separators, brighter secondary text, no glass */
@media (prefers-contrast: more) {
  :root {
    --text-2:     #d1d1d6;
    --chip-text:  #d1d1d6;
    --hairline:   rgba(255,255,255,0.28);
    --hairline-2: rgba(255,255,255,0.45);
    --bar:        #8e8e93;
    --accent:     #63b4ff;
    --glass-edge: rgba(255,255,255,0.45);
  }
  :root[data-theme="light"] {
    --text-2:     #424245;
    --chip-text:  #424245;
    --hairline:   rgba(0,0,0,0.28);
    --hairline-2: rgba(0,0,0,0.45);
    --bar:        #6e6e73;
    --accent:     #0050a8;
    --glass-edge: rgba(0,0,0,0.45);
  }
  .glass, .material, .cadence-tip {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .card, .cadence, .tags li { outline: 1px solid var(--hairline); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --text-2:     #424245;
    --chip-text:  #424245;
    --hairline:   rgba(0,0,0,0.28);
    --hairline-2: rgba(0,0,0,0.45);
    --bar:        #6e6e73;
    --accent:     #0050a8;
    --glass-edge: rgba(0,0,0,0.45);
  }
}