/* The Marquee: theatrical, ordered, cream and plum with gold rules. */
:root {
  --purple: #380052; /* the plum of the Policy Advisement band on bhtota.org/membership */
  --purple-deep: #280039;
  --purple-hover: #4e0f6e;
  --card-radius: 2px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-caps: 'Cinzel', 'Playfair Display', serif;
  --font-body: 'Lato', system-ui, sans-serif;
  --cream: #f8f4ec;
  --radius: 2px;
}
.nav-link { font-family: var(--font-display); font-size: 17px; }
.btn-donate { background: var(--gold); color: #fff; padding: 14px 30px; }
.btn-donate:hover { background: var(--gold-deep); }
.caps { font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.caps-sub { display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--font-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--purple-deep); font-size: 15px; margin: 0 0 32px; }
.caps-sub::before, .caps-sub::after { content: ''; height: 1px; width: 80px; background: var(--gold); }

/* Gold rule with a four point star, as in the mockup */
.rule { display: flex; align-items: center; gap: 0; color: var(--gold); margin: 22px 0; max-width: 420px; }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .8; }
.rule .spark { width: 18px; height: 18px; margin: 0 4px; }
.rule.left { max-width: 360px; }
.rule-sm { display: inline-flex; align-items: center; color: var(--gold); }
.rule-sm::before, .rule-sm::after { content: ''; width: 34px; height: 1px; background: currentColor; }
.rule-sm .spark { width: 14px; height: 14px; margin: 0 6px; }

