/* ============================================================
   A2Z Fonts - public catalogue and family pages
   ============================================================
   Everything is scoped under .fx so nothing here can restyle the
   rest of the site. Colours come from the A2Z tokens where they
   exist (a2z-tokens.css) with the same values as fallbacks.
   The type itself is the decoration: no gradients, no stock art.
   ============================================================ */

.fx {
    --fx-ink: #111a3a;
    --fx-ink-2: var(--heading-color, #343a52);
    --fx-muted: #5c6178;
    --fx-canvas: #fbfaf7;
    --fx-paper: #ffffff;
    --fx-line: #e7e4dd;
    --fx-line-strong: #d6d2c8;
    --fx-blue: var(--primary-blue, #2583dc);
    --fx-blue-strong: var(--primary-blue-strong, #1a6ec0);
    --fx-blue-soft: var(--primary-blue-soft, #eaf3fc);
    --fx-violet: #5b4bc4;
    --fx-violet-soft: #efedfb;
    --fx-amber-soft: #fff6e2;
    --fx-amber-ink: #6b4c0f;
    --fx-ring: 0 0 0 3px rgb(37 131 220 / 40%);
    --fx-radius: 14px;
    --fx-radius-sm: 10px;
    --fx-shadow: 0 1px 2px rgb(17 26 58 / 5%), 0 8px 24px -16px rgb(17 26 58 / 18%);

    background: var(--fx-canvas);
    color: var(--fx-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }

.fx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.fx-section { padding: 72px 0; border-top: 1px solid var(--fx-line); }
.fx-section:first-of-type { border-top: 0; }
.fx-section--tight { padding: 48px 0; }

.fx h1, .fx h2, .fx h3, .fx h4 { color: var(--fx-ink); font-weight: 650; letter-spacing: -0.01em; margin: 0 0 .5em; line-height: 1.2; }
.fx h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.fx h3 { font-size: 1.2rem; }
.fx p { margin: 0 0 1em; color: var(--fx-ink-2); }
.fx a { color: var(--fx-blue-strong); text-underline-offset: 3px; }
.fx a:hover { color: var(--fx-ink); }
.fx code, .fx pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.fx .fx-muted { color: var(--fx-muted); }
.fx .fx-lead { font-size: 1.15rem; max-width: 62ch; }
.fx-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-violet); margin-bottom: 14px; }
.fx-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 28px; }
.fx-section-head p { margin: 0; max-width: 60ch; }

/* Focus is always visible and never removed. */
.fx a:focus-visible, .fx button:focus-visible, .fx input:focus-visible, .fx select:focus-visible,
.fx textarea:focus-visible, .fx summary:focus-visible { outline: none; box-shadow: var(--fx-ring); border-radius: 6px; }

.fx-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- breadcrumbs ---------- */
.fx-crumbs { padding: 18px 0 0; font-size: .9rem; }
.fx-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--fx-muted); }
.fx-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--fx-line-strong); }
.fx-crumbs a { color: var(--fx-muted); text-decoration: none; }
.fx-crumbs a:hover { color: var(--fx-ink); text-decoration: underline; }

