/* FAQ page — page styles only. Consumes tokens.css. Ratified in SPEC - FAQ page (built).md. SHELL EXTRACTED. The comp carried the navigation a second time under .faq-bar / .faq-burger / .faq-panel classes, with a note that "when the shell is extracted these rules move to shell.css unchanged." That extraction is done: the shared navigation now lives in nav.css and the nav partial, used by every page. Its two page-level differences — the mark shown from first paint and the hamburger with no keyline off photography — are handled there (the has-mark class is set in the markup on non-home pages; the keyline is scoped to body.home). What remains below is page code. The comp's .faq / .faq * rules (page background, ink, font, box-sizing) are dropped: base.css now provides those on and universally, so they were redundant once the shell was extracted. */ /* 84px from the top: 24px hamburger inset + 44px target + 16px. The title clears the band the hamburger occupies rather than sitting beside it. */ .faq-main{padding:84px var(--margin) 40px} .faq__title{margin:0;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;font-size:35px;color:var(--ink)} /* 34em, the measure section 2's copy already uses. Left on the page margin. */ .faq-group{max-width:34em} /* 32px title-to-first-heading; 48px between groups, which is the space the purple label needs to read as a heading rather than as a row. 12px below binds it to its own group. */ .faq-group:first-of-type{margin-top:32px} .faq-group+.faq-group{margin-top:48px} .faq-group__h{margin:0 0 12px;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.15;font-size:22px;color:var(--purple)} /* ---------- the accordion ---------- */ /* Native disclosure. Nothing here is scripted, nothing transitions, nothing rotates. */ .faq-q{border-top:1px solid var(--line)} .faq-group .faq-q:last-of-type{border-bottom:1px solid var(--line)} .faq-q>summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:44px;padding:12px 0;cursor:pointer;font-size:var(--fs-body);line-height:1.5;font-weight:600;color:var(--ink);text-wrap:pretty} .faq-q>summary::-webkit-details-marker{display:none} .faq-q>summary::marker{content:""} .faq-q>summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px} /* Plus becoming minus. A chevron states a direction and so implies motion the no-transition rule forbids; a plus states a quantity. Fixed box so the two glyphs cannot shift the row. */ .faq-q__mk{flex:none;width:18px;text-align:center;font-size:18px;line-height:1.5;font-weight:400;color:var(--ink2)} .faq-q__mk::after{content:"+"} .faq-q[open] .faq-q__mk::after{content:"\2212"} /* No hairline between question and answer — the row is one object. 24px below the last paragraph, larger than the 16px paragraph gap, so the answer ends visibly before the next row's border. */ .faq-a{padding:0 0 24px;display:flex;flex-direction:column;gap:16px} .faq-a p{margin:0;font-size:var(--fs-body);line-height:1.5;font-weight:400;color:var(--ink);text-wrap:pretty} @media(min-width:1088px){ /* 64px of the fixed bar, then 48px of air — section 3's desktop top padding. 64px of bottom padding gives the footer's border 64 + 1 + 64 = 129px of clear ground, the same junction the home page footer measures. */ .faq-main{padding:calc(var(--nav) + 48px) var(--margin-d) 64px} .faq__title{font-size:56px} .faq-group:first-of-type{margin-top:40px} .faq-group+.faq-group{margin-top:64px} .faq-group__h{font-size:24px} .faq-q>summary{font-size:var(--fs-body-d);line-height:1.55} .faq-q__mk{width:20px;font-size:20px;line-height:1.55} .faq-a{gap:18px} .faq-a p{font-size:var(--fs-body-d);line-height:1.55} }