/* ============================================================
   Spatial portfolio · story (v5)
   The Me window (profile) and the Experience window.
   Every root is an inline size container, so layouts follow the
   window width (big desktop window, phone screen), not the viewport.
   ============================================================ */

.st-root { container-type: inline-size; position: relative; }

/* ---------- shared bits ---------- */
.st-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-label-2); }
.st-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--vx-r-pill); background: var(--vx-fill); font-size: 12.5px; font-weight: 500; color: var(--vx-label-1); white-space: nowrap; flex: none; }
.st-chip .vx-ico { width: 15px; height: 15px; }
.st-btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.st-btn-sm .vx-ico, .st-btn-sm svg { width: 16px; height: 16px; }
.st-card { border-radius: var(--vx-r-card); background: var(--vx-platter); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.08); }
.st-card__eyebrow { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vx-label-2); }


/* staggered entrance, replayed by toggling .is-play on the root */
@keyframes st-rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes st-rise-lite { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-pop { from { opacity: 0; scale: 0.2; } to { opacity: 1; scale: 1; } }


/* app icon tiles (open the app in Work) */
.st-app { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 4px 14px 4px 5px; border: 0; border-radius: var(--vx-r-pill); background: var(--vx-fill); color: var(--vx-label-1); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.2s, scale 0.35s var(--vx-spring), translate 0.35s var(--vx-spring); }
.st-app:hover { background: var(--vx-fill-hi); translate: 0 -1px; }
.st-app:active { scale: 0.95; }
.st-app:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.st-app__icon { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.22), 0 4px 10px -4px rgb(0 0 0 / 0.5); }
.st-app__icon--glyph { display: grid; place-items: center; background: rgb(255 255 255 / 0.14); }
.st-app__icon--glyph .vx-ico { width: 18px; height: 18px; }
.st-app__name { white-space: nowrap; }

/* monogram disc (text only, never a company logo) */
.st-mono { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--vx-label-1); background: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.st-mono--deio { background: #0d0f14; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); }
.st-mono--deio .st-deio { width: 50%; height: auto; }
.st-mono--app { object-fit: cover; padding: 0; background: none; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.22), 0 6px 14px -8px rgb(0 0 0 / 0.6); }

/* ============================================================
   profile · the Me window (v6)
   8pt grid: 32px window padding, 24px between blocks, 16px inside
   small components. A small portrait (never draggable) with its
   1s and 0s toggle, the intro, one stats row, Certificates, the
   Alter ego card and the links. No live status anywhere.
   ============================================================ */
.vx-window.st-win--me > .vx-window__body { padding: 32px; overflow: hidden auto; }
.st-me-root { min-height: 100%; display: flex; flex-direction: column; }
.st-me {
  flex: 1; min-height: 0;
  display: grid; gap: 24px;
  grid-template-columns: 208px minmax(0, 1fr) minmax(0, 0.72fr);
  grid-template-rows: auto auto minmax(min-content, 1fr) auto;
  grid-template-areas:
    "pic   intro intro"
    "pic   stats stats"
    "certs certs other"
    "actions actions actions";
}

/* the portrait: small, calm, not draggable, flips to 1s and 0s */
.st-me__pic { grid-area: pic; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-me__photo {
  position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
  background: #4d4a47; isolation: isolate; cursor: default;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 18px 36px -22px rgb(0 0 0 / 0.6);
}
.st-me__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; -webkit-user-drag: none; user-select: none; pointer-events: none; transition: opacity 0.45s var(--vx-ease-out), filter 0.45s var(--vx-ease-out); }
.st-me__photo::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.26), inset 0 0 0 1px rgb(255 255 255 / 0.08); }
/* the 1s and 0s layer (a canvas from SPACE.binaryPhoto or the local renderer) */
.st-bin { position: absolute; inset: 0; z-index: 2; background: #05070a; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s var(--vx-ease-out), visibility 0s linear 0.45s; }
.st-bin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.035) 0 1px, transparent 1px 3px); }
.st-bin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-me__photo.is-binary .st-bin { opacity: 1; visibility: visible; transition: opacity 0.45s var(--vx-ease-out), visibility 0s; }
.st-me__photo.is-binary img { opacity: 0; filter: blur(6px); }

/* intro */
.st-me__intro { grid-area: intro; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-top: 4px; }
.st-me__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.st-me__name { font-size: 17px; font-weight: 700; letter-spacing: -0.012em; }
.st-me__role { font-size: 15px; color: var(--vx-label-2); }
.st-me__hero { margin: 0; font-size: 44px; line-height: 1.06; font-weight: 700; letter-spacing: -0.034em; text-wrap: balance; }
.st-me__bio { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--vx-label-2); max-width: 66ch; }
.st-me__bio b { color: var(--vx-label-1); font-weight: 600; }

