/**
 * home.css — Page Home STG-UI-003
 * Palette : STG tokens (tokens-stg.css) — white/neutral, lime accent.
 * Préfixes : .stg-hero__* (hero), .stg-home-* (shell sections), .hm-* (composants spécifiques).
 */

/* ── Variables locales (palette sémantique Browse héritée) ──────────── */
:root {
  /* Step-grid couleurs par type de track */
  --sg-kick:  var(--stg-accent, #d9f274);
  --sg-snare: #8b8b7f;
  --sg-hihat: #7a8a7a;
  --sg-clap:  #a85630;
  --sg-808:   #5a6b8a;
  --sg-perc:  #7a8a6a;
  --sg-rim:   #8a7a5a;

  /* Thumb types */
  --tm-remake:  #d5c4e0;
  --tm-genre:   #c4d0df;
  --tm-default: var(--stg-paper-deep, #f3f2ee);
}

/* ══════════════════════════════════════════════════════════════════════
   HOME — page wrapper
══════════════════════════════════════════════════════════════════════ */

#page-home {
  background: var(--stg-paper, #ffffff);
  min-height: 100vh;
  color: var(--stg-ink, #161a14);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  padding: var(--sp-5, 24px) var(--sp-6, 32px) var(--sp-9, 96px);
  max-width: 1440px;
  margin: 0 auto;
}

/* ── SVG gooey filter helper ─────────────────────────────────────────── */
.hh-filter-svg {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO — deux colonnes : titre + CTAs | bento tuiles (texte seul)
══════════════════════════════════════════════════════════════════════ */

.stg-hero {
  background: var(--stg-canvas-deep, #2c5230);
  color: var(--stg-ink-on-deep, #f4ecd8);
  border-radius: var(--stg-r-2xl, 40px);
  padding: var(--sp-8, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 1fr);
  gap: var(--sp-7, 48px);
  align-items: stretch;
  min-height: 496px;
  height: 496px;
  margin-bottom: var(--sp-8, 64px);
  overflow: hidden;
}

@media (max-width: 1024px) {
  .stg-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    padding: var(--sp-6, 32px);
  }
}

/* ── Hero left ───────────────────────────────────────────────────────── */
.stg-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.stg-hero__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stg-hero__eyebrow {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stg-ink-on-deep-2, #d9f274);
  margin-bottom: var(--sp-4, 16px);
}

.stg-hero__title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: clamp(3.45rem, 6.8vw, 6.2rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--stg-ink-on-deep, #f4ecd8);
  margin: 0 0 var(--sp-5, 24px);
  max-width: 10.5ch;
  min-height: 2.1em;
}

.stg-hero__title em { font-style: italic; }

.stg-hero__lede {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(0.98rem, 1.08vw, 1.08rem);
  line-height: 1.55;
  color: var(--stg-ink-on-deep-2, #e4dcc6);
}

/* ── Animated slot (typewriter + gooey) ─────────────────────────────── */
.hh-slot {
  display: block;
  position: relative;
  font-style: italic;
  min-height: inherit;
  width: 100%;
}

/* Typewriter mode (default) */
.hh-tw { display: inline; }

.hh-cursor {
  display: none;
  opacity: 0.7;
  animation: hh-blink 1s step-end infinite;
}
@keyframes hh-blink {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0; }
}

/* Gooey wrapper — hidden in TW mode */
.hh-gooey-wrap {
  display: none;
  position: relative;
  filter: url(#hmGooeyFilter);
}

/* Gooey mode: activate wrapper, hide typewriter */
.hh-slot--gooey .hh-tw,
.hh-slot--gooey .hh-cursor { display: none; }
.hh-slot--gooey .hh-gooey-wrap { display: inline-block; }

/* Two morphing spans stacked on top of each other */
.hh-gooey {
  display: inline-block;
  white-space: nowrap;
}
.hh-gooey--pulse {
  animation: hh-word-in 240ms var(--ease, ease-out);
}
.hh-gooey + .hh-gooey {
  position: absolute;
  left: 0; top: 0;
}
@keyframes hh-word-in {
  from { opacity: 0; transform: translateY(0.08em); }
  to   { opacity: 1; transform: translateY(0); }
}

.stg-hero__ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stg-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--stg-r-pill, 9999px);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-1, 120ms) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1, 120ms) var(--ease), filter var(--dur-1, 120ms) var(--ease);
}

.stg-hero__btn--primary {
  background: var(--stg-accent, #d9f274);
  color: var(--stg-ink, #161a14);
}
.stg-hero__btn--primary:hover {
  filter: brightness(0.97);
}

.stg-hero__btn--ghost {
  background: rgba(244, 236, 216, 0.04);
  color: var(--stg-ink-on-deep, #f4ecd8);
  border-color: rgba(244, 236, 216, 0.2);
}
.stg-hero__btn--ghost:hover {
  background: rgba(244, 236, 216, 0.1);
  border-color: rgba(244, 236, 216, 0.3);
}

.stg-hero__btn:focus-visible {
  outline: 3px solid var(--stg-accent, #d9f274);
  outline-offset: 2px;
}

/* Hero bento — labels only (no pad-grid inside tiles) */
.stg-hero__visual {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: var(--sp-3, 12px);
  min-height: 400px;
}

@media (max-width: 1024px) {
  .stg-hero__visual { min-height: 280px; }

  .stg-hero__title {
    font-size: clamp(2.9rem, 11vw, 4.8rem);
    max-width: 100%;
    min-height: 2.2em;
  }

  .stg-hero__lede {
    max-width: 100%;
  }
}

.stg-hero__tile {
  border-radius: var(--stg-r-xl, 32px);
  padding: var(--sp-4, 16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--stg-ink, #161a14);
  transition: transform var(--dur-2, 240ms) var(--ease);
}
.stg-hero__tile:hover { transform: translateY(-2px); }

.stg-hero__tile h3 {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-h3, 1.375rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
.stg-hero__tile h3 em { font-style: italic; }

.stg-hero__tile-meta {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stg-ink-2, #38382f);
}

.stg-hero__tile--a { grid-column: 1 / 4; grid-row: 1 / 4; background: var(--stg-accent, #d9f274); }
.stg-hero__tile--b { grid-column: 4 / 7; grid-row: 1 / 3; background: var(--stg-pop-mint, #b8e6c9); }
.stg-hero__tile--c { grid-column: 4 / 7; grid-row: 3 / 5; background: var(--stg-pop-sky, #b9dee6); }
.stg-hero__tile--d { grid-column: 1 / 3; grid-row: 4 / 7; background: var(--stg-pop-peach, #f6c7b8); }
.stg-hero__tile--e { grid-column: 3 / 7; grid-row: 5 / 7; background: var(--stg-pop-cream, #f4ecd8); }

/* ══════════════════════════════════════════════════════════════════════
   WHAT IS SNAP TO GRID — intro prose after hero
══════════════════════════════════════════════════════════════════════ */

.stg-home-what {
  max-width: 52ch;
  margin: var(--sp-10, 120px) auto;
  padding: 0 var(--sp-4, 16px);
  text-align: center;
}

.stg-home-what__title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-h2, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--stg-ink, #161a14);
  margin: 0 0 var(--sp-5, 24px);
}
.stg-home-what__title em { font-style: italic; }

.stg-home-what__text {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-body-lg, 1.125rem);
  color: var(--stg-ink-2, #38382f);
  line-height: var(--lh-body, 1.6);
  margin: 0 auto;
}
.stg-home-what__text strong {
  color: var(--stg-ink, #161a14);
  font-weight: 600;
}

.stg-home-what__more {
  display: inline-block;
  margin-top: var(--sp-4, 16px);
  color: var(--stg-ink, #161a14);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(22, 26, 20, 0.28);
}
.stg-home-what__more:hover {
  text-decoration-color: var(--stg-ink, #161a14);
}

/* ══════════════════════════════════════════════════════════════════════
   FEATURED THIS WEEK — grille 4 cards
══════════════════════════════════════════════════════════════════════ */

.stg-home-featured {
  margin-bottom: var(--sp-8, 64px);
}

/* Section row header (eyebrow + title + see-all) */
.stg-home-section-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5, 24px);
}

.stg-home-section-title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-h1, clamp(2rem, 4vw, 3.5rem));
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--stg-ink, #161a14);
  margin: var(--sp-2, 8px) 0 0;
}
.stg-home-section-title em { font-style: italic; }

.stg-home-see-all {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 500;
  color: var(--stg-ink, #161a14);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--stg-r-pill, 9999px);
  transition: background var(--dur-1, 120ms) var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.stg-home-see-all:hover { background: var(--stg-paper-deep, #f3f2ee); }

/* 4-col card grid */
.stg-home-card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4, 16px);
}
@media (max-width: 1100px) { .stg-home-card-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .stg-home-card-row { grid-template-columns: repeat(2, 1fr); } }

/* Pattern card (Home featured) */
.hm-card {
  background: var(--stg-paper, #ffffff);
  border-radius: var(--stg-r-xl, 32px);
  padding: var(--sp-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  text-decoration: none;
  color: var(--stg-ink, #161a14);
  box-shadow: var(--stg-lift);
  transition: background var(--dur-2, 240ms) var(--ease), transform var(--dur-2, 240ms) var(--ease), box-shadow var(--dur-2, 240ms) var(--ease);
}
.hm-card:hover { background: var(--stg-pop-cream, #f4ecd8); transform: translateY(-2px); box-shadow: var(--stg-lift-2); }

.hm-card__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--stg-r-lg, 24px);
  position: relative;
  overflow: hidden;
  background: var(--stg-paper, #ffffff);
}
/* Tone backgrounds */
.hm-card__thumb--lime     { background: var(--stg-accent,       #d9f274); }
.hm-card__thumb--mint     { background: var(--stg-pop-mint,     #b8e6c9); }
.hm-card__thumb--sky      { background: var(--stg-pop-sky,      #b9dee6); }
.hm-card__thumb--peach    { background: var(--stg-pop-peach,    #f6c7b8); }
.hm-card__thumb--lavender { background: var(--stg-pop-lavender, #cbb9e0); }
.hm-card__thumb--ink      { background: var(--stg-ink,          #161a14); }
.hm-card__thumb.stg-thumb--has-cover {
  background-color: var(--stg-ink-2, #38382f);
}
.hm-card__thumb.stg-thumb--has-cover .pad-grid {
  display: none;
}

/* pad-grid — 8×4 inset step representation */
.hm-card__thumb .pad-grid {
  position: absolute; inset: 16% 14%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}
.hm-card__thumb .pad-grid i {
  background: rgba(22,26,20,0.12);
  border-radius: 2px;
}
.hm-card__thumb .pad-grid i.on { background: var(--stg-ink, #161a14); }
.hm-card__thumb--ink .pad-grid i { background: rgba(244,236,216,0.15); }
.hm-card__thumb--ink .pad-grid i.on { background: var(--stg-accent, #d9f274); }

/* Play-on-hover button */
.hm-card__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--stg-paper, #ffffff); color: var(--stg-ink, #161a14);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-2, 240ms) var(--ease), transform var(--dur-2, 240ms) var(--ease);
  border: none; cursor: pointer;
  pointer-events: none;
}
.hm-card:hover .hm-card__play { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hm-card__play svg { width: 18px; height: 18px; }

/* Info area */
.hm-card__info {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0 var(--sp-2, 8px) var(--sp-2, 8px);
}
.hm-card__title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-body-lg, 1.125rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.hm-card__title em { font-style: italic; }
.hm-card__creator {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  color: var(--stg-ink-3, #6b6b5f);
}
.hm-card__info .stg-badge { align-self: flex-start; margin-bottom: 2px; }
.hm-card__orig-artist {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem); font-weight: 500;
  color: var(--stg-ink-2, #38382f); margin-top: 1px;
}
.hm-card__remaker {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem); color: var(--stg-ink-3, #6b6b5f);
}
.hm-card__meta {
  display: flex; gap: var(--sp-2, 8px); align-items: center;
  margin-top: var(--sp-2, 8px);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  color: var(--stg-ink-3, #6b6b5f);
  font-variant-numeric: tabular-nums;
}
.hm-card__pill {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  background: var(--stg-paper, #ffffff); color: var(--stg-ink-2, #38382f);
  font-weight: 500;
}

/* Loading / empty state */
.hm-card--skeleton { box-shadow: none; background: var(--stg-paper-deep, #f3f2ee); }
.hm-card--skeleton .hm-card__thumb {
  background: linear-gradient(90deg, var(--stg-paper-deep) 25%, var(--stg-surface-2, #f7f6f1) 50%, var(--stg-paper-deep) 75%);
  background-size: 200% 100%;
  animation: hm-shimmer 1.4s ease infinite;
}
@keyframes hm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Shared badge ──────────────────────────────────────────────────── */
.stg-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--stg-r-pill, 9999px);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.6;
}
.stg-badge--original { background: var(--stg-accent, #d9f274); color: var(--stg-ink, #161a14); }
.stg-badge--remake   { background: var(--stg-ink, #161a14);    color: var(--stg-paper, #ffffff); }

/* ══════════════════════════════════════════════════════════════════════
   TWO WORLDS — bento split
══════════════════════════════════════════════════════════════════════ */

.stg-two-worlds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5, 24px);
  margin-bottom: var(--sp-8, 64px);
}
@media (max-width: 900px) { .stg-two-worlds { grid-template-columns: 1fr; } }

.stg-world {
  border-radius: var(--stg-r-2xl, 40px);
  padding: var(--sp-7, 48px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5, 24px);
  min-height: 420px;
}
.stg-world--mint     { background: var(--stg-pop-mint,     #b8e6c9); }
.stg-world--lavender { background: var(--stg-pop-lavender, #cbb9e0); }

.stg-world__eyebrow {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--stg-ink-2, #38382f);
  display: block;
  margin-bottom: var(--sp-2, 8px);
}

.stg-world h2 {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: clamp(1.75rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 14ch;
  color: var(--stg-ink, #161a14);
}
.stg-world h2 em { font-style: italic; }

.stg-world p {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-body, 1rem);
  color: var(--stg-ink-2, #38382f);
  max-width: 38ch;
  margin: 0;
  line-height: var(--lh-body, 1.55);
}

.stg-world__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stg-world__pill {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--stg-r-pill, 9999px);
  background: rgba(255, 255, 255, 0.5);
  color: var(--stg-ink, #161a14);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 500;
  transition: background var(--dur-1, 120ms) var(--ease);
  user-select: none;
}
.stg-world__pill:hover { background: var(--stg-paper, #ffffff); }
.stg-world__pill--active {
  background: var(--stg-ink, #161a14);
  color: var(--stg-paper, #ffffff);
}

.stg-world__tease {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  min-height: 0;
}

.stg-world__tease-loading,
.stg-world__tease-empty {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  color: var(--stg-ink-2, #38382f);
  margin: 0;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--stg-r-md, 16px);
}

.stg-world__tease-item {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--stg-r-md, 16px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  display: grid;
  grid-template-columns: 36px 1fr max-content;
  gap: var(--sp-3, 12px);
  align-items: center;
  text-decoration: none;
  color: var(--stg-ink, #161a14);
  transition: background var(--dur-1, 120ms) var(--ease);
}
.stg-world__tease-item:hover { background: var(--stg-paper, #ffffff); }

.stg-world__tease-av {
  width: 36px;
  height: 36px;
  border-radius: var(--stg-r-sm, 8px);
  background: var(--stg-ink, #161a14);
  color: var(--stg-paper, #ffffff);
  display: grid;
  place-items: center;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.stg-world__tease-title {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 500;
  color: var(--stg-ink, #161a14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stg-world__tease-sub {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  color: var(--stg-ink-2, #38382f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stg-world__tease-meta {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  color: var(--stg-ink-2, #38382f);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stg-world__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 12px 22px;
  background: var(--stg-ink, #161a14);
  color: var(--stg-paper, #ffffff);
  border-radius: var(--stg-r-sm, 8px);
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--dur-1, 120ms) var(--ease);
}
.stg-world__cta:hover { background: var(--stg-ink-2, #38382f); }

/* ══════════════════════════════════════════════════════════════════════
   HOME CONTENT SHELL
══════════════════════════════════════════════════════════════════════ */

.stg-home-shell {
  max-width: 900px;
  margin: 0 auto;
}

.stg-home-divider {
  height: 1px;
  background: var(--stg-rule, rgba(22,26,20,0.08));
  margin: var(--sp-7, 48px) 0;
}

/* ── Section header ─────────────────────────────────────────────────── */
.stg-home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  margin-bottom: var(--sp-5, 24px);
}

.stg-home-eyebrow {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--stg-ink-3, #6b6b5f);
  margin-bottom: var(--sp-2, 8px);
}

.stg-home-section-head h2 {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-h2, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--stg-ink, #161a14);
  margin: 0;
}
.stg-home-section-head h2 em { font-style: italic; }

.stg-home-link-arrow {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  font-weight: 500;
  color: var(--stg-ink, #161a14);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--stg-r-pill, 9999px);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-1, 120ms) var(--ease);
}
.stg-home-link-arrow:hover { background: var(--stg-paper-deep, #f3f2ee); }

/* ── Forum preview (shell — same tease row as two worlds) ───────────── */
.hm-forum-list { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }

.hm-forum-row {
  background: var(--stg-paper-deep, #f3f2ee);
  border-radius: var(--stg-r-md, 16px);
}
.hm-forum-row:hover { background: var(--stg-pop-cream, #f4ecd8); }

.hm-forum-loading,
.hm-forum-empty {
  font-size: var(--fs-small, 0.875rem);
  color: var(--stg-ink-3, #6b6b5f);
  padding: var(--sp-4, 16px) 0;
  margin: 0;
}

/* ── Updates / Actus ────────────────────────────────────────────────── */
.hm-actus-list { display: flex; flex-direction: column; gap: var(--sp-5, 24px); }

.hm-actu {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-4, 16px) var(--sp-5, 24px);
  padding: var(--sp-4, 16px) var(--sp-5, 24px);
  background: var(--stg-paper-deep, #f3f2ee);
  border-radius: var(--stg-r-lg, 24px);
}

.hm-actu__date {
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-caption, 0.75rem);
  font-weight: 500;
  color: var(--stg-ink-3, #6b6b5f);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 3px;
}

.hm-actu__title {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: var(--fs-body-lg, 1.125rem);
  font-weight: 400;
  color: var(--stg-ink, #161a14);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-2, 8px);
}

.hm-actu__body {
  grid-column: 2;
  font-family: var(--font-ui, "Inter Tight", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  color: var(--stg-ink-2, #38382f);
  line-height: var(--lh-body, 1.55);
  margin: 0;
}