/* Hi-fi variant — refined palette, real type rhythm, no sketchy treatment.
 *
 * CSS vars live on :root so .hf-nav and .hf-foot work on any page (they
 * are rendered globally now). The .hf wrapper still imposes Manrope +
 * paper background on the content area — opt-in via layout='hifi' on
 * the page record.
 */
:root {
  --paper: #faf8f5;
  --paper-2: #f3efe7;
  --ink: #161614;
  --ink-2: #2b2b27;
  --ink-soft: #4a4a47;
  --ink-mute: #87857f;
  --line: #e0dcd2;
  --line-2: #c9c5bd;
  --red: #d60534;
  --red-deep: #a3032a;
}

.hf {
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  position: relative;
  overflow: hidden;
  font-feature-settings: "ss01", "cv11";
}
.hf, .hf * { box-sizing: border-box; }

.hf-serif {
  font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.hf-mono {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* nav — self-contained so it works on any page (rendered globally). */
.hf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 64px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.hf-nav, .hf-nav * { box-sizing: border-box; }
.hf-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.hf-logo img {
  height: 144px;
  width: auto;
  display: block;
}
@media (max-width: 960px) {
  .hf-logo img { height: 96px; }
}
@media (max-width: 560px) {
  .hf-logo img { height: 64px; }
}
.hf-nav ul {
  display: flex; gap: 32px; list-style: none; padding: 0; margin: 0;
  font-size: 14px; color: var(--ink-soft); font-weight: 500;
}
.hf-nav ul li { display:flex; align-items:center; gap:5px; cursor: pointer; }
.hf-nav ul li:hover { color: var(--ink); }

.hf-cta {
  background: var(--red);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.hf-cta:hover { background: var(--red-deep); }
.hf-cta-ghost {
  border: 1.5px solid var(--ink);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.hf-cta-ghost:hover { background: var(--ink); color: #fff; }

/* type scale */
.hf-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
}
.hf-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--ink-mute);
}
.hf-h1 {
  font-family: "Source Serif 4", serif;
  font-size: 84px;
  line-height: 0.96;
  letter-spacing: -0.028em;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.hf-h1 em { font-style: italic; color: var(--ink-soft); font-weight: 400; }
.hf-h2 {
  font-family: "Source Serif 4", serif;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.hf-h2 em { font-style: italic; color: var(--ink-soft); }
.hf-h3 {
  font-family: "Source Serif 4", serif;
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hf-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

/* photo placeholder — refined: warm tonal block w/ subtle gradient hint */
.hf-photo {
  position: relative;
  background:
    radial-gradient(1200px 400px at 80% 0%, rgba(214, 5, 52, 0.04), transparent 60%),
    radial-gradient(900px 600px at 10% 100%, rgba(20, 20, 16, 0.08), transparent 55%),
    linear-gradient(180deg, #d8d3c7 0%, #b8b3a6 100%);
  overflow: hidden;
  isolation: isolate;
}
.hf-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hf-photo .hf-photo-tag {
  position: absolute; left: 16px; bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 2px;
}
.hf-photo.dark { background: linear-gradient(180deg, #2b2b27 0%, #161614 100%); }
.hf-photo.warm { background: linear-gradient(180deg, #c9b89a 0%, #8a7a5e 100%); }
.hf-photo.dusk { background: linear-gradient(180deg, #4a3f33 0%, #1f1813 100%); }
.hf-photo.ivory { background: linear-gradient(180deg, #ece6d8 0%, #cfc7b3 100%); }
.hf-photo.coast { background: linear-gradient(180deg, #6b7d80 0%, #2f3c40 100%); }
.hf-photo.ember { background: linear-gradient(180deg, #c8775a 0%, #6b2f1f 100%); }

/* layout */
.hf-bleed { padding: 80px 64px; }
.hf-row { display: flex; gap: 32px; }

/* card */
.hf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
}
.hf-card.elev {
  box-shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(20,20,16,0.18);
}

/* chips */
.hf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--paper);
  font-weight: 500;
}
.hf-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--red);
  color: #fff;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* arrow */
.hf-arrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.hf-arrow.muted { color: var(--ink-soft); border-color: var(--line-2); }

/* dot */
.hf-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.hf-dot.red { background: var(--red); }
.hf-dot.ink { background: var(--ink); }

/* footer — self-contained so it works on any page (rendered globally). */
.hf-foot {
  background: #161614;
  color: #d8d6cf;
  padding: 80px 64px 40px;
  font-size: 13px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.hf-foot, .hf-foot * { box-sizing: border-box; }
.hf-foot h4 {
  font-family: "Source Serif 4", serif;
  font-size: 15px;
  margin: 0 0 16px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.005em;
}
.hf-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; color: #a8a59f; }
.hf-foot ul li { cursor: pointer; transition: color 0.12s; }
.hf-foot ul li:hover { color: #fff; }
.hf-foot-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid #2a2a26;
  padding-top: 28px;
  margin-top: 28px;
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: #7a7770;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 16px;
}
.hf-foot-social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}
.hf-foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid #2a2a26;
  color: #a8a59f;
  transition: color 0.12s, border-color 0.12s;
}
.hf-foot-social a:hover { color: #fff; border-color: #fff; }
.hf-foot-social svg { width: 18px; height: 18px; }

/* tag floating top-left of artboard (for canvas labelling only) */
.hf-tag {
  position: absolute;
  top: 16px; left: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 10;
  background: rgba(250,248,245,0.85);
  backdrop-filter: blur(4px);
  padding: 4px 8px;
}

/* tabular numerics */
.tab-num { font-variant-numeric: tabular-nums; }

/* dark section */
.hf-dark {
  background: #161614;
  color: #faf8f5;
}
.hf-dark .hf-h2, .hf-dark .hf-h3 { color: #fff; }
.hf-dark .hf-lede, .hf-dark p { color: #a8a59f; }
.hf-dark .hf-eyebrow { color: #87857f; }
.hf-dark .hf-eyebrow::before { background: #87857f; }

/* ====================================================================
 * Production extensions (not in the design canvas — adapt the prototype
 * to real images and a real, scrolling page.)
 * ==================================================================== */

/* swap gradient placeholders for real <img> when present */
.hf-photo { position: relative; }
.hf-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hf-photo > .hf-photo-tag { z-index: 2; }
.hf-photo:has(> img)::after { display: none; }

/* sticky nav on scroll */
.hf > .hf-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(250, 248, 245, 0.92);
}

/* nav dropdowns */
.hf-nav ul li { position: relative; }
.hf-nav .hf-dropdown {
  position: absolute;
  top: calc(100% + 22px);
  left: -18px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 22px;
  min-width: 240px;
  display: none;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 24px 48px -32px rgba(20, 20, 16, 0.18);
  z-index: 60;
}
.hf-nav .hf-dropdown.is-mega {
  left: 50%;
  transform: translateX(-50%);
  min-width: 520px;
  flex-direction: row;
  gap: 48px;
  padding: 24px 32px;
}
.hf-nav .hf-dropdown a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  display: block;
}
.hf-nav .hf-dropdown a:hover { color: var(--red); }
.hf-nav .hf-dropdown .hf-mega-col h5 {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.hf-nav .hf-dropdown .hf-mega-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;
}
.hf-nav ul li:hover > .hf-dropdown,
.hf-nav ul li:focus-within > .hf-dropdown { display: flex; }

/* nav top-level links */
.hf-nav ul li > a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* mobile nav */
.hf-nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
}
@media (max-width: 980px) {
  .hf-nav { padding: 8px 24px; gap: 14px; flex-wrap: wrap; }
  .hf-nav .hf-cta { padding: 8px 14px; font-size: 12px; }
  .hf-nav ul {
    display: none;
    width: 100%;
    flex-direction: column;
    border-top: 1px solid var(--line);
    padding: 18px 0 0;
    margin-top: 14px;
    gap: 14px;
  }
  .hf-nav.is-open ul { display: flex; }
  .hf-nav .hf-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line);
    padding: 8px 14px;
    margin-top: 4px;
    min-width: 0;
  }
  .hf-nav-toggle { display: inline-flex; }
  .hf-nav .hf-dropdown.is-mega { flex-direction: column; min-width: 0; gap: 18px; }
}

/* responsive bleed padding + type */
@media (max-width: 980px) {
  .hf-bleed { padding: 56px 24px; }
  .hf-h1 { font-size: 56px; }
  .hf-h2 { font-size: 32px; }
  .hf-foot { grid-template-columns: 1fr 1fr; gap: 40px; padding: 56px 24px 32px; }
}
@media (max-width: 640px) {
  .hf-h1 { font-size: 44px; }
  .hf-h2 { font-size: 26px; }
  .hf-foot { grid-template-columns: 1fr; }
}

/* ====================================================================
 * Mobile inline-grid overrides
 *
 * The page body uses inline `style="grid-template-columns: …"` for
 * almost every section grid. Inline styles can't carry media queries,
 * so without these overrides the desktop grids stay locked on mobile
 * — and .hf has overflow:hidden, which means columns that don't fit
 * get *clipped*, not wrapped. That's why the 3rd pricing tier and
 * 4th tech card were invisible on phones.
 *
 * Attribute selectors + !important override the inline rule. Patterns
 * cover every grid template I generate from PHP and the Python
 * builders. Keep this list in sync when new patterns are added.
 * ==================================================================== */
@media (max-width: 980px) {
  /* Wide multi-col grids (3/4/5/8 cols) collapse to 2 cols on tablet */
  .hf [style*="grid-template-columns:repeat(4,1fr)"],
  .hf [style*="grid-template-columns: repeat(4,1fr)"],
  .hf [style*="grid-template-columns:repeat(4, 1fr)"],
  .hf [style*="grid-template-columns:repeat(5,1fr)"],
  .hf [style*="grid-template-columns: repeat(5, 1fr)"],
  .hf [style*="grid-template-columns:repeat(8,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Asymmetric two-col splits and 3-col portfolio stack */
  .hf [style*="grid-template-columns:1.4fr"],
  .hf [style*="grid-template-columns: 1.4fr"],
  .hf [style*="grid-template-columns:1.5fr"],
  .hf [style*="grid-template-columns: 1.5fr"],
  .hf [style*="grid-template-columns:1.2fr"],
  .hf [style*="grid-template-columns: 1.2fr"],
  .hf [style*="grid-template-columns:1.3fr"],
  .hf [style*="grid-template-columns: 1.3fr"],
  .hf [style*="grid-template-columns:1.05fr"],
  .hf [style*="grid-template-columns: 1.05fr"],
  .hf [style*="grid-template-columns:1fr 1fr"],
  .hf [style*="grid-template-columns: 1fr 1fr"],
  .hf [style*="grid-template-columns:2fr 1fr"],
  .hf [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* .hf-row (audience cards) — stack instead of flex-row */
  .hf .hf-row { flex-direction: column !important; }
  /* Hi-fi nav layout already handled by .hf-nav rules above */

  /* Photo heights — drop the inline `height: 460px / 420px / 280px`
   * to something the viewport can actually show */
  .hf .hf-photo[style*="height:460px"],
  .hf .hf-photo[style*="height: 460px"] { height: 320px !important; }
  .hf .hf-photo[style*="height:420px"],
  .hf .hf-photo[style*="height: 420px"] { height: 280px !important; }
  .hf .hf-photo[style*="height:280px"],
  .hf .hf-photo[style*="height: 280px"] { height: 220px !important; }
  .hf .hf-photo[style*="height:220px"],
  .hf .hf-photo[style*="height: 220px"] { height: 180px !important; }

  /* Wide tables — let them scroll horizontally instead of overflow */
  .hf table { display: block; overflow-x: auto; max-width: 100%; }

  /* Final CTA giant H2 — shrink */
  .hf-bleed.hf-dark .hf-serif[style*="font-size:72px"],
  .hf-bleed.hf-dark .hf-serif[style*="font-size: 72px"] {
    font-size: 48px !important;
    line-height: 1.04 !important;
  }
  .hf-bleed.hf-dark .hf-serif[style*="font-size:64px"],
  .hf-bleed.hf-dark .hf-serif[style*="font-size: 64px"] {
    font-size: 44px !important;
    line-height: 1.04 !important;
  }

  /* Trust-strip horizontal partner row — stack center */
  .hf-bleed[style*="display:flex"][style*="space-between"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
}

@media (max-width: 640px) {
  /* On phones, every multi-col grid is 1 col */
  .hf [style*="grid-template-columns:repeat(2,1fr)"],
  .hf [style*="grid-template-columns: repeat(2,1fr)"],
  .hf [style*="grid-template-columns:repeat(3,1fr)"],
  .hf [style*="grid-template-columns: repeat(3,1fr)"],
  .hf [style*="grid-template-columns:repeat(3, 1fr)"],
  .hf [style*="grid-template-columns:repeat(4,1fr)"],
  .hf [style*="grid-template-columns: repeat(4,1fr)"],
  .hf [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighter padding on .hf-bleed */
  .hf-bleed { padding: 40px 18px !important; }
  /* Hero photo — smaller still */
  .hf .hf-photo[style*="height:460px"],
  .hf .hf-photo[style*="height: 460px"] { height: 260px !important; }
  .hf .hf-photo[style*="height:420px"],
  .hf .hf-photo[style*="height: 420px"] { height: 240px !important; }
  /* Stat numbers smaller */
  .hf .hf-serif.tab-num[style*="font-size:36px"] { font-size: 26px !important; }
  /* Tech-strip card padding */
  .hf-dark [style*="padding:32px 28px 36px"] { padding: 24px 20px 28px !important; }
}

/* Always: allow horizontal scrolling instead of clipping on .hf wrapper */
.hf { overflow-x: clip; }

/* utilities */
.hf-grid { display: grid; }
.hf-stack { display: flex; flex-direction: column; }
a.hf-arrow { text-decoration: none; }
a.hf-arrow:hover { color: var(--red); border-color: var(--red); }

/* ====================================================================
 * .hf-prose — readable article body. Used inside blog posts where the
 * body content has its own h2/h3/p/ul/img markup (often inherited from
 * a WP export). Applies the type rhythm + spacing without forcing the
 * author to adopt our utility classes.
 * ==================================================================== */
.hf-prose {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
}
.hf-prose > * + * { margin-top: 1.1em; }
.hf-prose h2 {
  font-family: "Source Serif 4", serif;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}
.hf-prose h3 {
  font-family: "Source Serif 4", serif;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}
.hf-prose h4 {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.4em;
  margin-bottom: 0.3em;
}
.hf-prose p { color: var(--ink-soft); }
.hf-prose strong { color: var(--ink); font-weight: 600; }
.hf-prose a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hf-prose a:hover { color: var(--red-deep); }
.hf-prose ul, .hf-prose ol {
  padding-left: 1.3em;
  color: var(--ink-soft);
}
.hf-prose ul li, .hf-prose ol li { padding-left: 0.4em; margin: 0.35em 0; }
.hf-prose ul { list-style: none; padding-left: 0; }
.hf-prose ul li::before {
  content: "—";
  color: var(--red);
  margin-right: 0.6em;
  font-weight: 600;
}
.hf-prose ol { list-style: decimal; }
.hf-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2em auto;
  border: 1px solid var(--line);
}
.hf-prose blockquote {
  border-left: 3px solid var(--red);
  padding: 0.4em 0 0.4em 1.4em;
  margin: 1.6em 0;
  font-family: "Source Serif 4", serif;
  font-style: italic;
  font-size: 1.1em;
  color: var(--ink);
}
.hf-prose hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.4em 0;
}
.hf-prose code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--ink);
}

/* Blog index — article card grid */
.hf-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 980px) { .hf-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hf-blog-grid { grid-template-columns: 1fr; } }
.hf-blog-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.2s;
}
.hf-blog-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.hf-blog-card .hf-photo { height: 220px; flex-shrink: 0; }
.hf-blog-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hf-blog-card-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.hf-blog-card-title {
  font-family: "Source Serif 4", serif;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 12px;
}
.hf-blog-card-excerpt {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}
.hf-blog-card-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hf-blog-card-foot .hf-arrow {
  color: var(--ink);
  border-color: var(--ink);
  font-size: 11px;
}
.hf-blog-card:hover .hf-arrow {
  color: var(--red);
  border-color: var(--red);
}

/* Article hero meta strip */
.hf-article-meta {
  display: flex;
  gap: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 24px;
  flex-wrap: wrap;
}
.hf-article-meta .sep { color: var(--line-2); }