/* the one stats row */
.st-me__stats { grid-area: stats; align-self: end; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-radius: var(--vx-r-card); background: var(--vx-platter); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.08); }
.st-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 24px; }
.st-stat + .st-stat { box-shadow: inset 1px 0 0 var(--vx-hairline); }
.st-stat__num { order: -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.st-stat__star { display: inline-grid; place-items: center; color: rgb(255 204 64); }
.st-stat__star .vx-ico { width: 20px; height: 20px; fill: currentColor; }
.st-stat__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--vx-label-1); }
.st-stat__note { margin: 0; font-size: 13px; color: var(--vx-label-2); text-wrap: balance; } /* wraps in narrow windows instead of cutting "Telco to fleet managem…" */

/* certificates (Me and Experience) */
.st-me__certs { grid-area: certs; display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; padding: 24px; }
.st-certs__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; }
.st-bnr { display: block; height: 32px; width: auto; opacity: 0.92; -webkit-user-drag: none; user-select: none; }
.st-certs { flex: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.st-certs > li { display: flex; min-width: 0; }
.st-cert {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 12px; border-radius: var(--vx-r-inner); background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  color: var(--vx-label-1); text-align: center; text-decoration: none;
  transition: background 0.25s, scale 0.35s var(--vx-spring), box-shadow 0.25s;
}
.st-cert:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.st-cert:active { scale: 0.97; }
.st-cert:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.st-cert__badge { width: 72px; height: 72px; flex: none; border-radius: 50%; -webkit-user-drag: none; user-select: none; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.35)); transition: scale 0.45s var(--vx-spring), rotate 0.45s var(--vx-spring); }
.st-cert:hover .st-cert__badge { scale: 1.06; rotate: -4deg; }
.st-cert__txt { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-width: 0; min-height: calc(2lh + 4px + 1.3em); }
/* titles take two lines' room, so every badge sits on the same line */
.st-cert__title { min-height: 2lh; display: flex; align-items: flex-end; justify-content: center; }
.st-cert__title { font-size: 14.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.st-cert__meta { font-size: 12.5px; line-height: 1.3; color: var(--vx-label-2); font-variant-numeric: tabular-nums; }
/* a quiet "Verify" hint that appears on hover and focus */
.st-cert__verify { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--vx-r-pill); background: rgb(255 255 255 / 0.14); font-size: 11.5px; font-weight: 600; color: var(--vx-label-1); opacity: 0; translate: 0 -2px; transition: opacity 0.2s, translate 0.3s var(--vx-spring); }
.st-cert__verify { gap: 2px; padding: 0 7px 0 9px; background: rgb(255 255 255 / 0.12); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.22); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); letter-spacing: -0.005em; pointer-events: none; }
.st-cert__verify .vx-ico { width: 12px; height: 12px; transition: translate 0.35s var(--vx-spring); }
.st-cert:hover .st-cert__verify, .st-cert:focus-visible .st-cert__verify { opacity: 1; translate: 0 0; }
.st-cert:hover .st-cert__verify .vx-ico, .st-cert:focus-visible .st-cert__verify .vx-ico { translate: 1px -1px; }
/* compact tiles (Me window): no room for the corner pill, so the level word crossfades to "Verify ↗" in place; the year stays */
.st-cert__lvl { display: inline-grid; vertical-align: bottom; }
.st-cert__lvl > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 2px; transition: opacity 0.2s, translate 0.3s var(--vx-spring); }
.st-cert__lvl-b { opacity: 0; translate: 0 3px; color: var(--vx-label-1); font-weight: 600; }
.st-cert__lvl-b .vx-ico { width: 11px; height: 11px; }
.st-cert:hover .st-cert__lvl-a, .st-cert:focus-visible .st-cert__lvl-a { opacity: 0; translate: 0 -3px; }
.st-cert:hover .st-cert__lvl-b, .st-cert:focus-visible .st-cert__lvl-b { opacity: 1; translate: 0 0; }

/* Alter ego card: a window into the battlefield. The alter ego's own map (a real render of its
   three.js scene: day in the light theme, night in the dark one) drifting under a fog vignette,
   lane glows with creep wave pulses, a hero ping, and the Town Portal sigil that channels on hover */
