/* ============================================================
   RIFF — Design System Overrides
   Normalizes Tilda export to single typography + color system.
   Loaded via <link> after Tilda CSS; high specificity via #allrecords.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  --riff-amber: #ffb62e;
  --riff-amber-soft: #d99826;
  --riff-bg-dark: #111111;
  --riff-bg-light: #f2f2f2;
  --riff-text-dark: #111111;
  --riff-text-light: #ffffff;
  --riff-text-muted: #6b6b6b;
  --riff-accent-red: #c40000;
}

/* ---- 1. Unified SECTION EYEBROWS (small amber labels) ----
   Targets:
   - .t473__title  (e.g. "About", "award winners", "what are we doing?")
   - .t026__title  (e.g. "WHEN WILL BE RIFF EVENT?", "CATEGORIES", "RULES")
   All forced to: 14px / weight 700 / UPPERCASE / amber / wide letter-spacing.
*/
#allrecords .t473__title,
#allrecords .t026__title,
#allrecords .t026__title.t-text {
  font-family: TildaSans, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--riff-amber) !important;
  line-height: 1.3 !important;
  margin-bottom: 18px !important;
}

/* ---- 2. Unified SECTION TITLES (large headings 30-50px) ----
   Targets large headings across mixed Tilda blocks.
   Forced to: 42px / weight 700 / UPPERCASE / consistent colour by ctx.
*/
#allrecords .t-section__title,
#allrecords .t574__title,
#allrecords .js-block-header-title {
  font-family: TildaSans, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  margin-bottom: 24px !important;
}

@media screen and (max-width: 640px) {
  #allrecords .t-section__title,
  #allrecords .t574__title,
  #allrecords .js-block-header-title {
    font-size: 30px !important;
  }
}

/* Section titles on dark bg → amber. */
#allrecords [data-bg-color="#000000"] .t-section__title,
#allrecords [data-bg-color="#111111"] .t-section__title,
#allrecords [style*="background-color:#000000"] .t-section__title,
#allrecords [style*="background-color:#111111"] .t-section__title,
#allrecords .t574__title {
  color: var(--riff-amber) !important;
}

/* Section titles on light bg → dark text (kept readable). */
#allrecords [data-bg-color="#ffffff"] .t-section__title,
#allrecords [data-bg-color="#f2f2f2"] .t-section__title,
#allrecords [style*="background-color:#ffffff"] .t-section__title,
#allrecords [style*="background-color:#f2f2f2"] .t-section__title,
#allrecords [data-bg-color="#ffffff"] .js-block-header-title,
#allrecords [data-bg-color="#f2f2f2"] .js-block-header-title {
  color: var(--riff-text-dark) !important;
}

/* ---- 3. Hero title (the one massive 72px) — leave alone but lock weight/transform ---- */
#allrecords .t216__title.t-title_xl {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
}

/* ---- 4. Body descriptions — unify weight + tracking ---- */
#allrecords .t-section__descr,
#allrecords .t473__descr,
#allrecords .t026__descr,
#allrecords .t574__text {
  font-family: TildaSans, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

/* On dark bg → light muted text. */
#allrecords [data-bg-color="#000000"] .t-section__descr,
#allrecords [data-bg-color="#111111"] .t-section__descr,
#allrecords .t574__text {
  color: #cfcfcf !important;
}

/* ---- 5. Card titles — single 22px / weight 700 ---- */
#allrecords .t-card__title,
#allrecords .t-card__title.t-name_md,
#allrecords .t-feed__post-title,
#allrecords .js-feed-post-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.005em !important;
}

@media screen and (max-width: 640px) {
  #allrecords .t-card__title,
  #allrecords .t-feed__post-title {
    font-size: 19px !important;
  }
}

/* Card descriptions — WCAG body 16px floor */
#allrecords .t-card__descr,
#allrecords .t-card__descr.t-descr_sm,
#allrecords .t-feed__post-descr,
#allrecords .js-feed-post-descr {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--riff-text-muted) !important;
}

/* Feed dates — Tilda renders these at 10px (way too small). Lift to 13px label scale. */
#allrecords .t-feed__post-date,
#allrecords .js-feed-post-date,
#allrecords .t-feed__post-parts-date-row .t-uptitle {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: #888888 !important;
}

/* Generic small Tilda descriptor variants — enforce 16px body floor */
#allrecords .t-descr_xxs,
#allrecords .t-descr_xs,
#allrecords .t-descr_sm,
#allrecords .t-text_xs,
#allrecords .t-text_md { font-size: 16px !important; line-height: 1.55 !important; }

/* My Official-Selection placeholder ("No poster available") — bump to 14px */
#allrecords .ofsl-empty span {
  font-size: 14px !important;
}

/* ---- 6. Buttons — consistent shape, no bubbly radius ---- */
#allrecords .t-btn,
#allrecords .t-btnflex {
  border-radius: 2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

#allrecords .t-btn:hover,
#allrecords .t-btnflex:hover {
  transform: translateY(-1px) !important;
}

/* ---- 7. Section background normalization ----
   Tilda mixes #000 / #111 / #fff / #f2f2f2 — collapse to 2 tones only:
   dark = #111111, light = #f2f2f2 (white is fine in places where contrast matters).
*/
#allrecords [data-bg-color="#000000"] {
  background-color: var(--riff-bg-dark) !important;
}

/* ---- 8. Hide stale "happy talk" blocks if you want them gone later ----
   (currently disabled — uncomment IDs of records you want removed)
*/
/*
#rec559536989, #rec913664326 { display: none !important; }
*/

/* ---- 9. Inter-section rhythm — equalize vertical padding ---- */
#allrecords .t-rec {
  /* let Tilda padding-top/padding-bottom stand; nothing to override here without breaking */
}

/* ---- 10. Mobile spacing fix — Tilda's t-prefix_2 / t-prefix_3 jumps cause squeezed text ---- */
@media screen and (max-width: 640px) {
  #allrecords .t-col {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---- 11. Curly quotes for content (visual polish) ---- */
#allrecords .t-descr p,
#allrecords .t-text p {
  quotes: "\201C" "\201D" "\2018" "\2019";
}