/* Front-page Crew Wars banner: the painted sea battle, framed in scorched timber, over the Community panel. */
.hb { --hb-burn: url("../img/cw/burn-h.webp?v=fef9f9be14"); position: relative; isolation: isolate; color: #fff4dc; min-height: 190px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 26px 40px 28px; background: none;
  box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .9); border-radius: 6px; }
.hb::after { content: none; }
.hb-sky { position: absolute; inset: 0; border-radius: 6px; z-index: -3; overflow: hidden; background: #0c0805; }
.hb-sky { overflow: hidden; }
.hb-sky > i { position: absolute; display: block; pointer-events: none; }
.hb-art { inset: -4%; background: url("../img/cw/battle.webp?v=9eb2b76169") 52% 42% / cover no-repeat; transform-origin: 62% 46%; animation: hb-push 90s ease-in-out infinite alternate; }
@keyframes hb-push { from { transform: scale(1); } to { transform: scale(1.09) translate3d(-1.4%, -1%, 0); } }
.hb-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 42%; opacity: 0; transition: opacity 1.6s ease; }
.hb-vid.on { opacity: 1; }
.hb-sky:has(.hb-vid.on) .hb-art { animation-play-state: paused; }
.hb-fire { inset: 0; mix-blend-mode: screen; background: radial-gradient(34% 60% at 72% 40%, rgba(255, 150, 50, .24), transparent 72%), radial-gradient(26% 50% at 20% 70%, rgba(255, 110, 28, .16), transparent 70%); animation: hb-flick 4.6s ease-in-out infinite alternate; }
@keyframes hb-flick { 0% { opacity: .55; } 30% { opacity: 1; } 60% { opacity: .7; } 100% { opacity: .9; } }
.hb-shade { inset: 0; background: linear-gradient(90deg, rgba(8, 5, 3, .8), rgba(8, 5, 3, .42) 46%, rgba(8, 5, 3, .08) 78%, rgba(8, 5, 3, .25)); }
.hb-embers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hb-embers i { position: absolute; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #ffb25a; box-shadow: 0 0 8px 2px rgba(255, 140, 40, .7); opacity: 0; animation: hb-rise var(--t) linear var(--d) infinite; }
.hb-embers i:nth-child(1) { --x: 6%; --s: 4px; --t: 8s; --d: -1s; } .hb-embers i:nth-child(2) { --x: 22%; --s: 3px; --t: 10s; --d: -5s; }
.hb-embers i:nth-child(3) { --x: 41%; --s: 5px; --t: 12s; --d: -3s; } .hb-embers i:nth-child(4) { --x: 63%; --s: 3px; --t: 9s; --d: -7s; }
.hb-embers i:nth-child(5) { --x: 81%; --s: 4px; --t: 11s; --d: -2s; } .hb-embers i:nth-child(6) { --x: 93%; --s: 3px; --t: 13s; --d: -6s; }
@keyframes hb-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate3d(24px, -190px, 0); } }
.hb-body { min-width: 0; max-width: 760px; }
.hb-kicker { margin: 0 0 6px; font: 800 .74rem/1 var(--label, inherit); letter-spacing: .22em; text-transform: uppercase; color: #ffb25a; }
.hb-title { margin: 0; font: 400 clamp(1.25rem, 2.1vw, 1.9rem)/1.05 var(--display, inherit); color: #fff4dc; text-shadow: 0 3px 0 rgba(0, 0, 0, .6), 0 0 22px rgba(255, 120, 30, .35); }
.hb-title em { font-style: normal; color: #ffc27a; }
.hb-copy { margin: 8px 0 14px; font-size: .92rem; line-height: 1.4; color: #e8d6b8; text-shadow: 0 1px 2px #000; }
.hb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 4px; font: 800 .8rem/1 var(--label, inherit); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: #2a1a0c;
  background: linear-gradient(180deg, #e9d6b0, #c9ab78); box-shadow: inset 0 0 0 1px rgba(60, 30, 8, .55), 0 3px 0 #5a3a1a, 0 6px 14px rgba(0, 0, 0, .5); transition: transform .15s, filter .15s; }
.hb-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.hb-btn-go { color: #fff4dc; background: linear-gradient(180deg, #c8431f, #8a2410); box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .35), 0 3px 0 #4a1006, 0 6px 14px rgba(0, 0, 0, .5); }
.hb-btn .ic { width: 15px; height: 15px; }
.hb-plates { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.hb-plates li { min-width: 92px; padding: 10px 14px 9px; text-align: center; background: linear-gradient(180deg, rgba(40, 24, 12, .86), rgba(18, 10, 5, .9)); box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .25), 0 6px 14px rgba(0, 0, 0, .55); border-radius: 3px; }
.hb-plates b { display: block; font: 400 1.7rem/1 var(--display, inherit); color: #ffc27a; text-shadow: 0 0 14px rgba(255, 120, 30, .5); }
.hb-plates span { display: block; margin-top: 4px; font: 800 .62rem/1.1 var(--label, inherit); letter-spacing: .12em; text-transform: uppercase; color: #cdb690; }
@media (max-width: 860px) { .hb { grid-template-columns: 1fr; padding: 24px 26px 28px; gap: 16px; } .hb-plates { justify-content: flex-start; } .hb-plates li { min-width: 0; flex: 1; } }
@media (prefers-reduced-motion: reduce) { .hb-art, .hb-fire, .hb-embers i { animation: none !important; } .hb-vid { display: none; } }

/* the original burnt frame (soot edge included), with nothing solid behind it so no square shows through its ragged rim */
.hb { border-radius: 0; background: none; box-shadow: none; }
.hb::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 28px solid transparent; border-image: var(--hb-burn) 64 / 28px round; }
.hb-sky { inset: 10px; border-radius: 0; }
.hb-embers { inset: 10px; }

/* same burnt frame, with the solid soot band at its very outside faded out so no dark square shows around the paper edge */
.hb { --hb-burn: url("../img/cw/burn-h-soft.webp?v=749fc7af8a"); }

/* the headline in the Crew Wars title lettering: engraved serif, cream fading to bronze, the second half in forge orange */
.hb-title { font: 800 clamp(1.2rem, 1.9vw, 1.7rem)/1.1 "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; letter-spacing: .06em; text-transform: uppercase; color: transparent;
  background: linear-gradient(180deg, #fff6e0 0%, #efdcb2 38%, #bda070 70%, #7a6340 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none;
  filter: drop-shadow(0 2px 0 #120a05) drop-shadow(0 6px 10px rgba(0, 0, 0, .7)); }
.hb-title em { font-style: normal; background: linear-gradient(180deg, #fff0c4 0%, #ffc060 32%, #f0802a 64%, #b8400c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the figures sit on pieces of torn old paper, their ragged edges in the painting's browns */
.hb-plates li { border: 9px solid transparent; border-image: url("../img/cw/torn-paper.webp?v=14f76843b0") 14 / 9px round; border-radius: 0; box-shadow: none; padding: 6px 12px 5px; min-width: 100px;
  background: linear-gradient(180deg, rgba(48, 28, 14, .92), rgba(24, 13, 6, .94)) padding-box; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }