/* ============================================
   GRANDPA EMBROIDERED OUR RAUDSAUM BUNADS
   Editorial Overrides · Vest-Telemark
   Base styles: article-shared.css
   Page prefix: rsm-
   ============================================ */


/* ── Theme tokens (raudsaum red signature) ──
   Scoped to .rsm-page so header/footer keep
   the global gold/aurora identity. */
.rsm-page {
  --rsm-red: #8B2331;
  --rsm-red-deep: #6B1A23;
  --rsm-red-soft: rgba(139, 35, 49, 0.12);
  --rsm-rose: #c4918a;
  --rsm-warm-dark: #1a1410;

  --art-accent: var(--rsm-red);
  --art-accent-dark: var(--rsm-red-deep);
  --art-accent-glow: rgba(139, 35, 49, 0.35);
  --art-accent-subtle: rgba(139, 35, 49, 0.06);
  --art-ornament: var(--rsm-red);
  --art-hero-accent-line: var(--rsm-red);
  --art-subtitle-color: var(--rsm-rose);
}


/* ============================================
   HERO — slow Ken Burns + warmer overlay
   ============================================ */
.rsm-page .art-hero__media img {
  animation: rsmHeroKB 32s ease-out forwards;
}

@keyframes rsmHeroKB {
  0%   { transform: scale(1.10); }
  100% { transform: scale(1); }
}

/* Slightly warmer overlay than default to suit cream + red */
.rsm-page .art-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 20, 16, 0.30) 0%,
    rgba(26, 20, 16, 0.10) 35%,
    rgba(26, 20, 16, 0.55) 100%
  );
}


/* ============================================
   LEAD — disable dropcap because the verbatim
   source begins with an em-dash (dialogue mark);
   ::first-letter would otherwise render the dash
   as a 2-line-tall red bar.
   ============================================ */
.rsm-page .art-lead::first-letter {
  initial-letter: 1;
  -webkit-initial-letter: 1;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  margin-right: 0;
  float: none;
  line-height: inherit;
}


/* ============================================
   PULLQUOTE — "the soul of the article"
   Warm dark background with a red signature line
   ============================================ */
.rsm-soul-quote {
  background: radial-gradient(
      ellipse at top,
      rgba(139, 35, 49, 0.20) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #1a1410 0%, #110c08 100%);
  padding: clamp(4rem, 9vw, 7rem) clamp(2rem, 8vw, 8rem);
  position: relative;
}

/* A small "stitched" ornament above the quote */
.rsm-soul-quote::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rsm-red) 30%,
    var(--rsm-red) 70%,
    transparent 100%
  );
  opacity: 0.85;
}

.rsm-soul-quote .art-pullquote__inner p {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.28;
  color: #fbf9f6;
  letter-spacing: -0.005em;
}

.rsm-soul-quote .art-pullquote__cite {
  color: var(--rsm-rose);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin-top: 1.75rem;
}


/* ============================================
   FACTBOX — Museum plaque variant
   ============================================ */
.rsm-factbox {
  max-width: 720px;
  margin: var(--space-2xl) auto;
  padding: 2.25rem 2.5rem 1.75rem;
  background: linear-gradient(
    180deg,
    rgba(139, 35, 49, 0.05) 0%,
    rgba(255, 255, 255, 0.55) 100%
  );
  border: 1px solid rgba(139, 35, 49, 0.18);
  border-top: 3px solid var(--rsm-red);
  border-left: none;
  border-radius: 4px;
  position: relative;
}

.rsm-factbox__label {
  display: block;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rsm-red);
  font-weight: 600;
  margin-bottom: 0.875rem;
}

.rsm-factbox p {
  color: var(--color-text-primary, #2a2420);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.rsm-factbox p + p {
  margin-top: 0.875rem;
}

.rsm-factbox__source {
  font-size: 0.82rem;
  color: var(--color-text-muted, #666);
  font-style: italic;
}

.rsm-factbox__source a {
  color: var(--rsm-red);
  text-decoration: underline;
  text-decoration-color: rgba(139, 35, 49, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.25s, color 0.25s;
}

.rsm-factbox__source a:hover {
  color: var(--rsm-red-deep);
  text-decoration-color: var(--rsm-red);
}


/* ============================================
   FIGURE — gentle Ken Burns when in view
   Default art-figure has the wrap; we just
   nudge the timing for a calmer feel.
   ============================================ */
.rsm-page .art-figure.is-visible .art-figure__img-wrap img {
  animation-duration: 18s;
}


/* ============================================
   QUOTE — softer left-border tint to harmonize
   with the red accent
   ============================================ */
.rsm-page .art-quote {
  border-left-color: rgba(139, 35, 49, 0.30);
}


/* ============================================
   ANCHOR SCROLLING — smooth jump from closing
   CTA to the Related Articles section
   ============================================ */
.rsm-page {
  scroll-behavior: smooth;
}
.rsm-page #related-articles {
  scroll-margin-top: 100px;
}


/* ============================================
   CLOSING — warm the text tone and tie the
   small separator line into the raudsaum theme
   (default is a teal→pine gradient).
   ============================================ */
.rsm-page .art-closing__text {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
}

.rsm-page .art-closing::before {
  background: linear-gradient(90deg, var(--rsm-rose), var(--rsm-red));
}


/* ============================================
   RESPONSIVE — small adjustments at 480px
   ============================================ */
@media (max-width: 480px) {
  .rsm-soul-quote {
    padding: 3.5rem 1.5rem;
  }
  .rsm-soul-quote::before {
    top: 1.5rem;
    width: 40px;
  }
  .rsm-soul-quote .art-pullquote__inner p {
    font-size: 1.5rem;
    line-height: 1.32;
  }
  .rsm-factbox {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}


/* ============================================
   REDUCED MOTION — respect user preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .rsm-page .art-hero__media img {
    animation: none;
    transform: none;
  }
}