/* The home page: one page that reads as one story (docs/design/unified-home/PROPOSAL.md). Only Sarv tokens and site roles; loaded by this page alone.
   Chapters: hero, proof, work (paper); AI (sky); why (forest); teammates (paper); world (wood); story (the visitor's sky); experience (chalkboard); tools and certificates (pegboard); mentorship (paper); contact (parchment). Everything that follows the time reads the theme on <html>, set from the visitor's clock. Bands join with the dither at the foot of the hero portrait. */

@media (prefers-reduced-motion: no-preference) { html:has(.px-home) { scroll-behavior: smooth; } }

/* ---- hero: the headline introduces; the fold shows the next chapter starting ---- */
.px-home .px-welcome { padding-block: var(--sarv-s8) var(--sarv-s6); gap: var(--sarv-s8); }
.px-home .px-welcome h1 { font: var(--site-t-hero); max-width: 21ch; }
.px-home .px-welcome .px-lede { max-width: 44ch; }
.px-home .px-portrait { position: relative; }
.px-home .px-portrait img { width: calc(var(--n) * 3px); }
.px-home .px-portrait .px-blink { position: absolute; z-index: 2; inset: 0; opacity: 0; animation: px-blink 6s steps(1) infinite; }
.px-home .px-portrait .px-look { position: absolute; z-index: 2; inset: 0; opacity: 0; }
.px-home .px-portrait.is-thinking .px-look { opacity: 1; }
/* the thought: drawn on the portrait's grid, so one of its pixels is one of his */
/* the story of the dots runs on a canvas behind him (home.js), so they pass behind his head; .px-idea is its last frame, for no script or less motion */
.px-dotstory { position: absolute; z-index: 0; pointer-events: none; }
.px-home .px-portrait img { position: relative; z-index: 1; }
.px-idea { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.px-idea .is-edge { fill: var(--sarv-ink); }
.px-idea .is-paper { fill: var(--sarv-paper); }
.px-idea .is-bar { fill: var(--sarv-clay); }
.px-idea .is-line { fill: var(--sarv-rule); }
.px-idea .is-go { fill: var(--sarv-green); }
.px-home .px-portrait:active .px-blink { animation-duration: 1.4s; } @media (hover: hover) { .px-home .px-portrait:hover .px-blink { animation-duration: 1.4s; } }
@keyframes px-blink { 0%, 95.9% { opacity: 0; } 96%, 98.9% { opacity: 1; } 99%, 100% { opacity: 0; } }
@media (min-width: 1024px) {
  .px-home .px-welcome { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sarv-s9); min-height: 640px; padding-block: var(--sarv-s10) var(--sarv-s8); }
  .px-home .px-portrait { justify-self: end; margin-inline-end: calc(var(--sarv-s5) * 1); }
}
@media (min-width: 1280px) { .px-home .px-portrait img { width: calc(var(--n) * 4px); } .px-home .px-portrait { margin-inline-end: var(--sarv-s4); } }

/* ---- a chapter ---- */
.px-part { position: relative; padding-block: var(--site-part); scroll-margin-block-start: calc(var(--sarv-s11) + var(--sarv-s2) - var(--site-part)); }   /* a section lands with its heading a comfortable step under the sticky header, however deep the chapter's padding */
.px-home h2 { max-width: 24ch; text-wrap: balance; }
.px-home p { text-wrap: pretty; }
.px-home .px-prose p, .px-mentor-copy > p:not(.px-lede) { max-width: 60ch; }
.px-more { margin: 0; }
/* even rows of clouds: one height in a row, the clouds end level and the names line up. Teammates pair by length, so each row is even too. */
.px-quotes:is(.is-three, .is-four) { gap: var(--site-card-gap); }
@media (min-width: 768px) { .px-quotes.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sarv-s9) var(--site-card-gap); } .px-quotes.is-four .px-quote { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sarv-s6); } }
@media (min-width: 1024px) { .px-quotes.is-three .px-quote { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--sarv-s6); } }
.px-quotes + .px-more { margin-block-start: var(--site-card-gap); }
.px-band { background: var(--band); }
.px-band::before, .px-band::after { content: ""; position: absolute; inset-inline: 0; block-size: var(--sarv-s3); background: var(--band); -webkit-mask: var(--sarv-dither) 0 0 / var(--sarv-s4) var(--sarv-s3) repeat-x; mask: var(--sarv-dither) 0 0 / var(--sarv-s4) var(--sarv-s3) repeat-x; }
.px-band::before { inset-block-end: 100%; }
.px-band::after { inset-block-start: 100%; transform: scaleY(-1); }
.px-band.is-last::after { content: none; }
.px-band.is-parch { --band: var(--sarv-parch); background: var(--sarv-parch-bg); }
.px-band.is-sky { --band: var(--px-sky); --px-sky: var(--sarv-sky-day); padding-block-end: 0; }
:root[data-theme="dark"] .px-band.is-sky { --px-sky: var(--sarv-night-edge); color: var(--sarv-halo); }
.px-band.is-sky { z-index: 2; }   /* over the house as it rolls up, and over the board its last step dissolves into */
.px-band.is-sky::after { --band: color-mix(in srgb, var(--site-board) 86%, var(--sarv-parch)); }

/* the way in: the house stays where it is while the morning or evening rolls up over it. Native scrolling; only the band moves, and it ends back in place. A viewer with no scroll timeline, or who asked for less motion, gets the plain edge. */
@supports (animation-timeline: view()) { @media (min-width: 768px) and (prefers-reduced-motion: no-preference) { #world { animation: px-pin linear; animation-timeline: view(); animation-range: exit 0% exit 100%; } } }
@keyframes px-pin { to { translate: 0 min(100dvh, 100%); } }   /* the scroll this range covers: a screen, or the band's own height when the screen is taller */

/* the way down: Story's parchment darkens in even steps to the board, the way the light goes */
.px-below::after { content: ""; position: absolute; inset: auto 0 0; height: var(--site-fade); --a: var(--sarv-parch); --b: var(--site-board); background: linear-gradient(180deg, color-mix(in srgb, var(--b) 14%, var(--a)) 0 16.66%, color-mix(in srgb, var(--b) 28%, var(--a)) 0 33.33%, color-mix(in srgb, var(--b) 43%, var(--a)) 0 50%, color-mix(in srgb, var(--b) 57%, var(--a)) 0 66.66%, color-mix(in srgb, var(--b) 72%, var(--a)) 0 83.33%, color-mix(in srgb, var(--b) 86%, var(--a)) 0); }

/* ---- Experience: the blackboard from the World's classroom. Words become chalk through the site's own role tokens; paper pinned to the board keeps its ink. ---- */
.px-part.is-board { --site-page: var(--site-board); --site-ink: var(--site-chalk); --site-muted: var(--site-chalk-soft); --site-action: var(--sarv-brass-light); --site-action-dark: var(--sarv-brass-light); --site-link: var(--sarv-brass-light); --site-evidence: var(--sarv-brass-light); --site-evidence-dark: var(--sarv-brass-light); --sarv-ink: var(--site-chalk); --sarv-ink-soft: var(--site-chalk-soft); --px-dash-y: repeating-linear-gradient(180deg, var(--site-chalk-soft) 0 var(--sarv-s2), transparent 0 var(--sarv-s3)); --px-dash-x: repeating-linear-gradient(90deg, var(--site-chalk-soft) 0 var(--sarv-s2), transparent 0 var(--sarv-s3)); z-index: 1; background: var(--site-board-bg); color: var(--site-chalk); }
.is-board .px-tl-peek { --site-ink: var(--site-paper-ink); --sarv-ink: var(--site-paper-ink); --sarv-ink-soft: var(--site-paper-soft); --site-muted: var(--site-paper-soft); color: var(--site-paper-ink); }
/* the way out: the chalk tray, with what was left on it, and the pegboard below it */
.is-board.is-end { padding-block-end: calc(var(--site-part) + var(--sarv-s6)); }
.px-tray { position: absolute; inset: auto 0 0; height: var(--sarv-s6); background: var(--sarv-wood-bg); box-shadow: 0 var(--sarv-card-depth) 0 var(--sarv-wood-edge-dark); }

/* ---- Tools and certificates: a pegboard, where the tools hang and the papers are pinned ---- */
.px-band.is-peg { --band: var(--site-peg); background: var(--site-peg-bg); }
.px-band.is-wood { --band: var(--sarv-wood); background: var(--sarv-wood-bg); color: var(--sarv-halo); }

/* ---- work ---- */
/* ---- selected work: the numbers lead; the cover gives way to the real screen on hover or focus. A touch screen has no hover, so it shows the real screen. ---- */
.px-sel-grid { display: grid; gap: var(--site-card-gap); }
@media (min-width: 1024px) { .px-sel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.px-sel { display: grid; grid-template-rows: auto 1fr; color: inherit; text-decoration: none; }
.px-sel-media { position: relative; display: block; aspect-ratio: 768 / 440; overflow: hidden; background: var(--sarv-parch); }
.px-sel-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-sel-real { position: absolute; inset: 0; display: flex; justify-content: center; gap: var(--sarv-s2); padding: var(--sarv-s3); background: var(--sarv-parch); opacity: 0; transition: opacity var(--sarv-quick) steps(4); }
.px-sel-real img:not([src]) { visibility: hidden; }
.px-sel-real img { display: block; min-width: 0; width: auto; max-width: 100%; height: 100%; object-fit: contain; box-shadow: 0 0 0 var(--sarv-press) var(--sarv-rule); }
.px-sel:focus-visible .px-sel-real { opacity: 1; } @media (hover: hover) { .px-sel:hover .px-sel-real { opacity: 1; } }
@media (hover: none) { .px-sel-real { opacity: 1; } }
.px-sel-body { display: grid; gap: var(--sarv-s4); grid-template-rows: auto auto auto 1fr; }
@media (min-width: 1024px) { .px-sel-grid { row-gap: 0; } .px-sel { grid-row: span 5; grid-template-rows: subgrid; } .px-sel-body { grid-row: 2 / -1; grid-template-rows: subgrid; } }   /* the numbers line up across the cards */
.px-sel-body .px-exhibit-go { align-self: end; }
.px-sel-name { font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-sel-name b { display: block; font: var(--site-t-h3); color: var(--site-ink); }
.px-sel-big { display: grid; gap: var(--sarv-s1); }
.px-sel-big strong { font: var(--sarv-t-num-xl); color: var(--site-evidence-dark); }
.px-sel-big span, .px-sel-more span { font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-sel-more { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sarv-s3); align-items: center; padding-block-start: var(--sarv-s3); border-block-start: var(--sarv-press) solid var(--site-hairline); }
@media (min-width: 768px) and (max-width: 1023.98px) { .px-sel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; } .px-sel-media { align-self: center; } }   /* a tablet: each card reads across */
.px-sel-more strong { font: var(--sarv-t-stat); color: var(--site-evidence-dark); }
.px-sel-grid + .px-more { margin-block-start: var(--sarv-s5); }

/* ---- proof: the numbers, then the teams, straight after the hero ---- */
.px-part.is-proof { padding-block: var(--site-group) var(--sarv-s6); scroll-margin-block-start: calc(var(--sarv-s11) + var(--sarv-s2) - var(--site-group)); }
.px-story-notes .px-btn { justify-content: flex-start; text-align: start; }
.is-proof .px-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sarv-s6) var(--site-card-gap); margin: 0; padding: 0; border: 0; max-width: none; }
.is-proof .px-stats div { justify-content: flex-end; }
@media (min-width: 768px) { .is-proof .px-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-proof-logos { display: grid; gap: var(--sarv-s4); margin-block-start: var(--site-group); }
.px-proof-logos h2 { font: var(--site-t-h4); }
.px-proof-logos .px-logos { margin: 0; }
@media (max-width: 767.98px) { .px-proof-logos .px-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sarv-s7) var(--sarv-s4); justify-items: center; align-items: center; padding-block: var(--sarv-s7); } .px-proof-logos .px-logos li { margin: 0; } .px-proof-logos .px-logos li:last-child:nth-child(3n + 1) { grid-column: 2; } }   /* a smaller screen: every logo in its own cell, at its designed size, with room around it */
@media (max-width: 359.98px) { .px-proof-logos .px-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .px-proof-logos .px-logos li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 768px) { .px-proof-logos .px-logos { justify-content: space-between; flex-wrap: nowrap; gap: var(--sarv-s5); } }

/* ---- why me: four calls on the carpet, each one a card that reads from the decision, through the reason, to what it changed. Pointing at one walks the dashed line to its result. ---- */
.px-band.is-forest { --band: var(--sarv-green-dark); background: var(--sarv-forest-bg); color: var(--sarv-halo); padding-block-end: calc(var(--site-part) + var(--sarv-s11)); }
.px-band.is-forest .px-part-head .px-lede { color: var(--sarv-inverse-ink-soft); }
.px-why-bg { position: absolute; inset: auto 0 0; height: var(--site-foot); pointer-events: none; overflow: hidden; }   /* a treeline under the cards: birds over it by day, fireflies by night */
.px-pines { position: absolute; inset: auto 0 0; height: var(--site-pines-far); background: color-mix(in srgb, var(--sarv-green-dark) 80%, var(--sarv-curtain)); mask: url(/assets/custom/voxel/pines.svg) left bottom / calc(var(--site-pines-far) * 2.4) var(--site-pines-far) repeat-x; }
.px-pines.is-near { height: var(--site-pines-near); background: color-mix(in srgb, var(--sarv-green-dark) 58%, var(--sarv-curtain)); mask-position: var(--site-pines-far) bottom; mask-size: calc(var(--site-pines-near) * 2.4) var(--site-pines-near); }
.px-why-bg .px-firefly { z-index: 1; display: none; }
:root[data-theme="dark"] .px-why-bg .px-firefly { display: block; }
:root[data-theme="dark"] .px-why-bg .px-birds { display: none; }
#why > .folio-wrap { position: relative; }
[data-live]:not(.is-live) * { animation-play-state: paused; }
.px-band.is-forest :focus-visible, .px-band.is-wood :focus-visible:not(.px-room *) { outline-color: var(--sarv-halo); }   /* the ink ring would vanish on these bands */
.px-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--site-card-gap); }
.px-calls li { display: grid; min-width: 0; }
.px-call { display: grid; color: var(--site-ink); text-decoration: none; background: var(--site-raised); }
.px-call:focus-visible { outline-color: var(--sarv-halo); }
.px-call .px-exhibit-body { gap: var(--sarv-s3); height: 100%; }
.px-call .px-chip { align-self: flex-start; }
.px-call h3 { font: var(--site-t-statement); }
.px-call-why { font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-call-proof { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sarv-s4); align-items: center; margin-block-start: auto; padding-block-start: var(--sarv-s5); }
.px-call-proof::before { content: ""; position: absolute; inset: var(--sarv-s2) 0 auto; height: var(--sarv-press); background: var(--px-dash-x); }
.px-call-proof strong { font: var(--sarv-t-num); color: var(--site-evidence-dark); white-space: nowrap; }
.px-call-proof span { font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-call .px-exhibit-go { margin-block-start: var(--sarv-s1); }
@media (hover: hover) { .px-call:hover .px-call-proof::before { animation: px-march-x .6s steps(4) infinite; } .px-call:hover .px-call-proof strong { color: var(--site-action); } }
.px-call:focus-visible .px-call-proof::before { animation: px-march-x .6s steps(4) infinite; }
@media (max-width: 479.98px) { .px-call-proof { grid-template-columns: minmax(0, 1fr); gap: var(--sarv-s1); } }
.px-why-bg .px-birds { inset-block-start: 0; }
@media (min-width: 768px) { .px-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the dashed line of the hero's illustration, as a fill for anything that joins two things; it walks with px-march */
:root { --px-dash-x: repeating-linear-gradient(90deg, var(--sarv-rule-dark) 0 var(--sarv-s2), transparent 0 var(--sarv-s3)); --px-dash-y: repeating-linear-gradient(180deg, var(--sarv-rule-dark) 0 var(--sarv-s2), transparent 0 var(--sarv-s3)); }
@keyframes px-march-x { to { background-position-x: var(--sarv-s3); } }

/* ---- experience: a road of roles. Each stop says what it was, what it achieved, and shows one project: inside the role on a phone or a tablet, beside the role you point at on a laptop, joined to it by the walking line ---- */
.px-tl { --gap: var(--sarv-s8); --rail: 0px; --node: var(--sarv-s3); --mid: calc(var(--rail) + (var(--node) - var(--sarv-press)) / 2); position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.px-tl > li { position: relative; padding-inline-start: calc(var(--rail) + var(--node) + var(--sarv-s5)); }
.px-tl > li::before { content: ""; position: absolute; z-index: 1; inset-block-start: var(--sarv-s2); inset-inline-start: var(--rail); width: var(--node); height: var(--node); background: var(--site-page); box-shadow: 0 0 0 var(--sarv-press) var(--sarv-rule-dark); transition: background-color var(--sarv-fast) steps(2), box-shadow var(--sarv-fast) steps(2); }
.px-tl > li.is-on::before { background: var(--site-action); box-shadow: 0 0 0 var(--sarv-press) var(--site-action), 0 0 0 var(--sarv-s2) var(--sarv-hover); } @media (hover: hover) { .px-tl > li:hover::before { background: var(--site-action); box-shadow: 0 0 0 var(--sarv-press) var(--site-action), 0 0 0 var(--sarv-s2) var(--sarv-hover); } }
.px-tl-year { margin: 0 0 var(--sarv-s1); font: var(--sarv-t-mono-label); color: var(--site-action-dark); }
.px-tl-role { display: grid; gap: var(--sarv-s2); justify-items: start; min-width: 0; }
.px-tl-role h3 { font: var(--site-t-h3); transition: color var(--sarv-fast) steps(2); }
.px-tl > li.is-on h3 { color: var(--site-action-dark); }
.px-tl-role p { margin: 0; }
.px-tl-org { font: var(--site-t-caption); font-weight: 700; }
.px-tl-when { font: var(--site-t-caption); color: var(--site-muted); }
.px-tl-text { font: var(--site-t-caption); max-width: 56ch; margin-block-start: var(--sarv-s1); }
.px-tl-wins { display: grid; gap: var(--sarv-s1); list-style: none; margin: 0; padding: 0; font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-tl-wins li { position: relative; padding-inline-start: var(--sarv-s4); }
.px-tl-wins li::before { content: ""; position: absolute; inset-block-start: var(--sarv-s2); inset-inline-start: 0; width: var(--sarv-s2); height: var(--sarv-s2); background: var(--site-evidence); }
.px-tl-project { display: grid; gap: calc(var(--sarv-s2) + var(--sarv-card-depth)); width: 100%; margin-block-start: var(--sarv-s2); color: inherit; text-decoration: none; }
.px-tl-peek { display: grid; background: var(--site-raised); }
.px-tl-peek .px-exhibit-body { gap: var(--sarv-s1); padding: var(--sarv-s4); font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-tl-peek b { font: var(--site-t-h4); color: var(--site-ink); }
.px-tl-go { display: inline-flex; align-items: center; gap: var(--sarv-s2); min-height: var(--sarv-hit); font: var(--site-t-control); font-variant-ligatures: none; color: var(--site-action-dark); }
.px-tl-go .px-icon { width: var(--sarv-s4); height: var(--sarv-s4); }
@media (hover: hover) { a.px-tl-project:hover .px-tl-go { text-decoration: underline; text-underline-offset: var(--sarv-s1); } }
@media (min-width: 640px) { .px-tl-peek { grid-template-columns: 216px minmax(0, 1fr); } .px-tl-peek img { height: 100%; aspect-ratio: auto; border-block-end: 0; border-inline-end: var(--sarv-press) solid var(--site-rule); } }
@media (min-width: 768px) { .px-tl { --rail: var(--sarv-s10); } .px-tl-year { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: calc(var(--rail) - var(--sarv-s4)); margin: 0; text-align: end; font: var(--site-t-meta); } }
@media (min-width: 1024px) and (hover: hover) {
  .px-tl { --gap: var(--sarv-s9); width: calc((100% - var(--sarv-s9)) * 7 / 12); }
  .px-tl-peek { position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: calc(100% + var(--sarv-s9)); width: calc((100% * 5 / 7)); grid-template-columns: minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity var(--sarv-quick) steps(3), visibility var(--sarv-quick) steps(3); }
  .px-tl-peek img { height: auto; aspect-ratio: 1024 / 587; border-inline-end: 0; border-block-end: var(--sarv-press) solid var(--site-rule); }
  .px-tl > li.is-on .px-tl-peek { opacity: 1; visibility: visible; }
  .px-tl > li:last-child .px-tl-peek { inset-block: auto 0; }
  .px-tl-project::before { content: ""; position: absolute; z-index: 1; inset-block-start: calc(var(--sarv-s2) + var(--sarv-s1)); inset-inline: 100% calc(var(--sarv-s9) * -1); height: var(--sarv-press); background: var(--px-dash-x); opacity: 0; }
  .px-tl > li.is-on .px-tl-project::before { opacity: 1; animation: px-march-x .6s steps(4) infinite; }
  .px-tl > li:last-child .px-tl-project::before { inset-block: auto var(--sarv-s6); }
  .px-tl-role { padding-inline-end: 0; }
}
/* the road runs from each dot to the next, so it starts and ends on a dot; each stretch fills as it crosses the middle of the screen */
@property --px-road { syntax: '<number>'; inherits: false; initial-value: 0; }
.px-tl > li:not(:last-child)::after { content: ""; position: absolute; inset-block: calc(var(--sarv-s2) + var(--node)) calc((var(--gap) + var(--sarv-s2)) * -1); inset-inline-start: var(--mid); width: var(--sarv-press); background: linear-gradient(var(--site-action), var(--site-action)) 0 0 / 100% calc(var(--px-road) * 100%) no-repeat, var(--px-dash-y); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .px-tl > li:not(:last-child)::after { animation: px-tl-road linear both; animation-timeline: view(block 0% 50%); animation-range: entry 0% entry 100%; } } }
@keyframes px-tl-road { to { --px-road: 1; } }
@media (prefers-reduced-motion: reduce) { .px-tl > li.is-on .px-tl-project::before, .px-call .px-call-proof::before { animation: none !important; } }

/* ---- tools as their marks, on the portrait's grid (scripts/render-tool-icons.mjs): a mat for each, the name on hover, focus or tap ---- */
.px-toolset { display: flex; flex-wrap: wrap; gap: var(--sarv-s3); list-style: none; margin: 0; padding: 0; }
.px-toolicon { --b: var(--sarv-rule); --e: var(--sarv-rule-dark); --lift: var(--sarv-chip-depth); position: relative; display: block; padding: var(--sarv-s1); background: var(--sarv-tile-light); box-shadow: 0 0 0 var(--sarv-press) var(--b), 0 var(--lift) 0 var(--sarv-press) var(--e); transition: translate var(--sarv-fast) steps(2); }
.px-toolicon img { display: block; width: var(--sarv-s8); height: var(--sarv-s8); image-rendering: pixelated; }
.px-toolicon::after { content: attr(data-tip); position: absolute; z-index: 5; inset-block-end: calc(100% + var(--sarv-tip-gap) + var(--sarv-press)); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; }   /* look: assets/sarv/tooltip.css */
.px-toolicon:focus { outline: none; }
.px-toolicon:is(:focus-visible, :active)::after { opacity: 1; }
.px-toolicon:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (hover: hover) { .px-toolicon:hover { translate: 0 calc(var(--sarv-press) * -1); } .px-toolicon:hover::after { opacity: 1; } }

/* ---- tools and certificates: the essentials of the old About page ---- */
.px-creds { display: grid; gap: var(--site-group); }
.px-cred { display: grid; gap: var(--sarv-s5); align-content: start; min-width: 0; }
.px-kit { display: grid; gap: var(--sarv-s5); margin: 0; }
.px-kit dt { font: var(--site-t-caption); color: var(--sarv-ink-soft); margin-block-end: var(--sarv-s2); }
.px-kit dd { margin: 0; }
.px-creds .px-certs { gap: var(--site-card-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) { .px-creds .px-certs { grid-template-columns: minmax(0, 1fr); } }
.px-creds .px-more { margin-block-start: var(--sarv-s3); }
.px-cert-full { display: block; width: 100%; height: auto; background: var(--sarv-white); }
@media (min-width: 640px) { .px-creds .px-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .px-creds { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sarv-s9); } .px-creds .px-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- mentorship: why, how and the values, all here now ---- */
.px-mentor-copy h3 { margin-block-start: var(--sarv-s6); }
.px-mentor-note { font: var(--site-t-caption); color: var(--sarv-ink-soft); max-width: 60ch; }
.px-mentor-values { display: grid; gap: var(--sarv-s3); margin-block: var(--site-group); }
.px-mentor-values > p { margin: 0 0 var(--sarv-s3); color: var(--sarv-ink-soft); }
.px-mentor-values h4 { margin: 0; font: var(--site-t-h4); }

/* ---- working with AI: the visitor's own sky. By day sun, clouds, birds and green hills; by night stars, the moon and fireflies. The steps light in turn down their line; the real assistant waits beside them ---- */
.px-band.is-time { --band: var(--sarv-sky-day); --t-soft: var(--sarv-ink-soft); --t-step: var(--sarv-wood-face); --t-accent: var(--sarv-wood); --t-dot: var(--sarv-clay); --t-node: var(--sarv-sky-day); background: var(--sarv-sky-bg); color: var(--sarv-ink); overflow: clip; }
:root[data-theme="dark"] .px-band.is-time { --band: var(--sarv-night-edge-dark); --t-soft: var(--sarv-inverse-ink-soft); --t-step: var(--sarv-brass-light); --t-accent: var(--sarv-brass-light); --t-dot: var(--sarv-brass); --t-node: var(--sarv-night-edge-dark); background: var(--sarv-night-bg); color: var(--sarv-halo); }
.px-band.is-time::before, .px-band.is-time::after { z-index: 1; }
.px-ai-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.px-ai-stars { position: absolute; inset: 0; display: none; mask: linear-gradient(90deg, var(--sarv-black) calc(50% - var(--site-container) / 2), transparent 0 calc(50% + var(--site-container) / 2), #000 0), linear-gradient(#000 var(--site-part), transparent 0 calc(100% - var(--site-part)), #000 0); }   /* stars fill the margins and stay out from behind the words */
:root[data-theme="dark"] .px-ai-stars { display: block; }
.px-ai-stars .px-sky-stars { opacity: var(--site-star); }
.px-ai-stars .is-near { transform: scale(-1, 1); animation: px-twinkle 5s steps(3) infinite; }
#ai .px-sky-orb { inset-block-start: var(--sarv-s7); inset-inline-end: max(var(--site-gutter), calc(50% - var(--site-container) / 2 + var(--sarv-s6))); }
#ai .px-cloud { inset-block-start: var(--sarv-s6); animation-duration: 64s; }
#ai .px-cloud.is-b { inset-block-start: var(--sarv-s10); animation-duration: 92s; }
#ai .px-birds { inset-block-start: var(--sarv-s9); }
#ai .px-firefly { display: none; inset-block-start: auto; }
@media (max-width: 767.98px) { :is(#ai, #story) .px-sky-orb { inset-block-start: var(--sarv-s4); width: var(--sarv-s8); height: var(--sarv-s8); } }
.px-ai-hills { position: absolute; inset: auto 0 0; height: var(--site-ridge); background: url(/assets/custom/voxel/hills.webp) center bottom / calc(var(--site-ridge) * 5) var(--site-ridge) repeat-x; image-rendering: pixelated; }
:root[data-theme="dark"] .px-ai-hills { filter: var(--sarv-night-land); }
@keyframes px-twinkle { 50% { opacity: calc(var(--site-star) / 4); } }
@media (prefers-reduced-motion: reduce) { .px-why-bg .px-firefly { display: none; } }
#ai.px-part { padding-block-end: calc(var(--site-part) + var(--sarv-s9)); }
#ai > .folio-wrap { position: relative; }
#ai .px-part-head .px-lede { color: var(--t-soft); }
.px-ai { display: grid; gap: var(--site-head-gap); align-items: start; }
.px-steps { --dur: 10s; position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--sarv-s6); display: grid; gap: var(--sarv-s5); }
.px-steps li { position: relative; display: grid; gap: var(--sarv-s1); animation: px-step var(--dur) steps(1) infinite; animation-delay: calc(var(--i) * var(--dur) / 4); }
.px-steps li::before { content: ""; position: absolute; inset-block-start: var(--sarv-s2); inset-inline-start: calc(var(--sarv-s6) * -1); width: var(--sarv-s3); height: var(--sarv-s3); background: var(--t-node); box-shadow: 0 0 0 var(--sarv-press) var(--t-dot); }
.px-steps li:nth-child(1) { --i: 0; } .px-steps li:nth-child(2) { --i: 1; } .px-steps li:nth-child(3) { --i: 2; } .px-steps li:nth-child(4) { --i: 3; }
.px-steps h3 { font: var(--site-t-h4); }
.px-steps li:not(:last-child) h3::before { content: ""; position: absolute; inset-block: calc(var(--sarv-s2) + var(--sarv-s3)) calc((var(--sarv-s5) + var(--sarv-s2)) * -1); inset-inline-start: calc(var(--sarv-s6) * -1 + (var(--sarv-s3) - var(--sarv-press)) / 2); width: var(--sarv-press); background: color-mix(in srgb, var(--t-dot) 45%, transparent); }   /* the line runs from dot to dot and ends on the last */
.px-steps p { margin: 0; font: var(--site-t-caption); color: var(--t-soft); }
@keyframes px-step { 0%, 24.9% { --lit: 1; } 25%, 100% { --lit: 0; } }
@property --lit { syntax: '<number>'; inherits: true; initial-value: 0; }
.px-steps h3 { color: color-mix(in srgb, var(--t-step) calc(var(--lit) * 100%), currentColor); }
.px-steps li::after { content: ""; position: absolute; inset-block-start: var(--sarv-s3); inset-inline-start: calc(var(--sarv-s6) * -1 + var(--sarv-s1)); width: var(--sarv-s1); height: var(--sarv-s1); background: var(--t-accent); opacity: var(--lit); }
.px-ai-tools { display: grid; gap: var(--sarv-s3); margin-block-start: var(--sarv-s7); }
.px-ai-note, .px-ai-tools h3 { font: var(--site-t-caption); color: var(--t-accent); }
.px-ai-tools .px-toolset { gap: var(--sarv-s2); }
.px-ai-tools .px-toolicon { --lift: var(--sarv-press); padding: 2px; }
.px-ai-tools .px-toolicon img { width: var(--sarv-s6); height: var(--sarv-s6); }   /* smaller than the toolkit's: the tools sit behind the work */
/* what it made: a strip of real screens on the band, not a second portfolio. One row from a laptop; rows of picture and words below it */
.px-shipped { position: relative; display: grid; gap: var(--sarv-s5); margin-block-start: var(--site-group); padding-block-start: var(--sarv-s6); }
.px-shipped::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--sarv-press); background: repeating-linear-gradient(90deg, var(--t-dot) 0 var(--sarv-s2), transparent 0 var(--sarv-s3)); }
.px-shipped-head { display: grid; gap: var(--sarv-s1); }
.px-shipped-head h3 { font: var(--site-t-h3); }
.px-shipped-head p { margin: 0; font: var(--site-t-caption); color: var(--t-soft); }
.px-shipped ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sarv-s4); }
.px-ship { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sarv-s3); align-items: start; color: inherit; text-decoration: none; }
.px-ship img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--sarv-white); box-shadow: 0 0 0 var(--sarv-press) var(--sarv-brass), 0 var(--sarv-s1) 0 var(--sarv-press) var(--sarv-edge); transition: translate var(--sarv-fast) steps(2); }
.px-ship-text { display: grid; gap: 2px; min-width: 0; }
.px-ship-type { font: var(--sarv-t-mono-label); letter-spacing: .08em; text-transform: uppercase; color: var(--t-accent); }
.px-ship-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sarv-s1) var(--sarv-s2); }
.px-ship-tag { --b: var(--sarv-green-dark); --e: var(--sarv-green-dark); background: var(--sarv-green-dark); color: var(--sarv-on-green); font: var(--sarv-t-chip-sm); padding-block: 0; }
.px-ship b { font: var(--site-t-h4); font-size: 16px; line-height: 24px; }
.px-ship b .px-icon { width: var(--sarv-s3); height: var(--sarv-s3); vertical-align: baseline; }
.px-ship-line { font: var(--sarv-t-note); color: var(--t-soft); }
@media (hover: hover) { .px-ship:hover img { translate: 0 calc(var(--sarv-press) * -1); } .px-ship:hover b { text-decoration: underline; text-underline-offset: var(--sarv-s1); } }
@media (min-width: 640px) and (max-width: 1023.98px) { .px-ship { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sarv-s4); } }
@media (min-width: 1024px) { .px-shipped ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sarv-s5); } .px-ship { grid-template-columns: minmax(0, 1fr); gap: var(--sarv-s3); } }
.px-ai-note { margin: 0 0 var(--sarv-s3); }
.px-ai-chat { min-width: 0; }
.px-ai-chat .ias-chatbot-window { box-shadow: 0 0 0 var(--sarv-press) var(--sarv-brass), 0 var(--sarv-card-depth) 0 var(--sarv-press) var(--sarv-edge); }
:root[data-theme="dark"] .px-ai-chat .ias-chatbot-window { box-shadow: 0 0 0 var(--sarv-press) var(--sarv-brass), 0 0 var(--sarv-s11) color-mix(in srgb, var(--sarv-brass-light) 40%, transparent); }   /* by night, a lit window in the dark */
@media (min-width: 1024px) { .px-ai { grid-template-columns: minmax(0, 1fr) var(--site-chat-w); gap: var(--sarv-s9); } }
@media (prefers-reduced-motion: reduce) { .px-ai-stars .is-near, .px-steps li { animation: none; } }

