/* ============================================================
   FontHub — main.css
   ============================================================ */
:root {
  --bg: #ffffff;          --bg-soft: #f6f7f9;
  --surface: #ffffff;     --text: #1c1e21;      --text-soft: #5f6672;
  --border: #e4e7ec;      --primary: #1a73e8;   --primary-ink: #ffffff;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
  --container: 1200px;
  --header-height: 64px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
[data-theme="dark"] {
  --bg: #101215;          --bg-soft: #171a1f;
  --surface: #1b1f26;     --text: #e8eaed;      --text-soft: #9aa1ac;
  --border: #2a2f37;      --primary: #8ab4f8;   --primary-ink: #101215;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display:none !important; }
body {
  margin: 0; font-family: var(--font-ui); background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

/* Image loading: the visible hero paints immediately; JS only fades pending native-lazy images. */
img[loading="lazy"].is-image-loading {
  opacity:0;
  transition:opacity .32s ease;
}
img[loading="lazy"].is-image-loading.is-image-loaded { opacity:1; }

a { color: inherit; text-decoration: none; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

.screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.skip-link:focus { position:fixed; top:8px; left:8px; z-index:999; background:var(--primary); color:var(--primary-ink);
  padding:8px 14px; border-radius:8px; width:auto; height:auto; clip:auto; }

/* Buttons — unified primary action style. Icon-only controls keep their own rules. */
.btn,
.feature-hero-donate-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:28px; padding:8px 10px; border:0; border-radius:10px;
  background:linear-gradient(135deg,#b8860b,#ffd700); color:#241c00;
  font:inherit; font-size:14px; font-weight:700; line-height:1.2;
  cursor:pointer; transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-primary,
.btn-outline,
.feature-hero-donate-btn {
  border:0; background:linear-gradient(135deg,#b8860b,#ffd700); color:#241c00;
}
.btn:hover,
.feature-hero-donate-btn:hover {
  color:#241c00; filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(184,134,11,.20);
}
.btn:focus-visible,
.feature-hero-donate-btn:focus-visible {
  outline:2px solid #ffd700; outline-offset:2px;
}
.btn:disabled,
.btn[aria-disabled="true"],
.feature-hero-donate-btn:disabled { opacity:.52; cursor:not-allowed; transform:none; box-shadow:none; filter:none; }
.btn-lg { font-size:16px; }
.btn-sm { font-size:13px; }

/* Header */
.site-header {
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom:none;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  transition:background-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.admin-bar .site-header { top:32px; }
.header-inner { display:flex; align-items:center; gap:20px; height:var(--header-height); }

/* Hero pages: keep the header sticky but remove its layout height so the hero starts at y=0. */
.site-header--overlay { margin-bottom:calc(var(--header-height) * -1); }
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) {
  color:#fff;
  background:linear-gradient(180deg,rgba(8,10,14,.34),rgba(8,10,14,.12));
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
}
.site-header--overlay.is-scrolled,
.site-header--overlay.is-nav-open {
  color:var(--text);
  background:color-mix(in srgb, var(--bg) 91%, transparent);
  box-shadow:0 8px 30px rgba(16,24,40,.08);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .brand-link,
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .primary-nav .menu a,
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .theme-toggle,
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .nav-toggle { color:#fff; }
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .primary-nav .menu a { color:rgba(255,255,255,.80); }
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .primary-nav .menu a:hover,
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .primary-nav .menu .current-menu-item a {
  color:#fff; background:rgba(255,255,255,.12);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .theme-toggle,
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .nav-toggle {
  border-color:rgba(255,255,255,.30); background:rgba(0,0,0,.10);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .header-actions .btn-primary {
  color:#241c00; background:linear-gradient(135deg,#b8860b,#ffd700);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .header-actions .btn-primary:hover {
  color:#241c00; filter:brightness(1.05);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .custom-logo-link img {
  filter:none; transition:filter .22s ease;
}
.site-header--overlay.is-scrolled .custom-logo-link img,
.site-header--overlay.is-nav-open .custom-logo-link img { filter:none; }
.brand-link { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
.brand img { height:50px; width:auto; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  background:var(--primary); color:var(--primary-ink); font-weight:800; }
.primary-nav { margin-inline:auto; }
.primary-nav .menu { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.primary-nav .menu a { padding:8px 14px; border-radius:999px; font-size:14.5px; color:var(--text-soft); }
.primary-nav .menu a:hover, .primary-nav .menu .current-menu-item a { color:var(--text); background:var(--bg-soft); }
.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.theme-toggle, .nav-toggle { background:none; border:1px solid var(--border); border-radius:999px;
  width:38px; height:38px; font-size:16px; cursor:pointer; color:var(--text); }
.nav-toggle { display:none; }

.controls { position:sticky; top:var(--header-height); z-index:40; background:var(--bg); border-bottom:1px solid var(--border); padding:14px 0; }
.controls-inner { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
input[type="search"], input[type="text"], textarea, select {
  background:var(--bg-soft); border:1px solid var(--border); color:var(--text);
  padding:10px 14px; border-radius:10px; font-size:14px; font-family:inherit; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--primary); outline-offset:1px; }
.specimen-input { flex:2 1 300px; }
.font-badge-filter { flex-wrap:wrap; gap:8px; }
.font-filter-button {
  display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:0; padding:2px 9px;
  border:0; border-radius:999px; background:var(--surface); color:var(--text-soft); box-shadow:0 0 0 1px var(--border) inset;
  font-family:inherit; font-size:10.5px; font-weight:800; line-height:1.55; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer; transition:.18s ease;
}
.font-filter-button:hover { color:var(--text); transform:translateY(-1px); }
.font-filter-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.font-filter-button.is-active { box-shadow:0 0 0 2px var(--primary); color:var(--text); }
.font-filter-button .badge-free,
.font-filter-button .badge-vip,
.font-filter-button .badge-single,
.font-filter-button .badge-multi,
.font-filter-button .badge-variable { display:inline-flex; align-items:center; gap:5px; pointer-events:none; }
.font-filter-count { font-variant-numeric:tabular-nums; white-space:nowrap; }
.font-filter-button--access,
.font-filter-button--type { padding:0; background:transparent; box-shadow:none; }
.font-filter-button--downloads,
.font-filter-button--downloads:hover,
.font-filter-button--downloads.is-active { background:linear-gradient(135deg,#1d4ed8,#2563eb); color:#fff; }
.controls.is-filtering .font-filter-button { cursor:progress; opacity:.7; }

/* Font grid */
.font-grid-section { padding:26px 20px 60px; }
.font-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.font-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:12px; transition:.18s ease; }
.font-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.font-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.font-card-title { margin:0; font:inherit; }
.font-card-name { font-weight:700; font-size:16px; }
.font-card-name:hover { color:var(--primary); }
.font-card-preview { display:block; min-height:76px; overflow:hidden; }
.font-preview-text { display:block; font-size:28px; line-height:1.25; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .2s; }
.font-preview-text.is-ready { opacity:1; }

/* Font preview loading — không để lộ fallback font trước khi FontFace sẵn sàng. */
.font-card-preview.is-font-loading {
  position:relative;
  overflow:hidden;
  background:var(--bg-soft);
}
.font-card-preview.is-font-loading::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(110deg,
    transparent 18%,
    color-mix(in srgb, var(--surface) 72%, transparent) 42%,
    color-mix(in srgb, var(--text) 8%, var(--surface)) 50%,
    color-mix(in srgb, var(--surface) 72%, transparent) 58%,
    transparent 82%);
  background-size:220% 100%;
  animation:fonthub-font-shimmer 1.15s linear infinite;
}
.font-card-preview.is-font-loading .font-preview-text { visibility:hidden; }

/* Specimen trực tiếp trong textarea. Trong lúc font đang tải, giữ nội dung có thể sửa
 * nhưng không hiển thị fallback font; shimmer chạy trên chính nền textarea. */
.specimen-editor-input.is-font-loading {
  color:transparent;
  caret-color:var(--text);
  background-color:var(--bg-soft);
  background-image:linear-gradient(110deg,
    transparent 18%,
    color-mix(in srgb, var(--surface) 72%, transparent) 42%,
    color-mix(in srgb, var(--text) 8%, var(--surface)) 50%,
    color-mix(in srgb, var(--surface) 72%, transparent) 58%,
    transparent 82%);
  background-size:220% 100%;
  animation:fonthub-font-shimmer 1.15s linear infinite;
}
.specimen-editor-input.is-font-error {
  color:var(--text-soft);
  caret-color:var(--text);
  background:var(--bg-soft);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  font-variation-settings:normal !important;
}
.specimen-font-error-notice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-soft);
  color:var(--text-soft);
  font-size:13px;
}
.specimen-font-error-notice[hidden] { display:none; }
.specimen-font-retry {
  flex:0 0 auto;
  min-height:32px;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
}
.specimen-font-retry:hover,
.specimen-font-retry:focus-visible { border-color:var(--primary); color:var(--primary); }

@keyframes fonthub-font-shimmer {
  from { background-position:200% 0; }
  to   { background-position:-20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .font-card-preview.is-font-loading::before,
  .specimen-editor-input.is-font-loading { animation:none; }
}
.font-card-foot { display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-soft);
  border-top:1px dashed var(--border); padding-top:10px; }

/* VIP */
.badge-vip { display:inline-grid; place-items:center; padding:2px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(135deg,#b8860b,#ffd700); color:#1c1400; white-space:nowrap; }
.font-card.is-vip { border-color:color-mix(in srgb, #b8860b 35%, var(--border)); }
.grid-status { text-align:center; margin-top:28px; }
.empty-note { color:var(--text-soft); }

/* Specimen */
.specimen { margin-top:26px; }
.specimen-bar { display:flex; flex-direction:column; gap:12px; padding:14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.specimen-editor-toolbar {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  overflow:hidden;
  padding:8px 10px 10px;
  border:1px solid var(--border);
  border-radius:calc(var(--radius) - 2px);
  background:color-mix(in srgb, var(--surface) 92%, var(--bg));
}
.specimen-toolbar-controls {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:2px;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb, var(--text-soft) 38%, transparent) transparent;
  -webkit-overflow-scrolling:touch;
}
.specimen-toolbar-controls::-webkit-scrollbar { height:5px; }
.specimen-toolbar-controls::-webkit-scrollbar-track { background:transparent; }
.specimen-toolbar-controls::-webkit-scrollbar-thumb { border-radius:999px; background:color-mix(in srgb, var(--text-soft) 36%, transparent); }
.specimen-toolbar-field {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  color:var(--text-soft);
  font-size:12px;
  justify-content:center;
  white-space:nowrap;
}
.specimen-toolbar-controls > .specimen-toolbar-field[for="sp-style"] {
  flex:0 0 100px;
  width:100px;
  min-width:100px;
  max-width:100px;
}
.specimen-toolbar-field > span { font-weight:650; line-height:1; }
.specimen-toolbar-field select {
  min-width:40px;
  height:30px;
  padding:0 5px;
  font-size:12px;
  font-weight:700;
  border-color:var(--border);
  border-radius:9px;
  background-color:var(--surface);
  color:var(--text);
}
.specimen-toolbar-field select:hover { border-color:color-mix(in srgb, var(--text) 28%, var(--border)); }
.specimen-toolbar-field select:focus { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent); outline:none; }
.specimen-weight-slider-wrap {
  position:relative;
  width:120px;
  max-width:120px;
  flex:0 0 120px;
  height:34px;
  display:flex;
  align-items:center;
  padding:0 8px;
}
.specimen-weight-slider-wrap input[type="range"] {
  position:relative;
  z-index:3;
  width:100%;
  margin:0;
  vertical-align:middle;
  accent-color:var(--primary);
  cursor:pointer;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
}
.specimen-weight-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
  height:4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--text) 16%, var(--border));
}
.specimen-weight-slider-wrap input[type="range"]::-webkit-slider-thumb {
  position:relative;
  z-index:6;
  width:16px;
  height:16px;
  margin-top:-6px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 50%, var(--border));
  -webkit-appearance:none;
  appearance:none;
}
.specimen-weight-slider-wrap input[type="range"]::-moz-range-track {
  height:4px;
  border:0;
  border-radius:999px;
  background:color-mix(in srgb, var(--text) 16%, var(--border));
}
.specimen-weight-slider-wrap input[type="range"]::-moz-range-thumb {
  width:16px;
  height:16px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--primary) 50%, var(--border));
}
.specimen-weight-ticks {
  position:absolute;
  z-index:4;
  top:50%;
  left:8px;
  right:8px;
  height:0;
  pointer-events:none;
  transform:translateY(-50%);
}
.specimen-weight-tick {
  position:absolute;
  top:0;
  left:var(--weight-pos);
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--text-soft);
  cursor:pointer;
  font:inherit;
  pointer-events:auto;
  transform:translate(-50%,-50%);
}
.specimen-weight-tick::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  border:1px solid color-mix(in srgb, var(--text) 30%, var(--border));
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 2px var(--surface);
  transform:translate(-50%,-50%);
  transition:background-color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.specimen-weight-tick:hover::before,
.specimen-weight-tick:focus-visible::before {
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, var(--surface));
  transform:translate(-50%,-50%) scale(1.12);
}
.specimen-weight-tick:focus-visible { outline:none; }
.specimen-weight-tick.is-active { color:var(--text); font-weight:700; }
.specimen-weight-tick.is-active::before {
  opacity:0;
  transform:translate(-50%,-50%) scale(.65);
}
.specimen-toolbar-range > span { display:inline-block; }
.specimen-toolbar-range > input[type="range"] {
  width:70px;
  max-width:70px;
  flex:0 0 70px;
  margin:0;
  vertical-align:middle;
  accent-color:var(--primary);
  cursor:pointer;
}

#sp-size,
#sp-leading {
  width:60px;
  max-width:60px;
  flex:0 0 60px;
}
.specimen-toolbar-range output {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:26px;
  padding:0 7px;
  margin-left:2px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text);
  font-size:11px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
}
.specimen-invert-btn {
  flex:0 0 auto;
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.specimen-invert-btn:hover {
  border-color:color-mix(in srgb,var(--primary) 55%,var(--border));
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  color:var(--primary);
}
.specimen-invert-btn:focus-visible {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.specimen-invert-btn:active { transform:translateY(1px); }
.specimen-invert-btn.is-active,
.specimen-invert-btn[aria-pressed="true"] {
  border-color:var(--primary);
  background:var(--primary);
  color:var(--primary-ink);
}
.specimen-invert-btn > span { display:block; transform:translateY(-.02em); }
@media (max-width:782px) {
  .specimen-editor-toolbar { gap:8px; padding:7px 8px 9px; }
  .specimen-toolbar-controls { gap:10px; }
}
.specimen-editor-input { flex:0 0 auto; width:100%; height:100px; min-height:100px; max-height:none; resize:none; overflow-y:hidden;
  padding:clamp(14px,2vw,20px); border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); font-size:48px; line-height:1.3; overflow-wrap:anywhere; }
.specimen-editor-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); outline:none; }
body.inverted .specimen-editor-input:not(.is-font-loading):not(.is-font-error) {
  background:var(--text); color:var(--bg); caret-color:var(--bg);
}

/* Single font content layout */
.font-single-layout {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
  padding-top:38px;
  padding-bottom:72px;
}
.font-single-main-column { min-width:0; display:grid; gap:42px; }
.specimen--embedded { margin-top:0; min-width:0; }
.font-about h2,
.font-single-sidebar h2 { font-size:20px; margin:0 0 14px; }
.font-content { color:var(--text-soft); }
.font-single-sidebar {
  min-width:0;
  display:grid;
  gap:22px;
  position:sticky;
  top:var(--font-sidebar-sticky-top, calc(var(--header-height) + 22px));
  align-self:start;
}
.admin-bar .font-single-sidebar {
  top:var(--font-sidebar-sticky-top, calc(var(--header-height) + 54px));
}
.font-sidebar-panel {
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
}
.font-meta-list { margin:0; display:grid; gap:0; }
.font-meta-list > div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:11px 0; border-top:1px solid var(--border); }
.font-meta-list > div:first-child { border-top:0; padding-top:0; }
.font-meta-list dt { color:var(--text-soft); font-weight:600; }
.font-meta-list dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.font-license-link { color:var(--primary); text-decoration:underline; text-underline-offset:3px; display:inline-flex; align-items:baseline; gap:5px; }
.font-license-link:hover { text-decoration-thickness:2px; }
.font-file-package { display:inline-flex; align-items:center; gap:7px; max-width:100%; white-space:nowrap; font-size:12.5px; }
.font-file-package code { background:var(--bg-soft); padding:2px 7px; border-radius:6px; }
.font-file-package__size { color:var(--text-soft); }
.related-font-list { display:grid; gap:10px; }
.related-font-item { display:grid; grid-template-columns:64px minmax(0,1fr); gap:11px; align-items:center; }
.related-font-thumb { width:64px; aspect-ratio:1; overflow:hidden; border-radius:10px; background:var(--bg-soft); }
.related-font-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .18s ease; }
.related-font-thumb:hover img { transform:scale(1.04); }
.related-font-thumb-placeholder { width:100%; height:100%; display:grid; place-items:center; color:var(--text-soft); font-weight:750; }
.related-font-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; }
.related-font-title { margin:0; font:inherit; }
.related-font-name { min-width:0; max-width:100%; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.related-font-badges { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.related-font-copy .badge-vip,
.related-font-copy .badge-free,
.related-font-copy .badge-variable,
.related-font-copy .badge-multi,
.related-font-copy .badge-single { flex:0 0 auto; font-size:9px; padding:2px 6px; }

/* Footer */
.site-footer { border-top:1px solid var(--border); background:var(--bg-soft); padding:26px 0; }
.footer-inner { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  align-items:center; color:var(--text-soft); font-size:13.5px; }
.footer-menu { display:flex; gap:16px; list-style:none; margin:0; padding:0; }

/* Responsive */
@media (max-width: 860px) {
  .font-single-layout { grid-template-columns:1fr; gap:36px; padding-top:30px; }
  .font-single-sidebar { position:static; grid-template-columns:1fr; }
  .primary-nav { position:fixed; inset:var(--header-height) 0 auto 0; background:var(--bg);
    border-bottom:1px solid var(--border); padding:12px 20px; display:block; }
  .js .primary-nav { display:none; }
  .js .primary-nav.is-open { display:block; }
  .primary-nav .menu { flex-direction:column; }
  .nav-toggle { display:grid; place-items:center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none!important; animation:none!important; }
  html { scroll-behavior:auto!important; }
}
/* ============================================================
   Homepage
   ============================================================ */
.home-page { overflow:hidden; }
.home-fonts,
.home-articles { padding-block:72px; }
.home-fonts { padding-top:0; }
.home-articles { border-top:1px solid var(--border); }
.home-page-content-section { border-top:1px solid var(--border); padding:0 0 84px; }

.home-section-head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px;
}
.home-eyebrow {
  margin:0 0 7px; color:var(--text-soft); font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.home-section-title {
  margin:0; font-size:clamp(30px,5vw,52px); line-height:1.04; letter-spacing:-.035em;
}
.home-section-link { color:var(--text-soft); font-size:14px; font-weight:650; white-space:nowrap; }
.home-section-link:hover { color:var(--primary); }

/* Font hero slider — 3 font, mỗi slide là hero full viewport dùng ảnh đại diện. */
.home-font-slider {
  position:relative; width:100vw; margin-left:calc(50% - 50vw); background:#111;
}
.home-font-slider-viewport { overflow:hidden; }
.home-font-slider-track { display:flex; transition:transform .48s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.home-font-slide { flex:0 0 100%; min-width:0; }

/* Vẫn giữ class .font-card để dùng chung FontFace hydrator, nhưng bỏ toàn bộ card chrome. */
.home-font-hero.font-card,
.home-font-hero.font-card.is-vip {
  position:relative; display:block; min-height:100svh; padding:0; gap:0; overflow:hidden;
  border:0; border-radius:0; background:#111; box-shadow:none; transform:none;
}
.home-font-hero.font-card:hover { box-shadow:none; transform:none; }
.home-font-hero-link,
.home-font-hero-media { position:absolute; inset:0; display:block; }
.home-font-hero-link { z-index:0; }
.home-font-hero-media { overflow:hidden; background:#16181c; }
.home-font-hero-image,
.home-font-hero-placeholder {
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
}
.home-font-hero-placeholder {
  background:linear-gradient(135deg,#1b1e24,#343943 55%,#15171b);
}
.home-font-hero-shade {
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.46) 47%,rgba(0,0,0,.10) 78%),
    linear-gradient(180deg,rgba(0,0,0,.08) 36%,rgba(0,0,0,.72) 100%);
}
.home-font-hero-content {
  position:absolute; z-index:3; left:50%; bottom:clamp(72px,10vh,118px); width:100%;
  transform:translateX(-50%); color:#fff;
}
.home-font-hero-topline { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.home-font-hero-eyebrow {
  color:rgba(255,255,255,.72);
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.home-font-hero-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; }
.home-font-hero-title {
  display:inline-block; max-width:980px; font-size:clamp(42px,7vw,88px); font-weight:800;
  line-height:.98; letter-spacing:-.05em; text-wrap:balance;
}
.home-font-hero-title:hover { color:#fff; opacity:.9; }
.home-font-hero-preview.font-card-preview {
  width:min(980px,100%); min-height:clamp(86px,14vh,150px); margin-top:clamp(20px,4vh,38px);
  padding:12px 0; border-radius:0; background:transparent;
}
.home-font-hero-preview .font-preview-text {
  width:100%; color:#fff; font-size:clamp(42px,7vw,92px); line-height:1.06;
  text-shadow:0 1px 20px rgba(0,0,0,.18);
}
.home-font-hero-preview.is-font-loading {
  background:rgba(255,255,255,.08); border-radius:12px; backdrop-filter:blur(4px);
}
.home-font-hero-preview.is-font-loading::before {
  background:linear-gradient(110deg,
    transparent 18%, rgba(255,255,255,.04) 38%, rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.04) 62%, transparent 82%);
  background-size:220% 100%;
}
.home-font-hero-meta {
  display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; color:rgba(255,255,255,.72); font-size:13px;
}
.home-font-hero-meta > * + *::before { content:"·"; margin-right:14px; color:rgba(255,255,255,.38); }

.home-slider-controls {
  position:absolute; z-index:5; left:50%; bottom:24px; width:100%; transform:translateX(-50%);
  display:flex; justify-content:flex-end; align-items:center; gap:12px; pointer-events:none;
}
.home-slider-controls > * { pointer-events:auto; }
.home-slider-button {
  display:grid; place-items:center; width:42px; height:42px; padding:0; border-radius:999px;
  border:1px solid rgba(255,255,255,.34); background:rgba(0,0,0,.24); color:#fff;
  backdrop-filter:blur(10px); cursor:pointer;
}
.home-slider-button:hover { border-color:rgba(255,255,255,.72); color:#fff; background:rgba(0,0,0,.38); }
.home-slider-dots { display:flex; gap:7px; align-items:center; }
.home-slider-dot {
  width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.42); cursor:pointer;
  transition:width .18s ease, background .18s ease;
}
.home-slider-dot.is-active { width:28px; background:#fff; }

.home-font-grid-head { margin-bottom:26px; }
/* 6 font / page — 3 cột desktop. */
.home-font-grid-wrap { margin-top:clamp(44px,7vw,84px); }
.home-font-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }

/* Pagination dùng query arg riêng cho từng khối. */
.home-pagination {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:30px;
}
.home-page-link {
  display:grid; place-items:center; min-width:38px; height:38px; padding-inline:11px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
  color:var(--text-soft); font-size:13px; font-weight:700;
}
.home-page-link:hover { border-color:var(--primary); color:var(--primary); }
.home-page-link.is-current { background:var(--text); border-color:var(--text); color:var(--bg); }
.home-page-gap { padding-inline:3px; color:var(--text-soft); }

/* Bài đầu mỗi trang: full viewport width. */
.home-featured-post {
  width:100vw; margin-left:calc(50% - 50vw); margin-bottom:34px; position:relative;
}
.home-featured-media {
  position:relative; display:block; min-height:clamp(480px,72vh,760px); overflow:hidden; background:var(--bg-soft);
}
.home-featured-media > img,
.home-featured-placeholder {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.home-featured-placeholder {
  background:linear-gradient(135deg,var(--bg-soft),color-mix(in srgb,var(--text) 9%,var(--bg-soft)));
}
.home-featured-shade {
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04) 24%,rgba(0,0,0,.78) 100%);
}
.home-featured-content {
  position:absolute; z-index:2; left:50%; bottom:clamp(28px,6vw,72px); width:100%; transform:translateX(-50%);
  color:#fff; display:flex; flex-direction:column; align-items:flex-start;
}
.home-featured-meta { color:rgba(255,255,255,.78)!important; margin-bottom:12px; }
.home-featured-title {
  display:block; max-width:920px; margin:0; font-size:clamp(34px,6vw,72px); font-weight:800; line-height:1.02; letter-spacing:-.045em;
}
.home-featured-excerpt {
  display:block; max-width:720px; margin-top:14px; color:rgba(255,255,255,.82); font-size:clamp(15px,2vw,19px);
}

/* 12 bài / page — 3 cột desktop. */
.home-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; }
.home-post-card { min-width:0; }
.home-post-thumb {
  display:block; aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--bg-soft); margin-bottom:15px;
}
.home-post-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .28s ease; }
.home-post-card:hover .home-post-thumb img { transform:scale(1.025); }
.home-post-thumb-placeholder { display:block; width:100%; height:100%; background:var(--bg-soft); }
.home-post-meta { display:flex; flex-wrap:wrap; gap:7px 12px; color:var(--text-soft); font-size:12.5px; }
.home-post-meta > * + *::before { content:"·"; margin-right:12px; color:var(--border); }
.home-post-meta a:hover { color:var(--primary); }
.home-post-title { margin:8px 0 0; font-size:clamp(18px,2vw,23px); line-height:1.22; letter-spacing:-.015em; }
.home-post-title a:hover { color:var(--primary); }
.home-post-excerpt { margin:9px 0 0; color:var(--text-soft); font-size:14px; }

