/* DESIGN night 05-11-2026 (Viktor, Opus 5.5): layout, spacing and type-scale fixes for x/n, loaded last.
   Each block says what it fixes. Undo all: remove the <link> to this file in index.html. Previews are keyed html.v-<name> (RULES s4). */

/* 1. The essay door's two drawings hang ~90px below the door box, so Inkolega's title sat 70px under them and read as part of the essay door. Room for the drawings, then Inkolega's own top padding. */
@media (min-width:1180px){#story{padding-bottom:clamp(72px,7vw,112px)}}

/* PREVIEW ?v=ink - reverses the ?f=1 opener look (his pick 04-11), so not default: Inkolega gets a project title at the level of NaviKit and KumiCoach, instead of a blue line. */
html:not(.v-noink) #inkolega .fe-head h3{font:600 clamp(28px,2.8vw,40px)/1.12 var(--display);letter-spacing:-.022em;color:var(--t1);max-width:none;text-wrap:balance}
html:not(.v-noink) #inkolega .fe-goal{margin-top:14px}

/* 2. Project leads (NaviKit, KumiCoach): even line breaks instead of a long line and a stub, and more air before the media (the dark memory map sat 20px under the text). */
.piece .lead{text-wrap:balance}
.piece .host{margin-top:clamp(24px,3.2svh,36px)}

.piece .lead+.lead{margin-top:10px}

/* 3. One size per role. Card titles: KumiCoach cards on the Inkolega card size (were 25px vs 25.9px). Card text: KumiCoach cards read like the Inkolega feature lines (were 16.5px vs 18px). Status pills to the 14px floor (were 13px). */
.ku-cards h4{font-size:clamp(22px,1.8vw,26px)}
.ku-cards p{font-size:clamp(17px,1.25vw,18.5px);line-height:1.4}
@media (max-width:640px){.ku-cards p{font-size:16px}}
.fe-pill{font-size:14px;padding:3px 11px}
/* 4. First customers: the line under the heading sat 8px above the tiles (the robots stand on the tile row on purpose; the text should not). */
.fe-cust-top p.fe-first{padding-bottom:clamp(20px,2.6svh,28px)}

/* 5. Tablet (641-980px): the three KumiCoach cards were ~240px wide, so "Checked by a fighter" ran to 7 lines. Two up, the third full width. */
@media (min-width:641px) and (max-width:980px){.ku-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ku-cards li:last-child{grid-column:1/-1}}

/* 6. Honorable mentions, still version (reduced motion and print): the picture wall is empty, so the list sat under a rule and a gap with nothing above it, in 16px lines. Plain list, two columns on a laptop, body size. */
.ma-wall:empty{display:none}
.ma-wall:empty+.ma-plain{margin-top:0;padding-top:0;border-top:0}
.ma-plain li{font-size:clamp(16px,1.25vw,18px);line-height:1.5;padding:6px 0;break-inside:avoid}
@media (min-width:900px){.ma-plain{columns:2;column-gap:clamp(32px,5vw,80px);max-width:68em}}

/* 7. Phone: the customer rows sit inside one tinted, round block, so the strongest proof keeps the card weight of the feature cards above it (critic-1 a). */
@media (max-width:640px){
 #inkolega .fe-tiles{background:var(--m-50);border-radius:20px;padding:4px 16px}
 #inkolega .fe-tile{border-top:1px solid rgba(10,26,78,.09)}
 #inkolega .fe-tile:first-child{border-top:0}
 #inkolega .fe-tile:last-child{border-bottom:0}
}

/* 8. The essay door is optional reading (his 04-11 ask: the essay must not be a barrier), so its line sits below the project titles: 34px -> 24px. Inkolega now outranks it. Undo: delete this block. */
#story .st-door h2,#story h2{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.012em}

/* 9. One chapter-heading style: "Honorable mentions" on the same size and centring as "What I'm building now" and "On the side" (was 46px left). The still list centres under it. */
.ma h2{font-size:clamp(34px,4.2vw,60px);line-height:1.06;letter-spacing:-.03em;text-align:center}
@media (min-width:900px){.ma-wall:empty+.ma-plain{max-width:58em;margin-left:auto;margin-right:auto}}
@media (max-width:760px){.ma h2{font-size:34px}}

/* 10. "See the work behind it" belongs to the Inkolega block: closer to the customers (was 54px), the gap before NaviKit stays. */
#inkolega .fe-workln{margin-top:clamp(20px,2.6svh,28px)}

/* 11. "On the side" floated halfway between NaviKit and KumiCoach (165px above, 140px below), so it did not read as KumiCoach's chapter. The gap under it drops to ~90px laptop / ~50px phone. Undo: delete this block. */
.now-h+#kumi{padding-top:clamp(28px,2.8vw,40px)}

/* 12. NaviKit's navy band ended with ~150px of empty navy under the parts row, adding to the white gap before the next chapter. Bottom padding 108 -> 64 laptop, 56 -> 36 phone. Undo: delete this block. */
#navikit{padding-bottom:clamp(36px,4.4vw,64px)}

/* 13. The memory panel's own title ("Persistent memory", 56px) was bigger than the NaviKit project title above it (46px), so a part outranked its project. Panel title 40px laptop / 24px phone (was 30px vs the 28px project title), the counts move up with it. Undo: delete this block. */
#part-library .flib-title{font-size:clamp(30px,2.8vw,40px)}
#part-library .flib-counts{top:calc(18px + clamp(30px,2.8vw,40px) + 10px)}
@media (max-width:760px){#part-library .flib-title{font-size:24px}#part-library .flib-counts{top:48px}}

/* P1. PREVIEW ?v=proof (COMP request requests.md:13): WORDS puts two checkable facts in the line under the headline; here that line moves up one rank (navy, larger) and keeps its three lines whole. A separate chip row was not added: it would need new words, and the photos cannot peek into the first screen without changing the pinned hero motion. */
html.v-proof .hero p.proof{font-size:clamp(17px,1.6vw,23px);line-height:1.55;color:var(--t1);max-width:none}

/* S1. PREVIEW ?v=short (COMP request "length", requests.md): a reader who stops after ~350 words met debate, a student organisation, an olympiad and mentoring, but not the AI work. This shows the alternative order: hero, "What I'm building now" (essay door, Inkolega, library, NaviKit), then the graph chapters of earlier work, photos, voices, "On the side" (KumiCoach), mentions, close. The default order stays his ruled one. Body becomes a flex column so `order` can move whole sections; a flex item with auto side margins would shrink to its content, so the in-flow sections are told to fill the line (the old block width) and keep their auto-margin centring. Undo: delete this block. */
html.v-short body{display:flex;flex-direction:column}
html.v-short body>section,html.v-short body>#part-mentions{order:20;width:-moz-available;width:-webkit-fill-available;width:stretch}
html.v-short body>.hero{order:1}
html.v-short body>.now-h:has(+#story){order:2}
html.v-short body>#story{order:3}
html.v-short body>#inkolega{order:4}
html.v-short body>#library{order:5}
html.v-short body>#navikit{order:6}
html.v-short body>#gs{order:7}
html.v-short body>#strip{order:8}
html.v-short body>#voices{order:9}
html.v-short body>.now-h:has(+#kumi){order:10}
html.v-short body>#kumi{order:11}
html.v-short body>#part-mentions{order:12}
html.v-short body>.close{order:13}
/* S1 cont. Under 768px the library map fills its lesson list in when it builds (stage 312px -> 417-489px), AFTER the graph script has cached where #gs and the photo strip sit; in this order the library is above them, so the graph chapters ran ~160px early on a phone. Reserving the built stage height (measured 05-11 per width) keeps #gs where the script measured it. Default order is not affected: there the library sits below #gs. */
@media (max-width:767px){html.v-short #part-library .flib-stage{min-height:417px}}
@media (max-width:699px){html.v-short #part-library .flib-stage{min-height:456px}}
@media (max-width:429px){html.v-short #part-library .flib-stage{min-height:472px}}
@media (max-width:380px){html.v-short #part-library .flib-stage{min-height:489px}}

/* 14. Phone: "What I'm building now" floated 135px above its first item (the essay door) while "On the side" sits 45px above KumiCoach, so the chapter heading did not read as owning what follows. Gap 135 -> ~60px on phones only (laptop keeps room for the hanging drawings, round 2). Undo: delete this block. */
@media (max-width:640px){.now-h+#story{padding-top:44px}}

/* 15. "Honorable mentions" sat ~266px under KumiCoach's cards at 1280 (white margin 90 + grey band top 144) while "On the side" sits ~162px under NaviKit, so the same chapter heading had two rhythms; the band's 144px bottom then added to the end scene's sky. Margin 90 -> 51, band padding 144 -> 99 top and bottom (phone: 72 -> 56, margin 84 -> 40). Checked with motion on: the dot panel and deck keep their place under the heading. Undo: delete this block. */
#part-mentions{margin-top:clamp(40px,4vw,56px)}
.ma{padding-top:clamp(64px,11svh,104px);padding-bottom:clamp(64px,11svh,104px)}
@media (max-width:760px){.ma{padding-top:56px;padding-bottom:56px}}

/* C1. PREVIEW ?v=contain - reverses his 04-11 bleed pick, so not default: the Inkolega feature cards stay inside the page column (95-1345px at 1440, the customer tiles edge), all corners round. Both blind readers of the 05-11 night read the bleed as cards running off the screen (blind-laptop.md row 12-14, blind-after.md change 2). */
html:not(.v-nocontain) #inkolega .fe-grid>.fe-card{box-shadow:none !important;clip-path:none !important;border-radius:20px !important}
@media (max-width:640px){html:not(.v-nocontain) #inkolega .fe-grid>.fe-card{border-radius:16px !important}}

/* S2. ?v=short: WORDS' heading "How I got here" over the graph chapters, in the chapter-heading style (requests.md, WORDS 00:58). The section is hidden on the default page. */
html.v-short #how{display:block}
html.v-short body>#how{order:7}

/* S3. PREVIEW ?v=proofshort (COMP 01:11): ?v=proof first screen + ?v=short order in one link. Copies of P1, S1 and S2 under the new name; the proof wording itself is WORDS' script. */
html.v-proofshort .hero p.proof{font-size:clamp(17px,1.6vw,23px);line-height:1.55;color:var(--t1);max-width:none}
html.v-proofshort body{display:flex;flex-direction:column}
html.v-proofshort body>section,html.v-proofshort body>#part-mentions{order:20;width:-moz-available;width:-webkit-fill-available;width:stretch}
html.v-proofshort body>.hero{order:1}
html.v-proofshort body>.now-h:has(+#story){order:2}
html.v-proofshort body>#story{order:3}
html.v-proofshort body>#inkolega{order:4}
html.v-proofshort body>#library{order:5}
html.v-proofshort body>#navikit{order:6}
html.v-proofshort body>#gs{order:7}
html.v-proofshort body>#strip{order:8}
html.v-proofshort body>#voices{order:9}
html.v-proofshort body>.now-h:has(+#kumi){order:10}
html.v-proofshort body>#kumi{order:11}
html.v-proofshort body>#part-mentions{order:12}
html.v-proofshort body>.close{order:13}
@media (max-width:767px){html.v-proofshort #part-library .flib-stage{min-height:417px}}
@media (max-width:699px){html.v-proofshort #part-library .flib-stage{min-height:456px}}
@media (max-width:429px){html.v-proofshort #part-library .flib-stage{min-height:472px}}
@media (max-width:380px){html.v-proofshort #part-library .flib-stage{min-height:489px}}
html.v-proofshort #how{display:block}
html.v-proofshort body>#how{order:7}

/* 16. Rhythm r4 (design/rhythm.md): on a laptop the breaks BETWEEN projects (door -> Inkolega 166px, "See the work behind it" -> NaviKit 158px) were wider than the chapter breaks before "What I'm building now" and "On the side" (155px), so a project change read as bigger than a chapter change. Project break -> ~122px at 1280-1440, chapter breaks stay ~155px. Laptop only (the door's drawings hang below its box there, block 1 still gives them room); phone left as round 3 decided. Undo: delete this block. */
@media (min-width:1180px){#inkolega{padding-top:clamp(80px,11svh,104px)}#library{padding-top:clamp(40px,6svh,60px)}}
/* 17. Inkolega is a project like NaviKit and KumiCoach, but its title was 28px/500 (22px on the phone) against their 46px/600 (28px), so the lead project read as a sub-item, smaller even than the 40px memory panel title. Same project-title scale, still centred over its cards. Undo: delete this block. */
/* REVERTED 01:50 by DESIGN: this reverses his ?f=1 opener pick (04-11); it lives as the ?v=ink preview, FOR-MATT item 1. */

/* 18. "What NaviKit can do" (28px/500 at 1440, 24.96px at 1280, 22px/500 on the phone) was no bigger than the 25.92px/600 card titles it introduces (22px/600 on the phone), so the cards outranked their heading. Put it on the scale of its sibling, the "Persistent memory" panel title. Round 2's catch (shared blue line with Inkolega) is gone: block 17 already moved Inkolega's title to 600. Undo: delete this block. */
html:not(.v-noink) #navikit .nk>h3{font-weight:600;font-size:clamp(30px,2.8vw,40px);line-height:1.15;letter-spacing:-.02em}
@media (max-width:760px){html:not(.v-noink) #navikit .nk>h3{font-size:26px}} /* 01:50 DESIGN: moved under ?v=ink - its reason was block 17, now preview-only */
/* 19. Phone: the three labels under the NaviKit "Notes to results" diagram touched (0-1px gaps at 390-640px, read as "6 researchers3 draft plans1 final plan"), because the 14.5-unit labels scale with the drawing. Below 761px the outer two labels move 14 units away from the middle one (gaps ~14px at 390, ~23px at 640); each still sits under its column of dots. Undo: delete this block. */
@media (max-width:760px){#navikit .nr-svg text[x="110"][y="206"]{transform:translateX(-14px)}#navikit .nr-svg text[x="280"][y="206"]{transform:translateX(14px)}}
/* 20. On a laptop the memory panel's words sat 24px from the screen edge (labels ~22px, buttons 16px) while NaviKit's title and lead sit on the 6.6vw text column (95px at 1440), so the panel read as a separate block glued to the edge. Title, counts, lesson labels, legend and buttons move in to the text column; the map stays full width; the -8px offsets the label and legend buttons' 8px side padding. Phone (<=900px) keeps its own static layout. Undo: delete this block. */
@media (min-width:901px){#part-library .flib-title,#part-library .flib-counts{left:6.6vw}#part-library .flib-lesson,#part-library .flib-legend{left:calc(6.6vw - 8px)}#part-library .flib-lesson.is-r{left:auto;right:calc(6.6vw - 8px)}#part-library .flib-ctl,#part-library .flib-hint{right:6.6vw}}

/* 21. Type scale r9 (design/typescale.md): outside the graph and hero the page used 24 font sizes at 1440 and 18 at 390, many of them near-twins (15/16/16.5/17/17.28, 19.5/20/21.6, 23/23.04/24, 25.92/26, 37.44/40) that read as noise, not levels. One step per role. Laptop (1440): 14 label / 16 small / 18 card text / 20 lead and tile title / 24 minor heading / 26 card title / 28 blue lines (ruled, untouched) / 34 sub heading / 40 panel title and card number / 46 project / 60 chapter / 72 result number. Phone (390): 14 label and caption (the 16px caption added a line under the result graph) / 16 / 18 lead / 20 minor and Inkolega card title / 22 card title / 24 sub / 28 project / 34 chapter. Fluid steps use one clamp per step so same-role text matches at every width. Undo: delete this block. */
#library .flib-hint{font-size:14px}
#library .flib-counts span{font-size:14px}
#navikit .nr-foot,#navikit .nkx-big small{font-size:16px}
#inkolega .fe-tile p{font-size:16px}
#library .flib-legend button{font-size:16px}
#story .st-btn,#inkolega .fe-workln{font-size:clamp(16px,1.25vw,18px)}
#inkolega .fe-line,#navikit .nkd-desc,#kumi .ku-cards p{font-size:clamp(16px,1.25vw,18px)}
#library .flib-lesson button{font-size:clamp(16px,1.39vw,20px)}
#inkolega .fe-tile h5{font-size:20px}
#navikit .nr-note,#navikit .nr-arrow,#navikit .fx-mq.nkx-st li,#navikit .fx-mq.nkx-st li.fx-all i,#navikit .nr-num small,#story .st-door h2{font-size:clamp(20px,1.67vw,24px)}
#inkolega .fe-card h4,#navikit #nk-made .nk4 .nkb>h4,#kumi .ku-cards h4{font-size:clamp(22px,1.806vw,26px)}
#navikit .nkx-big{font-size:clamp(28px,2.78vw,40px)}
@media (max-width:640px){#inkolega .fe-card h4{font-size:20px}}
@media (max-width:760px){#inkolega .fe-cust-top h4,#library .flib-counts b{font-size:24px}}
@media (max-width:640px){#navikit .nr-foot,#navikit .nkx-big small{font-size:14px}}
/* 22. On a laptop the memory panel's title sat 18px under the navy band's top edge (16px for the zoom buttons) while its words sit 95px in from the side, so "Persistent memory" looked glued to the band and crowded against the lead above it. Title, counts and buttons drop ~40px into the panel (title top 18 -> 56, buttons 16 -> 60, the dot card that opens under the buttons 64 -> 108); the map, its labels and the phone layout are untouched. Undo: delete this block. */
@media (min-width:901px){#part-library .flib-title{top:56px}#part-library .flib-counts{top:calc(56px + clamp(30px,2.8vw,40px) + 10px)}#part-library .flib-ctl{top:60px}#part-library .flib-card{top:108px}}
/* 23. Inkolega's lead card ("Learns how you decide") gave its words the narrowest column on the page (264px at 1440, 216px at 1181, 182px at 1000; other cards 354px), so the lead feature's title broke onto two lines ("Learns how you / decide") and its one line ran 4-6 lines of ~21-26 characters. Drawing:text 2.1:1 -> 1.45:1 on laptops (row layout only, >=981px): title on one line at 1181-1920, line 4->3 at 1280/1440, 5->4 at 1181, 6->4 at 1000; drawing ~12% smaller, card and row height unchanged (set by the card beside it). Undo: delete this block. */
@media (min-width:981px){#inkolega .fe-wide .fe-art{flex:1.45}}
/* 24. The NaviKit run caption ("What it ran: ...") was the only paragraph on the page with no measure: 1250px wide at 1440 (~150 characters a line, 1111px at 1280) while every other paragraph stops at 648-760px. Its text now stops at the same right edge as the card's own description above it (36em of that 16-18px text: 648px at 1440, 576px at 1280); the divider line above it still runs the full card width. Undo: delete this block. */
#navikit .nr-foot{padding-right:max(0px,100% - clamp(576px,45vw,648px))}