/* ---- a chapter's opening: the head on the left, and the character on the right, standing on the edge of what follows ---- */
.px-part-top { display: grid; gap: var(--sarv-s4); align-items: end; }
.px-part-head { display: grid; gap: var(--sarv-s4); justify-items: start; padding-block-end: var(--site-head-gap); max-width: 60ch; }
.px-part-head .px-lede { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); }
.px-part-head .px-actions { margin-block-start: var(--sarv-s2); }
.px-perch { justify-self: end; margin-block-end: calc(var(--sarv-s1) * -1); line-height: 0; position: relative; z-index: 2; }
.px-perch img { width: calc(var(--n) * 1.5px); }
.px-perch img[hidden] { display: none; }
#world .px-perch { display: flex; align-items: flex-end; min-height: 168px; }
@media (min-width: 768px) { .px-part-top { grid-template-columns: minmax(0, 1fr) auto; } .px-perch img { width: calc(var(--n) * 2px); } #world .px-perch { min-height: 224px; } }

.px-sky { position: absolute; inset: 0 0 auto; height: min(640px, 100%); overflow: hidden; pointer-events: none; }
.px-sky-stars { position: absolute; inset: 0 0 auto; width: 100%; height: 100%; opacity: 0; }
.px-sky-orb { position: absolute; inset-block-start: var(--sarv-s10); inset-inline-end: 12%; width: var(--sarv-s10); height: var(--sarv-s10); }
.px-sky-orb.is-moon { display: none; }
#story .px-cloud { inset-block-start: 14%; opacity: 1; animation-duration: 64s; }
#story .px-cloud.is-b { inset-block-start: 26%; animation-duration: 92s; }
#story .px-birds { inset-block-start: 20%; }
@media (max-width: 1023.98px) { :is(#story, #ai) .px-cloud { inset-block-start: var(--sarv-s4); } :is(#story, #ai) .px-cloud.is-b { inset-block-start: var(--sarv-s7); } :is(#story, #ai) .px-birds { inset-block-start: var(--sarv-s6); } }   /* on a narrow screen the sky keeps above the heading, so nothing drifts behind the words */
:root[data-theme="dark"] .px-sky-stars { opacity: var(--site-star); }
:root[data-theme="dark"] :is(#story, #ai) :is(.px-sky-orb.is-sun, .px-cloud, .px-birds) { display: none; }
:root[data-theme="dark"] .px-sky-orb.is-moon { display: block; filter: drop-shadow(0 0 var(--sarv-s5) color-mix(in srgb, var(--sarv-halo) 45%, transparent)); }
.px-sky-orb.is-sun { filter: drop-shadow(0 0 var(--sarv-s5) color-mix(in srgb, var(--sarv-badge-wait) 70%, transparent)); }
.px-sky .px-firefly { display: none; }
:root[data-theme="dark"] :is(.px-sky, .px-ai-sky) .px-firefly { display: block; }
:root[data-theme="dark"] #story .px-part-head .px-lede { color: var(--sarv-inverse-ink-soft); }
:root[data-theme="dark"] .px-stop::after, :root[data-theme="dark"] .px-journey::before { filter: var(--sarv-night-land); }
:root[data-theme="dark"] :is(.px-stop img, .px-perch, .px-mentor-pic) { filter: var(--sarv-night-figure); }
#story > .folio-wrap { position: relative; isolation: isolate; }   /* the paper under the ground stays above the sky */
.px-below { position: relative; background: var(--sarv-parch); color: var(--sarv-ink); padding-block-end: calc(var(--site-part) + var(--site-fade)); }

/* ---- story: one road through four places, in the order they happened. Every stop is the same size on the same ground: nothing here outranks anything else. ---- */
.px-journey { --ground: var(--sarv-s6); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sarv-s5); }
.px-stop { position: relative; display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: var(--sarv-s4); align-items: end; padding-block-end: calc(var(--ground) + var(--sarv-s2)); }
.px-stop::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: calc(50% - 50vw); block-size: var(--ground); background: url(/assets/custom/voxel/ground.webp) 0 0 / var(--sarv-s10) var(--sarv-s6) repeat-x; image-rendering: pixelated; }
.px-stop img { display: block; width: 144px; height: auto; margin-block-end: calc(var(--sarv-s2) * -2); position: relative; z-index: 1; image-rendering: pixelated; }
.px-stop-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sarv-s1); align-content: end; padding-block-end: var(--sarv-s2); }
.px-stop h3 { font: var(--site-t-h4); }
.px-stop p { margin: 0; font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-stop-copy .px-btn { justify-self: start; max-width: 100%; margin-block-start: var(--sarv-s2); }
@media (max-width: 639.98px) { .px-stop-copy .px-btn { white-space: normal; padding-inline: var(--sarv-s3); } }
@media (max-width: 374.98px) { .px-stop { grid-template-columns: 96px minmax(0, 1fr); } .px-stop img { width: 96px; } .px-stop-copy .px-btn { padding-inline: var(--sarv-s2); } }   /* the smallest phones: the picture gives way so the label stays on one line */
:root[data-theme="dark"] .px-stop p { color: var(--sarv-inverse-ink-soft); }
@media (min-width: 1024px) {
  .px-journey { --art: 280px; position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--sarv-s5); padding-block-start: var(--art); }
  .px-journey::before { content: ""; position: absolute; inset-block-start: calc(var(--art) - var(--sarv-s11)); inset-inline: calc(50% - 50vw); block-size: calc(var(--sarv-s11) + var(--ground)); background: url(/assets/custom/voxel/ground.webp) 0 100% / var(--sarv-s10) var(--sarv-s6) repeat-x, url(/assets/custom/voxel/hills.webp) 0 0 / 480px var(--sarv-s11) repeat-x; image-rendering: pixelated; }
  .px-journey::after { content: ""; position: absolute; z-index: -1; inset-block: calc(var(--art) + var(--ground)) 0; inset-inline: calc(50% - 50vw); background: var(--sarv-parch); }
  .px-stop { grid-template-columns: minmax(0, 1fr); align-items: stretch; padding: var(--ground) 0 0; }
  .px-stop::after { content: none; }
  .px-stop img { position: absolute; inset-block-end: calc(100% - var(--sarv-s2)); inset-inline-start: 0; width: min(288px, 100%); margin: 0; }
  .px-stop:not(:last-child)::before { content: ""; position: absolute; z-index: 1; inset-block-start: var(--sarv-s2); inset-inline-end: calc(var(--sarv-s5) * -.5 - var(--sarv-s2)); width: var(--sarv-s4); height: var(--sarv-s4); background: var(--sarv-halo); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h2v1h1v1h1v1h1v2H6v1H5v1H4v1H2V7h1V6h1V5h1V3H4V2H3V1H2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h2v1h1v1h1v1h1v2H6v1H5v1H4v1H2V7h1V6h1V5h1V3H4V2H3V1H2z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .px-stop-copy { position: relative; grid-template-rows: auto 1fr auto; padding-block-start: var(--sarv-s5); }   /* a longer story keeps its button on the same line as the others */
}
.px-story-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--site-head-gap); padding-block-start: var(--site-group); }
.px-story-notes .px-btn { white-space: normal; line-height: var(--sarv-s5); }
.px-story-notes .px-prose p:last-child { margin-block-end: 0; }
@media (min-width: 1024px) { .px-story-notes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sarv-s9); } }
.px-story-notes .px-prose p { font: var(--site-t-lede); }

