/* ── Back bar ───────────────────────────── */
  .st-back-bar {
    background: #0C0A3E;
    border-bottom: 1px solid rgba(168,156,237,0.2);
    padding: 14px 24px;
    font-family: 'DM Sans', sans-serif;
  }
  .st-back-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .st-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 12px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #A89CED;
    text-decoration: none;
    transition: color 0.15s;
  }
  .st-back-link:hover { color: #CCFF33 !important; }
  .st-back-arrow { font-size: 14px; }
  .st-back-sep { color: rgba(168,156,237,0.3); font-size: 12px; }
  .st-back-current {
    font: 600 12px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(238,235,211,0.4);
  }

  /* ── Hero ───────────────────────────────── */
  .st-hero {
    background: #0C0A3E;
    padding: 72px 24px 0;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
  }
  .st-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 56px;
  }
  .st-hero-label {
    font: 600 11px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #A89CED;
    margin-bottom: 28px;
  }
  .st-hero-title {
    display: block;
    margin: 0 0 32px;
    line-height: 0.88;
  }
  .st-hero-line1,
  .st-hero-line2,
  .st-hero-line3 {
    display: block;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: #EEEBD3;
  }
  .st-hero-line1 { font-size: clamp(72px, 12vw, 140px); }
  .st-hero-line2 { font-size: clamp(44px, 7vw, 88px); color: rgba(238,235,211,0.3); padding-left: clamp(20px, 4vw, 60px); }
  .st-hero-line3 { font-size: clamp(72px, 12vw, 140px); color: #CCFF33 !important; }

  .st-hero-sub {
    font: 400 18px/1.6 'DM Sans';
    color: rgba(238,235,211,0.6);
    max-width: 560px;
    margin: 0 0 40px;
  }
  .st-hero-count {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    background: rgba(204,255,51,0.08);
    border: 1px solid rgba(204,255,51,0.2);
    padding: 12px 20px;
  }
  .st-hero-count-num {
    font: 800 28px/1 'DM Sans';
    color: #CCFF33 !important;
    letter-spacing: -0.03em;
  }
  .st-hero-count-label {
    font: 400 13px/1 'DM Sans';
    color: rgba(238,235,211,0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .st-hero-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(204,255,51,0.6) 0%, rgba(168,156,237,0.2) 50%, transparent 100%);
    margin-top: 0;
  }

  /* ── Filters ────────────────────────────── */
  .st-filters {
    background: #0C0A3E;
    padding: 0 24px 40px;
    font-family: 'DM Sans', sans-serif;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(168,156,237,0.15);
  }
  .st-filters-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .st-filters-track {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 20px;
  }
  .st-filter-btn {
    font: 600 11px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 10px 20px;
    border: 1px solid rgba(168,156,237,0.3);
    background: transparent;
    color: rgba(238,235,211,0.5);
    cursor: pointer;
    transition: all 0.15s;
  }
  .st-filter-btn:hover {
    border-color: rgba(204,255,51,0.5);
    color: #CCFF33 !important;
  }
  .st-filter-btn--active {
    background: #CCFF33;
    border-color: #CCFF33 !important;
    color: #0C0A3E;
  }
  .st-filter-btn--active:hover {
    background: #d4ff55;
    border-color: #d4ff55;
    color: #0C0A3E;
  }

  /* ── Featured story ─────────────────────── */
  .st-featured-section {
    background: #EEEBD3;
    padding: 56px 24px 0;
    font-family: 'DM Sans', sans-serif;
  }
  .st-featured-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
    border-top: 3px solid #0C0A3E;
    padding-top: 40px;
  }
  .st-featured-aside { position: sticky; top: 100px; }
  .st-featured-marker {
    font: 700 10px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: #CCFF33;
    color: #0C0A3E;
    display: inline-block;
    padding: 6px 10px;
    margin-bottom: 20px;
  }
  .st-featured-category {
    font: 600 11px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #A89CED;
    margin-bottom: 16px;
  }
  .st-featured-byline { display: flex; flex-direction: column; gap: 6px; }
  .st-name {
    font: 700 14px/1 'DM Sans';
    color: #0C0A3E;
    display: block;
  }
  .st-date {
    font: 400 12px/1 'DM Sans';
    color: rgba(12,10,62,0.4);
    display: block;
  }

  .st-featured-card {
    background: #fff;
    padding: 48px 48px 40px;
    margin-bottom: 56px;
    position: relative;
  }
  .st-featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #CCFF33;
  }
  .st-featured-title {
    font: 800 clamp(22px,3vw,32px)/1.15 'DM Sans';
    color: #0C0A3E;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    padding: 0;
    border: none;
  }
  .st-featured-excerpt {
    font: 400 17px/1.7 'DM Sans';
    color: rgba(12,10,62,0.7);
    margin: 0 0 32px;
  }
  .st-featured-read {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 700 13px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0C0A3E;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid #CCFF33;
    transition: border-color 0.15s, color 0.15s;
  }
  .st-featured-read:hover { border-color: #A89CED; color: #A89CED; }
  .st-read-arrow { transition: transform 0.15s; }
  .st-featured-read:hover .st-read-arrow { transform: translateX(4px); }

  /* ── Story grid ─────────────────────────── */
  .st-grid-section {
    background: #EEEBD3;
    padding: 0 24px 80px;
    font-family: 'DM Sans', sans-serif;
  }
  .st-grid-inner { max-width: 1200px; margin: 0 auto; }
  .st-grid-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 48px 0 32px;
    border-top: 1px solid rgba(12,10,62,0.12);
  }
  .st-grid-title {
    font: 800 18px/1 'DM Sans';
    color: #0C0A3E;
    letter-spacing: -0.03em;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .st-grid-showing {
    font: 400 12px/1 'DM Sans';
    color: rgba(12,10,62,0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .st-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }

  .st-card {
    background: #fff;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 3px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
  }
  .st-card:hover {
    border-top-color: #CCFF33 !important;
    box-shadow: 0 8px 32px rgba(12,10,62,0.08);
    z-index: 1;
  }
  /* Offset alternating cards for editorial rhythm */
  .st-card:nth-child(even) { margin-top: 24px; }

  .st-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .st-card-category {
    font: 600 10px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #A89CED;
    padding: 4px 8px;
    border: 1px solid rgba(168,156,237,0.3);
  }
  .st-card-date {
    font: 400 11px/1 'DM Sans';
    color: rgba(12,10,62,0.35);
  }
  .st-card-title {
    font: 700 clamp(16px,1.8vw,20px)/1.25 'DM Sans';
    color: #0C0A3E;
    letter-spacing: -0.025em;
    margin: 0;
    padding: 0;
    border: none;
    flex: 1;
  }
  .st-card-excerpt {
    font: 400 14px/1.6 'DM Sans';
    color: rgba(12,10,62,0.6);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .st-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(12,10,62,0.08);
  }
  .st-card-name {
    font: 600 12px/1 'DM Sans';
    color: rgba(12,10,62,0.5);
  }
  .st-card-read {
    font: 700 11px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0C0A3E;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .st-card:hover .st-card-read { opacity: 1; }

  /* Load more */
  .st-load-more {
    display: flex;
    justify-content: center;
    padding-top: 48px;
  }
  .st-load-btn {
    font: 700 12px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #0C0A3E;
    background: transparent;
    border: 2px solid rgba(12,10,62,0.2);
    padding: 18px 40px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .st-load-btn:hover {
    border-color: #0C0A3E;
    background: #0C0A3E;
    color: #CCFF33 !important;
  }

  /* ── Share CTA ──────────────────────────── */
  /* ── HAIR STORIES FEATURE ──────────────────────────── */
  .st-feature {
    background: #0C0A3E;
    padding: 64px 24px;
  }
  .st-feature-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: center;
  }
  .st-feature-label {
    font: 800 clamp(28px,4vw,40px)/0.9 'DM Sans', sans-serif;
    color: #CCFF33 !important;
    letter-spacing: -0.03em;
  }
  .st-feature-title {
    font: 800 clamp(28px,4vw,40px)/0.9 'DM Sans', sans-serif !important;
    color: #EEEBD3 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 16px !important;
  }
  .st-feature-desc {
    font: 400 17px/1.6 'DM Sans', sans-serif !important;
    color: rgba(238,235,211,0.65) !important;
    margin: 0 0 28px !important;
    max-width: 540px;
  }
  .st-feature-btn {
    display: inline-block;
    background: #CCFF33;
    color: #0C0A3E !important;
    font: 700 13px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 32px;
    text-decoration: none !important;
    transition: background 0.2s;
  }
  .st-feature-btn:hover { background: #ffffff; }
  @media (max-width: 700px) {
    .st-feature-inner { grid-template-columns: 1fr; gap: 24px; }
  }

  .st-share {
    background: #0C0A3E;
    padding: 80px 24px;
    font-family: 'DM Sans', sans-serif;
  }
  .st-share-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
  }
  .st-share-label {
    font: 600 11px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #A89CED;
    margin-bottom: 20px;
  }
  .st-share-title {
    font: 800 clamp(52px, 8vw, 96px)/0.88 'DM Sans';
    color: #CCFF33 !important;
    letter-spacing: -0.045em;
    margin: 0;
  }
  .st-share-desc {
    font: 400 18px/1.7 'DM Sans';
    color: rgba(238,235,211,0.7);
    margin: 0 0 32px;
  }
  .st-share-points {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .st-share-points li {
    font: 400 15px/1.4 'DM Sans';
    color: rgba(238,235,211,0.55);
    padding-left: 20px;
    position: relative;
  }
  .st-share-points li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: #A89CED;
  }
  .st-share-btn {
    display: inline-block;
    background: #CCFF33;
    color: #0C0A3E;
    font: 700 13px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 20px 44px;
    text-decoration: none;
    margin-bottom: 24px;
    transition: background 0.15s;
  }
  .st-share-btn:hover { background: #d4ff55; }
  .st-share-note {
    font: 400 13px/1.6 'DM Sans';
    color: rgba(238,235,211,0.35);
    margin: 0;
  }
  .st-share-link {
    color: rgba(238,235,211,0.55);
    text-decoration: underline;
    text-decoration-color: rgba(168,156,237,0.4);
    transition: color 0.15s;
  }
  .st-share-link:hover { color: #A89CED; }

  /* ── Empty state ────────────────────────── */
  .st-empty-state {
    background: #fff;
    border: 1.5px dashed rgba(12,10,62,0.18);
    padding: 64px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 56px;
  }
  .st-empty-icon {
    font-size: 28px;
    color: #A89CED;
    line-height: 1;
  }
  .st-empty-heading {
    font: 700 24px/1.2 'DM Sans';
    color: #0C0A3E;
    margin: 0;
    letter-spacing: -0.02em;
  }
  .st-empty-body {
    font: 400 16px/1.65 'DM Sans';
    color: rgba(12,10,62,0.65);
    margin: 0;
    max-width: 580px;
  }
  .st-empty-link {
    display: inline-block;
    margin-top: 8px;
    font: 700 13px/1 'DM Sans';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #0C0A3E;
    text-decoration: none;
    border-bottom: 2px solid #CCFF33;
    padding-bottom: 4px;
    transition: border-color 0.15s, color 0.15s;
    align-self: flex-start;
  }
  .st-empty-link:hover {
    color: #A89CED;
    border-color: #A89CED;
  }

  /* ── Story cards ────────────────────────── */
  .st-stories-more { margin-top: 8px; }
  .st-story-card {
    border-left: 4px solid #CCFF33;
    background: #F8F7F0;
    padding: 36px 36px 28px;
    margin-bottom: 32px;
    border-radius: 0 4px 4px 0;
  }
  .st-story-card--alt {
    border-left-color: #A89CED;
    background: #F3F1FC;
  }
  .st-story-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .st-story-name {
    font: 700 16px/1 'DM Sans', sans-serif;
    color: #0C0A3E;
  }
  .st-story-loc {
    font: 400 12px/1 'DM Sans', sans-serif;
    color: rgba(12,10,62,0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .st-story-tag {
    font: 600 11px/1 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(12,10,62,0.35);
    margin-left: auto;
  }
  .st-story-quote {
    font: 400 17px/1.7 'DM Sans', sans-serif;
    color: rgba(12,10,62,0.8);
    margin: 0;
    border: none !important;
    padding: 0 !important;
    quotes: none !important;
  }

  /* ── Responsive ─────────────────────────── */
  @media (max-width: 1024px) {
    .st-grid { grid-template-columns: repeat(2, 1fr); }
    .st-share-inner { grid-template-columns: 1fr; gap: 48px; }
  }

  @media (max-width: 768px) {
    .st-hero { padding: 48px 20px 0; }
    .st-hero-line2 { padding-left: 0; }
    .st-filters { padding: 0 20px 24px; position: static; }
    .st-filters-track { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
    .st-filter-btn { white-space: nowrap; flex-shrink: 0; }
    .st-featured-section { padding: 40px 20px 0; }
    .st-featured-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; }
    .st-featured-aside { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
    .st-featured-card { padding: 32px 24px; }
    .st-grid-section { padding: 0 20px 56px; }
    .st-grid { grid-template-columns: 1fr; }
    .st-card:nth-child(even) { margin-top: 0; }
    .st-card-read { opacity: 1; }
    .st-share { padding: 60px 20px; }
    .st-share-inner { gap: 40px; }
  }