/* The Swiss grid (20 Oct 2026; owner: «сетку не типичную, а швейцарскую… посмотри, как делают топовые студии, как
   компонуют интересно тексты»). Loaded after css/type-2026.css on every page.

   One grid for every section: 12 columns between 4vw margins, 2vw gutters, so a column and its gutter are 7.8333vw and
   the column lines fall at 4vw + n × 7.8333vw (58, 171, 283, 396, 509, 622, 734, 847, 960, 1073, 1185, 1298 px at
   1440). Measured before this file (work/_claude-qa: grid audit, 20 Oct): the text beside a title stood at 518, 720,
   806, 886, 1023 or 1109 px, each section on a proportion of its own.

   The text beside a display title is not a second column of a two-up layout: it hangs on a column line and sits on the
   title's own type. Three rules of the studied exemplars (skills/swiss-editorial-design, references/exemplars):
   - E05 hanging secondary axis (behance-laguta-ctmk): supporting text hangs from one secondary column line, chosen per
     section by what it explains, never from the page edge;
   - E12 proposition in the gap (chipsa-promeat): beside a staircase title the text stands in the step the title leaves,
     and its last line lands on the title's last baseline;
   - E06 dense versus short group (awwwards-neutra-vdl): a dense reading column faces a short practical group instead of
     equal boxes (the practice notes, the CV's roles).
   Short notes meet the title's first baseline. Below 1101 px everything keeps its stacked layout. */
@media (min-width:1101px){
 :root{--g-cols:repeat(12,minmax(0,1fr));--g-gap:2vw}

 /* home: the process opener. The staircase title over seven columns; its lede hangs on column 8 and ends on
    «understanding.» (E12) */
 html body #design-bottom .approach-intro:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;row-gap:0!important;align-items:last baseline!important}
 html body #design-bottom .approach-intro:not(#_g)>h2{grid-column:1/span 7!important;margin:0!important}
 html body #design-bottom .approach-intro:not(#_g)>p{grid-column:8/span 4!important;max-width:none!important;margin:0!important}

 /* the services' heading (home, approach): the note hangs on column 10 and meets the title's first baseline (E05) */
 html body #services .section-heading:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;row-gap:0!important;align-items:baseline!important}
 html body #services .section-heading:not(#_g)>h2{grid-column:1/span 9!important;margin:0!important}
 html body #services .section-heading:not(#_g)>p{grid-column:10/span 3!important;max-width:none!important;min-width:0!important;margin:0!important}

 /* Pass: the title over seven columns; its line and route hang on column 8, the line on the title's first baseline */
 html:is(.space-on,.airy,.room-world-live) body .pass-section.pass-feature:not(#_u):not(#_g){grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy h2:not(#_u):not(#_g){grid-column:1/span 7!important;grid-row:1/span 2!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy>p:not(#_u):not(#_g){grid-column:8/span 4!important;grid-row:1!important;max-width:none!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-copy>.text-button:not(#_u):not(#_g){grid-column:8/span 4!important;grid-row:2!important}
 html:is(.space-on,.airy,.room-world-live) body .pass-feature .pass-image:not(#_u):not(#_g){grid-column:1/-1!important}

 /* /work: the heading's note hangs on column 10 and ends on «work.» (E12) */
 html body[data-page=work] #projects .section-heading:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;row-gap:0!important;align-items:last baseline!important}
 html body[data-page=work] #projects .section-heading:not(#_g)>h2{grid-column:1/span 8!important;margin:0!important}
 html body[data-page=work] #projects .section-heading:not(#_g)>p{grid-column:10/span 3!important;max-width:none!important;margin:0!important}

 /* approach: «A clear journey needs a clear foundation.» over six columns, the three notes as one dense column from
    column 7 (E06); the title's first baseline meets the first note's */
 html body .practice-detail:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;align-items:baseline!important}
 html body .practice-detail:not(#_g)>h2{grid-column:1/span 6!important;margin:0!important}
 html body .practice-detail:not(#_g)>.practice-grid{grid-column:7/span 6!important;margin:0!important}
 /* ...and the title stays inside its six columns (45vw). The stepped title is 6.79 em wide, its last step «foundation.»
    reaching furthest, so below 1440 px the display size (4.952vw + 24.7px) outgrew them: at 1101 px 538 px of type in
    496 px, and the sticky title's last line ran 20 px into the notes as they scrolled past it (B23, tester 21 Oct;
    1280 px: 4 px short of them). 6.6vw holds it in its columns down to 1101 px; from 1455 px the size is the scale's
    96 px again */
 html body[data-page=approach] .practice-detail:not(#_g)>h2:not(#_i):not(#_n):not(#_r){font-size:min(var(--t-l),6.6vw)!important}

 /* the CV: the name and the summary share their bottom line; the summary hangs on column 7. Each section's title holds
    four columns, its content hangs on column 5, and a role's details on column 8 (an eight-column grid inside the
    content, on the same lines) */
 html body .cv-opening:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;align-items:end!important}
 html body .cv-opening:not(#_g)>div:first-child{grid-column:1/span 6!important}
 html body .cv-opening:not(#_g)>.cv-summary{grid-column:7/span 6!important;max-width:none!important}
 html body .cv-section:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;align-items:baseline!important}
 html body .cv-section:not(#_g)>h2{grid-column:1/span 4!important;margin:0!important}
 html body .cv-section:not(#_g)>:not(h2){grid-column:5/span 8!important;margin-left:0!important;max-width:none!important}
 html body .cv-section .cv-role:not(#_g){display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;column-gap:var(--g-gap)!important}
 html body .cv-section .cv-role:not(#_g)>h3{grid-column:1/span 3!important}
 html body .cv-section .cv-role:not(#_g)>div{grid-column:4/span 5!important}

 /* cases: a series' title over seven columns, its copy hanging on column 9 from the title's first baseline */
 html body.portfolio-case .series-heading:not(#_g){display:grid!important;grid-template-columns:var(--g-cols)!important;column-gap:var(--g-gap)!important;align-items:baseline!important}
 html body.portfolio-case .series-heading:not(#_g)>h2{grid-column:1/span 7!important;margin:0!important}
 html body.portfolio-case .series-heading:not(#_g)>:not(h2){grid-column:9/span 4!important;max-width:none!important;margin-left:0!important}
}

/* Phones, the type floor (21 Oct; the review's phones-os.md §2, measured with a text walk of every page at 390): nothing
   reads below 13 px on a phone. The last lines under it were the experience footnote (11), the company evidence and its
   links (12), the cycle's notes on /approach (12) and the ledger's currency unit (.26 of its figure, 11.4) */
@media (max-width:700px){
 html body .experience-footnote:not(#_g){font-size:13px!important}
 html body .company-chapters .company-evidence>p:not(#_g),html body .company-chapters .company-evidence a:not(#_g){font-size:13px!important}
 html body[data-page=approach] .cycle-panel ul:not(#_g){font-size:13px!important}
 html body .cs-ledger dt .cs-unit:not(#_g){font-size:max(13px,.26em)!important}
}

/* /approach on a phone (21 Oct; the owner's screenshot: «текст залез»): the desktop's sticky heading («A clear journey needs
   a clear foundation.», top 130 px) was made relative by a later rule and kept its offset, so it sat 130 px down over
   «Product logic.» and its paragraph. On a phone it stands in the flow above the notes */
@media (max-width:1100px){
 html body .practice-detail:not(#_g)>h2{position:relative!important;top:auto!important}
 html body .practice-detail:not(#_g){row-gap:32px!important}
}

/* Services at 701-1100 px (21 Oct; the site pass at 1024): an old rule of the first redesign (css/redesign.css) put every
   line of a service into the grid's second row, so the role line and the description printed over each other */
html body #services .service-rows>a>p:not(#_g){grid-row:auto!important}