/* ---- the world: the real house from its own scene, on the portrait's pixel grid, seen through a window frame of the house's own wood. Two depths: the house and its shore over the hills. ---- */
.px-band.is-wood .px-part-head .px-lede { color: var(--sarv-inverse-ink-soft); }
.px-house-enter { display: grid; gap: var(--sarv-s4); justify-items: start; margin-block-start: var(--sarv-s2); }
.px-house-enter p { margin: 0; font: var(--site-t-caption); }
.px-house { position: relative; display: grid; gap: var(--sarv-s4); }
.px-house-window { position: relative; padding: var(--sarv-s3); box-shadow: 0 0 0 var(--sarv-press) var(--sarv-brass), 0 var(--sarv-card-depth) 0 var(--sarv-press) var(--sarv-edge);
  background: radial-gradient(circle at 6px 6px, var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) 6px, var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at 6px calc(100% - 6px), var(--sarv-brass-light) 1.5px, transparent 2.2px), radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), var(--sarv-brass-light) 1.5px, transparent 2.2px), var(--sarv-wood-edge-dark); }
.px-house-scene { position: relative; overflow: hidden; aspect-ratio: 600 / 338; background: var(--sarv-night-edge-dark); }
.px-house-layer { position: absolute; inset: 0; transform: translate(calc(var(--px, 0px) * var(--d)), calc(var(--py, 0px) * var(--d))); }
.px-house-layer.is-far { --d: -.5; }
.px-house-layer.is-near { --d: 1; }
.px-house-layer img { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; object-position: 45% 50%; image-rendering: pixelated; transition: opacity var(--sarv-move) steps(5); }
.px-house-layer img.is-night { opacity: 0; }
:root[data-theme="dark"] .px-house-layer img.is-night { opacity: 1; }
:root[data-theme="dark"] .px-house-layer.is-near img.is-day { opacity: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .px-house-scene { animation: px-push linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } .px-house-layer.is-near { scale: 1.06; animation: px-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } }
}
@keyframes px-push { from { opacity: .4; } to { opacity: 1; } }
@keyframes px-settle { to { scale: 1; } }
.px-house-sky { position: absolute; inset: 0; pointer-events: none; }
.px-cloud { position: absolute; inset-block-start: 6%; width: 144px; height: 24px; opacity: .9; animation: px-drift 48s linear infinite; }
.px-cloud.is-b { inset-block-start: 14%; width: 96px; height: 16px; animation-duration: 72s; animation-delay: -30s; }
@keyframes px-drift { from { translate: -160px 0; } to { translate: 100vw 0; } }
.px-birds { position: absolute; inset-block-start: 22%; inset-inline-start: 0; display: flex; gap: var(--sarv-s3); animation: px-drift 26s steps(260) infinite; animation-delay: -6s; }
.px-birds svg { width: 20px; height: 12px; }
.px-birds svg:nth-child(1) { animation: px-flap .5s steps(1) infinite; }
.px-birds svg:nth-child(2) { margin-block-start: var(--sarv-s2); animation: px-flap .5s steps(1) infinite reverse; }
@keyframes px-flap { 50% { opacity: .35; } }
.px-firefly { position: absolute; width: var(--sarv-s1); height: var(--sarv-s1); background: var(--sarv-piano-now); opacity: 0; animation: px-glow 3.2s steps(4) infinite; }
.px-firefly:nth-of-type(1) { left: 22%; top: 62%; } .px-firefly:nth-of-type(2) { left: 31%; top: 74%; animation-delay: -1s; } .px-firefly:nth-of-type(3) { left: 46%; top: 78%; animation-delay: -2.2s; } .px-firefly:nth-of-type(4) { left: 68%; top: 72%; animation-delay: -.6s; } .px-firefly:nth-of-type(5) { left: 78%; top: 58%; animation-delay: -1.7s; } .px-firefly:nth-of-type(6) { left: 15%; top: 48%; animation-delay: -2.7s; }
@keyframes px-glow { 50% { opacity: 1; } }
:root[data-theme="dark"] .px-house :is(.px-cloud, .px-birds) { display: none; }
:root:not([data-theme="dark"]) .px-house .px-firefly { display: none; }
.px-house:not(.is-live) .px-house-sky *, #story:not(.is-live) .px-sky * { animation-play-state: paused; }
/* a light on the room you are pointing at; by night it follows the pointer, a lantern over the garden */
.px-house-dim { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--sarv-scrim); -webkit-mask: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent 0 var(--sarv-s10), var(--sarv-black) calc(var(--sarv-s10) * 2)); mask: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent 0 var(--sarv-s10), var(--sarv-black) calc(var(--sarv-s10) * 2)); transition: opacity var(--sarv-quick) steps(3); }
.px-house.is-spot .px-house-dim { opacity: 1; }
:root[data-theme="dark"] .px-quote.is-voice { --sarv-scene-ink: var(--sarv-paper); }   /* a speech cloud by night: its fill turns with the words on it */
.px-house-time { position: absolute; inset-block-start: var(--sarv-s3); inset-inline-end: var(--sarv-s3); z-index: 2; color: var(--sarv-ink); }

