@layer pages{
  .eye-left,.eye-right{--light-core:var(--light-eye);--light-halo:var(--light-eye-halo)}
  .eye-left {--light-x:65.1%;--light-y:22.2%;--light-size:5%}
  .eye-right{--light-x:68.3%;--light-y:24.1%;--light-size:4.4%}
  :root{
    --page-image-sm:url("/assets/site/pages/raid-hero-1280.webp");
    --page-image-md:url("/assets/site/pages/raid-hero-1920.webp");
    --page-image-lg:url("/assets/site/pages/raid-hero.webp");
    --ground-edge:url("/assets/site/masks/raid-hero.svg");
    --page-veil-reach:34%;
    --boss-picture-ratio:6 / 7;
    --room-dim:.66;
    --boss-undone-dim:.62;
    --boss-undone-color:.18;
    --figure-shadow:0 6px 14px rgba(0,0,0,.8);
    --track-height:28px;
    --track-line:2px;
    --track-node:14px;
    --box-art:url("/assets/site/pages/raid-art.webp");
    --box-art-opacity:.42;
    --box-art-saturate:.5;
    --speed-box-art:.78;
  }
  .difficulty{margin-left:auto}
  .board{--boss-columns:min(var(--boss-count),5)}
  .bosses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--boss-columns,1),minmax(0,1fr));gap:var(--space-3)}
  .bosses .empty-note{margin:0}
  .board-stage{position:relative}
  .board.is-building .difficulty{display:none}
  .board.is-building .bosses,
  .board.is-building .track{filter:blur(7px) saturate(.55) brightness(.6);pointer-events:none;user-select:none}
  .board.is-building .bosses{max-height:380px;overflow:hidden;
    mask-image:linear-gradient(to bottom,rgb(0 0 0) 62%,transparent)}
  .board-veil{position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:var(--space-2);padding:var(--space-4);text-align:center}
  .board-veil p{margin:0;text-shadow:0 1px 3px rgb(0 0 0 / .9),0 0 14px rgb(0 0 0 / .8)}
  .board-veil-lead{font:500 clamp(22px,2.4cqw,30px) Cinzel;letter-spacing:.04em;color:var(--heading)}
  .board-veil-date{font-size:17px;color:var(--text)}
  .board-veil-date b{color:var(--gold)}
  .board-veil-hint{font-size:14px;color:var(--text-muted)}
  .boss{width:auto;height:auto;place-content:normal;display:grid;grid-template-rows:auto 1fr;padding:0;overflow:clip;
    backdrop-filter:none;background:var(--card-solid-dark);box-shadow:0 10px 22px rgba(0,0,0,.6)}
  .boss::before,.boss::after{z-index:2}
  .boss.is-current{--ring-fill:linear-gradient(90deg,var(--gold-dark),var(--gold) 50%,var(--gold-dark));
    box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 26px color-mix(in srgb,var(--gold) 35%,transparent)}
  .boss-name{margin:0;min-height:calc(2.6em + var(--space-2) * 2);display:block;align-content:center;padding:var(--space-2);
    font:600 12px/1.3 Jost;letter-spacing:.12em;text-transform:uppercase;color:var(--heading-light);
    background:var(--rule-gradient) center 100%/calc(100% - var(--space-4)) var(--border-thin) no-repeat,
      linear-gradient(var(--box-band-edge),var(--box-band-line))}
  .boss-name b{font-weight:inherit;color:var(--gold)}
  .boss-picture{position:relative;isolation:isolate;aspect-ratio:var(--boss-picture-ratio);overflow:clip;background:var(--card-solid-dark)}
  .boss-picture::before{content:"";position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(ellipse 45% 38% at 50% 38%,color-mix(in srgb,var(--gold-light) 22%,transparent),transparent),
      radial-gradient(ellipse 85% 75% at 50% 40%,transparent 45%,color-mix(in srgb,var(--card-solid-dark) 75%,transparent)),
      var(--boss-room,none) calc(mod(var(--boss-index,0), var(--boss-columns,1)) / max(var(--boss-columns,1) - 1, 1) * 100%) 40% / calc(var(--boss-columns,1) * 100%) auto no-repeat;
    filter:brightness(var(--room-dim)) saturate(.75)}
  .boss-figure{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:1;translate:-50% 0;mix-blend-mode:lighten;
    background:var(--boss-figure) var(--fig-x,50%) var(--fig-y,50%) / var(--fig-zoom,100%) var(--fig-zoom,100%) no-repeat}
  .boss-figure.is-cut{display:block;height:100%;mix-blend-mode:normal;background:none;filter:drop-shadow(var(--figure-shadow))}
  .boss-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .no-picture::after{content:"";position:absolute;inset:28%;opacity:.22;background:url("/assets/site/brand/crest.webp") center/contain no-repeat}
  .boss:not(.is-down) :is(.boss-figure,.boss-shot){filter:brightness(var(--boss-undone-dim)) saturate(var(--boss-undone-color))}
  .boss:not(.is-down) .boss-figure.is-cut{filter:brightness(var(--boss-undone-dim)) saturate(var(--boss-undone-color)) drop-shadow(var(--figure-shadow))}
  .boss:not(.is-down) .boss-picture::before{filter:brightness(calc(var(--room-dim) * var(--boss-undone-dim))) saturate(var(--boss-undone-color))}
  .boss-state{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:var(--space-5) var(--space-1) var(--space-2);
    display:grid;justify-items:center;gap:2px;
    background:linear-gradient(transparent,color-mix(in srgb,var(--card-solid-dark) 70%,transparent) 45%,var(--card-solid-dark));
    font:600 12px Jost;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
  .boss-state b{font-weight:inherit;color:var(--state-color)}
  .boss-state small{min-height:1.2em;font:400 13px Jost;letter-spacing:0;text-transform:none;color:var(--text-muted)}
  .boss-sign{margin-bottom:var(--space-1);filter:var(--painted-depth) drop-shadow(0 0 10px color-mix(in srgb,var(--state-color) 55%,transparent))}
  .is-open .boss-sign{filter:var(--painted-depth) brightness(.8) saturate(.4)}
  .is-down{--state-color:var(--progress-down)}
  .is-current{--state-color:var(--progress-current)}
  .is-open{--state-color:var(--progress-open)}
  .is-open .boss-state b{color:var(--text-muted)}
  .track{list-style:none;margin:var(--space-4) 0 0;padding:0;position:relative;height:var(--track-height);
    display:grid;grid-template-columns:repeat(var(--boss-count,1),minmax(0,1fr))}
  .track::before,.track::after{content:"";position:absolute;top:50%;height:var(--track-line);translate:0 -50%;
    left:calc(50% / var(--boss-count));right:calc(50% / var(--boss-count));background:var(--progress-open)}
  .track::after{right:auto;width:calc((var(--boss-current) - 1) * 100% / var(--boss-count));
    background:linear-gradient(90deg,var(--progress-down),var(--progress-current));
    box-shadow:0 0 10px color-mix(in srgb,var(--progress-down) 55%,transparent)}
  .track li{position:relative;display:grid;place-items:center}
  .track li::before{content:"";position:relative;z-index:1;width:var(--track-node);height:var(--track-node);border-radius:50%;
    border:2px solid var(--state-color);background:var(--card-solid)}
  .track li.is-down::before{background:var(--state-color)}
  .track li.is-current::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 30%,transparent),0 0 16px var(--gold)}
  .raid-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-4);align-items:stretch}
  .raid-quote{margin:0;justify-content:center;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-5) var(--space-4);
    background:
      linear-gradient(color-mix(in srgb,var(--card-solid) 86%,transparent) 0 0),
      url("/assets/site/brand/crest.webp") center/auto 62% no-repeat,
      linear-gradient(135deg,var(--card-solid) 45%,var(--card-solid-dark))}
  .raid-quote p{margin:0;max-width:44ch;font-size:16px;line-height:1.6;color:var(--text)}
  .raid-quote p:first-child{max-width:28ch;font:500 clamp(19px,1.3vw,24px)/1.4 Cinzel;color:var(--heading);text-shadow:var(--text-shadow-soft)}
  .raid-quote p:first-child::before,.raid-quote p:last-child::after{display:block;font:700 56px/.5 Cinzel;color:var(--gold-dark)}
  .raid-quote p:first-child::before{content:"„";margin-bottom:var(--space-3)}
  .raid-quote p:last-child::after{content:"“";margin-top:var(--space-4)}
  .openings.is-teaser{flex:none;max-height:calc(var(--opening-role-row) * 1.5)}
  .box-art{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none;--parallax-subject:1;
    --travel:calc((1 - var(--speed-box-art)) * (var(--view-height) + 900px));
    mask:linear-gradient(transparent,black 12%,black 88%,transparent)}
  .box-art i{position:absolute;inset:calc(var(--travel) / -2 - 20px) 0;
    background:var(--box-art) center 30%/cover no-repeat;opacity:var(--box-art-opacity);filter:saturate(var(--box-art-saturate))}
  @supports (animation-timeline: view()){.box-art i{animation:parallax-back linear both;animation-timeline:view()}}
  @supports not (animation-timeline: view()){.box-art i{transform:translateY(calc((var(--view-p,.5) - .5) * var(--travel)))}}
  @media (prefers-reduced-motion:reduce),(pointer:coarse){.box-art i{animation:none;transform:none}}
  .roster-box .panel{background:color-mix(in srgb,var(--card-solid) 80%,transparent);
    -webkit-backdrop-filter:blur(var(--vine-blur));backdrop-filter:blur(var(--vine-blur))}
  @media (max-width:1240px){
    .board{--boss-columns:4}
    .track{display:none}
    .section-head{flex-wrap:wrap}
    .difficulty{margin-left:0;flex-basis:100%;justify-content:center}
    .raid-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
    .raid-quote{order:3;grid-column:1 / -1}
  }
  @media (max-width:900px){
    .raid-facts{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:620px){
    .board{--boss-columns:1;--boss-picture-ratio:16 / 10}
    .bosses{gap:var(--space-2)}
    .difficulty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
    .difficulty .card{padding:0;font-size:12px;letter-spacing:.08em}
    .boss-name{font-size:11px;letter-spacing:.06em}
    .boss-picture::before{background-size:auto,auto,cover;
      background-position:0 0,0 0,calc(var(--boss-index,0) / max(var(--boss-count,1) - 1, 1) * 100%) 40%}
    .boss-figure{mask:linear-gradient(90deg,transparent,black 22%,black 78%,transparent)}
  }
}