/* ---------- badges ---------- */
.fx-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fx-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--fx-line-strong); color: var(--fx-ink-2); background: var(--fx-paper); white-space: nowrap; }
.fx-badge--beta { background: var(--fx-amber-soft); border-color: #f0dca8; color: var(--fx-amber-ink); }
.fx-badge--stable { background: #e9f6ef; border-color: #bfe3cd; color: #155c35; }
.fx-badge--license { background: var(--fx-violet-soft); border-color: #d9d4f6; color: #3e3291; }
.fx-badge--withdrawn { background: #fdecec; border-color: #f3c3c3; color: #8a1c1c; }
.fx-badge--verified { background: #e9f6ef; border-color: #bfe3cd; color: #155c35; }
.fx-badge--experimental { background: var(--fx-amber-soft); border-color: #f0dca8; color: var(--fx-amber-ink); }

/* ---------- buttons ---------- */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.fx-btn--primary { background: var(--fx-ink); color: #fff !important; }
.fx-btn--primary:hover { background: #22306a; }
.fx-btn--quiet { background: var(--fx-paper); color: var(--fx-ink) !important; border-color: var(--fx-line-strong); }
.fx-btn--quiet:hover { border-color: var(--fx-ink); }
.fx-btn--small { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.fx-btn[aria-pressed="true"] { background: var(--fx-blue-soft); border-color: var(--fx-blue); color: var(--fx-ink) !important; }

/* ---------- notices ---------- */
.fx-notice { border: 1px solid #f0dca8; background: var(--fx-amber-soft); color: var(--fx-amber-ink); border-radius: var(--fx-radius-sm); padding: 14px 18px; font-size: .95rem; }
.fx-notice p { color: inherit; margin: 0; }
.fx-notice p + p { margin-top: 6px; }
.fx-notice--info { border-color: #cfe2f7; background: var(--fx-blue-soft); color: #1f3c63; }
.fx-notice--danger { border-color: #f3c3c3; background: #fdecec; color: #7a1a1a; }
.fx-preview-bar { position: sticky; top: 0; z-index: 30; background: var(--fx-ink); color: #fff; font-size: .9rem; padding: 10px 0; }
.fx-preview-bar p { color: #fff; margin: 0; }
/* The site stylesheet sets every link to #1c1c1c !important with no
   underline, which makes links inside prose look like plain text. Links
   here must be distinguishable by more than colour, so they are
   underlined, and the override has to be !important to win. */
.fx a:not(.fx-btn) { color: var(--fx-blue-strong) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.fx a:not(.fx-btn):hover { color: var(--fx-ink) !important; }
.fx .fx-crumbs a { color: var(--fx-muted) !important; text-decoration: none !important; }
.fx .fx-crumbs a:hover { color: var(--fx-ink) !important; text-decoration: underline !important; }
.fx .fx-card__title h3 a, .fx .fx-card > a { color: var(--fx-ink) !important; text-decoration: none !important; }
.fx .fx-card__title h3 a:hover { text-decoration: underline !important; }
.fx .fx-btn { text-decoration: none !important; }
.fx .fx-preview-bar a { color: #cfe2ff !important; text-decoration: underline !important; }
.fx .fx-preview-bar a:hover, .fx .fx-preview-bar a:focus-visible { color: #fff !important; }

/* The site's skip link, hidden until it receives keyboard focus (the
   shared tool stylesheet that normally does this is not loaded here). */
.fx-body .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: #111a3a; color: #fff; padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.fx-body .skip-link:focus { top: 12px; }

/* ---------- catalogue hero ---------- */
.fx-hero { padding: 64px 0 56px; }
.fx-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.fx-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; max-width: 16ch; }
.fx-hero__specimen { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 28px; box-shadow: var(--fx-shadow); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.fx-hero__glyphs { font-size: clamp(4rem, 9vw, 7.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--fx-ink); overflow-wrap: anywhere; }
.fx-hero__line { font-size: 1.35rem; margin-top: 18px; color: var(--fx-ink-2); }
.fx-hero__caption { display: flex; justify-content: space-between; gap: 12px; font-size: .82rem; color: var(--fx-muted); border-top: 1px solid var(--fx-line); padding-top: 12px; margin-top: 22px; }
.fx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- filters ---------- */
.fx-filter { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; gap: 12px; align-items: end; background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 16px; margin-bottom: 24px; }
.fx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-field label, .fx-field .fx-label { font-size: .8rem; font-weight: 600; color: var(--fx-muted); letter-spacing: .02em; }
.fx-input, .fx-select { width: 100%; min-height: 42px; border: 1px solid var(--fx-line-strong); border-radius: 9px; background: #fff; color: var(--fx-ink); padding: 8px 10px; font: inherit; font-size: .95rem; }
.fx-check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: .95rem; color: var(--fx-ink-2); }
.fx-check input { width: 18px; height: 18px; accent-color: var(--fx-blue); }
.fx-filter__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -8px 0 18px; font-size: .9rem; color: var(--fx-muted); }

/* ---------- family cards ---------- */
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 20px; }
.fx-card { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s ease, transform .15s ease; }
.fx-card:hover { border-color: var(--fx-line-strong); }
.fx-card__sample { padding: 34px 28px 26px; font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.12; min-height: 170px; color: var(--fx-ink); overflow: hidden; overflow-wrap: anywhere; border-bottom: 1px solid var(--fx-line); }
.fx-card__body { padding: 22px 28px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.fx-card__title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.fx-card__title h3 { margin: 0; font-size: 1.35rem; }
.fx-card__title h3 a { color: var(--fx-ink); text-decoration: none; }
.fx-card__title h3 a:hover { text-decoration: underline; }
.fx-card__desc { margin: 0; }
.fx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.fx-facts dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-muted); }
.fx-facts dd { margin: 2px 0 0; font-size: .95rem; color: var(--fx-ink); }
.fx-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 6px; }

.fx-empty { text-align: center; padding: 56px 20px; border: 1px dashed var(--fx-line-strong); border-radius: var(--fx-radius); background: var(--fx-paper); }
.fx-empty h3 { margin-bottom: 6px; }

/* Sample text uses the fallback until its font arrives; the box keeps
   its size either way, so nothing below it moves. */
.fx-sample { font-synthesis: none; }

/* ---------- explainer / guides ---------- */
.fx-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fx-explain__item { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 24px; }
.fx-explain__item .fx-kicker { font-size: 2.4rem; line-height: 1; color: var(--fx-violet); margin-bottom: 14px; display: block; font-weight: 300; }
.fx-prose { max-width: 72ch; }
.fx-prose h3 { margin-top: 1.4em; }
.fx-prose ul, .fx-prose ol { padding-left: 1.3em; color: var(--fx-ink-2); }
.fx-prose li { margin-bottom: .35em; }
.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

/* ---------- FAQs ---------- */
.fx-faq { border-top: 1px solid var(--fx-line); }
.fx-faq details { border-bottom: 1px solid var(--fx-line); }
.fx-faq summary { cursor: pointer; list-style: none; padding: 20px 36px 20px 0; font-weight: 600; font-size: 1.05rem; color: var(--fx-ink); position: relative; }
.fx-faq summary::-webkit-details-marker { display: none; }
.fx-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.5rem; font-weight: 300; color: var(--fx-muted); }
.fx-faq details[open] summary::after { content: "\2212"; }
.fx-faq__answer { padding: 0 0 20px; max-width: 72ch; }

/* ---------- family hero ---------- */
.fx-family-hero { padding: 40px 0 56px; }
.fx-family-hero__name { font-size: clamp(3rem, 9vw, 7rem); line-height: 1; letter-spacing: -0.03em; margin: 12px 0 18px; overflow-wrap: anywhere; font-weight: 400; }
.fx-family-hero__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.fx-meta { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 22px 24px; box-shadow: var(--fx-shadow); }
.fx-meta dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 18px; font-size: .95rem; }
.fx-meta dt { color: var(--fx-muted); font-weight: 600; }
.fx-meta dd { margin: 0; color: var(--fx-ink); }
.fx-meta .fx-btn { width: 100%; }
.fx-meta__links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .9rem; }
.fx-jump { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: .95rem; }

/* ---------- tester ---------- */
.fx-tester { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); box-shadow: var(--fx-shadow); overflow: hidden; }
.fx-tester__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px 22px; padding: 20px 22px; border-bottom: 1px solid var(--fx-line); background: #fdfcfa; }
.fx-range { display: flex; flex-direction: column; gap: 6px; }
.fx-range__top { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--fx-muted); }
.fx-range__top output { color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-range input[type=range] { width: 100%; accent-color: var(--fx-blue); min-height: 28px; }
.fx-tester__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 22px; border-bottom: 1px solid var(--fx-line); }
.fx-tester__row .fx-label { font-size: .82rem; font-weight: 600; color: var(--fx-muted); margin-right: 4px; }
.fx-tester__text { display: block; width: 100%; min-height: 260px; resize: vertical; border: 0; padding: 28px 24px; background: #fff; color: var(--fx-ink); font-size: 56px; line-height: 1.25; transition: background-color .2s ease, color .2s ease; overflow-wrap: anywhere; }
.fx-tester--dark .fx-tester__text { background: #0d1330; color: #f3f2ee; }
.fx-tester__status { padding: 10px 22px; font-size: .85rem; color: var(--fx-muted); border-top: 1px solid var(--fx-line); margin: 0; }

/* ---------- specimens ---------- */
.fx-weights { display: flex; flex-direction: column; border-top: 1px solid var(--fx-line); }
.fx-weight-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--fx-line); }
.fx-weight-row__label { font-size: .85rem; color: var(--fx-muted); }
.fx-weight-row__label strong { display: block; color: var(--fx-ink); font-size: .95rem; }
.fx-weight-row__sample { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; overflow-wrap: anywhere; min-height: 1.15em; }
.fx-charset { display: grid; gap: 22px; }
.fx-charset__line { font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.35; overflow-wrap: anywhere; letter-spacing: .02em; }
.fx-charset__label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fx-muted); margin-bottom: 4px; }
.fx-examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.fx-example { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 28px; }
.fx-example__h { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 14px; color: var(--fx-ink); }
.fx-example__body { font-size: 1.05rem; line-height: 1.65; color: var(--fx-ink-2); margin: 0; }

/* ---------- glyphs ---------- */
.fx-glyph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.fx-glyph-group { margin-bottom: 26px; }
.fx-glyph-group h3 { font-size: .95rem; display: flex; justify-content: space-between; gap: 8px; }
.fx-glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); border-top: 1px solid var(--fx-line); border-left: 1px solid var(--fx-line); }
.fx-glyph { appearance: none; border: 0; border-right: 1px solid var(--fx-line); border-bottom: 1px solid var(--fx-line); background: var(--fx-paper); height: 56px; font-size: 1.6rem; color: var(--fx-ink); cursor: pointer; padding: 0; line-height: 56px; overflow: hidden; }
.fx-glyph:hover { background: var(--fx-blue-soft); }
.fx-glyph[aria-pressed="true"] { background: var(--fx-ink); color: #fff; }
.fx-inspector { position: sticky; top: 16px; background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 20px; text-align: center; }
.fx-inspector__big { font-size: 7rem; line-height: 1.1; min-height: 1.1em; color: var(--fx-ink); }
.fx-inspector__code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--fx-muted); }

/* ---------- scripts ---------- */
.fx-scripts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.fx-script { background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 22px; }
.fx-script__sample { font-size: 1.7rem; line-height: 1.5; margin: 12px 0; overflow-wrap: anywhere; }

/* ---------- downloads ---------- */
.fx-download-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius); padding: 22px 24px; margin-bottom: 24px; box-shadow: var(--fx-shadow); }
.fx-table-wrap { overflow-x: auto; border: 1px solid var(--fx-line); border-radius: var(--fx-radius); background: var(--fx-paper); }
.fx-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fx-table caption { text-align: left; padding: 14px 18px 0; font-weight: 650; color: var(--fx-ink); }
.fx-table th, .fx-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--fx-line); vertical-align: top; }
.fx-table th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fx-muted); font-weight: 700; background: #fdfcfa; }
.fx-table tr:last-child td { border-bottom: 0; }
.fx-sha { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; color: var(--fx-muted); word-break: break-all; max-width: 280px; display: inline-block; }
.fx-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0 0 28px; }
.fx-choose__item { border: 1px solid var(--fx-line); border-radius: var(--fx-radius-sm); padding: 16px 18px; background: var(--fx-paper); }
.fx-choose__item strong { display: block; margin-bottom: 4px; }
.fx-choose__item p { margin: 0; font-size: .92rem; }

