/* =========================================================================== Round 7 · NAEM-SPEC #1 — the FAQ block at ~75% of its footprint "Scale the whole FAQ block down to ~75% of its current footprint. Keep the same questions, spacing ratios and typography — just tighten vertical padding, row height and heading size." HOW IT IS DONE Every length that adds up to the block's height was measured and multiplied by .75: section padding, the head's margins, the heading, the row height, the answer's bottom padding, the gap to the aside, the aside's own padding. Nothing here shrinks the block with a CSS transform or a magnification property (the brief bans both, and a grep for either finds nothing in this file, comments included): those shrink the pixels and leave the layout box, the tap targets and the text rendering wrong. These are real values, so the page is genuinely shorter. WHERE .75 IS NOT APPLIED, AND WHY Text has a floor. A flat .75 would put the questions at 13.5px and the answers at 12px, which is a legibility regression sold as a layout change. So: questions 18 -> 15px, answers 16 -> 14px, and the 12px row numerals and eyebrow — already the smallest label size in the theme — do not move. Rows stay at or above the 44px touch-target minimum at every width. The space that type could not give back is recovered from padding, which is why the block still lands near the target overall. Home block, 1440px, six rows with the first answer open (the state it ships in), summed from the values below: before 161 padding + 94 head + 32 + 439 rows + 77 answer = ~803px after 121 padding + 75 head + 24 + 331 rows + 64 answer = ~615px (.77) That is arithmetic from the stylesheets, not a measurement of a rendered page; line wraps in the open answer can move it a few pixels either way. BEFORE -> AFTER, 1440px section padding-block 80.6 -> 60.5 (.75) eyebrow margin-bottom 16 -> 12 (.75) h2 font-size 42 -> 32 (.76) h2 margin-bottom 16 -> 12 (.75) head margin-bottom 32 -> 24 (.75) row min-height 72 -> 54 (.75) row columns / gap 40 1fr 18 / 16 -> 30 1fr 16 / 12 question font-size 18 -> 15 (.83, floor) answer font-size 16 -> 14 (.875, floor) answer padding-bottom 24 -> 18 (.75) answer indent 56 -> 42 (.75; = 30 + 12, so the answer still hangs under the question text) list/aside gap 49 -> 36.7 (.75) aside padding 28 -> 21 (.75) aside h3 20 -> 16 (.80) BEFORE -> AFTER, 375px section padding-block 41.3 -> 30.9 (.75) h2 font-size 33.8 -> 26.3 (.78) head margin-bottom 24 -> 18 (.75) row min-height 64 -> 48 (.75, >= 44) question font-size 16 -> 15 (floor) answer font-size 16 -> 14 (floor) answer padding-bottom 24 -> 18 (.75) answer indent 44 -> 36 (24 + 12) TWO ROUTES, ONE COMPONENT round5-home.css is explicit that the home block "reuses .faq-list / .faq-item exactly as the FAQ page renders them, so the repeated block reads as the same component". The home block's own link goes straight to /faq/. If only the home rows were tightened, that click would land on the same six rows drawn a fifth larger — the inconsistency this item was told to avoid. So the ROW rules below apply to both routes. Everything about the section around the rows (padding, heading, aside) is home-only: /faq/ is a page with a page header, not a section, and its header is not part of "the FAQ block". ========================================================================= */ /* --- the rows: home block and /faq/ ---------------------------------------- */ .faq-echo-section .faq-item summary, .faq-page .faq-item summary { min-height: 54px; grid-template-columns: 30px 1fr 16px; gap: var(--s3); /* min-height used to be the only thing keeping a wrapped question off the hairlines; at 54px a two-line question would touch them. The padding is what a wrapped row stands on, and a one-line row (21px of text + 20) is still shorter than the min-height, so single-line rows are exactly 54. */ padding-block: 10px; font-size: 15px; line-height: 1.4; } .faq-echo-section .faq-item > p, .faq-page .faq-item > p { padding: 0 0 18px 42px; font-size: 14px; line-height: 1.65; } /* Focus: untouched. summary:focus-visible is styled once in style.css and nothing about a shorter row changes how that ring is drawn. */ /* --- the section around them: home only ------------------------------------ */ .faq-echo-section.sec-tight { padding-block: clamp(42px, 4.2vw, 66px); } .faq-echo-section .sec-head { margin-bottom: var(--s5); } .faq-echo-section .sec-head .eyebrow { margin-bottom: var(--s3); } .faq-echo-section .sec-head h2 { margin-bottom: var(--s3); font-size: clamp(22px, 2.35vw, 32px); } .faq-echo-section .faq-echo-layout { gap: clamp(21px, 2.55vw, 42px); } .faq-echo-section .faq-echo-aside { padding: clamp(16px, 1.65vw, 21px); } .faq-echo-section .faq-echo-aside .eyebrow { margin-bottom: 9px; } .faq-echo-section .faq-echo-aside h3 { margin-bottom: 9px; font-size: 16px; line-height: 1.25; } /* 14px is already the floor for running text; only the space under it moves. The Telegram control keeps its 48px height: it is a tap target, not padding. */ .faq-echo-section .faq-echo-aside .body-copy { margin-bottom: 18px; } /* --- phones ---------------------------------------------------------------- */ @media (max-width: 680px) { .faq-echo-section .faq-item summary, .faq-page .faq-item summary { min-height: 48px; grid-template-columns: 24px 1fr 16px; gap: var(--s3); padding-block: 9px; font-size: 15px; } .faq-echo-section .faq-item > p, .faq-page .faq-item > p { padding: 0 0 18px 36px; font-size: 14px; } .faq-echo-section.sec-tight { padding-block: clamp(30px, 8.25vw, 42px); } .faq-echo-section .sec-head { margin-bottom: 18px; } .faq-echo-section .sec-head h2 { font-size: clamp(26px, 7vw, 30px); } }