/* today-ribbon.css - the Today Ribbon: a manuscript rubric at the hero-to-vellum
   transition, not another card panel. One horizontal strip on desktop (date · event
   · lamp, divided by hairlines), a single vertical reading column on phones. Reuses
   the existing codex tokens (home.css) and the living-time season tokens
   (living-time.css) - no new colours invented. */

#today-ribbon {
  background: var(--year-vellum, var(--codex-vellum, #F3E9D2));
  border-top: 1px solid rgba(42,36,25,.14);
  border-bottom: 1px solid rgba(42,36,25,.14);
  padding: 22px clamp(16px, 4vw, 48px);
}

#today-ribbon[hidden] { display: none; }

.today-ribbon-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.today-ribbon-inner > div {
  flex: 1 1 0;
  padding: 0 clamp(14px, 2.4vw, 28px);
  min-width: 0;
}

.today-ribbon-inner > div + div {
  border-left: 1px solid rgba(42,36,25,.16);
}

.tr-kicker {
  display: block;
  font-family: var(--utility);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--year-pigment, var(--codex-gold-deep));
  margin-bottom: .4em;
}

.tr-hebrew {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: var(--codex-ink, #2A2419);
}

.tr-event-title,
.tr-lamp-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--codex-ink, #2A2419);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.tr-event-title:hover,
.tr-lamp-title:hover { border-bottom-color: currentColor; }

.tr-event-scope {
  display: inline-block;
  font-family: var(--utility);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--year-pigment, var(--codex-gold-deep));
  margin-top: .35em;
}

.tr-event-note,
.tr-lamp-reason {
  font-family: var(--body);
  font-size: .88rem;
  line-height: 1.4;
  color: rgba(42,36,25,.82);
  margin: .4em 0 0;
}

.tr-event-source {
  font-family: var(--utility);
  font-size: .74rem;
  color: rgba(42,36,25,.65);
  margin: .5em 0 0;
}
.tr-event-source a {
  color: inherit;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.tr-caveats {
  font-family: var(--utility);
}
.tr-caveat-line {
  font-size: .72rem;
  line-height: 1.45;
  color: rgba(42,36,25,.6);
  margin: 0 0 .5em;
}
.tr-caveat-line:last-child { margin-bottom: 0; }

/* Phones: vertical reading order, hairlines become horizontal rules. */
@media (max-width: 760px) {
  .today-ribbon-inner {
    flex-direction: column;
    gap: 18px;
  }
  .today-ribbon-inner > div {
    padding: 0;
  }
  .today-ribbon-inner > div + div {
    border-left: none;
    border-top: 1px solid rgba(42,36,25,.16);
    padding-top: 18px;
  }
}

/* The wave "shore" ornament and the vellum section's lead-in padding
   (home.css .shore / .colophon) were tuned for a direct hero-to-vellum jump.
   With the ribbon now sitting in between, that full-height wave plus its
   9vh lead-in reads as an oversized gap before the next section - not the
   restrained rule/ornament the house style calls for. Trimmed here, scoped
   to this specific ribbon-to-page-south adjacency only, so home.css (shared,
   and edited by other sessions) is left untouched. No motion involved, so
   there is nothing for prefers-reduced-motion to switch off. */
#today-ribbon + .page-south .shore {
  height: clamp(40px, 8vh, 110px);
}

#today-ribbon + .page-south .colophon {
  padding-top: clamp(24px, 4vh, 56px);
}

@media (max-width: 760px) {
  #today-ribbon + .page-south .shore {
    height: clamp(28px, 5vh, 64px);
  }
  #today-ribbon + .page-south .colophon {
    padding-top: clamp(20px, 3vh, 40px);
  }
}

/* Guided-journey invitation at the foot of the ribbon */
.tr-journey-link {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--utility);
  font-size: .85rem;
  color: var(--codex-gold-deep, #9A7B33);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.tr-journey-link:hover { color: var(--ink, #1c1c1c); }