.st-other { grid-area: other; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-rows: 1fr auto; align-content: stretch; gap: 16px; min-width: 0; min-height: 0; padding: 24px; border: 0; border-radius: var(--vx-r-card); color: #fff; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: #111317;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.28), 0 14px 30px -18px rgb(0 0 0 / 0.55); transition: translate 0.5s var(--vx-spring), scale 0.45s var(--vx-spring), box-shadow 0.4s var(--vx-ease-out); }
.st-other:hover, .st-other:focus-visible { translate: 0 -3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 26px 44px -20px rgb(0 0 0 / 0.62), 0 10px 40px -18px rgb(80 210 175 / 0.35); }
.st-other:active { translate: 0 0; scale: 0.98; }
.st-other:focus-visible { outline: 3px solid #e6cf93; outline-offset: 3px; }
/* ornate frame: a gold edge and a finer inner hairline, over everything */
.st-other::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgb(255 236 190 / 0.26), inset 0 0 0 1px rgb(230 207 147 / 0.34), inset 0 0 0 6px rgb(9 10 13 / 0.22), inset 0 0 0 7px rgb(230 207 147 / 0.12); transition: box-shadow 0.4s var(--vx-ease-out); }
.st-other:hover::after, .st-other:focus-visible::after { box-shadow: inset 0 1px 0 rgb(255 236 190 / 0.36), inset 0 0 0 1px rgb(230 207 147 / 0.55), inset 0 0 0 6px rgb(9 10 13 / 0.22), inset 0 0 0 7px rgb(230 207 147 / 0.2); }

/* the battlefield: a slow drift (transform), pointer parallax (translate) and a zoom on hover (scale) */
.st-other__map { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.st-other__world { position: absolute; inset: -6%; translate: calc(var(--ax, 0) * -10px) calc(var(--ay, 0) * -7px); transition: translate 1.1s var(--vx-ease-out), scale 1.2s var(--vx-ease-out); animation: st-drift 30s ease-in-out infinite alternate; will-change: transform; }
.st-other:hover .st-other__world, .st-other:focus-visible .st-other__world { scale: 1.045; }
@keyframes st-drift { from { transform: translate3d(-2.2%, 1.4%, 0); } to { transform: translate3d(2.2%, -1.4%, 0); } }
.st-other__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; filter: saturate(0.86) brightness(0.8) contrast(1.05); transition: filter 0.6s var(--vx-ease-out); }
.st-other__img--night { display: none; filter: saturate(0.95) brightness(0.92) contrast(1.04); }
html.dark .st-other__img--day { display: none; }
html.dark .st-other__img--night { display: block; }
.st-other:hover .st-other__img, .st-other:focus-visible .st-other__img { filter: saturate(0.96) brightness(0.9) contrast(1.05); }
html.dark .st-other:hover .st-other__img--night, html.dark .st-other:focus-visible .st-other__img--night { filter: saturate(1) brightness(1.02) contrast(1.04); }
.st-other__field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* lanes: a faint warm glow along each road, and a creep wave that walks it toward the enemy */
.st-other__lane { fill: none; stroke: rgb(255 212 140 / 0.1); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: screen; }
/* a wave = three creeps: round dots on the lane, walking it */
.st-other__wave { fill: none; stroke: #ffe6ad; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 11 0.1 11 0.1 977.7; stroke-dashoffset: 1000; opacity: 0.9; animation: st-wave 14s linear infinite; animation-delay: calc(var(--w, 0) * -4.6s); }
@keyframes st-wave { to { stroke-dashoffset: 0; } }
/* the hero: a ground ring and a teal ping, flattened to the map's perspective */
.st-other__ping { fill: none; stroke: #8ff5d2; stroke-width: 5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: st-ping 2.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
.st-other__ping--late { animation-delay: 1.4s; }
@keyframes st-ping { 0% { opacity: 0.95; transform: scale(0.35); } 100% { opacity: 0; transform: scale(1.35); } }
.st-other__base { fill: rgb(143 245 210 / 0.26); stroke: #f0d89c; stroke-width: 4; }
.st-other__dot { fill: #eafff6; stroke: #0c1a16; stroke-width: 4; }

/* fog vignette + text scrim (keeps the copy AA over any part of the render), and a slow drifting mist */
.st-other__fog { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(to top, rgb(9 10 13 / 0.92) 0%, rgb(9 10 13 / 0.78) 24%, rgb(9 10 13 / 0.42) 48%, rgb(9 10 13 / 0) 66%),
    linear-gradient(to right, rgb(9 10 13 / 0.5) 0%, rgb(9 10 13 / 0.16) 48%, rgb(9 10 13 / 0) 66%),
    radial-gradient(130% 110% at 62% 34%, rgb(6 7 10 / 0) 52%, rgb(6 7 10 / 0.72) 100%); }
.st-other__fog::before { content: ""; position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: screen;
  background: radial-gradient(38% 30% at 30% 40%, rgb(190 214 205 / 0.18), transparent 70%), radial-gradient(34% 26% at 76% 62%, rgb(190 214 205 / 0.14), transparent 70%);
  background-size: 200% 200%; animation: st-mist 26s ease-in-out infinite alternate; }
html.dark .st-other__fog::before { background: radial-gradient(38% 30% at 30% 40%, rgb(150 176 230 / 0.16), transparent 70%), radial-gradient(34% 26% at 76% 62%, rgb(150 176 230 / 0.12), transparent 70%); background-size: 200% 200%; }
@keyframes st-mist { from { background-position: 0% 0%; } to { background-position: 100% 60%; } }

/* the Town Portal sigil: counter turning rings, a teal core that breathes; hover = channel */
.st-other__sigil { position: absolute; top: 18px; right: 18px; z-index: 0; width: clamp(80px, 23%, 116px); aspect-ratio: 1; color: #f0d89c; pointer-events: none; translate: calc(var(--ax, 0) * 4px) calc(var(--ay, 0) * 3px); transition: translate 1.1s var(--vx-ease-out), scale 0.6s var(--vx-spring); }
.st-other__sigil::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgb(9 10 13 / 0.62), rgb(9 10 13 / 0.34) 62%, rgb(9 10 13 / 0)); }
.st-other__halo { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgb(170 255 226 / 0.62), rgb(60 205 168 / 0.3) 38%, rgb(30 150 125 / 0) 72%); animation: st-core 3.4s ease-in-out infinite; transition: filter 0.5s var(--vx-ease-out), scale 0.7s var(--vx-spring); }
@keyframes st-core { 0%, 100% { opacity: 0.66; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.04); } }
.st-other__sigil-svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgb(255 226 160 / 0.75)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.6)); transition: filter 0.5s var(--vx-ease-out); }
.st-sg, .st-sg__ch { transform-box: fill-box; transform-origin: center; }
.st-sg--a { animation: st-turn 64s linear infinite; }
.st-sg--b { animation: st-turn 44s linear infinite reverse; }
.st-sg--c { animation: st-turn 90s linear infinite; }
.st-sg--d { animation: st-turn 120s linear infinite reverse; }
.st-sg__ch { animation: st-turn 2.6s linear infinite paused; }
.st-sg--b .st-sg__ch, .st-sg--d .st-sg__ch { animation-direction: reverse; animation-duration: 1.9s; }
.st-sg--c .st-sg__ch { animation-duration: 3.4s; }
@keyframes st-turn { to { transform: rotate(360deg); } }
.st-sg__core { fill: rgb(143 245 210 / 0.16); transition: fill 0.5s var(--vx-ease-out); }
.st-sg__spark { fill: #effff9; transform-box: fill-box; transform-origin: center; animation: st-spark 3.4s ease-in-out infinite; }
@keyframes st-spark { 0%, 100% { opacity: 0.75; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }
.st-other:hover .st-sg__ch, .st-other:focus-visible .st-sg__ch { animation-play-state: running; }
.st-other:hover .st-other__sigil, .st-other:focus-visible .st-other__sigil { scale: 1.07; }
.st-other:hover .st-other__sigil-svg, .st-other:focus-visible .st-other__sigil-svg { filter: drop-shadow(0 0 2px rgb(255 232 170 / 0.95)) drop-shadow(0 0 10px rgb(240 200 120 / 0.55)) drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.st-other:hover .st-other__halo, .st-other:focus-visible .st-other__halo { filter: brightness(1.45) saturate(1.15); scale: 1.12; }
.st-other:hover .st-sg__core, .st-other:focus-visible .st-sg__core { fill: rgb(160 250 220 / 0.34); }
/* paused while the Me window is away */
.st-other.is-away *, .st-other.is-away *::before { animation-play-state: paused !important; }

.st-other__txt { align-self: end; display: flex; flex-direction: column; gap: 4px; max-width: 74%; min-width: 0; position: relative; text-shadow: 0 1px 12px rgb(0 0 0 / 0.55); }
/* a soft shadow pool right behind the copy, so it stays AA wherever the drift puts the river */
.st-other__txt::before { content: ""; position: absolute; inset: -28px -48px -20px -40px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(9 10 13 / 0.7), rgb(9 10 13 / 0.46) 60%, rgb(9 10 13 / 0)); }
.st-other__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #f0dca6; text-shadow: 0 1px 2px rgb(0 0 0 / 0.7), 0 0 14px rgb(0 0 0 / 0.6); }
.st-other__title { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.st-other__sub { font-size: 14px; line-height: 1.4; color: rgb(255 255 255 / 0.84); text-wrap: pretty; }
.st-other__go { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--vx-r-pill); background: linear-gradient(180deg, #f3e2b0, #d6b26a); color: #1d1606; font-size: 14px; font-weight: 600; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 6px 16px -8px rgb(0 0 0 / 0.6); transition: box-shadow 0.4s var(--vx-ease-out); }
.st-other:hover .st-other__go, .st-other:focus-visible .st-other__go { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 6px 16px -8px rgb(0 0 0 / 0.6), 0 0 22px -4px rgb(240 200 120 / 0.55); }
.st-other__go .vx-ico { width: 16px; height: 16px; transition: translate 0.4s var(--vx-spring); }
.st-other:hover .st-other__go .vx-ico { translate: 3px 0; }

/* actions + links */
.st-me__actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.st-me__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.st-cta { min-height: 48px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.st-links { display: flex; flex-wrap: wrap; gap: 8px; }
.st-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 8px; border: 0; border-radius: var(--vx-r-pill); background: transparent; color: var(--vx-label-1); font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background 0.2s, scale 0.3s var(--vx-spring); }
.st-link:hover { background: var(--vx-fill); }
.st-link:active { scale: 0.95; }
.st-link:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.st-link .vx-ricon { --ricon: 32px; flex: none; }
.st-link__glyph { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--vx-fill); }
.st-link__glyph .vx-ico { width: 16px; height: 16px; }

/* entrance */
.is-play .st-me .st-stagger > * { animation: st-rise 0.7s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.is-play .st-me .st-me__pic { animation: st-fade 0.6s var(--vx-ease-out) both; }
.is-play .st-me .st-stat { animation: st-rise-lite 0.6s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 220ms); }
.is-play .st-me .st-me__certs, .is-play .st-me .st-other, .is-play .st-me .st-me__actions { animation: st-rise-lite 0.65s var(--vx-ease-out) both; animation-delay: 340ms; }
.is-play .st-me .st-other { animation-delay: 400ms; }
.is-play .st-me .st-me__actions { animation-delay: 460ms; }
.is-play .st-me .st-certs > li { animation: st-rise-lite 0.55s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 400ms); }

/* Desktop dock layout: the Me window is a fixed size, so the grid is a
   size container and steps down gracefully on shorter windows. */
html.vx-dockmode .st-me-root { height: 100%; min-height: 0; container-type: size; }
@media (min-width: 900px) and (max-height: 860px) {
  .vx-window.st-win--me > .vx-window__body { padding: 24px 32px; }
}
/* narrower windows */
@container (max-width: 1040px) {
  .st-me { grid-template-columns: 184px minmax(0, 1fr) minmax(0, 0.8fr); }
  .st-me__hero { font-size: 38px; }
  .st-stat { padding-left: 16px; padding-right: 16px; }
  .st-stat__num { font-size: 28px; }
  .st-cert__title { font-size: 13.5px; }
}
@container (max-height: 690px) {
  .st-me { gap: 16px 24px; grid-template-columns: 184px minmax(0, 1fr) minmax(0, 0.72fr); }
  .st-me__intro { gap: 8px; padding-top: 0; }
  .st-me__hero { font-size: 40px; }
  .st-me__bio { font-size: 15.5px; line-height: 1.55; }
  .st-stat { padding: 12px 16px; }
  .st-stat__num { font-size: 28px; }
  .st-me__certs { padding: 16px 24px 24px; gap: 12px; }
  .st-cert { padding: 12px; gap: 8px; }
  .st-cert__badge { width: 64px; height: 64px; }
  .st-other { padding: 16px 24px 24px; }
  .st-cta, .st-link { min-height: 44px; }
}
@container (max-height: 600px) {
  .st-me { gap: 12px 16px; grid-template-columns: 152px minmax(0, 1fr) minmax(0, 0.72fr); }
  .st-me__pic { gap: 8px; }
  .st-me__photo { border-radius: 20px; }
  .st-me__name { font-size: 16px; }
  .st-me__role { font-size: 14px; }
  .st-me__hero { font-size: 32px; }
  .st-me__bio { font-size: 14.5px; line-height: 1.5; }
  .st-stat { padding: 8px 16px; gap: 2px; }
  .st-stat__num { font-size: 24px; }
  .st-stat__label { font-size: 13px; }
  .st-stat__note { font-size: 12px; }
  .st-me__certs { padding: 16px; gap: 8px; }
  .st-certs__head { min-height: 24px; }
  .st-bnr { height: 24px; }
  .st-cert { padding: 8px; gap: 8px; }
  .st-cert__badge { width: 52px; height: 52px; }
  .st-cert__title { font-size: 13px; }
  .st-cert__meta { font-size: 12px; }
  .st-cert__verify { display: none; }
  .st-other__sub { display: none; }
}
@container (max-height: 500px) {
  .st-me__bio, .st-stat__note { display: none; }
  .st-me__hero { font-size: 28px; }
}

/* phones and narrow windows: one column, a Contacts style header */
@container (max-width: 760px) {
  .st-me {
    min-height: 0; gap: 16px;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "pic who"
      "hero hero"
      "bio bio"
      "ctas ctas"
      "stats stats"
      "certs certs"
      "other other"
      "links links";
  }
  .st-me__intro, .st-me__actions { display: contents; }
  .st-me__who { grid-area: who; align-self: center; flex-direction: column; align-items: flex-start; gap: 4px; }
  .st-me__name { font-size: 20px; }
  .st-me__role { font-size: 14.5px; line-height: 1.4; }
  /* stacked: each part on its own line, never a dangling "·" at a line end */
  .st-me__role .st-me__sep { display: none; }
  .st-me__role > span:not(.st-me__sep) { display: block; }
  .st-me__hero { grid-area: hero; font-size: 32px; margin-top: 8px; }
  .st-me__bio { grid-area: bio; }
  .st-me__ctas { grid-area: ctas; }
  .st-links { grid-area: links; }
  .st-me__pic { gap: 8px; }
  .st-me__photo { border-radius: 20px; }
  .st-me__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-stat { padding: 16px; }
  .st-stat:nth-child(3) { box-shadow: inset 0 1px 0 var(--vx-hairline); }
  .st-stat:nth-child(4) { box-shadow: inset 1px 0 0 var(--vx-hairline), inset 0 1px 0 var(--vx-hairline); }
  .st-me__certs { padding: 16px; }
  .st-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cert__verify { display: none; }
  .st-other { min-height: 248px; }
  .st-other__txt { max-width: 100%; }
  .st-other__sigil { width: 78px; top: 14px; right: 14px; }
  .st-me__ctas .st-cta { flex: 1 1 0; }
  .st-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .st-link { background: var(--vx-platter); border-radius: 18px; min-height: 56px; padding: 0 16px 0 12px; }
}
@container (max-width: 420px) {
  .st-me { grid-template-columns: 104px minmax(0, 1fr); }
  .st-me__hero { font-size: 30px; }
  .st-me__bio { font-size: 15.5px; }
  .st-stat__num { font-size: 28px; }
  .st-stat__note { white-space: normal; }
  .st-me__ctas { flex-direction: column; }
  .st-cert { padding: 16px 8px; }
  .st-cert__badge { width: 64px; height: 64px; }
}

/* ============================================================
   experience · eras and roles
   ============================================================ */
.vx-window.st-win--exp > .vx-window__body { padding: 36px 44px 48px; scroll-padding-top: 16px; }
.st-exp__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 4px; }
.st-exp__top .st-eyebrow { margin: 0; }
.st-exp__acts { display: flex; gap: 4px; margin-right: -10px; }
.st-exp__act { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--vx-r-pill); color: var(--vx-label-1); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background 0.2s, scale 0.3s var(--vx-spring); }
.st-exp__act:hover { background: var(--vx-fill); }
.st-exp__act:active { scale: 0.95; }
.st-exp__act:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.st-exp__act .vx-ico { width: 16px; height: 16px; }
.st-exp { display: flex; flex-direction: column; gap: 44px; }
.st-exp__head .st-rib { margin-top: 24px; }
.st-exp__title { margin: 0 0 10px; font-size: 42px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.st-exp__sub { margin: 0; font-size: 16.5px; line-height: 1.58; color: var(--vx-label-2); max-width: 66ch; }

/* ribbon: every role over time */
.st-rib { margin: 0; padding: 18px 18px 14px; border-radius: var(--vx-r-card); background: var(--vx-platter); container-type: inline-size; }
.st-rib__axis, .st-rib__row { display: grid; grid-template-columns: 210px 1fr; column-gap: 14px; align-items: center; }
.st-rib__axis .st-rib__track { position: relative; height: 18px; }
.st-rib__axis span { position: absolute; top: 0; font-size: 11.5px; font-weight: 500; color: var(--vx-label-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-rib__axis .st-rib__spacer { position: static; }
.st-rib__rows { list-style: none; margin: 0; padding: 0; }
.st-rib__row { width: 100%; min-height: 25px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; transition: background 0.2s; }
.st-rib__row:hover { background: rgb(255 255 255 / 0.06); }
.st-rib__row:focus-visible { outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: -2px; }
.st-rib__name { padding-left: 8px; font-size: 13px; font-weight: 500; color: var(--vx-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.st-rib__row:hover .st-rib__name { color: var(--vx-label-1); }
.st-rib__row .st-rib__track { position: relative; height: 25px; background-image: linear-gradient(90deg, var(--vx-hairline) 1px, transparent 1px); background-size: calc(100% / var(--years, 8)) 100%; }
.st-rib__bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; min-width: 6px; border-radius: 6px; transform-origin: left; }
.st-rib__bar--full { background: rgb(255 255 255 / 0.92); }
.st-rib__bar--free { background: rgb(255 255 255 / 0.5); }
.st-rib__bar--contract { background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.6) 0 3px, rgb(255 255 255 / 0.24) 3px 6px); }
.st-rib__bar--founder { background: rgb(150 184 255); }
.st-rib__bar--project { background: transparent; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.7); }
/* ongoing roles: the bar runs open to the right edge (no live dot) */
.st-rib__bar.is-present { border-top-right-radius: 0; border-bottom-right-radius: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), rgb(0 0 0 / 0.3)); mask-image: linear-gradient(90deg, #000 calc(100% - 16px), rgb(0 0 0 / 0.3)); }
.st-rib__row:hover .st-rib__bar { filter: brightness(1.15); }
.st-rib__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0 8px; font-size: 12px; color: var(--vx-label-2); }
.st-rib__legend span { display: inline-flex; align-items: center; gap: 7px; }
.st-rib__key { position: static; display: inline-block; width: 18px; height: 8px; margin: 0; border-radius: 4px; }
.is-play .st-rib__bar { animation: st-grow 0.9s var(--vx-ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 200ms); }
.is-play .st-rib__row { animation: st-fade 0.5s ease both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@keyframes st-grow { from { transform: scaleX(0); opacity: 0.3; } to { transform: none; opacity: 1; } }
/* narrow: each company name sits on its own line above a full width track, so long names
   ("Yeojinet Outsourcing Solutions") are never cut to an ellipsis in a 98px column */
@container (max-width: 560px) {
  .st-rib { padding: 16px; }
  .st-rib__axis, .st-rib__row { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .st-rib__axis .st-rib__spacer { display: none; }
  .st-rib__row { padding: 6px 0 2px; row-gap: 2px; }
  .st-rib__name { padding-left: 0; font-size: 13px; line-height: 1.3; white-space: normal; }
  .st-rib__row .st-rib__track { height: 16px; }
  .st-rib__axis span { font-size: 12px; letter-spacing: -0.02em; }
  .st-rib__axis span:nth-child(even) { visibility: hidden; }
  .st-rib__legend { margin-left: 0; }
}

/* era sections */
.st-era__head { margin: 0 0 18px 104px; }
.st-era__years { font-variant-numeric: tabular-nums; }
.st-era__title { margin: 0 0 8px; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.st-era__line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--vx-label-2); max-width: 66ch; }
.st-sec.is-arrive .st-era__head { animation: st-rise 0.6s var(--vx-ease-out) both; }

/* a card flashes when reached from the ribbon */
.st-role.is-flash .st-role__card { animation: st-flash 1.2s var(--vx-ease-out); }
@keyframes st-flash { 0% { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 0 30px rgb(255 255 255 / 0.25); } 100% { box-shadow: 0 0 0 2px rgb(255 255 255 / 0), 0 0 30px rgb(255 255 255 / 0); } }

.st-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 14px; }
.st-timeline::before { content: ""; position: absolute; left: 83px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--vx-hairline); }
.st-role { display: grid; grid-template-columns: 64px 40px minmax(0, 1fr); align-items: start; position: relative; }
.st-role__when { display: flex; flex-direction: column; align-items: flex-end; padding-top: 19px; text-align: right; }
.st-role__year { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.st-role__dur { font-size: 12px; color: var(--vx-label-2); white-space: nowrap; }
.st-role__node { justify-self: center; margin-top: 25px; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--vx-glass)); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7); position: relative; z-index: 1; }
.st-role.is-present .st-role__node { background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgb(255 255 255 / 0.14); }
.st-role__card { padding: 20px 22px; border-radius: var(--vx-r-card); background: var(--vx-platter); min-width: 0; transition: background 0.25s; }
.st-role__head { display: flex; align-items: center; gap: 14px; }
.st-role__id { flex: 1; min-width: 0; }
.st-role__title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.012em; }
.st-role__co { margin: 1px 0 0; font-size: 15px; color: var(--vx-label-2); }
.st-role__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: 13.5px; color: var(--vx-label-2); }
.st-role__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.st-role__meta .vx-ico { width: 14px; height: 14px; opacity: 0.85; }
.st-role__dur-inline { display: none; }
.st-role__desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--vx-label-2); max-width: 72ch; }
.st-role__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.st-role__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.st-role__case, .st-role__link { gap: 6px; }
.st-role__case { margin-left: auto; }
.st-role__case .vx-ico { width: 15px; height: 15px; transition: translate 0.35s var(--vx-spring); }
/* roles with a case study: the whole card is a way in */
.st-role.has-case .st-role__card { cursor: pointer; }
.st-role.has-case .st-role__card:hover { background: var(--vx-platter-hi); }
.st-role.has-case .st-role__card:hover .st-role__case { background: var(--vx-fill-hi); }
.st-role.has-case .st-role__card:hover .st-role__case .vx-ico { translate: 2px -2px; }