/* Hero */
.hero-marquee { min-height: min(84vh, 760px); display: flex; align-items: center; }
.hero-marquee .hero-img { object-position: 70% center; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }
.hero-marquee .hero-shade { background: linear-gradient(90deg, rgba(24, 0, 36, .82) 0%, rgba(24, 0, 36, .55) 35%, rgba(24, 0, 36, 0) 62%); }
.hero-marquee .hero-inner { padding-block: 72px; }
.hero-marquee .hero-title { font-size: clamp(56px, 8.4vw, 124px); line-height: .95; font-weight: 400; letter-spacing: -.01em; animation: rise 1.1s var(--ease) both; }
.hero-marquee .rule { animation: rise 1.1s .15s var(--ease) both; }
.hero-marquee .hero-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 28px); max-width: 22ch; line-height: 1.35; margin-bottom: 30px; animation: rise 1.1s .25s var(--ease) both; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; animation: rise 1.1s .35s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  /* Phones: the marquee photo is a 360px band, scaled up from its bottom edge so the sign sits in the
     upper half, and the headline starts over its lower third so the CTAs land on the first screen. */
  .hero-marquee { display: block; min-height: 0; background: #1c0029; }
  .hero-marquee .hero-img { position: relative; height: 360px; object-position: 80% 50%; z-index: 0; animation: none; transform: scale(1.3); transform-origin: 80% 100%; }
  .hero-marquee .hero-shade { inset: 0 0 auto 0; height: 360px; z-index: 1; background: linear-gradient(0deg, #1c0029 0%, rgba(28, 0, 41, .82) 34%, rgba(28, 0, 41, 0) 64%); }
  .hero-marquee .hero-inner { position: relative; z-index: 2; margin-top: -112px; padding-top: 0; padding-bottom: 32px; }
  .hero-marquee .hero-title { font-size: clamp(44px, 12vw, 60px); }
  .hero-marquee .rule { margin: 14px 0; max-width: 240px; }
  .hero-marquee .hero-sub { font-size: 19px; margin-bottom: 22px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { padding: 13px 18px; font-size: 13px; letter-spacing: .08em; }
}

/* Quick actions */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; margin-bottom: 22px; }
.quick-card { display: flex; align-items: center; gap: 22px; padding: 26px 24px; border: 1px solid var(--line); background: var(--cream); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s, box-shadow .2s; }
.quick-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(56, 0, 82, .1); }
.qi { font-size: 56px; color: var(--gold-deep); display: flex; }
.quick-card strong { display: block; font-family: var(--font-caps); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; font-size: 19px; color: var(--purple-deep); margin-bottom: 4px; line-height: 1.25; }
.quick-card span span { font-size: 15px; color: var(--muted); line-height: 1.45; display: block; }
.quick-card .q-when { font-family: var(--font-display); font-size: 20px; color: var(--purple-deep); line-height: 1.2; margin-bottom: 3px; }
.quick-card > svg:last-child { margin-left: auto; color: var(--purple-deep); font-size: 20px; transition: transform .2s; }
.quick-card:hover > svg:last-child { transform: translateX(4px); }
@media (max-width: 900px) { .quick { grid-template-columns: 1fr; } .qi { font-size: 44px; } }
@media (max-width: 600px) {
  .quick { gap: 10px; margin-top: 18px; }
  .quick-card { padding: 16px 16px 16px 18px; gap: 16px; }
  .qi { font-size: 36px; }
  .quick-card strong { font-size: 16px; margin-bottom: 2px; }
  .quick-card span span { font-size: 14px; }
  .quick-card .q-when { font-size: 18px; }
}

/* On the Cloobeck Stage */
.stage { background: var(--cream); padding: 56px 0 72px; border-top: 1px solid var(--line); }
.section-head.center { text-align: center; }
.section-head h2.caps { font-size: clamp(30px, 3.6vw, 46px); margin: 6px 0 6px; }
.stage .event-grid { margin-bottom: 36px; }
.event-card { border: 1px solid var(--line); }
.event-body { padding: 20px 22px 24px; text-align: center; align-items: center; }
.event-body h3 { font-size: 24px; color: var(--purple-deep); }
.event-body .eyebrow { margin-bottom: 8px; }
.event-meta { margin-bottom: 14px; }

/* Interior page hero */
.page-hero { background: var(--purple-deep); color: #fff; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse at 85% 120%, rgba(201, 161, 74, .28), transparent 55%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 22px); }
.page-hero.has-img::before { background: linear-gradient(90deg, rgba(30, 0, 44, .92) 0%, rgba(30, 0, 44, .7) 55%, rgba(30, 0, 44, .35) 100%); }
.page-hero h1 { color: #fff; font-weight: 400; }
.page-hero .eyebrow { color: var(--gold); font-family: var(--font-caps); letter-spacing: .2em; }
.page-hero .lede { color: rgba(255, 255, 255, .85); }
.page-hero .rule { max-width: 300px; margin: 18px 0 22px; }

h2 { font-weight: 400; }
.band h2.center, .le-copy h2, .prose-split h2 { font-family: var(--font-display); }
.date-badge { background: var(--purple); border-right: 1px solid rgba(255, 255, 255, .2); }
.tier h2, .person h3 { font-family: var(--font-display); }
.site-footer { background: var(--purple); }

.btn-purple:hover { background: var(--purple-hover); }
::selection { background: #e9d5f2; color: var(--purple-deep); }

/* Shared homepage sections, in the Marquee look */
.event-grid.four .event-body h3 { font-size: 21px; }
.new-here { padding-block: clamp(56px, 7vw, 88px); }
.nh-copy h2 { font-family: var(--font-display); font-weight: 400; color: var(--purple-deep); font-size: clamp(30px, 2.9vw, 40px); }
.nh-facts h3 { font-family: var(--font-caps); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: var(--purple-deep); }
.about-dl { padding-top: 0; padding-block: clamp(56px, 7vw, 88px) 0; }
.about-panel::before { background: linear-gradient(90deg, rgba(28, 0, 41, .92) 0%, rgba(28, 0, 41, .74) 42%, rgba(28, 0, 41, .2) 75%, rgba(28, 0, 41, .35) 100%), linear-gradient(0deg, rgba(28, 0, 41, .5), transparent 45%); }
.about-body h2 { font-weight: 400; }
.about-body .rule { margin: 0 0 22px; max-width: 300px; }
.life .section-head.center { margin-bottom: 8px; }
.life .caps-sub { margin-bottom: 28px; }
.g-label, .g-kicker { font-family: var(--font-caps); font-weight: 600; }
.g-cap h3 { font-weight: 400; }
@media (max-width: 520px) { .caps-sub { gap: 10px; letter-spacing: .12em; font-size: 12px; } .caps-sub::before, .caps-sub::after { width: 28px; } }

/* Shabbat / Torah Talks split panel, in the Marquee look */
.ways { margin-top: 0; border-bottom: 0; }
.way-who { font-style: italic; }
.way-kicker { font-family: var(--font-caps); font-weight: 600; letter-spacing: .2em; }
.way-headline { font-weight: 400; }

.caps-sub span { text-wrap: balance; }