/* Home chapters: compositions, internal dividers, cards (swarm stream: home, 20 Oct 2026). Loaded last on every page. */
/* Every rule is scoped to the home (body[data-page=home]) and to the world or airy levels, as the rules it overrides.
   The owner, 20 Oct: «может где-то карточками поделать или где-то сделать внутренний разделитель, только немного, но
   где-то это необходимо; внутренний — это когда снизу и сверху нет, а только внутри». So: one hairline grammar for the
   two lists on the page (the services, the footer's contacts), drawn only between items, never above the first or
   under the last; one card for the work (the ten years' covers). Air comes from removing the dead gaps, not from margins.
   Sources: work/_claude-qa/home-sotd-critique-20261020.md (fixes 2, 3, 4, 9, 10), DESIGN.md (hair #e2e5eb, the night
   surface #181b21, image radius 10, panel radius 16, Archivo for display). */
html body[data-page=home]{--hm-hair:#e2e5eb;--hm-ink:#000000;--hm-card:#eef1f7}
html[data-theme=dark] body[data-page=home]{--hm-hair:#2f3238;--hm-ink:#ffffff;--hm-card:#181b21}

/* 1. «Complex to clear. At every scale.» stood alone over 70svh of paper (630 px at 900: the dive was meant to show
   the waterline under it, and in 1-bit it prints nothing). The first industry now follows the title in the same
   viewport; the dive keeps the 40svh of air above the title. The title and the services title lose the metallic
   gradient (by night it printed grey to white): one flat fill in the theme's ink (critique fix 3). */
html:is(.space-on,.airy) body[data-page=home] #principles .industry-stack:not(#_u):not(#_v){margin-top:clamp(40px,8svh,96px)!important}
/* the industries' names stood larger than the title above them (144 against 127 px): they take the title's size */
@media (min-width:701px){html:is(.space-on,.airy) body[data-page=home] .design-principles .industry-copy h3:not(#_u):not(#_v){font-size:clamp(56px,8.8vw,128px)!important}}
html:is(.space-on,.airy) body[data-page=home] :is(#principles-title,#services-title):not(#_u),
html:is(.space-on,.airy) body[data-page=home] :is(#principles-title,#services-title):not(#_u) .mt-char{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--hm-ink)!important;-webkit-text-fill-color:var(--hm-ink)!important;animation:none!important}

/* 2. The end of the years: «And the rest.» held a whole viewport alone at 223 px with a 58 px button. Both years
   titles take the section size in Archivo (as «Complex to clear.» and the footer), the button the page's 44 px with
   a 14 px label, and the outro sits in the upper half so the next chapter can rise under it: the approach overlaps
   the years' tail by 40svh, the device DESIGN.md already uses between the stations and the years («no empty sky
   between chapters»). */
html:is(.space-on,.airy) body[data-page=home] #years .years-title:not(#_u){font-family:'Archivo Lens',Basel,Arial,sans-serif!important;font-variation-settings:normal;font-size:clamp(52px,1rem + 7.4vw,128px)!important;line-height:1!important;letter-spacing:var(--t-track,-.02em)!important}
html:is(.space-on,.airy) body[data-page=home] #years .year-outro:not(#_u){justify-content:flex-start!important;padding-top:clamp(112px,16svh,150px)!important}
html:is(.space-on,.airy) body[data-page=home] #years .years-more:not(#_u){height:44px!important;min-height:44px!important;margin-top:clamp(24px,3.4svh,32px)!important;padding:0 18px!important;border-radius:15px!important;font-size:14px!important;letter-spacing:0!important;gap:10px!important;align-self:flex-start}
html:is(.space-on,.airy) body[data-page=home] #years .years-more:not(#_u) svg{width:14px;height:14px}
/* only while the years run as the pinned track: under reduced motion they stand as a static list (js/chapters.js) and
   the approach keeps its own place after them */
html:is(.space-on,.airy) body[data-page=home] main>#years:not(.is-static)+#design-bottom:not(#_u){margin-top:-40svh!important}
html:is(.space-on,.airy) body[data-page=home] #years.is-static .year-outro:not(#_u){height:auto!important;min-height:0!important;padding-bottom:clamp(48px,8svh,96px)!important}

/* 3. Services: the four rows are a list, so they read as one: hairlines between the rows only (none above the first,
   none under the last), the names at the medium display size so the section title leads again (critique: 89 against
   92 px). The 42 px gap between the rows (an older flex/grid gap) goes: the space round a hairline is the rows' own
   padding, even above and below it. On desktop the rows keep their column left of the tube (css/portfolio-v42.css),
   so no divider crosses it. */
html:is(.space-on,.airy) body[data-page=home] #services .service-rows:not(#_u){row-gap:0!important}
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a:not(#_u):not(#_v){row-gap:0!important;padding:clamp(22px,3.2svh,30px) 0 clamp(24px,3.4svh,32px)!important;border-top:1px solid transparent!important}
/* no hairlines between the services or between the footer's links (20 Oct review; the house rule: air from spacing, no
   dividers): the 1 px border stays transparent, so nothing moves */
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a:not(:first-of-type):not(#_u):not(#_v){border-top-color:transparent!important}
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a>h3:not(#_u):not(#_v){font-size:clamp(28px,1rem + 3.4vw,64px)!important;line-height:.98!important;letter-spacing:-.045em!important;margin:0 0 14px!important}
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a>p:not(#_u):not(#_v){font-size:14px!important;line-height:1.4!important;margin:0 0 6px!important}
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a>p.service-description:not(#_u):not(#_v){font-size:17px!important;line-height:1.45!important;max-width:44ch;margin:0!important}
@media (min-width:701px){
 html:is(.space-on,.airy) body[data-page=home] #services .section-heading:not(#_u){margin-bottom:clamp(40px,6svh,64px)!important}
}

/* 4. Ten years: the flying covers were glossy cards with frosted pills over the cover (critique fix 2, «a different,
   cheaper site»). Each is now one card of the system: the cover at the image radius inside a flat surface at the panel
   radius (paper grey by day, the night surface by night), the project's name under the cover, in the ink, on that
   surface. No blur, no pill, no shadow. «Years of experience.» is set in the display face. */
html:is(.space-on,.airy) body[data-page=home] #about .experience-card:not(#_u):not(#_v){overflow:visible!important;height:auto!important;padding:6px!important;border-radius:16px!important;background:var(--hm-card)!important;box-shadow:none!important}
html:is(.space-on,.airy) body[data-page=home] #about .experience-card:not(#_u):not(#_v) img{display:block;width:100%!important;height:auto!important;aspect-ratio:7/5;object-fit:cover;border-radius:10px!important}
html:is(.space-on,.airy) body[data-page=home] #about .experience-card:not(#_u):not(#_v) figcaption{position:static!important;inset:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:9px 6px 4px!important;border-radius:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--hm-ink)!important;-webkit-text-fill-color:var(--hm-ink)!important;font:400 13px/1.25 Basel,Arial,sans-serif!important;letter-spacing:0!important;text-align:left!important}
html:is(.space-on,.airy) body[data-page=home] #about .experience-caption:not(#_u){font-family:'Archivo Lens',Basel,Arial,sans-serif!important;font-variation-settings:normal;letter-spacing:var(--t-track,-.012em)!important}

/* 5. About: by day «The full story» was a white button on the white ground (the section's --ui-bg is paper from the
   time the sea was dark), so only its label showed, 30 px off the statement's column (critique: x 547 against 518).
   By day it takes the ink of every other button on the page («View all projects», «Back to top»), so its edge stands
   on the column; the same 44 px height, 14 px label and radius as those two. */
html:is(.space-on,.airy):not([data-theme=dark]) body[data-page=home] #about .about-intro .about-more:not(#_u){--ui-bg:#000000;--ui-fg:#ffffff;--ui-band:rgba(255,255,255,.22)}
html:is(.space-on,.airy) body[data-page=home] #about .about-intro .about-more .text-button:not(#_u){height:44px!important;min-height:44px!important;padding:0 18px!important;border-radius:15px!important;font-size:14px!important;gap:10px!important}

/* 6. Footer: the links were three loose words on one line and the page had three right edges (1152, 1166, 1296).
   Now one grid of four columns on the frame's column: the place in the first, the contacts as a short list with
   hairlines between them in the second (180 px, so by night it stays left of the sun's reflection, which fills the
   middle of the frame at the page's end), «Back to top» at the right edge of the fourth, on the edge of «Let's talk»
   above it; the copyright line takes the same columns, and the wordmark stands flush with the column's left edge, as
   every other line of the page. Phones: the contacts first, then the place and «Back to top» on one line, so the
   block is 70 px shorter and its first line clears the reflection at the end of the page. */
/* -72 (23 Oct; the visual jury, r1 6.1 #19: «the footer is two different components»: About, Approach, the CV and the
   cases centred the wordmark and ended the right column at about 1166): the home's footer grid below now holds on every
   page with the world (room-live) and in the airy mode, so the footer is one component across the site. */
html:is(.space-on,.airy,.room-live) body #footer .footer-links>div:not(#_u){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important}
html:is(.space-on,.airy,.room-live) body #footer .footer-links>div>a:not(#_u){display:flex!important;align-items:center;justify-content:space-between;min-height:44px!important;padding:0!important;border-top:1px solid transparent}
html:is(.space-on,.airy,.room-live) body #footer .footer-links>div>a+a:not(#_u){border-top-color:transparent}
html:is(.space-on,.airy,.room-live) body #footer .footer-wordmark:not(#_u){justify-content:flex-start!important}
/* optical: the «d» of the 28vw wordmark has a side bearing of .035em (14 px at 1440), so its stem met the column 14 px in */
html:is(.space-on,.airy,.room-live) body #footer .footer-wordmark .wordmark-name:not(#_u){margin-left:-.035em!important}
@media (min-width:701px){
 html:is(.space-on,.airy,.room-live) body #footer :is(.footer-links,.footer-bottom):not(#_u):not(#_v){display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;align-items:start;padding-right:0!important}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>p:not(#_u){grid-column:1;margin:0;padding-top:10px}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>div:not(#_u){grid-column:2;max-width:180px}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>.back-top:not(#_u){grid-column:4;justify-self:end}
 html:is(.space-on,.airy,.room-live) body #footer .footer-bottom>:last-child:not(#_u){grid-column:4;justify-self:end}
}
@media (max-width:700px){
 html:is(.space-on,.airy,.room-live) body #footer .footer-links:not(#_u):not(#_v){display:grid!important;grid-template-columns:minmax(0,1fr) auto;row-gap:18px;column-gap:16px;align-items:center}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>div:not(#_u){grid-column:1/-1;grid-row:1;justify-self:stretch}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>p:not(#_u){grid-column:1;grid-row:2;margin:0}
 html:is(.space-on,.airy,.room-live) body #footer .footer-links>.back-top:not(#_u){grid-column:2;grid-row:2;justify-self:end}
}
/* The journey index sat on «Let's talk» and on «Back to top» at the right edge (critique fix 11): while the footer
   rises it steps out, and it is back as soon as the footer leaves. Scroll-driven, so no script; browsers without
   view timelines keep the index as it was. */
@supports (animation-timeline:view()){
 html:is(.space-on,.airy) body[data-page=home]{timeline-scope:--hm-footer}
 html:is(.space-on,.airy) body[data-page=home] #footer{view-timeline:--hm-footer block}
 html:is(.space-on,.airy) body[data-page=home] .space-index{animation:hm-index-out linear forwards;animation-timeline:--hm-footer;animation-range:entry 0% entry 35%}
 @keyframes hm-index-out{to{opacity:0;visibility:hidden}}
}

/* phones: the profile's art box is the torso's place (js/3d/space-world.js locks the plaster torso into it): nearly a
   screen tall, so the portrait stands large above the statement and the words never run over it (owner, 20 Oct:
   «сцена about, где я на дне, чтобы был крупный в мобе») */
@media (max-width:700px){html:is(.space-on,.airy) body[data-page=home] #about .about-intro .about-art:not(#_u):not(#_v){height:min(74svh,640px)!important;max-height:none!important;margin-top:0!important}}

/* phones: the lede leaves the city lights for an edge sheet (20 Oct: «I make complex fintech…» sat on the lights by
   night). The hero copy is anchored to the frame's bottom edge; the lede is the process step's phone sheet
   (space-ui.css, «the process step's copy on a sheet»): paper by day, ink by night, edge to edge on the frame's inner
   edges, rounded only on its free top corners, clearing the nav's tab, with no feathered ground of its own. The
   headline stays on the world above it. The hero box is taller than the screen on phones (its min-heights), so the
   copy is set from the first screen's bottom edge: 100 % less 100svh; the copy's own 76 px bottom padding goes, so the
   sheet meets the frame's edge */
@media (max-width:700px){
 html:is(.space-on,.airy) body[data-page=home] .hero-frame>.hero-copy:not(#_u):not(#_v){position:absolute!important;top:auto!important;bottom:calc(100% - 100svh + var(--frame,8px))!important;left:var(--frame,8px)!important;right:var(--frame,8px)!important;width:auto!important;margin:0!important;padding-bottom:0!important;transform:none!important}
 html:is(.space-on,.airy) body[data-page=home] .hero-frame>.hero-copy:not(#_u):not(#_v)>h1{padding-inline:14px}
 html:is(.space-on,.airy) body[data-page=home] .hero-frame>.hero-copy:not(#_u):not(#_v)>.hero-note{position:relative!important;inset:auto!important;transform:none!important;max-width:none!important;width:auto;margin:18px 0 0!important;
  padding:16px 14px calc(84px + env(safe-area-inset-bottom,0px))!important;border-radius:16px 16px var(--frame-r,12px) var(--frame-r,12px);
  background:#ffffff!important;color:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;filter:none!important;text-wrap:pretty}
 html[data-theme=dark]:is(.space-on,.airy) body[data-page=home] .hero-frame>.hero-copy:not(#_u):not(#_v)>.hero-note{background:#000000!important;color:#ffffff!important}
 html:is(.space-on,.airy) body[data-page=home] .hero-frame>.hero-copy:not(#_u):not(#_v)>.hero-note::before{display:none!important;content:none!important}
}
/* «Digital products. Brand identities. Ideas made tangible.» stood on the portrait's dust at the bottom left (20 Oct
   review, home-*-28/30): on the right, where the chapter is clean */
@media (min-width:1101px){html:is(.space-on,.airy) body[data-page=home] .experience-footnote:not(#_u){left:auto!important;right:0!important;text-align:left}}
/* phones: the same footnote ran under the nav's tab at the frame's bottom («Ideas made tang…», 20 Oct): it clears it */
@media (max-width:700px){html:is(.space-on,.airy) body[data-page=home] .experience-footnote:not(#_u){bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}

/* -73: one service at a time (js/portfolio-craft.js marks the row the tube ties into): the others in grey, no blur */
html body[data-page=home] .service-rows.has-current>a:not(.is-current):not(#_u) :is(h3,h3 *){color:#9ea1a7!important;-webkit-text-fill-color:#9ea1a7!important;transition:color .25s cubic-bezier(.16,1,.3,1)}   /* the print's light grey (by night its dark one), not --muted: beside ink it read as black */
html[data-theme=dark] body[data-page=home] .service-rows.has-current>a:not(.is-current):not(#_u) :is(h3,h3 *){color:#4b4e53!important;-webkit-text-fill-color:#4b4e53!important}
html body[data-page=home] .service-rows>a.is-current:not(#_u) :is(h3,h3 *){transition:color .25s cubic-bezier(.16,1,.3,1),-webkit-text-fill-color .25s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){html body[data-page=home] .service-rows>a:not(#_u) h3{transition:none!important}}
/* -73 (24 Oct; the m2 motion report h16: «a static stretch»; the main AD D4: glyphs never in text): the service that becomes
   the current one prints in through the world's Bayer cells (4 px, 8 steps, 300 ms; the keyframes are css/film-clear.css
   film-band-print), each time the tube ties a new one */
html body[data-page=home] .service-rows>a.is-current:not(#_u) h3{-webkit-mask-repeat:repeat;mask-repeat:repeat;animation:film-band-print .3s steps(1,end) both}
@media (prefers-reduced-motion:reduce){html body[data-page=home] .service-rows>a.is-current:not(#_u) h3{animation:none}}

/* -73 (24 Oct; the coordinator's audit of r3, index .68: «Platforms»'s name and line cut by the frame's right edge in both
   themes): the domains' pass keeps its 12 % peek of the next panel (its form, the world), but a panel's words stand only
   while it is the one the reader is at (route-pass.js marks it data-active); the next panel's words come with it, .45 s */
html body[data-page=home] #principles.is-pass .industry-panel:not([data-active]) .industry-copy:not(#_r):not(#_s){opacity:0;transform:translateX(28px)}
html body[data-page=home] #principles.is-pass .industry-panel .industry-copy:not(#_r):not(#_s){transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){html body[data-page=home] #principles.is-pass .industry-panel .industry-copy:not(#_r):not(#_s){transition:none}}

/* -73 (24 Oct; S13, h16; tools/svc-word.py): the current service as one lowercase word under the tube (UPROCK's section word),
   held with it in the right column (the tube's box is sticky at 110 px, min(58svh, 560 px) tall), its count in the corner;
   the rows a ruled list again (hairlines between them, none above the first) */
html:is(.space-on,.airy) body[data-page=home] #services .service-rows>a:not(:first-of-type):not(#_u):not(#_v):not(#_w){border-top-color:var(--line,#d6d9df)!important}
.svc-word{display:none}
@media (min-width:701px){
 html:is(.space-on,.airy) body[data-page=home] #services .service-rows.has-service-morph .svc-word:not(#_u){display:block;grid-column:2;grid-row:1/span 4;align-self:start;position:sticky;
  top:calc(110px + min(58svh,560px) + 12px);bottom:clamp(16px,3svh,32px);margin-top:calc(min(58svh,560px) + 12px);pointer-events:none;color:var(--ink,#000);z-index:1}
 /* (hold14) the bottom hold: with the first service current the tube is still on its way up and the word stood below the
    frame; it now waits at the frame's foot until the tube's box carries it */
 .svc-word-count{display:block;margin:0 0 6px;font-family:var(--t-text);font-size:14px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
 .svc-word-face{display:block;font-family:var(--t-display);font-weight:400;font-variation-settings:normal;font-synthesis:none;font-size:clamp(64px,8.4vw,150px);line-height:.86;
  letter-spacing:-.045em;white-space:nowrap;animation-duration:.38s;animation-timing-function:steps(1,end);animation-fill-mode:both}
}
@media (prefers-reduced-motion:reduce){.svc-word-face{animation:none!important}}