/* my own apps */
.st-own__list { list-style: none; margin: 0 0 0 104px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.st-own__card { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 0; border-radius: var(--vx-r-card); background: var(--vx-platter); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background 0.25s, scale 0.35s var(--vx-spring); }
.st-own__card:hover { background: var(--vx-platter-hi); }
.st-own__card:active { scale: 0.98; }
.st-own__card:focus-visible { outline: 3px solid rgb(255 255 255 / 0.9); outline-offset: 2px; }
.st-own__icon { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.2), 0 8px 18px -10px rgb(0 0 0 / 0.7); }
.st-own__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-own__txt b { font-size: 17px; font-weight: 600; }
.st-own__txt span { font-size: 14px; line-height: 1.4; color: var(--vx-label-2); }
.st-own__go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vx-fill); transition: translate 0.35s var(--vx-spring); }
.st-own__go .vx-ico { width: 15px; height: 15px; }
.st-own__card:hover .st-own__go { translate: 2px -2px; }

/* client apps (no employer named) reuse the own app cards */
.st-clients .st-own__list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.st-clients .st-own__txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* education and certificates */
.st-edu__body { margin-left: 104px; display: flex; flex-direction: column; gap: 16px; }
.st-edu__school { display: flex; align-items: flex-start; gap: 16px; padding: 24px; }
.st-mono--edu .vx-ico { width: 20px; height: 20px; }
.st-edu__id { flex: 1; min-width: 0; }
.st-edu__deg { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; }
.st-edu__sch { margin: 4px 0 0; font-size: 15px; color: var(--vx-label-2); }
.st-edu__school .st-role__meta { margin-top: 12px; }
.st-edu__certs { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.st-certs--wide .st-cert { padding: 24px 16px 20px; }
.st-certs--wide .st-cert__badge { width: 88px; height: 88px; }
.st-certs--wide .st-cert__title { font-size: 15px; }

.is-play .st-exp__head > * { animation: st-rise 0.6s var(--vx-ease-out) both; }
.is-play .st-exp__head > :nth-child(2) { animation-delay: 50ms; }
.is-play .st-exp__head > :nth-child(3) { animation-delay: 100ms; }
.is-play .st-exp__head > :nth-child(4) { animation-delay: 150ms; }

@container (max-width: 640px) {
  .st-exp { gap: 34px; }
  .st-exp__title { font-size: 30px; }
  .st-era__head { margin-left: 28px; }
  .st-era__title { font-size: 24px; }
  .st-timeline::before { left: 7px; }
  .st-role { grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; }
  .st-role__when { display: none; }
  .st-role__node { margin-top: 26px; width: 10px; height: 10px; }
  .st-role__dur-inline { display: inline; }
  .st-role__card { padding: 16px; }
  .st-role__head { gap: 12px; align-items: flex-start; }
  .st-role__head .st-chip { display: none; }
  .st-mono { width: 38px; height: 38px; border-radius: 12px; font-size: 11.5px; }
  .st-role__case { margin-left: 0; }
  .st-own__list { margin-left: 28px; grid-template-columns: 1fr; }
  .st-edu__body { margin-left: 28px; }
  .st-edu__school, .st-edu__certs { padding: 16px; }
  .st-certs--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-certs--wide .st-cert { padding: 16px 8px; }
  .st-certs--wide .st-cert__badge { width: 72px; height: 72px; }
  .st-cert__verify { display: none; }
}

/* ---------- phones: tighter window padding ---------- */
@media (max-width: 899px) {
  .vx-window.st-win--exp > .vx-window__body { padding: 28px 18px 32px; }
  .st-exp__act { width: 44px; min-height: 44px; padding: 0; justify-content: center; background: var(--vx-fill); }
  .st-exp__act > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .st-exp__acts { gap: 8px; margin-right: 0; }
  .vx-window.st-win--me > .vx-window__body { padding: 16px; }
}

/* ---------- reduced motion (system setting or the in app switch) ---------- */
@media (prefers-reduced-motion: reduce) {
  .st-other, .st-other__world, .st-other__sigil, .st-other__halo { translate: none !important; scale: none !important; }
  .st-other__world, .st-other__fog::before, .st-other__halo, .st-sg, .st-sg__ch, .st-sg__spark { animation: none !important; }
  .st-other__wave { animation: none !important; stroke-dashoffset: 880; }
  .st-other__ping { animation: none !important; }
  .st-other__ping:not(.st-other__ping--late) { opacity: 0.5; transform: scale(0.8); }
  .st-cert__badge { scale: none !important; rotate: none !important; }
  .st-cert__verify, .st-cert__verify .vx-ico, .st-cert__lvl > span { translate: none !important; transition: opacity 0.2s; }
}
html.vx-reduced .st-other, html.vx-reduced .st-other__world, html.vx-reduced .st-other__sigil, html.vx-reduced .st-other__halo { translate: none !important; scale: none !important; }
html.vx-reduced .st-other__world, html.vx-reduced .st-other__fog::before, html.vx-reduced .st-other__halo, html.vx-reduced .st-sg, html.vx-reduced .st-sg__ch, html.vx-reduced .st-sg__spark { animation: none !important; }
html.vx-reduced .st-other__wave { animation: none !important; stroke-dashoffset: 880; }
html.vx-reduced .st-other__ping { animation: none !important; }
html.vx-reduced .st-other__ping:not(.st-other__ping--late) { opacity: 0.5; transform: scale(0.8); }
html.vx-reduced .st-cert__badge { scale: none !important; rotate: none !important; }
html.vx-reduced .st-cert__verify, html.vx-reduced .st-cert__verify .vx-ico, html.vx-reduced .st-cert__lvl > span { translate: none !important; transition: opacity 0.2s; }

/* Wide layouts: the portrait spans the intro and the stats rows, so it fills that
   full height (object-fit keeps the face framed) instead of stopping short of the stats */
.st-me__photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 240px; }
/* phones keep the Contacts style 4:5 portrait beside the name */
@container (max-width: 760px) { .st-me__photo { aspect-ratio: 4 / 5; flex: none; min-height: 0; } }

/* My own apps: every card the same height (a two line tagline no longer makes one card taller) */
.st-own__list { grid-auto-rows: 1fr; }
.st-own__list > li { display: flex; min-width: 0; }
.st-own__card { height: 100%; }
/* ...and their contents share one top line: icon, name and arrow sit at the top of every card, so a
   one line tagline beside a two line one no longer drops its name lower (Atoplay next to FyDa) */
.st-own__card { align-items: start; }
.st-own__txt { padding-top: 5px; }
.st-own__go { margin-top: 11px; }