/* ==========================================================================
FunFluen Learn — editorial design system
One stylesheet for the guide template and the Learn hub.
Drop into Astro as a global stylesheet, or import per-layout.
========================================================================== */
/* --- Tokens ------------------------------------------------------------ */
:root {
--ff-bg: #fcfaf7;
--ff-paper: #ffffff;
--ff-paper-warm: #faf7f4;
--ff-ink: #1c1917;
--ff-ink-soft: #262220;
--ff-body: #3f3a37;
--ff-muted: #57534e;
--ff-faint: #8a7f78;
--ff-line: rgba(28, 25, 23, 0.10);
--ff-line-soft: rgba(28, 25, 23, 0.07);
--ff-accent: #b9522f;
--ff-accent-ink: #a9451f; /* accent at small sizes — AA on --ff-bg */
--ff-accent-line: rgba(185, 82, 47, 0.30);
--ff-accent-tint: rgba(185, 82, 47, 0.055);
--ff-accent-tint-2: rgba(185, 82, 47, 0.09);
--ff-danger: #c2413f;
--ff-danger-line: rgba(239, 68, 68, 0.32);
--ff-danger-tint: rgba(239, 68, 68, 0.045);
--ff-dark: #1c1917;
--ff-dark-2: #211d1b;
--ff-on-dark: #f5f1ed;
--ff-on-dark-soft: #c9c1bb;
--ff-on-dark-faint: #a39a91;
--ff-on-dark-acc: #e0917a;
--ff-serif: 'Spectral', Georgia, 'Times New Roman', serif;
--ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ff-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;
--ff-r-lg: 16px;
--ff-r-md: 14px;
--ff-r-sm: 10px;
--ff-r-xs: 8px;
--ff-max: 1200px;
--ff-measure: 688px;
--ff-shadow: 0 2px 3px rgba(28, 25, 23, 0.03);
}
/* --- Base -------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body.ff {
margin: 0;
background: var(--ff-bg);
color: var(--ff-ink);
font-family: var(--ff-serif);
}
body.ff ::selection { background: rgba(185, 82, 47, 0.18); }
.ff-wrap { max-width: var(--ff-max); margin: 0 auto; padding: 0 36px; }
a.ff-link, .ff-prose a {
color: var(--ff-accent);
text-decoration: none;
border-bottom: 1px solid var(--ff-accent-line);
transition: color .2s ease, border-color .2s ease;
}
a.ff-link:hover, .ff-prose a:hover { color: #8f3d21; border-bottom-color: #8f3d21; }
.ff-eyebrow {
font-family: var(--ff-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ff-muted);
}
.ff-eyebrow--accent { color: var(--ff-accent-ink); }
/* --- Reading progress -------------------------------------------------- */
.ff-progress {
position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 70;
background: rgba(28, 25, 23, 0.07);
}
.ff-progress span { display: block; height: 100%; width: 0; background: var(--ff-accent); }
/* --- Header ------------------------------------------------------------ */
.ff-header {
position: sticky; top: 0; z-index: 60;
background: rgba(252, 250, 247, 0.93);
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(28, 25, 23, 0.09);
}
.ff-header__in {
max-width: var(--ff-max); margin: 0 auto; padding: 0 36px;
height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.ff-brand { display: flex; align-items: baseline; gap: 9px; color: var(--ff-ink); text-decoration: none; }
.ff-brand b { font-family: var(--ff-sans); font-weight: 700; font-size: 17.5px; letter-spacing: -0.025em; }
.ff-brand span { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ff-muted); }
.ff-nav { display: flex; align-items: center; gap: 26px; font-family: var(--ff-sans); font-size: 14px; font-weight: 500; }
.ff-nav a { color: var(--ff-muted); text-decoration: none; }
.ff-nav a:hover { color: var(--ff-ink); }
/* --- Buttons ----------------------------------------------------------- */
.ff-btn {
display: inline-block; font-family: var(--ff-sans); font-weight: 600;
text-decoration: none; border: 0; cursor: pointer;
border-radius: 11px; padding: 14px 24px; font-size: 15px;
transition: background .2s ease, transform .1s ease;
}
.ff-btn:active { transform: translateY(1px); }
.ff-btn--solid { background: var(--ff-ink); color: var(--ff-bg); }
.ff-btn--solid:hover { background: #332e2b; }
.ff-btn--ghost { background: transparent; color: var(--ff-ink); border: 1px solid rgba(28, 25, 23, 0.2); }
.ff-btn--ghost:hover { background: rgba(28, 25, 23, 0.04); }
.ff-btn--light { background: var(--ff-bg); color: var(--ff-ink); }
.ff-btn--light:hover { background: #fff; }
.ff-btn--sm { padding: 10px 16px; font-size: 13px; border-radius: 9px; }
.ff-btn--nav { padding: 9px 17px; font-size: 14px; border-radius: 10px; }
.ff-btn--block { display: block; text-align: center; width: 100%; box-sizing: border-box; }
/* --- Breadcrumb -------------------------------------------------------- */
.ff-crumb {
padding-top: 44px;
font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--ff-muted);
display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}
.ff-crumb a { color: var(--ff-muted); text-decoration: none; }
.ff-crumb a:hover { color: var(--ff-ink); }
.ff-crumb [aria-current] { color: var(--ff-accent-ink); }
/* --- Article shell + TOC ---------------------------------------------- */
.ff-shell {
max-width: var(--ff-max); margin: 0 auto; padding: 0 36px;
display: flex; gap: 64px; align-items: flex-start; flex-wrap: wrap; justify-content: center;
}
.ff-toc { flex: 0 1 208px; min-width: 184px; position: sticky; top: 96px; align-self: flex-start; padding: 8px 0 80px; }
.ff-toc__title {
font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--ff-muted); padding-bottom: 11px; border-bottom: 1px solid rgba(28, 25, 23, 0.12); margin-bottom: 12px;
}
.ff-toc nav { display: flex; flex-direction: column; font-family: var(--ff-sans); font-size: 13px; line-height: 1.4; }
.ff-toc nav a {
color: var(--ff-muted); text-decoration: none;
padding: 7px 0 7px 13px; border-left: 2px solid var(--ff-line);
transition: color .2s ease, border-color .2s ease;
}
.ff-toc nav a.is-active { color: var(--ff-accent); border-left-color: var(--ff-accent); font-weight: 600; }
.ff-article { flex: 1 1 640px; max-width: var(--ff-measure); padding: 8px 0 40px; }
/* --- Article head ------------------------------------------------------ */
.ff-title { font-size: 52px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 20px; text-wrap: balance; }
.ff-dek { font-family: var(--ff-sans); font-size: 18.5px; line-height: 1.55; color: var(--ff-muted); margin: 0 0 30px; text-wrap: pretty; }
.ff-byline {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 15px 0; margin-bottom: 40px;
border-top: 1px solid rgba(28, 25, 23, 0.09); border-bottom: 1px solid rgba(28, 25, 23, 0.09);
}
.ff-byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: rgba(28, 25, 23, 0.07); }
.ff-byline__name { font-family: var(--ff-sans); font-size: 14.5px; font-weight: 600; }
.ff-byline__role { font-family: var(--ff-sans); font-size: 12.5px; color: var(--ff-muted); }
.ff-byline__meta {
margin-left: auto; display: flex; gap: 18px;
font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-muted);
}
/* --- Prose (styles CMS rich-text output with no extra markup) --------- */
.ff-prose { font-size: 19.5px; line-height: 1.66; color: var(--ff-ink-soft); }
.ff-prose > p { margin: 0 0 22px; text-wrap: pretty; }
.ff-prose > h2 {
font-size: 31px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18;
margin: 44px 0 18px; scroll-margin-top: 96px; color: var(--ff-ink);
}
.ff-prose > h3 {
font-family: var(--ff-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
margin: 36px 0 14px; scroll-margin-top: 96px; color: var(--ff-ink);
}
.ff-prose > h2:first-child, .ff-prose > h3:first-child { margin-top: 0; }
.ff-prose strong { font-weight: 600; }
.ff-prose em { font-style: italic; }
.ff-prose > ul, .ff-prose > ol { margin: 0 0 26px; padding-left: 0; list-style: none; }
.ff-prose > ul > li, .ff-prose > ol > li {
font-family: var(--ff-sans); font-size: 15.5px; line-height: 1.6; color: var(--ff-body);
display: flex; gap: 13px; margin-bottom: 11px;
}
.ff-prose > ul > li::before { content: "—"; color: var(--ff-accent); font-family: var(--ff-mono); font-size: 12px; flex: none; padding-top: 3px; }
.ff-prose > ol { counter-reset: ff; }
.ff-prose > ol > li { counter-increment: ff; }
.ff-prose > ol > li::before { content: counter(ff, decimal-leading-zero); color: var(--ff-accent); font-family: var(--ff-mono); font-size: 11px; flex: none; padding-top: 4px; }
.ff-prose blockquote { margin: 0 0 26px; padding: 0; }
/* --- Answer card (AEO / featured-snippet block) ----------------------- */
.ff-answer {
background: var(--ff-paper); border: 1px solid var(--ff-accent-line);
border-radius: var(--ff-r-md); padding: 26px 28px; margin: 0 0 40px; box-shadow: var(--ff-shadow);
}
.ff-answer p { font-size: 23px; line-height: 1.45; font-weight: 500; margin: 12px 0 0; text-wrap: pretty; }
/* --- Numbered step strip ---------------------------------------------- */
.ff-steps {
display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px;
background: var(--ff-line); border: 1px solid var(--ff-line);
border-radius: var(--ff-r-md); overflow: hidden; margin: 14px 0 52px;
}
.ff-steps > li { background: var(--ff-paper); padding: 19px 18px 21px; list-style: none; }
.ff-steps__n { font-family: var(--ff-mono); font-size: 11px; color: var(--ff-accent); letter-spacing: 0.08em; margin-bottom: 9px; }
.ff-steps__t { font-family: var(--ff-sans); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.ff-steps__d { font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.5; color: var(--ff-muted); }
/* --- Pull quote / emphasis block ------------------------------------- */
.ff-pull { background: var(--ff-accent-tint); border-radius: var(--ff-r-md); padding: 22px 26px; margin: 0 0 40px; }
.ff-pull p { font-size: 19.5px; line-height: 1.6; margin: 0; text-wrap: pretty; }
/* --- Chip flow (Purpose -> Isolate -> ...) --------------------------- */
.ff-chipflow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 26px; font-family: var(--ff-sans); font-size: 15px; font-weight: 600; }
.ff-chipflow b { background: var(--ff-accent-tint-2); color: var(--ff-accent); border-radius: 9px; padding: 9px 15px; font-weight: 600; }
.ff-chipflow i { color: var(--ff-accent); font-family: var(--ff-mono); font-style: normal; }
/* --- Tables ----------------------------------------------------------- */
.ff-tablecap { font-family: var(--ff-sans); font-size: 14.5px; color: var(--ff-muted); margin: 12px 0 16px; }
.ff-table {
border: 1px solid rgba(28, 25, 23, 0.11); border-radius: var(--ff-r-md);
overflow: hidden; margin: 0 0 52px; background: var(--ff-paper);
}
.ff-table table { border-collapse: collapse; width: 100%; font-family: var(--ff-sans); font-size: 14.5px; }
.ff-table thead tr { background: var(--ff-paper-warm); }
.ff-table th {
text-align: left; padding: 13px 18px; font-family: var(--ff-mono); font-size: 9.5px;
letter-spacing: 0.13em; text-transform: uppercase; color: var(--ff-muted); font-weight: 400;
border-bottom: 1px solid rgba(28, 25, 23, 0.11);
}
.ff-table td { padding: 14px 18px; border-bottom: 1px solid var(--ff-line-soft); vertical-align: top; line-height: 1.5; color: var(--ff-body); }
.ff-table tbody tr td:first-child { font-weight: 600; color: var(--ff-ink); }
.ff-table__note {
padding: 16px 18px; background: var(--ff-paper-warm); border-top: 1px solid rgba(28, 25, 23, 0.09);
font-family: var(--ff-sans); font-size: 14px; line-height: 1.55; color: var(--ff-muted);
}
.ff-table--tight table { font-size: 14px; }
.ff-table--tight th, .ff-table--tight td { padding-left: 16px; padding-right: 16px; }
/* --- Phrase list ("say this") ---------------------------------------- */
.ff-phrases {
display: flex; flex-direction: column; gap: 1px;
background: var(--ff-line); border: 1px solid var(--ff-line);
border-radius: var(--ff-r-md); overflow: hidden; margin: 0 0 22px;
}
.ff-phrase { background: var(--ff-paper); padding: 16px 20px; display: flex; gap: 16px; align-items: baseline; }
.ff-phrase__k { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ff-accent); flex: none; }
.ff-phrase__t { font-size: 18.5px; line-height: 1.5; font-style: italic; color: var(--ff-ink-soft); }
.ff-blank {
font-style: normal; font-family: var(--ff-mono); font-size: 15px; color: var(--ff-accent);
border-bottom: 1px solid rgba(185, 82, 47, 0.4); padding: 0 12px;
}
/* --- Repair comparison card (replaces a 6-column table) -------------- */
.ff-repairs { display: flex; flex-direction: column; gap: 14px; margin: 0 0 36px; }
.ff-repair {
background: var(--ff-paper); border: 1px solid rgba(28, 25, 23, 0.11);
border-radius: var(--ff-r-md); padding: 22px 24px; box-shadow: var(--ff-shadow);
}
.ff-repair__head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.ff-repair__say { font-size: 21px; font-weight: 500; font-style: italic; }
.ff-tag {
font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ff-muted); border: 1px solid rgba(28, 25, 23, 0.14); border-radius: var(--ff-r-xs);
padding: 4px 8px; flex: none;
}
.ff-repair__grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px;
font-family: var(--ff-sans); font-size: 14px; line-height: 1.5; margin-bottom: 18px; color: var(--ff-body);
}
.ff-label {
font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ff-muted); margin-bottom: 6px;
}
.ff-label--accent { color: var(--ff-accent-ink); }
.ff-repair__better { background: var(--ff-accent-tint-2); border-radius: var(--ff-r-sm); padding: 14px 16px; margin-bottom: 14px; }
.ff-repair__better p { font-size: 19px; line-height: 1.45; font-style: italic; margin: 7px 0 0; }
.ff-repair__when { font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.55; color: var(--ff-faint); }
.ff-repair__when b { color: var(--ff-muted); font-weight: 600; }
/* --- Practice / exercise block --------------------------------------- */
.ff-practice {
border: 1px solid rgba(28, 25, 23, 0.12); border-radius: var(--ff-r-lg);
overflow: hidden; margin: 0 0 52px; background: var(--ff-paper);
}
.ff-practice__head { padding: 22px 26px; border-bottom: 1px solid var(--ff-line); background: var(--ff-paper-warm); }
.ff-practice__head h3 { font-family: var(--ff-sans); font-size: 19px; font-weight: 600; margin: 9px 0 8px; letter-spacing: -0.01em; }
.ff-practice__head p { font-family: var(--ff-sans); font-size: 14.5px; line-height: 1.55; color: var(--ff-muted); margin: 0; }
.ff-situation { padding: 22px 26px; border-bottom: 1px solid var(--ff-line-soft); }
.ff-situation:last-child { border-bottom: 0; }
.ff-situation__q { display: flex; gap: 13px; align-items: baseline; margin-bottom: 14px; }
.ff-situation__q b { font-family: var(--ff-mono); font-size: 11px; color: var(--ff-accent); flex: none; font-weight: 400; }
.ff-situation__q span { font-size: 18.5px; line-height: 1.5; color: var(--ff-ink-soft); }
.ff-situation details > summary {
display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
font-family: var(--ff-sans); font-size: 13.5px; font-weight: 600; color: var(--ff-accent);
border: 1px solid var(--ff-accent-line); border-radius: 9px; padding: 8px 14px;
transition: background .2s ease;
}
.ff-situation details > summary::-webkit-details-marker { display: none; }
.ff-situation details > summary:hover { background: var(--ff-accent-tint); }
.ff-situation__body { padding-top: 18px; }
.ff-situation__a { font-size: 20px; line-height: 1.45; font-style: italic; margin: 0 0 10px; }
.ff-situation__extra { font-family: var(--ff-sans); font-size: 14.5px; line-height: 1.55; color: var(--ff-body); margin: 0 0 14px; }
.ff-why {
font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.55; color: var(--ff-muted);
background: var(--ff-accent-tint-2); border-radius: var(--ff-r-sm); padding: 12px 14px; margin: 0;
}
.ff-why b { color: var(--ff-accent); font-weight: 600; }
/* --- Checklist -------------------------------------------------------- */
.ff-checklist {
background: var(--ff-paper); border: 1px solid rgba(28, 25, 23, 0.12);
border-radius: var(--ff-r-lg); padding: 24px 26px; margin: 0 0 36px; box-shadow: var(--ff-shadow);
}
.ff-checklist h3 { font-family: var(--ff-sans); font-size: 19px; font-weight: 600; margin: 9px 0 6px; letter-spacing: -0.01em; }
.ff-checklist__sub { font-family: var(--ff-sans); font-size: 14px; color: var(--ff-muted); margin: 0 0 20px; }
.ff-checklist ul { list-style: none; margin: 0; padding: 0; }
.ff-checklist li { border-top: 1px solid var(--ff-line-soft); }
.ff-checklist label {
display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 9px 0;
font-family: var(--ff-sans); font-size: 15px; line-height: 1.55; color: var(--ff-body);
}
.ff-checklist input[type="checkbox"] { accent-color: var(--ff-accent); width: 16px; height: 16px; margin: 3px 0 0; flex: none; }
/* --- Notice (safety / warning) --------------------------------------- */
.ff-notice {
border: 1px solid var(--ff-danger-line); background: var(--ff-danger-tint);
border-radius: var(--ff-r-md); padding: 22px 26px; margin: 0 0 26px;
}
.ff-notice .ff-eyebrow { color: var(--ff-danger); }
.ff-notice p { font-size: 20px; line-height: 1.5; font-weight: 500; margin: 11px 0 0; text-wrap: pretty; }
/* --- Do / don't pair -------------------------------------------------- */
.ff-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 0 0 22px; }
.ff-compare > div { background: var(--ff-paper); border: 1px solid rgba(28, 25, 23, 0.11); border-radius: var(--ff-r-md); padding: 20px; }
.ff-compare > div.is-good { border-color: var(--ff-accent-line); }
.ff-compare__bad { font-family: var(--ff-sans); font-size: 14px; line-height: 1.6; color: #a8a29e; text-decoration: line-through; }
.ff-compare__good { font-family: var(--ff-mono); font-size: 14px; line-height: 1.95; color: var(--ff-ink-soft); }
/* --- Inline install nudge -------------------------------------------- */
.ff-nudge {
border: 1px solid var(--ff-accent-line); background: rgba(185, 82, 47, 0.05);
border-radius: var(--ff-r-lg); padding: 26px 28px; margin: 0 0 52px;
display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.ff-nudge__body { flex: 1 1 300px; min-width: 250px; }
.ff-nudge__body p:first-of-type { font-size: 20px; line-height: 1.45; font-weight: 500; margin: 10px 0 8px; text-wrap: pretty; }
.ff-nudge__body p:last-of-type { font-family: var(--ff-sans); font-size: 14px; line-height: 1.6; color: var(--ff-muted); margin: 0; }
/* --- Sidebar install card -------------------------------------------- */
.ff-sidecard {
margin-top: 28px; background: var(--ff-paper); border: 1px solid var(--ff-accent-line);
border-radius: var(--ff-r-md); padding: 18px;
}
.ff-sidecard__t { font-family: var(--ff-sans); font-size: 14.5px; font-weight: 600; line-height: 1.4; margin: 10px 0 8px; }
.ff-sidecard__d { font-family: var(--ff-sans); font-size: 12.5px; line-height: 1.55; color: var(--ff-muted); margin: 0 0 14px; }
.ff-sidecard__note { font-family: var(--ff-sans); font-size: 11px; text-align: center; color: var(--ff-muted); margin-top: 9px; }
/* --- Dark panels ----------------------------------------------------- */
.ff-dark { background: var(--ff-dark); border-radius: var(--ff-r-lg); padding: 28px 30px; color: var(--ff-on-dark); }
.ff-dark .ff-eyebrow { color: var(--ff-on-dark-acc); }
.ff-dark a.ff-link { color: #f0a58c; border-bottom-color: rgba(240, 165, 140, 0.4); }
.ff-dark__lead { font-family: var(--ff-sans); font-size: 18px; line-height: 1.45; margin: 12px 0; font-weight: 600; }
.ff-dark__body { font-family: var(--ff-sans); font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; color: var(--ff-on-dark-soft); }
.ff-dark__row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ff-dark__note {
font-family: var(--ff-sans); font-size: 12.5px; line-height: 1.6; color: var(--ff-on-dark-faint);
border-top: 1px solid rgba(245, 241, 237, 0.13); padding-top: 16px; margin: 20px 0 0;
}
.ff-dark__aside { font-family: var(--ff-sans); font-size: 13.5px; color: var(--ff-on-dark-faint); }
/* --- Install panel (end of article / end of hub) --------------------- */
.ff-install { background: var(--ff-dark); border-radius: 20px; padding: 34px 36px; color: var(--ff-on-dark); scroll-margin-top: 96px; }
.ff-install--hub { padding: 48px 44px; }
.ff-install__head { margin-bottom: 26px; max-width: 62ch; }
.ff-install__head h2, .ff-install__head h3 {
font-size: 30px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; margin: 12px 0 10px; text-wrap: balance;
}
.ff-install--hub .ff-install__head h2 { font-size: 40px; letter-spacing: -0.028em; line-height: 1.08; }
.ff-install__head p { font-family: var(--ff-sans); font-size: 15px; line-height: 1.6; color: var(--ff-on-dark-soft); margin: 0; max-width: 48ch; }
.ff-tracks {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
background: rgba(245, 241, 237, 0.14); border-radius: var(--ff-r-md); overflow: hidden; margin-bottom: 26px;
}
.ff-track { background: var(--ff-dark-2); padding: 22px 22px 24px; }
.ff-track__n { font-family: var(--ff-sans); font-size: 16.5px; font-weight: 600; margin: 12px 0 8px; }
.ff-track__d { font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.55; color: var(--ff-on-dark-faint); margin: 0 0 16px; }
.ff-track ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ff-track li { display: flex; gap: 10px; font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.5; color: var(--ff-on-dark-soft); }
.ff-track li::before { content: "+"; color: var(--ff-on-dark-acc); font-family: var(--ff-mono); font-size: 11px; flex: none; padding-top: 2px; }
.ff-install__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ff-install__cta span { font-family: var(--ff-sans); font-size: 13.5px; color: var(--ff-on-dark-faint); }
/* --- Sources ---------------------------------------------------------- */
.ff-sources h2 { font-family: var(--ff-sans); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; scroll-margin-top: 96px; }
.ff-sources__sub { font-family: var(--ff-sans); font-size: 14px; color: var(--ff-muted); margin: 0 0 20px; }
.ff-sources ol { list-style: none; margin: 0; padding: 0; }
.ff-sources li { padding: 16px 0; border-top: 1px solid rgba(28, 25, 23, 0.09); display: flex; gap: 16px; align-items: flex-start; }
.ff-sources__n { font-family: var(--ff-mono); font-size: 10px; color: var(--ff-muted); flex: none; padding-top: 5px; width: 20px; }
.ff-sources a { font-family: var(--ff-sans); font-size: 15px; font-weight: 600; line-height: 1.45; display: inline-block; margin-bottom: 6px; }
.ff-sources__badges { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.ff-host {
font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ff-muted); border: 1px solid rgba(28, 25, 23, 0.14); border-radius: 7px; padding: 3px 7px;
}
.ff-kind { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-accent-ink); }
.ff-sources__note { font-family: var(--ff-sans); font-size: 13.5px; line-height: 1.55; color: var(--ff-muted); }
/* ======================================================================
HUB
====================================================================== */
.ff-section { max-width: var(--ff-max); margin: 0 auto; padding: 76px 36px 0; }
.ff-section--first { padding-top: 72px; }
.ff-section__head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding-bottom: 20px; border-bottom: 1px solid rgba(28, 25, 23, 0.12); margin-bottom: 32px;
}
.ff-section__head h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.022em; margin: 0 0 8px; }
.ff-section__head p { font-family: var(--ff-sans); font-size: 15px; color: var(--ff-muted); margin: 0; }
.ff-section__more { font-family: var(--ff-sans); font-size: 14.5px; font-weight: 600; }
.ff-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; }
.ff-hero h1 { font-size: 60px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; margin: 20px 0 22px; text-wrap: balance; }
.ff-hero__dek { font-family: var(--ff-sans); font-size: 18.5px; line-height: 1.6; color: var(--ff-muted); margin: 0 0 30px; max-width: 50ch; text-wrap: pretty; }
.ff-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ff-hero__note { font-family: var(--ff-sans); font-size: 13.5px; color: var(--ff-muted); }
/* Image placeholders — swap for ![]()
/ when art is ready */
.ff-slot {
border: 1px solid rgba(28, 25, 23, 0.12); border-radius: var(--ff-r-lg);
background: repeating-linear-gradient(135deg, #f4efe9 0 8px, var(--ff-bg) 8px 16px);
display: flex; align-items: center; justify-content: center; padding: 24px;
font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--ff-muted); text-align: center; line-height: 1.8;
}
.ff-hero__img { aspect-ratio: 4 / 3; }
.ff-paths {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
background: var(--ff-line); border: 1px solid var(--ff-line); border-radius: var(--ff-r-lg); overflow: hidden;
}
.ff-path { background: var(--ff-paper); padding: 28px 26px 30px; display: block; color: var(--ff-ink); text-decoration: none; transition: background .2s ease; }
.ff-path:hover { background: var(--ff-paper-warm); }
.ff-path__t { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; margin: 14px 0 10px; }
.ff-path__d { font-family: var(--ff-sans); font-size: 14.5px; line-height: 1.6; color: var(--ff-muted); }
.ff-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.ff-card { display: flex; flex-direction: column; gap: 14px; color: var(--ff-ink); text-decoration: none; }
.ff-card:hover .ff-card__t { color: var(--ff-accent); }
.ff-card__img { aspect-ratio: 16 / 10; border-radius: 13px; align-items: flex-end; justify-content: flex-start; padding: 14px; font-size: 9.5px; letter-spacing: 0.12em; }
.ff-card__meta { display: flex; gap: 10px; align-items: center; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-muted); }
.ff-card__meta b { color: var(--ff-accent-ink); font-weight: 400; }
.ff-card__t { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.28; text-wrap: pretty; transition: color .2s ease; }
.ff-card__d { font-family: var(--ff-sans); font-size: 14px; line-height: 1.6; color: var(--ff-muted); }
.ff-card__by { font-family: var(--ff-sans); font-size: 12.5px; color: var(--ff-muted); margin-top: auto; padding-top: 4px; }
.ff-clusters { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 26px; }
.ff-cluster {
background: var(--ff-paper); border: 1px solid rgba(28, 25, 23, 0.11); border-radius: var(--ff-r-lg);
padding: 24px 24px 20px; box-shadow: var(--ff-shadow); display: flex; flex-direction: column;
}
.ff-cluster__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ff-cluster__head b { font-family: var(--ff-sans); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.ff-cluster__head span { font-family: var(--ff-mono); font-size: 10px; color: var(--ff-muted); flex: none; }
.ff-cluster ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ff-cluster li { border-top: 1px solid var(--ff-line-soft); }
.ff-cluster li a { font-family: var(--ff-sans); font-size: 14.5px; line-height: 1.45; color: var(--ff-body); text-decoration: none; padding: 10px 0; display: block; }
.ff-cluster li a:hover { color: var(--ff-accent); }
.ff-cluster__more { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-accent-ink); margin-top: 16px; text-decoration: none; }
/* --- Footer ---------------------------------------------------------- */
.ff-footer {
max-width: var(--ff-max); margin: 88px auto 0; padding: 32px 36px 96px;
border-top: 1px solid var(--ff-line);
display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center;
}
.ff-footer p { font-family: var(--ff-sans); font-size: 13.5px; color: var(--ff-muted); margin: 0; }
.ff-footer nav { display: flex; gap: 22px; font-family: var(--ff-sans); font-size: 13.5px; }
.ff-footer nav a { color: var(--ff-muted); text-decoration: none; }
.ff-footer nav a:hover { color: var(--ff-ink); }
/* ======================================================================
RESPONSIVE
====================================================================== */
@media (max-width: 1140px) {
.ff-hero h1 { font-size: 50px; }
.ff-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 26px; }
}
@media (max-width: 1040px) {
.ff-hero { grid-template-columns: 1fr; gap: 36px; }
.ff-hero h1 { font-size: 52px; }
.ff-hero__img { max-width: 460px; }
}
@media (max-width: 980px) {
.ff-shell { justify-content: flex-start; gap: 32px; }
.ff-article { margin-right: auto; }
.ff-toc { position: static; flex-basis: 100%; padding-bottom: 0; }
.ff-toc nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ff-toc nav a { border-left: 0; border: 1px solid rgba(28, 25, 23, 0.14); border-radius: var(--ff-r-xs); padding: 7px 11px; }
.ff-toc nav a.is-active { border-color: var(--ff-accent); }
.ff-sidecard { display: none; }
}
@media (max-width: 900px) {
.ff-header__in { height: auto; padding: 12px 24px; flex-wrap: wrap; gap: 12px; }
.ff-nav { gap: 18px; font-size: 13.5px; }
.ff-wrap, .ff-shell, .ff-section, .ff-header__in, .ff-footer { padding-left: 24px; padding-right: 24px; }
.ff-title { font-size: 40px; }
.ff-prose { font-size: 18.5px; }
.ff-prose > h2 { font-size: 27px; }
.ff-install, .ff-install--hub { padding: 28px 24px; }
.ff-section { padding-top: 60px; }
}
@media (max-width: 820px) {
.ff-hero h1 { font-size: 44px; }
}
@media (max-width: 620px) {
.ff-hero h1 { font-size: 37px; }
.ff-title { font-size: 33px; }
.ff-answer p { font-size: 20px; }
.ff-byline__meta { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
.ff-shelf { grid-template-columns: 1fr; }
}
/* --- Motion / print -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}
@media print {
.ff-header, .ff-progress, .ff-toc, .ff-sidecard, .ff-nudge, .ff-install, .ff-footer { display: none !important; }
body.ff { background: #fff; }
.ff-article { max-width: none; }
}