/* Eye of Light – v4: the red lotus painting on its own paper.
   One large sheet of the painting's paper (assets/img/paper-v4.jpg: its peach-to-dusty-rose colour, fine red veins and
   specks) lies fixed behind the whole page, so the hero, the header and every light section share it – no seams, no
   repeats, nothing washed out to white. */
body.v4 {
  --ruby: #C8102E; --crimson: #E2233F; --rose: #EE5A6E; --blush: #FAD3D8; --wine: #5A0A18;
  --accent: #C8102E; --accent-2: #FBC9D0; --wash: #F1DACE; --accent-ink: #9C0A22; --bad: #C8102E;
  background: #E9CDBF;
}
body.v4::before { content: ''; position: fixed; inset: 0; z-index: -1; background: #E9CDBF url('../img/paper-v4.jpg') center / cover no-repeat; }
body.v4 .hero, body.v4 .band--sandal { background: transparent; }
body.v4 .hero { color: var(--ink); }
body.v4 .facet > .facet__in { background: linear-gradient(90deg, var(--accent), var(--gold-2) 55%, var(--rose)) top / 100% 4px no-repeat, rgba(255, 249, 243, .78); }
body.v4 .facet--sandal > .facet__in { background: linear-gradient(90deg, var(--accent), var(--gold-2)) top / 100% 4px no-repeat, rgba(252, 241, 224, .8); }

/* the verse has a section of its own, just below the painting */
body.v4 .band--verse { padding-block: clamp(40px, 6vw, 76px) clamp(28px, 4vw, 52px); }
body.v4 .band--verse .hero__content { position: static; background: none; padding: 0 var(--gutter); }
body.v4 .verse__sa { color: #A60D27; text-shadow: 0 1px 0 rgba(255, 246, 240, .55); }
body.v4 .verse__meaning { background: linear-gradient(90deg, transparent, rgba(255, 246, 240, .4) 18%, rgba(255, 246, 240, .4) 82%, transparent);
  border-image: linear-gradient(90deg, transparent, rgba(176, 124, 46, .75), transparent) 1; }
body.v4 .verse__en { color: #5E1A26; }
body.v4 .verse__src { color: #7E4A50; }
body.v4 .hero__content .btn--ghost { --fg: var(--accent-ink); }
body.v4 .hero__content .btn--ghost:hover { --bg: rgba(200, 16, 46, .08); color: var(--accent-ink); }
body.v4 .btn--gold { --bg: linear-gradient(180deg, #E2233F, #B80D29); --fg: #FFF4EE; }
body.v4 .btn--gold::after { border-color: rgba(236, 200, 111, .75); }
body.v4 .btn--gold:hover { --bg: linear-gradient(180deg, #EE3550, #C8102E); color: #FFF4EE; }
body.v4 .hero__skip { color: #7E3A44; border-color: rgba(156, 10, 34, .3); }
body.v4 .hero__skip:hover { color: var(--accent); border-color: var(--accent); }

/* the header: clear over the painting, then a veil of the same paper once the page scrolls */
body.v4 .site-header.is-solid, body.v4 .site-header--solid { background: rgba(238, 212, 198, .74); backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(176, 124, 46, .35), 0 8px 22px rgba(90, 10, 24, .07); }
body.v4 .brand__name { background: linear-gradient(180deg, #D42341, #8E0A20); -webkit-background-clip: text; background-clip: text; }
body.v4 .brand__tag { color: #8C4C55; }
body.v4 .menu-btn { color: var(--accent-ink); border-color: rgba(156, 10, 34, .35); }
@media (min-width: 1061px) {
  body.v4 .nav a { color: #6E1022; }
  body.v4 .nav a:hover, body.v4 .nav a[aria-current='page'] { color: var(--accent); }
}
