/* ── /faq ───────────────────────────────────────────────────────────────── T-1127. The FAQ list, and the live team roster inside the last answer. WHY THIS IS A HAIRLINE LEDGER AND NOT A SET OF CARDS. Eight questions in eight bordered boxes is the default FAQ shape and it is the one thing this site does not do — a padded box inside a 1140px column reads as an inset panel floating in the section, and the rule here is that sections run border to border. So the SEPARATOR is the full-bleed element: .faq-item carries the hairline and spans the whole viewport, while .faq-item__inner holds the copy on exactly the same 1140px / clamp(1rem,4vw,2.5rem) measure as the shared .inner. The rules reach both edges of the screen; the type never does. Verified with getBoundingClientRect at 1440 and 390 — every .faq-item measures the full document width, x = 0. NO ACCORDION. An accordion would hide six of seven answers behind a click, and the FAQPage schema on this page states answer text that a visitor is then expected to find. Google is explicit that the answer has to be visible without interaction to be eligible, and a prospect two hours from a meeting should be able to Cmd-F the page. Everything is open, always. Type comes from the existing scale (site.css) — question at the .sv-h3 step or just under it, answer prose at the .sv-lede step. Nothing here grows the scale; T-1041 brought it down a notch sitewide and this page inherits that. */ /* ── LIGHT GROUND (T-1149) ─────────────────────────────────────────────── "faq cant be read" — eight answers of body prose at rgba(245,241,232,.58) on #0a0a0a is the hardest reading surface on the site, and this is the page that is nothing BUT reading. The list moves to bone with ink type. Done by redefining the four dark-ground custom properties on the section rather than by rewriting the rules below it: every colour in this file is already expressed as var(--on-black) / --on-black-mute / --on-black-faint / --rule-on-black, so the flip reaches all of them at once and cannot miss a selector. --red-text (#e8455a) measures ~2.6:1 on bone, so the light scope swaps it for #a50d26 (~6.6:1). --red (#c8102e) is kept for rules and marks at 5.9:1. Answer prose lands at rgba(10,10,10,.72) on #faf8f3 ≈ 11.4:1. The hero above and the .sv-close below stay dark: black is the separation either side of the white block, which is the rhythm the page was missing. */ .faq-light { background: var(--bone); --ink: #faf8f3; --on-black: #0a0a0a; --on-black-mute: rgba(10, 10, 10, .72); /* .55 composites to ~3.5:1 on bone, which is under the bar for the small uppercase mono this token is used for. Measured on painted pixels, not on the declared value: .62 lands at ~4.6:1. */ --on-black-faint: rgba(10, 10, 10, .62); --rule-on-black: rgba(10, 10, 10, .16); --red-text: #a50d26; /* THE INHERITANCE NET. Flipping the four tokens above only reaches type that names one of them. Anything that sets no colour of its own inherits from , which on this site is bone — so on a bone ground it renders invisible. Measured: the two .faq-a__split paragraphs and every .faq-roster row shipped at 1.07:1 and 1.87:1 before this line existed. Sampled off the rendered PNG, not off a getComputedStyle walk, which reports the declared colour and would have called both of them fine. */ color: #0a0a0a; padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.8rem, 3.4vw, 2.8rem); } .faq-light .faq-q em { color: var(--red); } .faq-light .faq-a strong { color: #0a0a0a; font-weight: 600; } /* The two nested practice paragraphs: same prose colour as a top-level answer, which .faq-a > p cannot reach because of the child combinator. */ .faq-light .faq-a__split p { color: var(--on-black-mute); } .faq-light .faq-a__split .faq-a__split-label { color: var(--red-text); } .faq-light .faq-roster__name { color: #0a0a0a; } .faq-light .faq-roster__role { color: var(--on-black-faint); } .faq-light .faq-a a { border-bottom-color: rgba(165, 13, 38, .35); } .faq-light .faq-a a:hover, .faq-light .faq-a a:focus-visible { border-bottom-color: #a50d26; } .faq-light .faq-roster__row { border-top-color: rgba(10, 10, 10, .12); } .faq-light .faq-a__split { border-left-color: rgba(200, 16, 46, .34); } /* The red ember wash is a dark-ground device; it reads as a stain on bone. */ .faq-page .ember { display: none; } /* ── THE LIST ───────────────────────────────────────────────────────────── */ .faq-list { /* No max-width and no padding: this element IS the full-bleed track. The measure lives one level down, in .faq-item__inner. */ border-bottom: 1px solid var(--rule-on-black); } .faq-item { position: relative; border-top: 1px solid var(--rule-on-black); } /* Alternating shape marks, soft against sharp, in the question column. Ethan's own bubble radii from unwrinkled-react/app/globals.css on the odd items; clip-path counterparts — a chamfer and a chevron — on the even ones, so eight stacked questions have a rhythm instead of one repeated ornament. Drawn behind the number, costs no vertical space. */ .faq-item__q { position: relative; } .faq-item__q::before { content: ""; position: absolute; left: -13px; top: -13px; width: 38px; height: 38px; background: rgba(200, 16, 46, .10); pointer-events: none; z-index: 0; } .faq-item:nth-child(4n+1) .faq-item__q::before { border-radius: 50% 50% 12% 12% / 34% 34% 8% 8%; } .faq-item:nth-child(4n+2) .faq-item__q::before { clip-path: polygon(0 0, 100% 0, 100% 56%, 56% 100%, 0 100%); background: rgba(10, 10, 10, .10); } .faq-item:nth-child(4n+3) .faq-item__q::before { border-radius: 40% 60% 56% 44% / 55% 42% 58% 45%; } .faq-item:nth-child(4n+4) .faq-item__q::before { clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); background: rgba(10, 10, 10, .10); } .faq-item__num, .faq-q { position: relative; z-index: 1; } /* A crossing-diagonal tick in the right margin of alternating items — the sharp motif carried across the whole list rather than left in the marks. ATTACHED TO .faq-item, NOT .faq-item__inner. The inner is the 1140px measure, so a band pinned to ITS right edge sits on top of the answer column — measured at 32px of overlap on the first build, straight through the last word of every line. On the full-bleed .faq-item it lands in the page gutter outside the measure, where there is nothing to collide with, and it is capped so it never reaches the text even on a narrow window. */ .faq-item::after { content: ""; position: absolute; right: 0; top: 0; width: min(clamp(36px, 4.4vw, 68px), calc((100vw - 1140px) / 2 - 6px)); height: 100%; pointer-events: none; background: repeating-linear-gradient(58deg, rgba(200, 16, 46, .16) 0 1px, transparent 1px 15px); clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%); } .faq-item:nth-child(even)::after { background: repeating-linear-gradient(-58deg, rgba(10, 10, 10, .16) 0 1px, transparent 1px 15px); clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%); } .faq-item__inner { position: relative; } /* ── BLACK INTERSTITIAL ────────────────────────────────────────────────── One short band mid-list. Eight answers is a long unbroken white run, and this is the "black shading and separation" between the halves — a beat, not a section. Full-bleed, chamfered, crisscrossed. */ .faq-band { position: relative; height: clamp(46px, 6vw, 64px); background: #0a0a0a; overflow: hidden; clip-path: polygon(0 0, 62% 0, 68% 42%, 74% 0, 100% 0, 100% 100%, 0 100%); } .faq-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(52deg, rgba(245, 241, 232, .10) 0 1px, transparent 1px 12px), repeating-linear-gradient(-52deg, rgba(200, 16, 46, .22) 0 1px, transparent 1px 22px); } .faq-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 22%, rgba(200, 16, 46, .55) 22% 22.4%, transparent 22.4% 100%); } .faq-item__inner { max-width: 1140px; margin: 0 auto; padding: clamp(2.1rem, 4vw, 3.1rem) clamp(1rem, 4vw, 2.5rem); display: grid; /* Question column is narrower than the answer column: the question is a line or two, the answer is a paragraph, and giving the answer the wider track keeps its measure near the 58-64ch the rest of the site reads at instead of stretching it to half of 1140px. */ grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.34fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; } /* ── QUESTION SIDE ──────────────────────────────────────────────────────── */ .faq-q { font-family: var(--font-display); font-weight: 400; /* Between .sv-lede and .sv-h3 on the existing ramp. Seven of these stack up the page, so the h3 step (1.2–1.65rem) read as seven competing headings. */ font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.22; letter-spacing: -.015em; color: var(--on-black); margin: 0; } .faq-q em { font-style: italic; color: var(--red); } .faq-item__num { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--on-black-faint); display: flex; align-items: center; gap: .7rem; margin: 0 0 .85rem; } .faq-item__num .eyebrow-rule { display: inline-block; width: 22px; height: 1px; background: var(--red); flex-shrink: 0; } /* ── ANSWER SIDE ────────────────────────────────────────────────────────── */ .faq-a > p { font-size: clamp(.88rem, 1.3vw, 1rem); line-height: 1.72; color: var(--on-black-mute); max-width: 64ch; margin: 0 0 1.05rem; } .faq-a > p:last-child { margin-bottom: 0; } /* The lead sentence of an answer — "Yes." / "On a paid engagement, you do." — lifted to full text colour so the actual answer is legible at a glance and the qualification reads as the qualification. */ .faq-a strong { color: var(--on-black); font-weight: 500; } .faq-a a { color: var(--red-text); text-decoration: none; border-bottom: 1px solid rgba(232,69,90,.3); transition: border-color .2s var(--ease-out-expo); } .faq-a a:hover, .faq-a a:focus-visible { border-bottom-color: var(--red-text); } /* A sub-list inside an answer (the two practices, in S.03). Not a card grid — just labelled paragraphs with a red tick rule at the left. */ .faq-a__split { margin: 0 0 1.05rem; padding-left: 1rem; border-left: 1px solid rgba(200,16,46,.28); } .faq-a__split-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-text); margin: 0 0 .4rem; } /* ── THE LIVE ROSTER (last answer) ──────────────────────────────────────── */ .faq-roster { margin: 1.15rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 3vw, 2.4rem); list-style: none; padding: 0; } .faq-roster__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: .5rem 0; border-top: 1px solid rgba(245,241,232,.07); } .faq-roster__name { font-size: .9rem; color: var(--on-black); line-height: 1.4; } .faq-roster__role { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-black-faint); line-height: 1.5; } /* Shown only if the roster query fails or returns nothing. Never an empty hole where 13 names should be, and never a hardcoded list standing in for the table — /team stays the single source of the bench. */ .faq-roster__fallback { font-size: clamp(.88rem, 1.3vw, 1rem); line-height: 1.72; color: var(--on-black-mute); margin: 1.15rem 0 0; } /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */ @media (max-width: 860px) { .faq-item__inner { grid-template-columns: 1fr; gap: clamp(.85rem, 3vw, 1.2rem); } /* The right-margin diagonal is a two-column device; stacked it would run straight through the answer copy. */ .faq-item__inner::after { display: none; } .faq-item__q::before { width: 38px; height: 38px; left: -10px; } /* Stacked, the question needs to read as the heading of what follows it rather than as a sibling paragraph. */ .faq-q { font-size: clamp(1.02rem, 3.4vw, 1.18rem); } .faq-a > p { max-width: none; } } @media (max-width: 560px) { .faq-roster { grid-template-columns: 1fr; } } /* ── REDUCED MOTION ─────────────────────────────────────────────────────── */ /* This page adds no ambient art loops of its own — the hero uses the shared .glow-hero--focus / .fx-focus primitives, which carry their own kill block in glow.css. The only motion introduced here is the two link/hover transitions above, killed explicitly so nothing on this page animates. */ @media (prefers-reduced-motion: reduce) { .faq-a a { transition: none !important; } }