.sw-h21 { position: relative; min-height: 100vh; background: #1C1A17; color: #F4EEE3; font-family: 'Outfit', 'Inter', sans-serif; display: grid; grid-template-columns: 1.08fr 0.92fr; overflow: hidden; }
.sw-h21-content { position: relative; z-index: 2; padding: 3.4rem clamp(2.2rem, 4vw, 4.2rem) 2rem; display: flex; flex-direction: column; }
.sw-h21-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.68rem; letter-spacing: 6px; text-transform: uppercase; color: #F4EEE3; margin-bottom: 1.6rem; }
.sw-h21-dot { width: 9px; height: 9px; border-radius: 50%; background: #E84A33; }
.sw-h21-eyebrow em { font-style: normal; color: #9C948A; }
.sw-h21-title { font-family: 'Outfit', 'Inter', sans-serif; font-weight: 900; font-size: 112px; line-height: 0.86; letter-spacing: -2px; text-transform: uppercase; color: #F4EEE3; margin: 0 0 1.3rem; }
.sw-h21-outline { color: rgba(28,26,23,0); -webkit-text-stroke: 2px rgba(244,238,227,0.85); }
.sw-h21-italic { font-style: normal; color: #E84A33; }
.sw-h21-sub { font-size: 16px; line-height: 1.55; color: #F4EEE3; opacity: 0.82; max-width: 42ch; margin: 0 0 0.7rem; }
.sw-h21-emphasis { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(232,74,51,0.9); margin: 0 0 1.6rem; }
.sw-h21-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sw-h21-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #E84A33; color: #16140F; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 15px 30px; text-decoration: none; box-shadow: 5px 5px 0 rgba(244,238,227,0.18); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sw-h21-cta-primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 rgba(244,238,227,0.22); }
.sw-h21-cta-secondary { display: inline-flex; align-items: center; border: 2px solid rgba(244,238,227,0.4); color: #F4EEE3; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 13px 24px; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.sw-h21-cta-secondary:hover { border-color: #E84A33; background: rgba(232,74,51,0.1); }
.sw-h21-meta-row { margin-top: auto; display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; padding-top: 1.6rem; padding-bottom: 3.6rem; }
.sw-h21-queue { display: inline-flex; align-items: center; gap: 10px; border: 1.5px dashed rgba(232,74,51,0.55); border-radius: 999px; padding: 10px 18px; font-size: 0.78rem; color: #E84A33; }
.sw-h21-queue strong { font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.sw-h21-queue-wait { color: rgba(244,238,227,0.75); }
.sw-h21-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #E84A33; animation: sw-h21-pulse 2s ease-out infinite; }
.sw-h21-foot { display: inline-flex; align-items: baseline; gap: 10px; }
.sw-h21-foot-label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9C948A; }
.sw-h21-foot strong { font-size: 1.7rem; font-weight: 900; color: #E84A33; line-height: 1; }
.sw-h21-foot-meta { font-size: 0.76rem; color: #9C948A; }
.sw-h21-visual { position: relative; z-index: 1; }
.sw-h21-poster-wrap { position: absolute; inset: 3.2rem 2.4rem 5.4rem 0.4rem; }
.sw-h21-poster-wrap::before { content: ""; position: absolute; inset: -9px; background: #EDE6D6; transform: rotate(-1.4deg); clip-path: polygon(1% 2%, 18% 0, 37% 2%, 58% 0, 79% 2%, 100% 0, 99% 24%, 100% 46%, 98% 68%, 100% 88%, 98% 100%, 76% 98%, 54% 100%, 33% 98%, 12% 100%, 0 97%, 2% 74%, 0 51%, 2% 28%); }
.sw-h21-poster { position: absolute; inset: 0; transform: rotate(1.6deg); background-image: linear-gradient(160deg, rgba(28,26,23,0.05), rgba(28,26,23,0.4)), url('/studio/components/images/gastro-4-burger-brewery.jpg'); background-size: cover; background-position: center; clip-path: polygon(2% 1%, 16% 0, 34% 2%, 53% 0, 72% 2%, 89% 0, 100% 3%, 99% 22%, 100% 41%, 98% 62%, 100% 83%, 98% 100%, 79% 98%, 58% 100%, 38% 98%, 17% 100%, 2% 98%, 0 79%, 2% 58%, 0 36%, 1% 16%); }
.sw-h21-photo-credit { position: absolute; bottom: 18px; right: 20px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,238,227,0.9); background: rgba(28,26,23,0.75); padding: 4px 10px; }
.sw-h21-live { position: absolute; left: -30px; bottom: 22%; z-index: 3; display: grid; gap: 2px; background: #25221D; border: 1px solid rgba(232,74,51,0.6); padding: 13px 18px; transform: rotate(-2deg); box-shadow: 6px 6px 0 rgba(232,74,51,0.4); max-width: 250px; }
.sw-h21-live-kicker { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #E84A33; }
.sw-h21-live-artist { font-size: 0.94rem; font-weight: 800; color: #F4EEE3; }
.sw-h21-live-meta { font-size: 0.72rem; color: #9C948A; }
.sw-h21-marquee { position: absolute; left: -4%; right: -4%; top: 56%; z-index: 3; transform: rotate(-3.2deg); background: #E84A33; border-top: 3px solid #0F0D0B; border-bottom: 3px solid #0F0D0B; padding: 11px 0; overflow: hidden; box-shadow: 0 18px 36px -20px rgba(0,0,0,0.65); pointer-events: none; }
.sw-h21-marquee-track { display: inline-flex; white-space: nowrap; width: max-content; animation: sw-h21-scroll 26s linear infinite; }
.sw-h21-marquee-group { display: inline-flex; align-items: center; }
.sw-h21-marquee-group span { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1C1A17; }
.sw-h21-marquee-group i { font-style: normal; font-size: 0.7rem; color: rgba(28,26,23,0.65); margin: 0 18px; }
.sw-h21-tap-chip { border: 2px solid #1C1A17; border-radius: 999px; padding: 2px 12px; margin: 0 18px 0 24px; font-size: 0.72rem; }
@keyframes sw-h21-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sw-h21-pulse { 0% { box-shadow: 0 0 0 0 rgba(232,74,51,0.5); } 70% { box-shadow: 0 0 0 9px rgba(232,74,51,0); } 100% { box-shadow: 0 0 0 0 rgba(232,74,51,0); } }
@media (max-width: 960px) { .sw-h21 { grid-template-columns: 1fr; } .sw-h21-content { padding: 2.4rem 1.5rem 1.2rem; } .sw-h21-title { font-size: 58px; letter-spacing: -1px; } .sw-h21-outline { -webkit-text-stroke-width: 1.5px; } .sw-h21-meta-row { padding-bottom: 1.6rem; } .sw-h21-visual { min-height: 56vh; } .sw-h21-poster-wrap { inset: 1rem 1.4rem 4.6rem; } .sw-h21-live { left: 10px; bottom: 14%; } .sw-h21-marquee { top: auto; bottom: 7%; } }