/* Home hero as a photograph (31 Oct 2026, at Boss's request: "like journalslibrary").
   Photo: John Rylands Library reading room, Manchester, CC0 via Wikimedia Commons.
   Everything hangs off .hero-photo, so removing that class from the section in
   home.html returns the old hero untouched. No JavaScript. Only existing tokens. */
.hero-photo {
  position: relative; isolation: isolate;
  min-height: 30rem;
  display: flex; align-items: center;
  padding: var(--s-6) var(--s-6);
  text-align: left;
  color: #fff; background: var(--brand-deep);
  border-bottom: 0;
  overflow: visible;
}
.hero-photo .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; }
.hero-photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.hero-photo .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-deep) 94%, #000) 0%, color-mix(in srgb, var(--brand-deep) 82%, transparent) 42%, color-mix(in srgb, var(--brand-deep) 28%, transparent) 78%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--brand-deep) 70%, transparent) 0%, transparent 38%);
}
.hero-photo .hero-inner { max-width: none; width: 100%; margin: 0; }
.hero-photo .hero-copy { max-width: 40rem; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 var(--s-4); padding: .35rem .8rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 99px;
}
.hero-eyebrow::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent-bright); }
.hero-photo h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s-4); text-wrap: balance; }
.hero-photo h1 em { font-style: normal; color: color-mix(in srgb, var(--accent-bright), #fff 22%); }
.hero-photo .lead { color: rgba(255,255,255,.9); font-size: var(--t-md); max-width: 34rem; margin: 0 0 var(--s-5); }
.hero-photo .hero-search {
  justify-content: flex-start; flex-wrap: nowrap; gap: 0; max-width: 40rem;
  background: #fff; padding: .4rem; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.hero-photo .hero-search input { flex: 1 1 auto; min-width: 0; border: 0; box-shadow: none; background: transparent; color: var(--ink); padding: .75rem 1rem; font-size: 1.05rem; }
.hero-photo .hero-search input:focus { outline: 2px solid var(--brand); outline-offset: 0; border-radius: 10px; }
.hero-photo .hero-search button { background: var(--brand-deep); border-radius: 10px; padding: .75rem 1.5rem; font-weight: 600; }
.hero-photo .hero-actions { justify-content: flex-start; margin-top: var(--s-4); }
.hero-photo .hero-actions .button.secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.hero-photo .hero-actions .button.secondary:hover { background: rgba(255,255,255,.14); }
.hero-photo .figures.trim { justify-content: flex-start; margin: var(--s-6) 0 0; max-width: 40rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.hero-photo .figures li { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: var(--s-3) var(--s-4); backdrop-filter: blur(6px); }
.hero-photo .figures li:hover { box-shadow: none; transform: none; border-top-color: rgba(255,255,255,.2); }
.hero-photo .figures a { color: #fff; text-decoration: none; }
.hero-photo .figures .n { color: #fff; font-size: var(--t-xl); }
.hero-photo .figures .label { color: rgba(255,255,255,.85); }
@media (max-width: 760px) {
  .hero-photo { min-height: 0; padding: var(--s-6) var(--s-4); }
  .hero-photo .hero-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 70%, transparent), color-mix(in srgb, var(--brand-deep) 84%, transparent)); }
  .hero-photo .figures.trim { gap: var(--s-2); }
  .hero-photo .figures li { padding: var(--s-2); }
  .hero-photo .figures .n { font-size: var(--t-lg); }
}
@media (prefers-reduced-transparency: reduce) { .hero-photo .figures li { backdrop-filter: none; background: rgba(18,55,100,.85); } }
@media print { .hero-photo { background: #fff; color: #000; min-height: 0; } .hero-photo .hero-bg { display: none; } .hero-photo h1, .hero-photo .lead, .hero-photo .figures a, .hero-photo .figures .n, .hero-photo .figures .label { color: #000; } }

/* Seasonal layer over the photo: the left-hand lanterns and corner diya sat on the
   headline and the figure cards, so only the right-hand ones stay. */
html[data-seasonal] .hero-photo .dw-fx .dw-diya.l,
html[data-seasonal] .hero-photo .dw-lantern[style*="--x:0.5%"],
html[data-seasonal] .hero-photo .dw-lantern[style*="--x:4%"],
html[data-seasonal] .hero-photo .dw-lantern[style*="--x:0%"] { display: none; }
@media (max-width: 760px) { html[data-seasonal] .hero-photo .dw-fx .dw-diya { display: none; } }