/* robotics.builtfor.ai — "Signal" A digital instrument, not a publication. Archivo for display, IBM Plex Mono for every figure and label. Cool near-white ground, one cobalt accent, amber for unresolved claims. Surfaces are allowed; print furniture is gone. Class names are unchanged from the previous direction, so the markup is untouched — the direction lives entirely in this file. Previous newsprint direction preserved as styles-broadsheet-v1.css. */ /* Fonts are requested from each page with a preconnect, not imported here — an @import serialises the font behind this stylesheet. */ :root { --color-bg: #f4f5f7; --color-surface: #ffffff; --color-text: #101215; --color-mute: #101215; /* type is never lightened */ --color-accent: #007ba7; /* cerulean — interaction, live status */ --color-accent-700: #005f80; --color-accent-100: #e6f4fa; --color-accent-300: #9fd6ea; --color-accent-2: #b45309; /* amber — unresolved claims only */ --color-accent-2-700: #8f3f06; --color-line: #dfe2e8; --color-line-strong: #c3c8d2; --color-divider: var(--color-line); --color-neutral-100: #ffffff; --color-neutral-200: #eef0f4; --color-neutral-300: #dfe2e8; --color-neutral-400: #c3c8d2; --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 28px; --space-8: 44px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(16, 18, 21, 0.06); --shadow-md: 0 6px 20px rgba(16, 18, 21, 0.08); --shadow-lg: 0 24px 60px rgba(16, 18, 21, 0.16); --measure: 1280px; } * { box-sizing: border-box; } /* Author component rules (.btn, .panel …) outrank the UA [hidden] rule, so element.hidden silently fails without this. Keep it above the component layer. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-700); } *:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--color-accent-100); } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.03em; margin: 0; line-height: 1.08; } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--space-8); } /* ---- Header: a product bar, not a masthead ---- */ .masthead { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); } .masthead-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .wordmark { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); } .wordmark b { font-size: 19px; font-weight: 700; letter-spacing: -0.035em; } .nav { display: flex; align-items: center; gap: var(--space-1); font-size: 14px; font-weight: 500; } .nav a { color: var(--color-text); padding: 6px 10px; border-radius: var(--radius-sm); } .nav a:hover { background: var(--color-neutral-200); color: var(--color-text); } .nav a[aria-current="page"] { background: var(--color-accent); color: #fff; } .nav sup { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0; opacity: 0.75; } .kbd { font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); } .dateline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .dateline span { display: inline-flex; align-items: center; gap: 6px; } .dateline span:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } /* ---- Structure ---- */ section { padding: var(--space-8) 0; } .hr { height: 1px; background: var(--color-line); margin-bottom: var(--space-8); } .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-4); } .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; } .lede { font-size: 19px; line-height: 1.5; max-width: 58ch; text-wrap: pretty; } .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; } .hero h1 { font-size: clamp(40px, 5.2vw, 74px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; text-wrap: balance; } /* ---- Media: full colour, rounded, no print treatment ---- */ .figure { margin: 0; } .slot { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-neutral-200); border: 1px solid var(--color-line); } .slot img, .slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .slot video { opacity: 0; pointer-events: none; } .slot video.live { opacity: 1; pointer-events: auto; } .caption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .plate { position: relative; overflow: hidden; } .plate img { filter: none; } .plate::before, .plate::after { content: none; } .band { position: relative; aspect-ratio: 21 / 8; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-line); } .band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .band figcaption { position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; background: color-mix(in srgb, var(--color-surface) 92%, transparent); backdrop-filter: blur(6px); padding: 6px 10px; border-radius: 999px; } /* ---- Metrics: surfaces are allowed now ---- */ .counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .counters > div { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-6) var(--space-4); } .counters .n { font-family: var(--font-mono); font-size: 46px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .counters p { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.4; } .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); border: 0; } .strip > div { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-4); } .strip .n { font-family: var(--font-mono); font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .strip .n.live { color: var(--color-accent); } .strip p { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.35; } .bignum { font-family: var(--font-mono); font-size: clamp(56px, 9vw, 128px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; font-variant-numeric: tabular-nums; } .bignum-row { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8); align-items: center; } .bignum-row .unit { font-size: clamp(16px, 1.8vw, 21px); font-style: normal; max-width: 24ch; line-height: 1.4; } /* ---- Tiles ---- */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .tile { color: var(--color-text); display: block; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-3); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .tile:hover { border-color: var(--color-accent-300); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-text); } .tile .slot { aspect-ratio: 3 / 2; border-radius: var(--radius-md); } .tile h3 { font-size: 17px; font-weight: 600; margin: var(--space-3) 0 var(--space-1); } .tile p { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } /* ---- Ledger: rows in a surface, no hairline furniture ---- */ .rails { display: grid; gap: var(--space-2); } .rail { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .rail > .label { width: 88px; } .rail button { white-space: nowrap; cursor: pointer; border: 1px solid var(--color-line); background: var(--color-surface); padding: 5px 11px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--color-text); } .rail button:hover { border-color: var(--color-accent-300); background: var(--color-accent-100); } .rail button[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-style: normal; } .ledger { margin: var(--space-6) 0 0; padding: 0; list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); } .ledger li { display: grid; grid-template-columns: 46px minmax(0, 1fr) 120px 250px; gap: var(--space-4); align-items: center; padding: var(--space-4); border-top: 1px solid var(--color-line); } .ledger li:first-child { border-top: 0; } .ledger li:hover { background: var(--color-accent-100); } .rank { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.6; } .ledger h3, .ledger h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } .ledger .name-btn { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .ledger .name-btn:hover { color: var(--color-accent); } .entry-meta { margin: var(--space-1) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } .status { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--color-line-strong); } .status.live { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .status.unverified { font-style: normal; border-style: dashed; } .figures { text-align: right; } .figures .head { font-family: var(--font-mono); font-size: 24px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; } .figures p { margin: var(--space-1) 0 0; font-size: 13px; line-height: 1.35; } .ledger-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; margin-top: var(--space-3); } /* ---- Confidence marks ---- */ .cite { cursor: help; border: 0; background: none; padding: 0 0 0 4px; font: inherit; font-size: 11px; line-height: 1; vertical-align: super; color: var(--color-accent); } .cite.dev { color: var(--color-accent-2); } .cite-pop { position: fixed; z-index: 60; width: 340px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-4); } .cite-pop .label { margin: 0 0 var(--space-2); color: var(--color-accent); } .cite-pop strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; } .cite-pop .retrieved { margin: 2px 0 var(--space-2); } .cite-pop .note { margin: 0; font-size: 13px; line-height: 1.45; } /* ---- Charts ---- */ .bars { margin: var(--space-6) 0 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); } .bar { display: grid; grid-template-columns: 180px 1fr 76px; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); } .bar:first-child, .bar:last-child { border-bottom: 0; } .bar:first-child { border-top: 0; } .bar-l { font-size: 14px; font-weight: 500; } .bar-t { display: block; height: 10px; width: var(--w); background: var(--color-line-strong); border-radius: 999px; transition: background 160ms ease; } .bar-t.lead { background: var(--color-accent); } .bar-v { font-family: var(--font-mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; } .bar:hover .bar-t { background: var(--color-accent); } .chart-source { margin: var(--space-3) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; } /* ---- Editorial emphasis, without print devices ---- */ .pull { font-size: clamp(22px, 2.6vw, 32px); font-style: normal; font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; max-width: 34ch; margin: var(--space-8) 0 0; padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--color-accent); color: #fff; } .pull:empty { display: none; } .pull cite { display: block; margin-top: var(--space-4); font-family: var(--font-mono); font-size: 11px; font-weight: 400; font-style: normal; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; } .dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; font-weight: inherit; } /* ---- Briefing ---- */ .briefs { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .briefs li { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-6); } .briefs li:hover { border-color: var(--color-accent-300); } .briefs h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; margin: 0 0 var(--space-2); text-wrap: pretty; } .briefs p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.5; } .brief-tags { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .brief-tags .cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-accent); padding: 3px 7px; border-radius: 999px; font-weight: 500; } .brief-tags .label { opacity: 0.65; } /* ---- Controls ---- */ .btn { display: inline-block; font: inherit; font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 999px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; letter-spacing: -0.01em; } .btn-primary { background: var(--color-accent); color: #fff; } .btn-primary:hover { background: var(--color-accent-700); color: #fff; } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-line-strong); } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .input { font: inherit; font-size: 15px; padding: 10px 14px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); width: 100%; } .input:focus { border-color: var(--color-accent); } /* ---- Tables ---- */ .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; } .table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-line); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; background: var(--color-neutral-200); } .table tbody tr:hover td { background: var(--color-accent-100); } .phase { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--color-line-strong); } .phase.p1 { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* ---- Dialog ---- */ .backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(16, 18, 21, 0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--space-8); } .dialog { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 620px; width: 100%; padding: var(--space-8); } .dialog dl { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-3) var(--space-4); font-size: 14px; margin: 0 0 var(--space-6); } .dialog dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; } .dialog dd { margin: 0; } /* ---- Footer ---- */ footer { padding: var(--space-8) 0; border-top: 1px solid var(--color-line); margin-top: var(--space-8); } .foot-cols { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr; gap: var(--space-8); padding-bottom: var(--space-8); } .foot-cols .links { display: grid; gap: var(--space-2); font-size: 14px; } .foot-cols .links a { color: var(--color-text); } .foot-cols .links a:hover { color: var(--color-accent); } .legal { font-size: 12px; line-height: 1.6; margin: var(--space-4) 0 0; opacity: 0.75; } /* ---- Motion ---- */ [data-reveal] { transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); } [data-reveal].pending { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal], .tile { transition: none; } [data-reveal].pending { opacity: 1; transform: none; } } @media (max-width: 1080px) { .hero, .counters, .tiles, .briefs { grid-template-columns: 1fr 1fr; } .ledger li { grid-template-columns: 40px minmax(0, 1fr) 110px 200px; } } @media (max-width: 760px) { .wrap { padding: 0 var(--space-4); } .hero, .counters, .tiles, .briefs, .foot-cols { grid-template-columns: 1fr; } .ledger li { grid-template-columns: 32px 1fr; } .ledger .status, .ledger .figures { grid-column: 2; text-align: left; } .bar { grid-template-columns: 110px 1fr 56px; } .dateline { flex-direction: column; align-items: flex-start; gap: var(--space-2); } .nav { gap: 0; } } /* Display figures. Every numeral on the site is mono; use these rather than inline font sizing so the scale stays in one place. */ .stat { font-family: var(--font-mono); font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; } .stat-lg { font-family: var(--font-mono); font-size: clamp(38px, 4.6vw, 56px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-sm { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Section headings take the scale from here, not from inline styles. */ h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.04em; } h2 { font-size: clamp(26px, 3.2vw, 40px); } h3 { font-size: 19px; } .dialog .d-name { font-size: clamp(24px, 2.8vw, 32px); } /* ---- Wire page: aggregation rails beside the feed ---- */ .wire { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: var(--space-8); align-items: start; } .wire .briefs { grid-template-columns: 1fr; } .rails-col { display: grid; gap: var(--space-4); position: sticky; top: 96px; } .panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4); } .panel > .label { margin: 0 0 var(--space-3); color: var(--color-accent); } .job { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) 0; border-top: 1px solid var(--color-line); } .job:first-of-type { border-top: 0; } .job strong { font-size: 14px; font-weight: 600; } .job p { margin: 2px 0 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; } .job-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--color-line-strong); } .job-dot.live { background: var(--color-accent); } .srcrow { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto; gap: var(--space-3); align-items: center; padding: 7px 0; border-top: 1px solid var(--color-line); font-size: 13px; } .srcrow:first-of-type { border-top: 0; } .srcrow.change { grid-template-columns: minmax(0, 1fr) auto auto; } /* The deal ticker has no bar, so its amount takes an auto track of its own. */ .srcrow.deal { grid-template-columns: minmax(0, 1fr) auto; } .srcrow > *, .job > * { min-width: 0; overflow-wrap: anywhere; } .srcbar { height: 6px; background: var(--color-accent); border-radius: 999px; } .srcn { font-family: var(--font-mono); font-size: 11px; text-align: right; } .srcn.strong { font-size: 13px; font-weight: 600; } .briefs li.empty { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; } @media (max-width: 1080px) { .wire { grid-template-columns: 1fr; } .rails-col { position: static; grid-template-columns: repeat(2, 1fr); } } /* ---- Demonstrations: alternating video / claim pairs ---- */ .demo { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; padding: var(--space-8) 0; border-top: 1px solid var(--color-line); } .demo:first-of-type { border-top: 0; padding-top: var(--space-6); } .demo.flip .figure { order: 2; } .demo-slot { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; } .slot-name { position: absolute; left: var(--space-4); bottom: var(--space-4); } .demo-n { color: var(--color-accent); margin: 0 0 var(--space-2); } .demo h2 { margin-bottom: var(--space-3); } .demo-claim { margin: 0 0 var(--space-3); font-size: 17px; line-height: 1.55; } .demo-proof { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-line); font-size: 14px; line-height: 1.5; } .demo-proof strong { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } @media (max-width: 1080px) { .demo { grid-template-columns: 1fr; } .demo.flip .figure { order: 0; } } /* ---- Two-column interior layouts ---- */ .two-col, .two-col-wide, .two-col-flip { display: grid; gap: var(--space-8); align-items: start; } .two-col { grid-template-columns: 1fr 1fr; } .two-col-wide { grid-template-columns: 1.1fr 0.9fr; } .two-col-flip { grid-template-columns: 0.9fr 1.1fr; } .two-col > *, .two-col-wide > *, .two-col-flip > *, .side-by-side > * { min-width: 0; } .side-by-side { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: var(--space-8); align-items: end; } .head-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: end; } .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .three-col > * { min-width: 0; } @media (max-width: 760px) { .two-col, .two-col-wide, .two-col-flip, .side-by-side, .head-row, .three-col, .rails-col { grid-template-columns: 1fr; } .head-row { gap: var(--space-3); } } /* ---- FAQ: sourced answers, FAQPage-marked ---- */ .faq { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); margin-bottom: var(--space-2); } .faq summary { cursor: pointer; padding: var(--space-4); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--color-accent); } .faq[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--color-accent); } .faq-a { padding: 0 var(--space-4) var(--space-4); } .faq-a p { margin: 0 0 var(--space-3); max-width: 74ch; } .faq-a .faq-link { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }