/* ShanSight internal-page Banner system. One visual grammar for every editorial page. */
:root {
  --banner-cream: #f6f4ef;
  --banner-deep: #101b18;
  --banner-green: #1c2f2a;
  --banner-quiet: rgba(246, 244, 239, 0.44);
  --banner-muted: rgba(246, 244, 239, 0.72);
}
.hero, .info-hero { position: relative; min-height: 94svh !important; display: flex !important; align-items: flex-end !important; overflow: hidden; background: var(--banner-green) !important; }
.hero::after, .info-hero::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; z-index: 5; height: 24vh; background: linear-gradient(to bottom, rgba(16,27,24,0), rgba(16,27,24,.9), var(--banner-deep)); pointer-events: none; }
.hero-bg, .info-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .86; transform: scale(1.04); filter: grayscale(10%) brightness(.5) saturate(.9); }
.hero-overlay, .info-hero-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 58% 42%, rgba(246,244,239,.05), transparent 25rem), linear-gradient(90deg, rgba(13,23,20,.84), rgba(28,47,42,.24) 58%, rgba(13,23,20,.52)), linear-gradient(0deg, rgba(10,18,16,.92), rgba(28,47,42,.18) 54%, rgba(28,47,42,.12)); }
.hero-content, .hero-shell, .info-hero-content { position: relative; z-index: 10; width: min(1180px, 90%); margin: 0 auto; padding: 0 0 7.4rem; }
.hero-content:has(> .hero-note), .hero-shell:has(> .hero-note), .info-intro { display: grid; grid-template-columns: minmax(0,.96fr) minmax(280px,.64fr); gap: 4rem; align-items: end; }
.hero h1, .info-intro h1 { width: min(760px,100%); margin: 0; color: rgba(246,244,239,.94); font-family: 'Cormorant Garamond', serif; font-size: clamp(4rem,8vw,7.8rem); font-weight: 300; line-height: .92; text-shadow: 0 16px 45px rgba(0,0,0,.24); text-wrap: balance; }
.hero h1 span, .info-intro h1 span { display: block; margin-top: .6rem; color: rgba(246,244,239,.64); font-size: .62em; font-style: italic; }
.info-kicker { margin-bottom: 1.35rem; color: var(--banner-quiet); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-copy, .info-lede { width: min(460px,100%); margin-top: 1.6rem; color: var(--banner-muted); font-size: .96rem; font-weight: 300; line-height: 1.9; }
.info-lede { margin-top: 0; text-shadow: 0 1px 20px rgba(0,0,0,.35); }
.hero-actions, .info-cta { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; margin-top: 1.65rem; }
.hero .link, .hero .text-link, .hero .hero-action, .info-hero-link, .info-link { display: inline-flex; min-height: 44px; width: fit-content; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid rgba(246,244,239,.34); color: rgba(246,244,239,.88); font-size: .7rem; text-decoration: none; text-transform: uppercase; transition: gap .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.hero .link:hover, .hero .text-link:hover, .hero .hero-action:hover, .info-hero-link:hover, .info-link:hover { gap: 1.05rem; border-color: rgba(246,244,239,.9); color: #fff; transform: translateX(4px); }
.hero .link:focus-visible, .hero .text-link:focus-visible, .hero .hero-action:focus-visible, .info-hero-link:focus-visible, .info-link:focus-visible { outline: 1px solid rgba(246,244,239,.82); outline-offset: 7px; }
.hero-note { padding-top: 1.5rem; border-top: 1px solid rgba(246,244,239,.12); }
.hero-note p { margin: .75rem 0 0; color: rgba(246,244,239,.68); font-size: .88rem; font-weight: 300; line-height: 1.85; }
.scroll-note { position: absolute; bottom: 1.8rem; left: 50%; z-index: 20; color: rgba(246,244,239,.42); font-size: .58rem; pointer-events: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-note::after { content: ''; display: block; width: 1px; height: 2.2rem; margin: .7rem auto 0; background: linear-gradient(to bottom, rgba(246,244,239,.34), rgba(246,244,239,0)); }
@media (max-width: 900px) {
  .hero, .info-hero { min-height: 94svh !important; }
  .hero-content, .hero-shell, .info-hero-content { width: 86%; padding-bottom: 5.8rem; }
  .hero-content:has(> .hero-note), .hero-shell:has(> .hero-note), .info-intro { grid-template-columns: 1fr; gap: 2rem; }
  .hero h1, .info-intro h1 { max-width: 12ch; font-size: clamp(3.4rem,14vw,5.8rem); }
}
@media (max-width: 520px) { .hero h1, .info-intro h1 { font-size: 2.7rem; } }
@media (prefers-reduced-motion: reduce) { .hero-bg, .info-hero-media img { animation: none !important; transform: none; } .hero .link, .hero .text-link, .hero .hero-action, .info-hero-link, .info-link { transition: none; } }