/* The home page's two sideways passes (js/route-pass.js, js/chapters.js; 21 Oct 2026, the route score ROUTE.md §2.2):
   down, right across the years, down, right across the domains, down. From 701 px (the breakpoint of css/chapters.css
   and css/space-ui.css) each pass is one sticky pin moved by the page's own scroll; at 700 px and under the years run as a
   native strip and the domains stay the stack; reduced motion keeps the years' column and the stack. The later sheets
   (css/space-ui.css, css/home-2026.css, css/type-2026.css) hold the same boxes with !important, hence the :not(#_r). */

/* ---- the years (row 6): six steps of 65svh (3.9 screens), then «And the rest.» holds a screen (1.54 steps, row 7) ---- */
html body[data-page=home] .years-chapter:not(.is-static):not(.is-strip):not(#_r):not(#_s){--route-step:65svh;--route-hold:1.54;height:calc(max(100svh,560px) + (var(--panels,7) - 1 + var(--route-hold))*var(--route-step))!important}
/* the years' head holds only the kicker, which the world's pages hide (css/space-ui.css): left in place it is an empty
   full-width box at 104 px, which the running index reads as words under its list, so the list stayed away for the
   whole pass */
html:is(.space-on,.airy,.room-world-live) body[data-page=home] .years-chapter:not(.is-static):not(#_r) .years-head{display:none}

/* phones: «Year by year.» above the strip, the five years in a native scroller (snapping inside it only, outside Lenis),
   «And the rest.» below (the ticks are hidden site-wide, css/portfolio-polish-v54.css); the strip is one screen, so the
   years take about 1.4 */
html body[data-page=home] .years-chapter.is-strip:not(#_r):not(#_s){height:auto!important}
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-pin{position:relative;top:auto;height:100svh;min-height:560px}
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-track{position:absolute;inset:0;width:auto;display:flex;overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;will-change:auto}
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-track::-webkit-scrollbar{display:none}
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-track>.year-panel{flex:0 0 100%;scroll-snap-align:center}
html body[data-page=home] .years-chapter.is-strip:not(#_r)>.year-panel{flex:none;height:auto}
html body[data-page=home] #years.is-strip>.year-intro:not(#_r):not(#_s){padding:clamp(104px,15svh,170px) var(--gutter) clamp(20px,4svh,40px)!important;justify-content:flex-start!important}
html body[data-page=home] #years.is-strip>.year-outro:not(#_r):not(#_s){padding:clamp(48px,8svh,80px) var(--gutter) clamp(48px,8svh,96px)!important;justify-content:flex-start!important}
/* the five years as a row of small type over the strip, the one on screen in ink: the strip moves sideways and nothing
   said so, so a reader scrolling down saw 2019 and went on down (22 Oct, review R04). The ticks are the chapter's own
   (js/chapters.js: they follow the strip and take it to their year); elsewhere they stay hidden (css/portfolio-polish-v54.css) */
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-ticks{display:flex!important;top:clamp(72px,9svh,96px);bottom:auto;gap:0;justify-content:center}
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-tick{min-width:44px;min-height:44px;padding:0 6px;place-items:center}
/* the world's sheet sets every tick in ink, fill colour too (css/space-ui.css); here the years not on screen step back
   to the grey of the small copy, so the row says where the reader is */
html body[data-page=home] .years-chapter.is-strip:not(#_r) .years-tick:not([aria-current]){color:var(--muted,#585b61)!important;-webkit-text-fill-color:var(--muted,#585b61)!important}
/* the strip ends where it ends: the next chapter does not ride over «And the rest.» (its tile takes taps) */
html body[data-page=home] main>#years.is-strip+#design-bottom:not(#_r):not(#_s){margin-top:0!important}

/* ---- the domains (row 11): the stack is the tall box (3.25 steps of 83svh, 2.7 screens), the pin holds one frame;
   «Complex to clear. At every scale.» is the first panel, then a panel per domain, each 88 % of the frame, so the next
   one shows 12 %. The words stand at the foot of their panel, under the running index's box, on the world's quiet ground;
   the form in the upper right, its print (the canvas reaches 20 % past its box) never over the words ---- */
html body[data-page=home] #principles.is-pass:not(#_r):not(#_s){padding:0!important}
html body[data-page=home] #principles.is-pass .industry-stack:not(#_r):not(#_s){--route-step:83svh;--route-hold:.25;position:relative;
 height:calc(max(100svh,560px) + (3 + var(--route-hold))*var(--route-step))!important;margin:0!important;padding:0!important}
#principles .route-pin{position:sticky;top:0;height:100svh;min-height:560px}
#principles .route-stage{position:absolute;inset:0;overflow:clip}
#principles .route-track{position:absolute;top:0;left:0;height:100%;display:flex;will-change:transform}
#principles .route-track>*{position:relative;flex:0 0 var(--route-panel,88vw);height:100%}
html body[data-page=home] #principles.is-pass .route-head>h2:not(#_r):not(#_s){position:absolute;left:var(--gutter);bottom:clamp(56px,12svh,120px);max-width:11em;margin:0!important}
html body[data-page=home] #principles.is-pass .industry-panel:nth-child(n):not(#_r):not(#_s){position:relative!important;top:auto!important;display:block!important;min-height:0!important;height:100%!important;margin:0!important}
html body[data-page=home] #principles.is-pass .industry-copy:not(#_r):not(#_s){position:absolute;left:var(--gutter);bottom:clamp(56px,12svh,120px);width:min(36vw,520px);max-width:none;margin:0}
/* the card keeps its own build (css/chapters.css, css/space.css: the form 138 % of the card, the card 78 % of its cluster);
   only the cluster is placed: the form's box then runs from about 38vw to 84vw, from a tenth of the frame down */
html body[data-page=home] #principles.is-pass .chapter-cluster:not(#_r):not(#_s){position:absolute!important;left:43.5vw;top:clamp(64px,10svh,104px);width:42.7vw!important;height:27.8vw!important;max-height:none!important;margin:0!important}
@media (max-width:1100px){
 html body[data-page=home] #principles.is-pass .industry-copy:not(#_r):not(#_s){width:min(44vw,440px)}
}

/* ---- the running index (js/running-index.js): a pass's panels under the act's name, a step in ---- */
@media (min-width:1101px){html body nav.running-index li.ri-sub:not(#_r) a.ri-link{padding-left:1em}}