/* Static front page hero: ưu tiên Featured Image, fallback ảnh đầu tiên trong content. */
.home-content-hero {
  position:relative; width:100vw; min-height:clamp(520px,72vh,780px); margin-left:calc(50% - 50vw);
  overflow:hidden; background:#111; color:#fff; isolation:isolate;
}
.home-content-hero-media,
.home-content-hero-image,
.home-content-hero-placeholder,
.home-content-hero-shade {
  position:absolute; inset:0; display:block; width:100%; height:100%;
}
.home-content-hero-media { overflow:hidden; background:#16181c; }
.home-content-hero-image { object-fit:cover; transform:scale(1.01); filter:saturate(.94) contrast(1.02); }
.home-content-hero-placeholder {
  background:linear-gradient(135deg,#1b1e24,#343943 55%,#15171b);
}
.home-content-hero-shade {
  z-index:1;
  background:
    linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.43) 48%,rgba(0,0,0,.10) 78%),
    linear-gradient(180deg,rgba(0,0,0,.06) 32%,rgba(0,0,0,.78) 100%);
}
.home-content-hero-copy {
  position:absolute; z-index:3; left:50%; bottom:clamp(42px,8vh,90px); width:100%;
  transform:translateX(-50%); display:flex; flex-direction:column; align-items:flex-start;
}
.home-page-content-title {
  margin:0; max-width:980px; color:#fff; font-size:clamp(40px,7vw,84px); font-weight:800;
  line-height:.99; letter-spacing:-.05em; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.home-page-content-intro {
  max-width:760px; margin:18px 0 0; color:rgba(255,255,255,.84);
  font-size:clamp(15px,2vw,20px); line-height:1.55; text-wrap:pretty;
}
.home-page-content { padding-top:clamp(34px,6vw,68px); }
.home-page-content .entry-content { max-width:820px; color:var(--text); }
.home-page-content .entry-content > :first-child { margin-top:0; }
.home-page-content .entry-content img { border-radius:var(--radius); }

@media (max-width: 860px) {
  .home-fonts, .home-articles { padding-block:52px; }
  .home-fonts { padding-top:0; }
  .home-page-content-section { padding-bottom:64px; }
  .home-section-head { align-items:flex-start; flex-direction:column; gap:12px; }
  .home-font-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-featured-media { min-height:560px; }
}

@media (max-width: 580px) {
  .home-font-hero.font-card, .home-font-hero.font-card.is-vip { min-height:100svh; }
  .home-font-hero-content { bottom:86px; }
  .home-font-hero-shade {
    background:linear-gradient(180deg,rgba(0,0,0,.12) 18%,rgba(0,0,0,.82) 100%);
  }
  .home-font-hero-title { font-size:clamp(38px,13vw,64px); }
  .home-font-hero-preview.font-card-preview { min-height:88px; margin-top:22px; }
  .home-font-hero-preview .font-preview-text { font-size:clamp(38px,12vw,62px); }
  .home-slider-controls { justify-content:center; }
  .home-post-grid { grid-template-columns:1fr; }
  .home-featured-media { min-height:72vh; }
  .home-featured-excerpt { display:none; }
  .home-content-hero { min-height:68vh; }
  .home-content-hero-copy { bottom:42px; }
  .home-page-content-title { font-size:clamp(38px,12vw,64px); }
  .home-page-content-intro { max-width:100%; margin-top:14px; font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  img[loading="lazy"].is-image-loading { transition:none!important; }
  .home-font-slider-track { transition:none!important; }
  .home-post-thumb img { transition:none!important; }
}

/* ============================================================
   Shared heroes — single posts/pages, post archives, font archives
   ============================================================ */
.feature-hero {
  position:relative; width:100%; min-height:clamp(500px,72vh,800px); overflow:hidden;
  background:#15171b; color:#fff; isolation:isolate;
}
.feature-hero-media,
.feature-hero-image,
.feature-hero-placeholder,
.feature-hero-shade { position:absolute; inset:0; width:100%; height:100%; display:block; }
.feature-hero-image { object-fit:cover; transform:scale(1.01); filter:saturate(.94) contrast(1.03); }
.feature-hero-placeholder { background:linear-gradient(135deg,#1b1e24,#343943 55%,#15171b); }
.feature-hero-shade {
  background:
    linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.43) 52%,rgba(0,0,0,.10) 80%),
    linear-gradient(180deg,rgba(0,0,0,.04) 26%,rgba(0,0,0,.80) 100%);
}
.feature-hero-copy {
  position:absolute; z-index:3; left:50%; bottom:clamp(42px,8vh,92px); width:100%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:flex-start;
}
.feature-hero-topline { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.feature-hero--font.is-single .feature-hero-topline { max-width:820px; }
.feature-hero-eyebrow,
.feature-hero-context-title {
  margin:0; color:rgba(255,255,255,.76); font-size:12px; font-weight:800; line-height:1.2;
  letter-spacing:.12em; text-transform:uppercase;
}
.feature-hero-context-description { max-width:700px; margin:10px 0 0; color:rgba(255,255,255,.68); font-size:14px; }
.feature-hero-access {
  display:inline-grid; place-items:center; padding:3px 9px; border:1px solid rgba(255,255,255,.34);
  border-radius:999px; background:rgba(255,255,255,.10); color:#fff; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(8px);
}
.feature-hero-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:14px; color:rgba(255,255,255,.72); font-size:13px; }
.feature-hero-meta > * + *::before { content:"·"; margin-right:14px; color:rgba(255,255,255,.38); }
.feature-hero-title {
  margin:12px 0 0; max-width:1000px; color:#fff; font-size:clamp(40px,7vw,84px); font-weight:800;
  line-height:.99; letter-spacing:-.05em; text-wrap:balance; text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.feature-hero-title a:hover { color:#fff; opacity:.9; }
.feature-hero-designer { margin:10px 0 0; color:rgba(255,255,255,.72); font-size:14px; }
.feature-hero-excerpt { max-width:760px; margin:16px 0 0; color:rgba(255,255,255,.82); font-size:clamp(15px,2vw,19px); line-height:1.6; }
.feature-hero--font.is-single .feature-hero-font-excerpt {
  max-width:820px;
  margin:12px 0 0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  text-wrap:pretty;
}
.feature-hero--font.is-single .feature-hero-meta { align-items:center; }
.feature-hero--font.is-single .feature-hero-meta .badge-vip,
.feature-hero--font.is-single .feature-hero-meta .feature-hero-access { flex:0 0 auto; }
.feature-hero-cta { margin-top:20px; color:#fff; font-weight:700; font-size:14px; }
.feature-hero-cta:hover { color:#fff; opacity:.82; }
.feature-hero-actions {
  display:flex;
  align-items:center;
  width:100%;
  margin-top:0;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-soft);
}
.feature-hero-actions > .btn { margin-left:auto; }
.feature-hero-vip-donate {
  display:flex;
  flex:1 1 auto;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 16px;
  padding:0 0 0 7px;
  border-radius:0;
  background:transparent;
  color:var(--text);
  backdrop-filter:none;
  justify-content:space-between;
}
.feature-hero-vip-donate-text { font-size:13px; line-height:1.4; color:var(--text-soft); }

.font-donate-dialog {
  width:min(560px,calc(100vw - 32px)); max-height:min(720px,calc(100vh - 32px)); margin:auto; padding:0;
  overflow:auto; border:1px solid var(--border); border-radius:20px; background:var(--bg); color:var(--text);
  box-shadow:0 28px 80px rgba(0,0,0,.32);
}
.font-donate-dialog::backdrop { background:rgba(8,10,14,.66); backdrop-filter:blur(6px); }
.font-donate-dialog__inner { padding:24px; }
.font-donate-dialog__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.font-donate-dialog__eyebrow { display:block; margin-bottom:6px; color:var(--text-soft); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.font-donate-dialog__header h2 { margin:0; font-size:clamp(24px,4vw,34px); line-height:1.08; }
.font-donate-dialog__close {
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid var(--border);
  border-radius:999px; background:var(--bg-soft); color:var(--text); font:inherit; font-size:24px; line-height:1; cursor:pointer;
}
.font-donate-dialog__content { margin-top:20px; color:var(--text-soft); line-height:1.7; }
.font-donate-dialog__content > p { margin:0; }
.font-donate-dialog__details { display:grid; gap:10px; margin:20px 0; padding:16px; border:1px solid var(--border); border-radius:14px; background:var(--bg-soft); }
.font-donate-dialog__details p { margin:0; }
.font-donate-dialog__details strong { color:var(--text); }
.font-donate-dialog__note { font-size:13px; }
.font-donate-dialog__footer { display:flex; justify-content:flex-end; margin-top:22px; }

@media (max-width:580px) {
  .feature-hero-actions { padding:7px; }
  .feature-hero-vip-donate { justify-content:space-between; padding-left:5px; }
  .feature-hero-vip-donate-text { flex:1 1 180px; }
  .font-donate-dialog__inner { padding:20px; }
}
.feature-hero-font-preview.font-card-preview {
  width:min(980px,100%); min-height:clamp(82px,13vh,142px); margin-top:clamp(18px,3.5vh,34px);
  padding:10px 0; border-radius:0; background:transparent;
}
.feature-hero-font-preview .font-preview-text {
  width:100%; color:#fff; font-size:clamp(40px,6.5vw,86px); line-height:1.06;
  text-shadow:0 1px 20px rgba(0,0,0,.18);
}
.feature-hero-font-preview.is-font-loading { background:rgba(255,255,255,.08); border-radius:12px; backdrop-filter:blur(4px); }
.feature-hero-font-preview.is-font-loading::before {
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.04) 38%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.04) 62%,transparent 82%);
  background-size:220% 100%;
}
.entry-single { padding-top:clamp(38px,6vw,72px); padding-bottom:clamp(58px,8vw,96px); }
.entry-single .entry-content { max-width:820px; margin-inline:auto; }
.entry-single .entry-content > :first-child { margin-top:0; }
.entry-single .entry-content img { border-radius:var(--radius); }
.archive-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 20px; padding-top:clamp(42px,6vw,72px); }
.archive-mixed-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 18px; padding-top:clamp(42px,6vw,72px); }
.archive-pagination { padding-block:34px 72px; text-align:center; }
.archive-pagination .nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.archive-pagination .page-numbers {
  display:grid; place-items:center; min-width:28px; min-height:28px; padding:8px 10px;
  border:0; border-radius:10px; background:linear-gradient(135deg,#b8860b,#ffd700); color:#241c00;
  font-weight:700; line-height:1.2; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.archive-pagination a.page-numbers:hover {
  color:#241c00; filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 5px 16px rgba(184,134,11,.20);
}
.archive-pagination .page-numbers.current {
  color:#241c00; background:linear-gradient(135deg,#b8860b,#ffd700);
  box-shadow:inset 0 0 0 2px rgba(36,28,0,.45);
}
.archive-empty-hero { padding:clamp(64px,10vw,120px) 0; background:var(--bg-soft); }
.archive-empty-hero h1 { margin:0; font-size:clamp(38px,6vw,72px); letter-spacing:-.045em; }
.archive-empty-hero p { max-width:700px; color:var(--text-soft); }

@media (max-width:860px) {
  .archive-post-grid,.archive-mixed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:580px) {
  .feature-hero { min-height:68vh; }
  .feature-hero-copy { bottom:38px; }
  .feature-hero-title { font-size:clamp(38px,12vw,64px); }
  .feature-hero-context-description,.feature-hero-excerpt { font-size:14px; }
  .feature-hero-font-preview.font-card-preview { min-height:86px; margin-top:18px; }
  .feature-hero-font-preview .font-preview-text { font-size:clamp(36px,11vw,58px); }
  .archive-post-grid,.archive-mixed-grid { grid-template-columns:1fr; }
}

@media (max-width:860px) {
  .admin-bar .site-header { top:0; }
}

/* Font access badges + linked taxonomy/access listings. */
.font-badge-link {
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  text-decoration:none;
}
.font-badge-link:hover { text-decoration:none; filter:brightness(1.06); }
.badge-free {
  display:inline-grid;
  place-items:center;
  padding:2px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:linear-gradient(135deg,#16a34a,#86efac);
  color:#062b13;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.badge-variable,
.badge-multi,
.badge-single {
  display:inline-grid;
  place-items:center;
  padding:2px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.badge-variable { background:linear-gradient(135deg,#7c3aed,#c084fc); color:#fff; }
.badge-multi { background:linear-gradient(135deg,#0284c7,#67e8f9); color:#032b3d; }
.badge-single { background:linear-gradient(135deg,#475569,#cbd5e1); color:#0f172a; }
.font-card-cat { color:inherit; text-decoration:none; }
a.font-card-cat:hover { color:var(--primary); }
.feature-hero .font-card-cat,
.home-font-hero .font-card-cat { color:inherit; }
.feature-hero .font-card-cat:hover,
.home-font-hero .font-card-cat:hover { color:#fff; opacity:.86; }
.feature-hero--font.is-single .feature-hero-meta .badge-free { flex:0 0 auto; }

/* Default /fonts/ grid: four columns desktop, then responsive down. */
@media (max-width:1180px) {
  .font-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .font-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .font-grid { grid-template-columns:1fr; }
  .home-font-grid { grid-template-columns:1fr; }
}

/* Category/access listing pages: hero + four fonts per row on wide screens. */
.font-grid.font-grid--four {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1180px) {
  .font-grid.font-grid--four { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .font-grid.font-grid--four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .font-grid.font-grid--four { grid-template-columns:1fr; }
}


/* Saved fonts / local bookmark UI. */
.font-hero-badges {
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.font-save-badge {
  display:inline-grid;
  place-items:center;
  min-height:0;
  padding:2px 9px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#67e8f9);
  color:#04162f;
  font:inherit;
  font-size:10.5px;
  font-weight:800;
  line-height:1.45;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.font-save-badge:hover { filter:brightness(1.08); transform:translateY(-1px); }
.font-save-badge:focus-visible { outline:2px solid #67e8f9; outline-offset:2px; }
.font-save-badge.is-saved {
  background:linear-gradient(135deg,#0ea5e9,#22d3ee);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 0 2px color-mix(in srgb,#22d3ee 25%,transparent);
}
.header-bookmarks {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.header-bookmarks:hover { border-color:#22d3ee; color:#0284c7; }
.header-bookmarks:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.header-bookmarks-icon { width:18px; height:18px; fill:currentColor; }
.header-bookmarks-count {
  position:absolute;
  top:-5px;
  right:-5px;
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border:2px solid var(--bg);
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#67e8f9);
  color:#04162f;
  font-size:10px;
  font-weight:800;
  line-height:1;
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .header-bookmarks {
  border-color:rgba(255,255,255,.28);
  background:rgba(0,0,0,.12);
  color:#fff;
  backdrop-filter:blur(10px);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .header-bookmarks-count { border-color:transparent; }
.feature-hero-topline .font-hero-badges,
.home-font-hero-topline .font-hero-badges { margin-left:auto; }
.feature-hero-meta .font-hero-badges { margin-right:2px; }
@media (max-width:560px) {
  .font-card-head { flex-wrap:wrap; }
}

/* Header saved-font popover. Bookmarks live in localStorage; no page navigation required. */
.header-bookmarks-wrap {
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.saved-popover[hidden] { display:none !important; }
.saved-popover {
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:120;
  width:min(360px, calc(100vw - 24px));
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg);
  color:var(--text);
  box-shadow:0 18px 48px rgba(0,0,0,.18);
  backdrop-filter:blur(18px);
}
.saved-popover::before {
  content:"";
  position:absolute;
  top:-7px;
  right:13px;
  width:12px;
  height:12px;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
  background:var(--bg);
  transform:rotate(45deg);
}
.saved-popover-head {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:32px;
  padding:2px 2px 8px;
  border-bottom:1px solid var(--border);
}
.saved-popover-head strong { font-size:14px; line-height:1.2; }
.saved-popover-clear,
.saved-popover-remove {
  border:0;
  background:transparent;
  color:var(--text-soft);
  cursor:pointer;
  font:inherit;
}
.saved-popover-clear {
  padding:5px 7px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}
.saved-popover-clear:hover,
.saved-popover-clear:focus-visible,
.saved-popover-remove:hover,
.saved-popover-remove:focus-visible {
  background:color-mix(in srgb, var(--surface) 88%, var(--text) 4%);
  color:var(--text);
  outline:none;
}
.saved-popover-clear:disabled { opacity:.4; cursor:default; background:transparent; }
.saved-popover-status {
  margin:0;
  padding:14px 8px;
  color:var(--text-soft);
  font-size:12px;
  text-align:center;
}
.saved-popover-status:empty { display:none; }
.saved-popover-list {
  display:grid;
  gap:4px;
  max-height:min(420px, 65vh);
  overflow:auto;
  padding-top:6px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.saved-popover-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:5px;
  border-radius:10px;
}
.saved-popover-item:hover { background:color-mix(in srgb, var(--surface) 88%, var(--text) 4%); }
.saved-popover-link {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.saved-popover-thumb {
  display:grid;
  place-items:center;
  width:56px;
  height:42px;
  border-radius:8px;
  object-fit:cover;
  background:color-mix(in srgb, var(--surface) 88%, var(--text) 4%);
  color:var(--text-soft);
  font-weight:800;
}
.saved-popover-copy {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.saved-popover-copy strong {
  overflow:hidden;
  min-width:0;
  font-size:13px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.saved-popover-copy .badge-vip,
.saved-popover-copy .badge-free,
.saved-popover-copy .badge-variable,
.saved-popover-copy .badge-multi,
.saved-popover-copy .badge-single {
  flex:0 0 auto;
  font-size:9px;
  padding:2px 6px;
}
.saved-popover-remove {
  min-width:32px;
  min-height:28px;
  padding:5px 7px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .saved-popover {
  border-color:rgba(255,255,255,.15);
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  color:var(--text);
}
.site-header--overlay:not(.is-scrolled):not(.is-nav-open) .saved-popover::before {
  border-color:rgba(255,255,255,.15);
  background:var(--bg);
}
@media (max-width:640px) {
  .saved-popover {
    position:fixed;
    top:calc(var(--header-height) + 8px);
    right:12px;
    left:12px;
    width:auto;
    max-height:calc(100svh - var(--header-height) - 20px);
  }
  .admin-bar .saved-popover { top:calc(var(--header-height) + 54px); }
  .saved-popover::before { display:none; }
}

@media (max-width: 782px) {
  .admin-bar .font-single-sidebar { top:auto; }
}
@media (max-width: 560px) {
  .font-single-layout { padding-top:24px; padding-bottom:54px; }
  .font-sidebar-panel { padding:15px; }
  .font-meta-list > div { grid-template-columns:82px minmax(0,1fr); gap:10px; }
}

.saved-popover-badges { display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* Font card media layout — v1.2.8
 * Shared by homepage font collection and /fonts/ listings.
 * Order: image -> title -> live font preview -> footer metadata.
 */
.font-grid .font-card,
.home-font-grid .font-card {
  padding:0;
  gap:0;
  overflow:hidden;
}
.font-grid .font-card-media,
.home-font-grid .font-card-media {
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--bg-soft);
  border-bottom:1px solid var(--border);
}
.font-grid .font-card-cover,
.home-font-grid .font-card-cover {
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}
.font-grid .font-card-cover-image,
.font-grid .font-card-cover-placeholder,
.home-font-grid .font-card-cover-image,
.home-font-grid .font-card-cover-placeholder {
  display:block;
  width:100%;
  height:100%;
}
.font-grid .font-card-cover-image,
.home-font-grid .font-card-cover-image {
  object-fit:cover;
  transition:transform .35s ease, filter .35s ease;
}
.font-grid .font-card-cover-placeholder,
.home-font-grid .font-card-cover-placeholder {
  background:
    radial-gradient(circle at 25% 20%, color-mix(in srgb,var(--primary) 14%,transparent), transparent 42%),
    linear-gradient(135deg,var(--bg-soft),color-mix(in srgb,var(--text) 8%,var(--bg-soft)));
}
.font-grid .font-card:hover .font-card-cover-image,
.home-font-grid .font-card:hover .font-card-cover-image {
  transform:scale(1.025);
  filter:saturate(1.03) contrast(1.02);
}
.font-card-media-badge {
  position:absolute;
  z-index:3;
  top:10px;
  display:flex;
  align-items:center;
  pointer-events:auto;
}
.font-card-media-badge--left { left:10px; }
.font-card-media-badge--right { right:10px; }
.font-card-media-badge .font-save-badge,
.font-card-media-badge .font-badge-link {
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.22));
}
.font-grid .font-card-head,
.home-font-grid .font-card-head {
  display:block;
  padding:14px 14px 0;
}
.font-grid .font-card-name,
.home-font-grid .font-card-name {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.font-grid .font-card-preview,
.home-font-grid .font-card-preview {
  margin:10px 14px 0;
  min-height:42px;
  width:auto;
  display:flex;
  align-content:center;
  align-items:center;
  justify-content:flex-start;
}
.font-grid .font-card-foot,
.home-font-grid .font-card-foot {
  margin:10px 14px 0;
  padding:10px 0 14px;
  gap:10px;
  align-items:center;
}
.font-card-foot-left {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
  gap:5px 7px;
}
.font-card-foot-left .font-card-cat {
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.font-card-foot-left .badge-variable,
.font-card-foot-left .badge-multi,
.font-card-foot-left .badge-single {
  flex:0 0 auto;
  font-size:9px;
  padding:2px 6px;
}
.font-card-foot .font-card-meta {
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .font-grid .font-card-cover-image,
  .home-font-grid .font-card-cover-image { transition:none; }
  .font-grid .font-card:hover .font-card-cover-image,
  .home-font-grid .font-card:hover .font-card-cover-image { transform:none; }
}


/* Core WordPress pagination/comments */
.page-links {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:24px;
}
.comments-area { margin-top:40px; margin-bottom:48px; }
.comments-title { margin:0 0 20px; font-size:clamp(22px,3vw,30px); }
.comment-list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.comment-list .children { list-style:none; margin:14px 0 0 24px; padding:0; display:grid; gap:14px; }
.comment-body {
  padding:18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
}
.comment-meta { color:var(--text-soft); font-size:13px; }
.comment-content { margin-top:12px; }
.comment-respond { margin-top:28px; }
.comment-form { display:grid; gap:14px; }
.comment-form p { margin:0; }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text); font:inherit;
}
.comment-form textarea { min-height:140px; resize:vertical; }


/* ============================================================
   WordPress content quality, accessibility and block support
   ============================================================ */

/* Keyboard focus must remain visible even when a component has no custom focus rule. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
}

/* Prose links remain visually identifiable; UI/card/button links keep component styling. */
.entry-content a:not(.btn):not(.wp-element-button):not(.font-badge-link),
.comment-content a:not(.btn):not(.wp-element-button) {
  color:var(--primary);
  text-decoration:underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.16em;
}
.entry-content a:hover,
.comment-content a:hover { text-decoration-thickness:.13em; }

.entry-content,
.comment-content { overflow-wrap:anywhere; }
.entry-content > * + *,
.comment-content > * + * { margin-top:1.1em; }
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 { line-height:1.18; text-wrap:balance; }
.entry-content blockquote,
.comment-content blockquote {
  margin-inline:0; padding:14px 18px; border-inline-start:4px solid var(--primary);
  background:var(--bg-soft); border-radius:0 var(--radius) var(--radius) 0;
}
.entry-content pre,
.comment-content pre {
  max-width:100%; overflow:auto; padding:16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--bg-soft); font-size:.92em;
}
.entry-content code,
.comment-content code { overflow-wrap:anywhere; }
.entry-content table,
.comment-content table { width:100%; border-collapse:collapse; }
.entry-content th,
.entry-content td,
.comment-content th,
.comment-content td { padding:10px 12px; border:1px solid var(--border); text-align:start; }
.entry-content figure,
.comment-content figure { max-width:100%; margin-inline:0; }
.entry-content figcaption,
.comment-content figcaption { margin-top:7px; color:var(--text-soft); font-size:13px; text-align:center; }
.entry-content iframe,
.entry-content video { max-width:100%; }

/* Classic theme support for common Gutenberg alignments and blocks. */
.aligncenter { display:block; margin-inline:auto; }
.alignleft { float:left; margin:0 1.5em 1em 0; }
.alignright { float:right; margin:0 0 1em 1.5em; }
.entry-content::after { content:""; display:table; clear:both; }
.entry-single .entry-content > .alignwide {
  width:min(1100px,calc(100vw - 40px)); max-width:none;
  margin-left:50%; transform:translateX(-50%);
}
.entry-single .entry-content > .alignfull {
  width:100vw; max-width:100vw;
  margin-left:50%; transform:translateX(-50%);
}
.wp-block-image img,
.wp-block-cover,
.wp-block-media-text,
.wp-block-gallery { max-width:100%; }
.wp-block-button__link { border-radius:10px; }
.wp-block-separator { border:0; border-top:1px solid var(--border); }
.wp-block-quote cite { color:var(--text-soft); font-size:.9em; }

/* Author comments are distinguishable without relying on color alone. */
.bypostauthor > .comment-body {
  border-inline-start:4px solid var(--primary);
}

.empty-state { padding:60px 20px; text-align:center; }
.empty-state .search-form { max-width:620px; margin:20px auto 0; }

.error-404 { padding:clamp(72px,12vw,150px) 20px; text-align:center; }
.error-404-inner { max-width:760px; margin-inline:auto; }
.error-404-title { margin:0; font-size:clamp(46px,10vw,96px); line-height:1; letter-spacing:-.05em; }
.error-404-description { margin:18px auto 0; max-width:620px; color:var(--text-soft); }
.error-404 .search-form { margin:28px auto 0; max-width:620px; }
.error-404-home { margin-top:20px; }

/* Preserve native type design when evaluating fonts. */
.font-preview-text,
.specimen-editor-input { font-synthesis:none; }

@media (max-width:680px) {
  .alignleft,
  .alignright { float:none; margin-inline:0; }
  .entry-single .entry-content > .alignwide,
  .entry-single .entry-content > .alignfull {
    width:calc(100vw - 24px); max-width:calc(100vw - 24px);
  }
}

/* Modern rendering optimization for repeated below-the-fold cards. */
@supports (content-visibility:auto) {
  .font-grid .font-card,
  .home-font-grid .font-card,
  .archive-post-grid .home-post-card,
  .archive-mixed-grid > article {
    content-visibility:auto;
    contain-intrinsic-size:auto 420px;
  }
}

/* FREE download gate — optional Donate, server-enforced countdown, License agreement. */
.font-download-entry { display:flex; justify-content:flex-end; margin-left:auto; }
.font-download-gate {
  width:min(640px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); margin:auto; padding:0;
  overflow:auto; border:1px solid var(--border); border-radius:20px; background:var(--bg); color:var(--text);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
}
.font-download-gate::backdrop { background:rgba(8,10,14,.68); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.font-download-gate__inner { padding:24px; }
.font-download-gate__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.font-download-gate__eyebrow { display:block; margin-bottom:6px; color:var(--text-soft); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.font-download-gate__header h2 { margin:0; font-size:clamp(24px,4vw,34px); line-height:1.08; }
.font-download-gate__close {
  display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:0; border:1px solid var(--border);
  border-radius:999px; background:var(--bg-soft); color:var(--text); font:inherit; font-size:24px; line-height:1; cursor:pointer;
}
.font-download-gate__close:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.font-download-gate__body { display:grid; gap:12px; margin-top:22px; }
.font-download-gate__step {
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; padding:16px;
  border:1px solid var(--border); border-radius:14px; background:var(--bg-soft);
}
.font-download-gate__step-number {
  display:grid; place-items:center; width:30px; height:30px; border-radius:999px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:13px; font-weight:800;
}
.font-download-gate__step-content h3 { margin:2px 0 6px; font-size:16px; line-height:1.3; }
.font-download-gate__step-content p { margin:0; color:var(--text-soft); font-size:13px; line-height:1.6; }
.font-download-gate__donate-note { margin-top:7px!important; color:var(--text)!important; }
.font-download-gate__donate-link { margin-top:12px; }
.font-download-gate__donate-unavailable { display:inline-block; margin-top:10px; color:var(--text-soft); font-size:12px; }
.font-download-gate__countdown { font-weight:700; color:var(--text)!important; }
.font-download-gate__progress { height:5px; margin-top:11px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--border) 72%,transparent); }
.font-download-gate__progress > span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#b8860b,#ffd700); transition:width .22s linear; }
.font-download-gate__agreement { display:flex; align-items:flex-start; gap:9px; color:var(--text); font-size:14px; line-height:1.5; cursor:pointer; }
.font-download-gate__agreement input { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:#c99a00; }
.font-download-gate__license-link { display:inline-flex; align-items:baseline; gap:5px; margin-top:10px; color:var(--primary); font-size:13px; text-decoration:underline; text-underline-offset:3px; }
.font-download-gate__license-link:hover { text-decoration-thickness:2px; }
.font-download-gate__footer { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:18px; }
.font-download-gate__status { flex:1 1 auto; min-width:0; margin:0; color:var(--text-soft); font-size:12px; line-height:1.5; }
.font-download-gate__status.is-error { color:#b42318; }
[data-theme="dark"] .font-download-gate__status.is-error { color:#fda29b; }
.font-download-gate__final { flex:0 0 auto; min-width:150px; }
@media (max-width:580px) {
  .font-download-gate__inner { padding:18px; }
  .font-download-gate__step { grid-template-columns:30px minmax(0,1fr); padding:14px; }
  .font-download-gate__footer { align-items:stretch; flex-direction:column; }
  .font-download-gate__final { width:100%; }
  .font-download-entry { width:100%; }
  .font-download-entry .font-download-gate-open { width:100%; }
}