/* ═══ the wing band ══════════════════════════════════════════════════════════
   The page header every wing opens with — alsawair.com's `.tf-hero--band`
   (Views/Shared/_PageHeader.cshtml there), brought across in its own
   namespace so it does not depend on books.css, which only the library loads.

   Same composition as theirs: a full-bleed green field lit from the top corner,
   the gold rosette half in view, the lattice and the fog, a centred breadcrumb,
   the pill eyebrow, the calligraphic title, the gold rule with its diamond, and
   the subtitle — closed by a gilded hairline along the bottom edge.

   Two things are deliberately NOT carried over:
     · the wavy gold thread (`.hs-thread`) — asked for without it;
     · every loop. Theirs turns the rosette for four minutes, sways the light,
       and sends a sparkle along the rule every eight seconds. Here all of it
       holds still, which is what css/motion.css requires of the whole site. */

.wband{
  --wb-gold-rgb:201,154,71;
  --wb-gold-light:#e7d4a2;
  position:relative;overflow:hidden;color:#fff;text-align:center;
  padding:clamp(1.6rem,2.6vw,2.4rem) 16px clamp(1.5rem,2.4vw,2.1rem);
  background:linear-gradient(120deg,#09281d 0%,#0f3d2e 60%,#0c3325 100%);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(var(--wb-gold-rgb),.6) 35%,rgba(var(--wb-gold-rgb),.6) 65%,transparent) 1;
}
.wband::before{content:"";position:absolute;inset:-12%;pointer-events:none;
  background-image:url('/img/hero/pattern.svg');background-size:66px 66px;opacity:.05}
.wband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 62% at 74% 42%,rgba(var(--wb-gold-rgb),.14),transparent 70%),
    radial-gradient(38% 55% at 20% 62%,rgba(231,212,162,.10),transparent 70%),
    radial-gradient(70% 90% at 88% -10%,rgba(var(--wb-gold-rgb),.22),transparent 55%),
    radial-gradient(125% 105% at 50% 45%,transparent 62%,rgba(4,14,10,.38) 100%)}

.wband__geo{position:absolute;top:50%;left:8%;width:980px;height:980px;
  margin:-490px 0 0 -490px;pointer-events:none;
  background:url('/img/hero/ornament-gold.svg') center / contain no-repeat;opacity:.06}
.wband__light{position:absolute;inset:-10%;pointer-events:none;
  background:linear-gradient(205deg,rgba(231,212,162,.13),rgba(231,212,162,.03) 30%,transparent 55%)}
.wband__fog{position:absolute;inset:-20%;pointer-events:none;filter:blur(28px);
  background:
    radial-gradient(42% 30% at 28% 72%,rgba(231,212,162,.07),transparent 70%),
    radial-gradient(52% 34% at 72% 26%,rgba(255,255,255,.045),transparent 70%)}
.wband__lattice{position:absolute;inset:-10%;pointer-events:none;filter:blur(13px);opacity:.32;
  background:repeating-linear-gradient(115deg,
    rgba(231,212,162,.16) 0 22px,transparent 22px 58px,
    rgba(231,212,162,.08) 58px 74px,transparent 74px 118px);
  -webkit-mask-image:linear-gradient(155deg,#000,transparent 52%);
  mask-image:linear-gradient(155deg,#000,transparent 52%)}

.wband__inner{position:relative;z-index:1;max-width:1140px;margin-inline:auto}

.wband__crumbs{display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:.8rem;flex-wrap:wrap}
.wband__crumbs a{color:var(--wb-gold-light);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem}
.wband__crumbs a:hover{color:#fff}
.wband__crumbs a:focus-visible{outline:2px solid var(--wb-gold-light);outline-offset:3px;border-radius:3px}
.wband__crumbs svg{width:.95em;height:.95em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.wband__crumbs .current{color:#fff}
.wband__dia{display:inline-block;width:5px;height:5px;border-radius:1px;transform:rotate(45deg);
  background:rgba(var(--wb-gold-rgb),.75)}

.wband__eyebrow{display:inline-block;margin-bottom:.5rem;padding:.2rem .95rem;border-radius:999px;
  font-size:.78rem;letter-spacing:2px;
  color:#c99a47;background:rgba(var(--wb-gold-rgb),.14);border:1px solid rgba(var(--wb-gold-rgb),.45)}

.wband__title{font-family:'Aref Ruqaa','Amiri',serif;font-weight:700;color:#fff;
  font-size:clamp(1.6rem,1.15rem + 1.9vw,2.5rem);line-height:1.3;margin:.1rem 0 0;
  text-shadow:0 3px 22px rgba(0,0,0,.45);text-wrap:balance}

.wband__rule{display:block;position:relative;width:120px;height:2px;margin:.7rem auto .5rem;
  background:linear-gradient(90deg,rgba(var(--wb-gold-rgb),.1),rgba(var(--wb-gold-rgb),.8),rgba(var(--wb-gold-rgb),.1))}
.wband__rule::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:1px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--wb-gold-light)}

.wband__sub{color:rgba(255,255,255,.85);max-width:620px;margin:.3rem auto 0;
  font-size:.98rem;line-height:1.9;text-wrap:pretty}

@media (max-width:767.98px){
  .wband__geo{left:50%;top:-10%;width:700px;height:700px;margin:-350px 0 0 -350px;opacity:.05}
  .wband__sub{font-size:.92rem}
}