.fx-code { position: relative; }
.fx-code pre { background: #0d1330; color: #e9ecf6; border-radius: var(--fx-radius-sm); padding: 18px 20px; overflow-x: auto; margin: 0; line-height: 1.55; }
.fx-code .fx-btn { position: absolute; top: 10px; right: 10px; }
.fx-license { white-space: pre-wrap; background: var(--fx-paper); border: 1px solid var(--fx-line); border-radius: var(--fx-radius-sm); padding: 20px; max-height: 420px; overflow: auto; font-size: .88rem; color: var(--fx-ink-2); }

/* ---------- licence-usage labels ---------- */
.fx-dl-cell { white-space: nowrap; }
.fx-dl-note { display: inline-block; margin-left: 10px; font-size: .76rem; font-weight: 700; color: #155c35; background: #e9f6ef; border: 1px solid #bfe3cd; border-radius: 999px; padding: 3px 9px; vertical-align: middle; }
.fx-dl-note--block { display: block; width: fit-content; margin: 10px 0 0; }
.fx-notice--commercial { border-color: #d9d4f6; background: var(--fx-violet-soft); color: #2f2670; margin: 22px 0 0; border-width: 2px; }
.fx-notice--commercial strong { color: #1e1760; }
@media (max-width: 720px) { .fx-dl-cell { white-space: normal; } .fx-dl-note { margin: 6px 0 0; display: block; width: fit-content; } }

/* ---------- history ---------- */
.fx-history { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--fx-line); }
.fx-history li { position: relative; padding: 0 0 26px 24px; }
.fx-history li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--fx-paper); border: 2px solid var(--fx-line-strong); }
.fx-history li.is-current::before { background: var(--fx-blue); border-color: var(--fx-blue); }
.fx-history__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.fx-history__head h3 { margin: 0; font-size: 1.1rem; }

/* ---------- gone / 404-like states ---------- */
.fx-gone { padding: 96px 0; text-align: center; }
.fx-gone h1 { font-size: clamp(2rem, 4vw, 3rem); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
    .fx-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-filter .fx-field--search { grid-column: 1 / -1; }
    .fx-family-hero__grid, .fx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .fx-explain { grid-template-columns: minmax(0, 1fr); }
    .fx-glyph-layout { grid-template-columns: minmax(0, 1fr); }
    .fx-inspector { position: static; }
}

@media (max-width: 720px) {
    .fx-section { padding: 52px 0; }
    .fx-hero { padding: 40px 0; }
    .fx-two, .fx-examples { grid-template-columns: minmax(0, 1fr); }
    .fx-filter { grid-template-columns: minmax(0, 1fr); }
    .fx-weight-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .fx-card__sample { padding: 24px 20px 18px; min-height: 130px; }
    .fx-card__body { padding: 18px 20px 22px; }
    .fx-tester__text { font-size: 40px; min-height: 200px; padding: 20px 16px; }
    .fx-tester__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
    .fx-inspector__big { font-size: 5rem; }

    /* Download tables become stacked rows so a 64-character checksum
       wraps across the full width instead of a four-character column. */
    .fx-table, .fx-table tbody, .fx-table caption { display: block; }
    .fx-table caption { padding: 14px 16px 6px; }
    .fx-table thead { display: none; }
    .fx-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; border-bottom: 1px solid var(--fx-line); }
    .fx-table tr:last-child { border-bottom: 0; }
    .fx-table td { display: block; padding: 0; border: 0; }
    .fx-table td:nth-child(1) { grid-column: 1; }
    .fx-table td:nth-child(2), .fx-table td:nth-child(3) { grid-column: 1; color: var(--fx-muted); font-size: .88rem; }
    .fx-table td:nth-child(4) { grid-column: 1 / -1; margin-top: 6px; }
    .fx-table td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
    .fx-sha { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx *, .fx *::before, .fx *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
    .fx-tester__controls, .fx-filter, .fx-preview-bar { display: none; }
}