/* the rooms: every one wears its name, so what can be pressed is plain. A row of chips on a phone, pins on the real rooms from a tablet up. */
.px-pins { list-style: none; margin: 0; padding: var(--sarv-s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sarv-s2); }
.px-pin { display: inline-flex; align-items: center; gap: var(--sarv-s2); min-height: var(--sarv-hit); padding-inline: var(--sarv-s3); border: var(--sarv-press) solid var(--sarv-brass); background: var(--sarv-paper-bg); color: var(--sarv-ink); font: var(--sarv-t-button); font-variant-ligatures: none; text-decoration: none; }
.px-pin-dot { flex: none; width: var(--sarv-s2); height: var(--sarv-s2); background: var(--sarv-clay); }
.px-pin.is-on { border-color: var(--sarv-piano-now); background: var(--sarv-wood-bg); color: var(--sarv-plaque-ink); }
.px-pin.is-on .px-pin-dot { background: var(--sarv-brass-light); }
.px-pin:focus-visible { outline: 3px solid var(--sarv-halo); outline-offset: 3px; }
.px-rooms { position: relative; display: grid; }
.px-room { display: grid; gap: var(--sarv-s4); padding: var(--sarv-s4); background: var(--sarv-paper-bg); color: var(--sarv-ink); box-shadow: 0 0 0 var(--sarv-press) var(--sarv-rule), 0 var(--sarv-card-depth) 0 var(--sarv-press) var(--sarv-rule-dark); }
.px-room[hidden] { display: none; }
.px-room img { display: block; width: 100%; max-width: 216px; height: auto; image-rendering: pixelated; }
.px-room-copy { display: grid; gap: var(--sarv-s2); justify-items: start; align-content: start; }
.px-room-copy h3 { font: var(--site-t-h4); }
.px-room-copy p { margin: 0; font: var(--site-t-caption); color: var(--sarv-ink-soft); }
.px-room-copy .px-btn { margin-inline-start: calc(var(--sarv-s2) * -1); }
.px-room { position: relative; }
@media (min-width: 640px) { .px-room { grid-template-columns: 200px minmax(0, 1fr); } }
@media (min-width: 768px) {
  .px-house-scene { aspect-ratio: 16 / 9; }
  .px-house-layer img { object-position: 50% 50%; }
  .px-pins { position: absolute; inset: var(--sarv-s3); padding: 0; display: block; pointer-events: none; }
  .px-pins li { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); translate: -50% -50%; }
  .px-pin { pointer-events: auto; position: relative; width: var(--sarv-hit); height: var(--sarv-hit); padding: 0; justify-content: center; border: 0; background: none; }
  .px-pin.is-on { background: none; }
  .px-pin-dot { width: var(--sarv-s3); height: var(--sarv-s3); box-shadow: 0 0 0 var(--sarv-press) var(--sarv-halo), 0 var(--sarv-s1) 0 var(--sarv-press) var(--sarv-edge); transition: transform var(--sarv-fast) ease-out; }
  .px-pin:focus-visible .px-pin-dot, .px-pin.is-on .px-pin-dot { transform: scale(1.34); background: var(--sarv-piano-now); } @media (hover: hover) { .px-pin:hover .px-pin-dot { transform: scale(1.34); background: var(--sarv-piano-now); } }
  .px-pin-name { position: absolute; inset-block-end: calc(100% - var(--sarv-s2)); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; padding: var(--sarv-s1) var(--sarv-s2); background: var(--sarv-wood-bg); color: var(--sarv-plaque-ink); box-shadow: 0 var(--sarv-press) 0 var(--sarv-edge); font: var(--sarv-t-small-strong); }
  .px-pin:focus-visible .px-pin-name, .px-pin.is-on .px-pin-name { background: var(--sarv-clay-bg); color: var(--sarv-on-clay); box-shadow: 0 var(--sarv-press) 0 var(--sarv-edge-primary-dark); } @media (hover: hover) { .px-pin:hover .px-pin-name { background: var(--sarv-clay-bg); color: var(--sarv-on-clay); box-shadow: 0 var(--sarv-press) 0 var(--sarv-edge-primary-dark); } }
  .is-door .px-pin-name { inset-block: calc(100% - var(--sarv-s2)) auto; }
  .is-door .px-pin-dot { background: var(--sarv-brass-light); }
}
@media (min-width: 1024px) { .px-rooms { position: absolute; inset-block-end: var(--sarv-s6); inset-inline-start: var(--sarv-s6); width: 480px; } }
@media (prefers-reduced-motion: reduce) { :is(#story, #ai) .px-birds { inset-inline-start: 64%; } :is(#story, #ai) .px-cloud { inset-inline-start: 40%; } :is(#story, #ai) .px-cloud.is-b { inset-inline-start: 72%; } .px-home .px-blink, .px-house-sky *, .px-sky *, .px-ai-sky * { animation: none !important; } .px-firefly { opacity: 1; } .px-house-layer img, .px-house-dim { transition: none; } }

/* ---- every recommendation, one at a time. All slides share one grid cell, so the dialog keeps the height of the longest and nothing jumps. ---- */
.px-voices-dlg { width: min(720px, calc(100vw - 32px)); }
.px-voices-dlg[open] { display: flex; flex-direction: column; overflow: hidden; }
.px-voices-stage { flex: 1 1 auto; min-height: 0; padding: var(--sarv-s5); touch-action: pan-y; overflow: auto; }
.px-voices-list { list-style: none; margin: 0; padding: 0; display: grid; }
.px-voice { grid-area: 1 / 1; visibility: hidden; display: grid; gap: var(--sarv-s3); align-content: start; }
.px-voice.is-on { visibility: visible; }
.px-voice-group { margin: 0; font: var(--site-t-caption); color: var(--site-muted); }
.px-voice .px-quote { padding: 0; background: none; box-shadow: none; }
.px-voices-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sarv-s4); padding: var(--sarv-s3) var(--sarv-s5); background: var(--sarv-paper-bg); border-block-start: var(--sarv-press) solid var(--sarv-hairline); }
.px-voices-at { margin: 0; font: var(--site-t-meta); }

/* ---- mentorship ---- */
.px-mentor { display: grid; gap: var(--site-head-gap); align-items: start; margin-block-end: var(--site-group); }
.px-mentor-copy { display: grid; gap: var(--sarv-s4); justify-items: start; }
.px-mentor-copy .px-lede { margin: 0; font: var(--site-t-lede); color: var(--sarv-ink-soft); max-width: 44ch; }
.px-mentor-copy > p:not(.px-lede) { margin: 0; max-width: 56ch; }
.px-mentor-copy .px-chiplist { margin-block: var(--sarv-s2); }
.px-mentor-stats { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sarv-s4) var(--sarv-s7); margin-block: var(--sarv-s4); }
.px-mentor-stats .px-stats.is-solo { margin: 0; }
.px-mentor-pic { margin: 0; justify-self: center; }
.px-mentor-pic img { width: calc(var(--n) * 2px); max-width: 100%; }
@media (min-width: 1024px) { .px-mentor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sarv-s9); } .px-mentor-pic { justify-self: end; } .px-mentor-pic img { width: calc(var(--n) * 3px); } }

/* ---- contact ---- */
.px-home #contact { padding-block-end: var(--site-part); }
.px-home #contact .px-contact { margin-block-start: 0; }
main:has(.px-home) + .px-footer { margin-block-start: 0; }

.px-home