/*
Theme Name: PW247 The Final Master + Scoreboard Ribbon
Theme URI: https://prowrestling247.com/
Author: PW247 Engineering
Description: DEFINITIVE BROADCAST INFRASTRUCTURE. Automated RSS Integration. Categorical Swipe Rows (Netflix Effect). Cover Story Article Hero. Editorial Typography Engine. Talent Roster fixes. Asymmetrical Mosaic Grid. Condensed RSS Live Wire Scroller. Restricted Terminal Template. Tape Library Template. Decade Matrix Timeline Template. Memory Optimization Fix. Custom 404 Critical Error Page. Added Tale of the Tape Scoreboard Ribbon. Added Pay-Per-View Jumbotron and Ringside Wire Sidebar. Bulletproof CSS. Tactile Mobile Drawer.
Version: 391.0
License: GNU General Public License v2 or later
Text Domain: pw247
*/
:root { --y: #ffcc00; --r: #cc0000; --glass: rgba(5,5,5,0.5); }
* { box-sizing: border-box; }
body { background: #000 !important; color: #fff !important; font-family: 'Arial Black', sans-serif !important; margin: 0; padding-top: 110px !important; padding-bottom: 110px !important; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: 0.2s; }

/* ==========================================================================
   HALL OF FAME: 3D DIGITAL CARDS (INJECTED HIGH UP TO AVOID BREAKPOINTS)
   ========================================================================== */
.pw-hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; padding: 20px 0; }
.pw-hof-card { height: 480px; perspective: 1000px; display: block; }
.pw-hof-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.pw-hof-card:hover .pw-hof-inner { transform: rotateY(180deg); }

/* Front & Back Faces */
.pw-hof-front, .pw-hof-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border: 2px solid #222; box-sizing: border-box; }

/* The Front Image */
.pw-hof-front { background-color: #111; background-size: cover; background-position: center top; display: flex; align-items: flex-end; }
.pw-hof-front h3 { width: 100%; background: rgba(0,0,0,0.85); color: #ffcc00; padding: 20px; margin: 0; font-family: 'Arial Black', sans-serif; text-transform: uppercase; font-size: 22px; border-top: 3px solid #cc0000; text-align: center; }

/* The Back Data */
.pw-hof-back { background: #0a0a0a; transform: rotateY(180deg); padding: 40px 25px; display: flex; flex-direction: column; justify-content: center; text-align: center; border: 2px solid #ffcc00; box-shadow: inset 0 0 30px rgba(255,204,0,0.1); }
.pw-hof-back h3 { font-family: 'Arial Black', sans-serif; font-size: 24px; color: #fff; text-transform: uppercase; margin: 0 0 5px 0; line-height: 1.1; }
.pw-hof-back .class-year { font-family: 'Georgia', serif; font-size: 14px; font-style: italic; color: #ffcc00; margin-bottom: 25px; }
.pw-hof-back .promo-list { font-family: 'Arial Black', sans-serif; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; padding: 10px 0; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.pw-hof-back ul.highlights { list-style: none; padding: 0; margin: 0; text-align: left; }
.pw-hof-back ul.highlights li { font-family: 'Arial', sans-serif; font-size: 13px; color: #ccc; margin-bottom: 12px; display: flex; align-items: flex-start; line-height: 1.4; }
.pw-hof-back ul.highlights li::before { content: "•"; color: #cc0000; margin-right: 12px; font-weight: bold; flex-shrink: 0; }

/* ==========================================================================
   HEADER DESKTOP STYLES
   ========================================================================== */
#pw-h { position:fixed !important; top:0; left:0; width:100%; height:110px; background:var(--glass); backdrop-filter:blur(15px); border-bottom:3px solid var(--y); z-index:9999999; display:flex; flex-direction:column; }
.t-row { height:25px; background:#000; position:relative; overflow:hidden; border-bottom:1px solid #111; }
.t-badge { background:var(--y); color:#000; padding:0 15px; height:100%; display:flex; align-items:center; font-size:10px; font-weight:900; position:absolute; left:0; z-index:2000; box-shadow:10px 0 15px #000; font-family:'Arial Black', sans-serif; }
.t-move { display:inline-block; white-space:nowrap; animation:sc 45s linear infinite; line-height:25px; font-size:10px; padding-left:110px; }
@keyframes sc { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }
.l-row { display:flex; justify-content:space-between; align-items:center; padding:0 25px; height:35px; }
.logo-container { display:flex; align-items:center; gap: 15px; }
.logo-container img { max-width:750px !important; height:auto !important; max-height:30px; width:auto; object-fit:contain; display:block; border:none !important; }
.logo-container b { color:var(--y); font-size:22px; font-style:italic; border:none; }
.site-slogan { color: #fff; font-size: 11px; font-weight: 900; font-style: italic; letter-spacing: 1px; border: none !important; }
.net-bug { color:#fff; font-size:10px; font-weight:900; letter-spacing:1px; }
.c-bar { background:linear-gradient(90deg, #000, var(--r), #000); height:15px; display:flex; justify-content:center; align-items:center; font-size:8px; font-weight:900; letter-spacing:3px; border-top:1px solid #111; }
#n-row { height:35px; display:flex; justify-content:center; align-items:center; }
.u-list { display:flex; list-style:none; padding:0; margin:0; align-items:center; height:100%; }
.u-list > li { position:relative; display:flex; align-items:center; height:100%; }
.u-list > li > a { color:#fff !important; font-weight:900; text-transform:uppercase; padding:0 20px; font-size:12px; font-style:italic; text-decoration:none; white-space:nowrap; transition:0.2s; }
.u-list > li > a:hover { color:var(--y) !important; background:rgba(255,255,255,0.05); }
.s-menu { position:absolute; top:100%; left:0; background:#000; border:2px solid var(--y); border-top:4px solid var(--y); min-width:250px; display:none; z-index:10000000; list-style:none; padding:0; box-shadow: 0 10px 20px #000; }
.u-list li:hover .s-menu { display:block !important; }
.s-menu li { display:block; width:100%; }
.s-menu a { display:block !important; padding:12px 25px; font-size:11px; font-style:normal; border-bottom:1px solid #111; text-align:left; width:100%; color:#fff !important; font-weight:900; text-transform:uppercase; text-decoration:none; transition:0.2s; }
.s-menu a:hover { background:var(--y) !important; color:#000 !important; }
.mobile-menu-toggle { display: none; color:var(--y); font-size:18px; font-weight:900; cursor:pointer; letter-spacing:1px; }

/* ==========================================================================
   FOOTER DESKTOP STYLES
   ========================================================================== */
#pw-f { position:fixed !important; bottom:0; left:0; width:100%; height:110px; background:rgba(5,5,5,0.5); border-top:3px solid #ffcc00; z-index:9999999; display:flex; flex-direction:column; backdrop-filter:blur(15px); }
.f-ded { background:rgba(0,0,0,0.95); height:25px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#888; font-style:italic; border-bottom:1px solid #111; text-align:center; padding:0 20px; font-weight:900; }
.f-ctrl { flex:1; display:grid; grid-template-columns: 1.2fr 1fr 1.2fr; align-items:center; padding:0 30px; }
.v-btn { background:rgba(255,255,255,0.05); border:1px solid #ffcc00; color:#fff; padding:8px 30px; font-weight:900; cursor:pointer; clip-path:polygon(10% 0, 100% 0, 90% 100%, 0 100%); transition:0.2s; font-size:12px; width:100px; text-align:center; }
.v-btn:hover { background:var(--y); color:#000; }
.p-dot { width:12px; height:12px; background:#f00; border-radius:50%; box-shadow:0 0 12px #f00; animation:blnk 1.5s infinite !important; }
@keyframes blnk { 0%, 100% { opacity:1; } 50% { opacity:0.3; } }
#now-playing-txt { color:var(--y); font-size:10px; font-weight:900; letter-spacing:1px; margin-left:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width: 350px; }
.prime-logo { font-size:22px; font-weight:900; font-style:italic; color:#fff; text-align:right; }
.prime-logo span { color:var(--y); }

/* ==========================================================================
   THE PAY-PER-VIEW JUMBOTRON
   ========================================================================== */
.pw-jumbotron { position: relative; width: 100%; height: 70vh; min-height: 500px; background-size: cover; background-position: center 20%; border-bottom: 3px solid var(--y); }
.pw-jumbo-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(204,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%); display: flex; align-items: flex-end; padding: 60px 5%; }
.pw-jumbo-content { max-width: 1100px; z-index: 10; position: relative; width: 100%; animation: ringWalk 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.pw-jumbo-tag { color: var(--y); font-size: 14px; font-weight: 900; letter-spacing: 2px; margin-bottom: 15px; text-transform: uppercase; }
.pw-jumbo-tag span { color: #fff; margin-right: 8px; }
.pw-jumbo-title { font-size: 64px; color: #fff; text-transform: uppercase; font-style: italic; line-height: 1.1; margin: 0 0 20px 0; text-shadow: 2px 5px 15px rgba(0,0,0,0.9); font-family: 'Arial Black', sans-serif; }
.pw-jumbo-excerpt { font-size: 18px; color: #ccc; margin-bottom: 35px; font-family: 'Arial', sans-serif; line-height: 1.6; max-width: 800px; text-shadow: 1px 1px 3px #000; }
.pw-jumbo-btn { display: inline-block; background: var(--r); color: #fff !important; padding: 15px 40px; font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); transition: 0.2s; border: 1px solid transparent; }
.pw-jumbo-btn:hover { background: var(--y); color: #000 !important; }

/* ==========================================================================
   CONDENSED LIVE WIRE SCOREBOARD (GORILLA SCROLLER STYLE)
   ========================================================================== */
.pw-scoreboard-ribbon { 
    position: relative;
    width: 100%; 
    height: 25px; 
    background: #000; 
    border-bottom: 1px solid #111; 
    overflow: hidden; 
    margin-bottom: 40px; 
}
.pw-scoreboard-title { 
    position: absolute;
    left: 0;
    top: 0;
    background: var(--y); 
    color: #000; 
    font-family: 'Arial Black', sans-serif; 
    font-size: 10px; 
    font-weight: 900; 
    padding: 0 15px; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    z-index: 2000; 
    box-shadow: 10px 0 15px #000; 
}
.pw-scoreboard-marquee { 
    width: 100%;
    height: 100%;
}
.pw-marquee-track { 
    display: inline-block; 
    white-space: nowrap;
    line-height: 25px;
    font-size: 10px;
    animation: liveWireScroll 60s linear infinite; 
    padding-left: 120px; 
}
.pw-marquee-track:hover { 
    animation-play-state: paused; 
}
.pw-marquee-track a { 
    color: #fff; 
    font-family: 'Arial Black', sans-serif; 
    text-transform: uppercase; 
    margin-right: 50px; 
    text-decoration: none;
    transition: 0.2s;
}
.pw-marquee-track a b { 
    color: var(--y); 
    margin-right: 5px; 
}
.pw-marquee-track a:hover { 
    color: var(--y); 
}
.pw-marquee-track a:hover b {
    color: #fff;
}
@keyframes liveWireScroll { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
}

/* ==========================================================================
   THE RINGSIDE WIRE (SIDEBAR SYSTEM)
   ========================================================================== */
.pw-broadcast-hub { display: flex; gap: 40px; }
.pw-main-stage { flex: 1; min-width: 0; }
.pw-ringside-wire { width: 320px; flex-shrink: 0; }
.wire-header { font-family: 'Arial Black', sans-serif; font-size: 14px; font-style: italic; color: var(--y); border-bottom: 2px solid var(--y); padding-bottom: 10px; margin-bottom: 20px; letter-spacing: 2px; text-transform: uppercase; }
.wire-item { padding: 15px 0; border-bottom: 1px solid #1a1a1a; transition: 0.2s; }
.wire-item:hover { padding-left: 5px; }
.wire-tag { display: block; font-size: 9px; font-weight: 900; color: var(--r); margin-bottom: 5px; text-transform: uppercase; }
.wire-headline { font-size: 14px; line-height: 1.3; color: #fff; font-weight: 900; text-transform: uppercase; }

/* ==========================================================================
   CARDS & GRID SYSTEM
   ========================================================================== */
.card-container { perspective: 1000px; height: 100%; min-height: 420px; }
.card-inner { position: relative; width: 100%; height: 100%; min-height: 420px; transition: transform 0.6s; transform-style: preserve-3d; cursor: pointer; }
.card-container:hover .card-inner { transform: rotateY(180deg); }
.card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; overflow: hidden; border: 1px solid #1a1a1a; border-radius: 4px; }
.card-front { background: #111; }
.card-front img { width: 100%; height: 100%; object-fit: cover; }
.card-front-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(204,0,0,0.4) 60%, transparent 100%); padding: 30px 15px 15px; border-bottom: 3px solid var(--y); z-index: 5; pointer-events: none; }
.card-front-title { color: #fff; font-size: 15px; text-transform: uppercase; font-style: italic; line-height: 1.2; font-family: 'Arial Black', sans-serif; text-shadow: 2px 2px 0px #000; }
.card-front-title span { color: var(--y); }
.card-back { background: #000; transform: rotateY(180deg); display: flex; flex-direction: column; padding: 25px; border: 2px solid var(--y); box-shadow: inset 0 0 15px rgba(255,204,0,0.2); }
.card-title-box { background: #000; border: 1px solid var(--y); outline: 1px solid #fff; padding: 12px; margin-bottom: 15px; position: relative; z-index:2; }
.card-title-box h3 { color: #fff; margin: 0; font-size: 15px; text-transform: uppercase; font-style: italic; line-height: 1.2; }
.card-gradient { background: linear-gradient(135deg, var(--r) 0%, #000 100%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; }
.card-excerpt { font-size: 12px; line-height: 1.5; color: #eee; font-family: sans-serif; overflow: hidden; position:relative; z-index:2; }
.card-more { margin-top: auto; text-align: right; position:relative; z-index: 100; }
.card-more a { color: var(--y); font-weight: 900; font-size: 24px; letter-spacing: -2px; display:inline-block; padding:10px; cursor:pointer; }
.card-more a:hover { color: #fff; }

.tc-header { background: rgba(0, 0, 0, 0.5); border: 1px solid var(--y); padding: 25px; display: flex; gap: 25px; align-items: center; margin-bottom: 0; }
.tc-thumb { width: 150px; height: 150px; flex-shrink: 0; border: 2px solid var(--y); overflow: hidden; background: #000; }
.tc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-meta-area { flex: 1; }
.tc-title { color: #fff; font-size: 28px; text-transform: uppercase; font-style: italic; margin: 0 0 10px 0; line-height: 1.1; }
.tc-title span { color: var(--y); }
.tc-meta { font-size: 13px; color: #ccc; font-weight: 900; letter-spacing: 1px; }

.tc-content-wrap { padding: 4px; background: rgba(255, 204, 0, 0.5); margin-top: 5px; } 
.tc-content-inner { padding: 2px; background: rgba(0, 0, 0, 0.5); } 
.tc-content { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(204,0,0,0.25) 50%, rgba(255,204,0,0.25) 100%); backdrop-filter: blur(10px); color: #fff; padding: 40px; font-family: 'Arial', sans-serif; line-height: 1.8; font-size: 16px; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }

.pw247-embed-player { background: linear-gradient(135deg, #000 0%, #3a0000 50%, var(--y) 100%); border: 2px solid var(--y); padding: 15px; margin: 25px 0; display: flex; align-items: center; gap: 20px; box-shadow: 0 0 15px rgba(255,204,0,0.3); font-family: 'Arial Black', sans-serif; }
.pw247-audio-thumb { width: 80px; height: 80px; flex-shrink: 0; border: 2px solid var(--y); background: #000; box-shadow: 0 0 10px #000; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.pw247-audio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pw247-audio-info { flex-grow: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pw247-audio-title-bar { color: #fff; font-size: 16px; font-weight: 900; font-style: italic; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 5px; }
.pw247-audio-title-bar span { color: var(--y); }
.pw247-audio-controls { display: flex; align-items: center; gap: 15px; width: 100%; }
.pw247-embed-play-btn { background: rgba(0,0,0,0.5); border: 1px solid var(--y); color: #fff; padding: 8px 20px; font-weight: 900; cursor: pointer; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); transition: 0.2s; text-transform: uppercase; }
.pw247-embed-play-btn:hover { background: var(--y); color: #000; }
.pw247-time-display { color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 1px; flex-shrink: 0; min-width: 45px; text-align: center; text-shadow: 1px 1px 2px #000; }
.pw247-progress-bar { flex-grow: 1; height: 10px; background: rgba(0,0,0,0.5); border: 1px solid #222; position: relative; cursor: pointer; }
.pw247-progress-fill { height: 100%; background: linear-gradient(90deg, var(--r), var(--y)); width: 0%; pointer-events: none; }

.pw247-video-container { border: 2px solid var(--y); background: linear-gradient(135deg, #000 0%, #3a0000 50%, var(--y) 100%); padding: 10px; margin: 25px 0; position: relative; box-shadow: 0 0 15px rgba(255,204,0,0.3); }
.pw247-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background:#000; border:1px solid #000; }
.pw247-video-wrapper iframe, .pw247-video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.pw247-video-bar { background: rgba(0,0,0,0.8); height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #fff; margin-top: 10px; border:1px solid #222; }

/* Grid Rules */
.pw247-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 40px; }
.pw247-grid .card-container { grid-column: span 1; grid-row: span 1; height: 420px; }

.hof-hero { padding: 60px 20px 40px; background: radial-gradient(circle, rgba(255,204,0,0.15) 0%, transparent 70%); border-bottom: 2px solid var(--y); margin-bottom: 40px; text-align: center; position:relative; }
.hof-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--y), transparent); }
.hof-hero h1 { font-family: 'Arial Black', sans-serif; font-size: 52px; font-style: italic; text-transform: uppercase; color: #fff; text-shadow: 0 5px 15px rgba(0,0,0,0.8); margin:0; line-height:1.1; }
.hof-hero h1 span { color: var(--y); }

.hof-card .card-front-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(255,215,0,0.3) 60%, transparent 100%); border-bottom: 3px solid #fff; }
.hof-card .card-back { border: 2px solid #fff; box-shadow: inset 0 0 20px rgba(255,215,0,0.2); }
.hof-card .card-title-box { border: 1px solid #fff; }
.hof-card .card-more a { color: #fff; }
.hof-card .card-gradient { background: linear-gradient(135deg, var(--y) 0%, #000 100%); opacity:0.3; }

/* Ring Walk */
@keyframes ringWalk { 0% { opacity: 0; transform: translateY(60px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.pw247-grid .card-container { animation: ringWalk 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; opacity: 0; }
.pw247-grid .card-container:nth-child(1) { animation-delay: 0.05s; } .pw247-grid .card-container:nth-child(2) { animation-delay: 0.15s; } .pw247-grid .card-container:nth-child(3) { animation-delay: 0.25s; } .pw247-grid .card-container:nth-child(4) { animation-delay: 0.35s; } .pw247-grid .card-container:nth-child(5) { animation-delay: 0.45s; } .pw247-grid .card-container:nth-child(6) { animation-delay: 0.55s; } .pw247-grid .card-container:nth-child(7) { animation-delay: 0.65s; } .pw247-grid .card-container:nth-child(8) { animation-delay: 0.75s; } .pw247-grid .card-container:nth-child(9) { animation-delay: 0.85s; } .pw247-grid .card-container:nth-child(10) { animation-delay: 0.95s; } .pw247-grid .card-container:nth-child(11) { animation-delay: 1.05s; } .pw247-grid .card-container:nth-child(12) { animation-delay: 1.15s; }

/* Vault Atmosphere */
body.pw-vault-active::after { content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999998; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04)); background-size: 100% 4px, 3px 100%; box-shadow: inset 0 0 150px rgba(0,0,0,0.95); opacity: 0.7; }

/* Dynamic Status Badges */
.card-status-badge { position: absolute; top: 15px; left: 15px; padding: 6px 12px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; z-index: 10; font-family: 'Arial Black', sans-serif; border-radius: 2px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); }
.badge-on-air { background: linear-gradient(135deg, #ff0000 0%, #880000 100%); color: #fff; border: 1px solid #ff4444; animation: onAirPulse 2s infinite; }
@keyframes onAirPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); } }
.badge-vault { background: linear-gradient(135deg, var(--y) 0%, #cc9900 100%); color: #000; border: 1px solid #ffe680; box-shadow: 0 0 15px rgba(255, 204, 0, 0.3); }

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDES
   ========================================================================== */
@media (max-width: 1200px) { 
    .pw247-grid { grid-template-columns: repeat(3, 1fr); } 
}

@media (max-width: 1100px) {
    .pw-broadcast-hub { flex-direction: column; }
    .pw-ringside-wire { width: 100%; margin-top: 0px; }
}

@media (max-width: 992px) { 
    .pw247-grid { grid-template-columns: repeat(2, 1fr); } 
    .tc-header { flex-direction: column; text-align: center; gap: 15px; } 
    .tc-thumb { margin: 0 auto; } 
    
    .pw-jumbotron { height: 60vh; min-height: 450px; margin-bottom: 30px; }
    .pw-jumbo-title { font-size: 42px; }
    .pw-jumbo-excerpt { font-size: 16px; }

    .mobile-menu-toggle { display: block !important; padding: 5px; }
    .net-bug { display: none !important; } 
    
    #n-row { 
        display: none !important; position: fixed !important; top: 110px !important; left: 0 !important; width: 100vw !important; height: calc(100vh - 110px) !important; max-height: none !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; background: rgba(0,0,0,0.95) !important; backdrop-filter: blur(15px) !important; border-bottom: 3px solid var(--y) !important; padding: 0 0 100px 0 !important; z-index: 100000 !important; box-shadow: inset 0 15px 30px rgba(0,0,0,0.5) !important; flex-direction: column !important; justify-content: flex-start !important; 
    }
    #n-row.is-open { display: flex !important; }
    #n-row > div { display: none !important; }
    
    .u-list { flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .u-list > li { width: 100% !important; border-bottom: 1px solid #1a1a1a !important; display: block !important; }
    .u-list > li > a { display: block !important; padding: 18px 20px !important; font-size: 15px !important; }
    
    .u-list li:hover .s-menu { display: block !important; } 
    .s-menu { position: static !important; display: block !important; width: 100% !important; background: transparent !important; border: none !important; border-left: 4px solid var(--r) !important; box-shadow: none !important; }
    .s-menu a { padding: 15px 20px 15px 40px !important; color: #ccc !important; border-bottom: 1px solid #111 !important; font-size: 13px !important; }
    .s-menu a:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; }
    
    body.menu-lock { overflow: hidden !important; touch-action: none; }
}

@media (max-width: 768px) {
    .pw247-grid { grid-template-columns: 1fr; }
    .t-move { font-size: 12px; }
    
    .l-row { flex-direction: row !important; height: 35px !important; padding: 0 15px !important; text-align: left !important; }
    .logo-container { flex-direction: row !important; justify-content: flex-start !important; width: auto !important; }
    .logo-container img { max-height: 25px !important; }
    .site-slogan { display: none !important; } 

    #pw-f { height: auto !important; min-height: 110px !important; padding: 5px 0 !important; }
    .f-ctrl { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 10px !important; align-items: center !important; justify-content: center !important; }
    .prime-logo { display: none !important; } 
    .f-ded { height: auto !important; padding: 8px 12px !important; line-height: 1.4 !important; white-space: normal !important; }
    .pw247-embed-player { flex-direction: column !important; text-align: center !important; }
    .pw247-audio-info { align-items: center !important; }
    .pw247-audio-controls { flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
    .pw247-time-display { width: 100% !important; order: 3 !important; margin-top: 5px !important; } 
    .pw247-progress-bar { min-width: 200px !important; }
    
    .pw247-grid .card-container { height: 420px; }
    
    .pw-jumbotron { height: 50vh; min-height: 400px; }
    .pw-jumbo-overlay { padding: 40px 20px; }
    .pw-jumbo-title { font-size: 32px; }
    .pw-jumbo-excerpt { display: none; }
    .pw-jumbo-btn { padding: 12px 30px; font-size: 14px; }
    
    
    .pw-scoreboard-ribbon { margin-bottom: 25px; }
}

/* ==========================================================================
   CATEGORICAL SWIPE ROWS (THE NETFLIX EFFECT)
   ========================================================================== */
.pw-swipe-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Crucial for iOS smoothness */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--y) #111;
}

/* Custom Scrollbar for Chrome/Safari */
.pw-swipe-row::-webkit-scrollbar {
    height: 6px;
}
.pw-swipe-row::-webkit-scrollbar-track {
    background: #111; 
    border-radius: 4px;
}
.pw-swipe-row::-webkit-scrollbar-thumb {
    background: var(--y); 
    border-radius: 4px;
}

.pw-swipe-row .card-container {
    flex: 0 0 calc(33.333% - 14px); /* Show exactly 3 cards in the 70% desktop column */
    scroll-snap-align: start;
    height: 380px; /* Slightly shorter than main grid for sleekness */
    min-height: 380px;
}

/* Ensure inner cards fill the swipe container perfectly */
.pw-swipe-row .card-inner {
    height: 100%;
    min-height: 380px;
}

/* Adjust animation to trigger smoothly inside scroll containers */
.pw-swipe-row .card-container {
    opacity: 1; /* Remove grid spawn animation to prevent scroll clipping bugs */
    animation: none;
}

/* Swipe Responsive Breakpoints */
@media (max-width: 1200px) {
    .pw-swipe-row .card-container { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 768px) {
    .pw-swipe-row .card-container { 
        flex: 0 0 85%; /* Peek the next card so users know they can swipe */
        height: 350px; 
        min-height: 350px; 
    }
    .pw-swipe-row .card-inner {
        min-height: 350px;
    }
    .pw-swipe-row { 
        padding-left: 5px; 
        padding-right: 20px; 
    }
}

/* ==========================================================================
   MAGAZINE COVER STORY (SINGLE.PHP)
   ========================================================================== */
.pw-cover-hero {
    position: relative;
    width: 100vw;
    height: calc(100vh - 110px); /* Fill the entire screen below the header */
    background-size: cover;
    background-position: center 20%;
    background-color: #111;
    margin-bottom: 50px;
    border-bottom: 3px solid var(--y);
}

.pw-cover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.6) 100%);
    display: flex;
    align-items: flex-end;
    padding: 80px 5%;
}

.pw-cover-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    animation: ringWalk 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.pw-cover-cat {
    color: var(--y); font-size: 16px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px;
}
.pw-cover-cat span { color: #fff; margin-right: 10px; }

.pw-cover-title {
    font-size: 72px; color: #fff; text-transform: uppercase; font-style: italic; line-height: 1; margin: 0 0 25px 0; font-family: 'Arial Black', sans-serif; text-shadow: 0 10px 30px rgba(0,0,0,0.9);
}

.pw-cover-meta {
    font-size: 16px; font-weight: bold; letter-spacing: 2px; color: #ccc;
}
.pw-cover-author { color: var(--r); margin-right: 10px; }

.pw-editorial-content {
    font-size: 20px;
    line-height: 1.8;
    color: #ddd;
    font-family: 'Georgia', serif; /* Shift to a readable serif for long-form magazine reading */
}

.pw-editorial-content p {
    margin-bottom: 30px;
}

.pw-editorial-content h2, .pw-editorial-content h3 {
    font-family: 'Arial Black', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Mobile Cover Edits */
@media (max-width: 992px) {
    .pw-cover-title { font-size: 48px; }
}

@media (max-width: 768px) {
    .pw-cover-hero { height: calc(100vh - 70px); }
    .pw-cover-title { font-size: 36px; margin-bottom: 15px; }
    .pw-cover-overlay { padding: 40px 20px; }
    .pw-cover-cat { font-size: 12px; margin-bottom: 10px; }
    .pw-cover-meta { font-size: 12px; }
    .pw-editorial-content { font-size: 18px; line-height: 1.6; }
}

/* ==========================================================================
   EDITORIAL TYPOGRAPHY ENGINE (DROP CAPS & PULL QUOTES)
   ========================================================================== */

/* 1. The Drop Cap */
/* Targets the absolute first letter of the first paragraph in an article */
.pw-editorial-content > p:first-of-type::first-letter {
    float: left;
    font-size: 85px;
    line-height: 0.65;
    font-family: 'Arial Black', sans-serif;
    color: var(--y);
    margin: 8px 12px 0 0;
    text-shadow: 2px 2px 0px #000;
}

/* 2. The Pull Quote */
/* Automatically hijacks WordPress's default quote and pullquote blocks */
.pw-editorial-content blockquote, 
.pw-editorial-content .wp-block-quote,
.pw-editorial-content .wp-block-pullquote {
    margin: 50px 0;
    padding: 35px 0;
    border-top: 3px solid var(--y);
    border-bottom: 3px solid var(--y);
    border-left: none; /* Removes default WP quote styling */
    border-right: none;
    text-align: center;
    background: transparent;
}

.pw-editorial-content blockquote p, 
.pw-editorial-content .wp-block-quote p,
.pw-editorial-content .wp-block-pullquote p {
    font-family: 'Arial Black', sans-serif;
    font-size: 28px;
    font-style: italic;
    color: var(--y);
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* The Quote Attribution (Citation) */
.pw-editorial-content blockquote cite,
.pw-editorial-content .wp-block-quote cite,
.pw-editorial-content .wp-block-pullquote cite {
    display: block;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 2px;
    margin-top: 15px;
}

/* Mobile Typography Edits */
@media (max-width: 768px) {
    .pw-editorial-content > p:first-of-type::first-letter { font-size: 65px; margin: 6px 10px 0 0; }
    .pw-editorial-content blockquote p, 
    .pw-editorial-content .wp-block-quote p,
    .pw-editorial-content .wp-block-pullquote p { font-size: 20px; }
    .pw-editorial-content blockquote, 
    .pw-editorial-content .wp-block-quote,
    .pw-editorial-content .wp-block-pullquote { margin: 30px 0; padding: 25px 0; }
}

/* ==========================================================================
   THE MASTHEAD ROSTER (THE BULLPEN)
   ========================================================================== */
.pw-masthead-section {
    margin: 80px 0 20px;
    padding-top: 50px;
    border-top: 2px solid #222;
}

.pw-masthead-header {
    font-family: 'Arial Black', sans-serif;
    font-size: 24px;
    font-style: italic;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.pw-masthead-header span { 
    color: var(--y); 
    margin: 0 10px; 
}

.pw-masthead-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding: 0 20px 30px; /* Internal padding to allow hover pop without clipping */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar for a clean editorial look */
}
.pw-masthead-row::-webkit-scrollbar { 
    display: none; 
}

.pw-masthead-card {
    flex: 0 0 120px;
    scroll-snap-align: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pw-masthead-card:hover { 
    transform: translateY(-10px); 
}

.pw-masthead-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #333;
    padding: 4px;
    margin-bottom: 15px;
    transition: 0.3s;
    object-fit: cover;
    background: #000;
}

.pw-masthead-card:hover .pw-masthead-avatar {
    border-color: var(--y);
    box-shadow: 0 15px 25px rgba(255,204,0,0.2);
}

.pw-masthead-name {
    font-family: 'Arial Black', sans-serif;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 5px;
    line-height: 1.2;
}

.pw-masthead-card:hover .pw-masthead-name {
    color: var(--y);
}

.pw-masthead-role {
    font-family: 'Arial', sans-serif;
    font-size: 10px;
    color: #888;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .pw-masthead-section { margin: 40px 0 0; padding-top: 30px; }
    .pw-masthead-card { flex: 0 0 100px; }
    .pw-masthead-avatar { width: 75px; height: 75px; }
    .pw-masthead-name { font-size: 11px; }
}

/* ==========================================================================
   ASYMMETRICAL MOSAIC GRID (TOP STORIES)
   ========================================================================== */
.pw-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
    margin-bottom: 60px;
}

/* Override standard card constraints for the mosaic */
.pw-mosaic-grid .card-container { height: 100% !important; min-height: 0 !important; }
.pw-mosaic-grid .card-inner { min-height: 0 !important; }

/* The Massive Feature (Post 1: Spans 2 cols, 2 rows) */
.pw-mosaic-grid .card-container:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.pw-mosaic-grid .card-container:nth-child(1) .card-front-title {
    font-size: 28px;
    padding-bottom: 15px;
}
.pw-mosaic-grid .card-container:nth-child(1) .card-excerpt {
    font-size: 16px;
    line-height: 1.8;
}

/* Stacked Vertically Next to It (Posts 2 & 3: 1 col, 1 row) */
.pw-mosaic-grid .card-container:nth-child(2) {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.pw-mosaic-grid .card-container:nth-child(3) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* The 3 Strips Beneath (Posts 4, 5, 6: 1 col, 1 row) */
.pw-mosaic-grid .card-container:nth-child(4) { grid-column: 1 / 2; grid-row: 3 / 4; }
.pw-mosaic-grid .card-container:nth-child(5) { grid-column: 2 / 3; grid-row: 3 / 4; }
.pw-mosaic-grid .card-container:nth-child(6) { grid-column: 3 / 4; grid-row: 3 / 4; }

/* Mosaic Responsive Rules */
@media (max-width: 992px) {
    .pw-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .pw-mosaic-grid .card-container:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
    .pw-mosaic-grid .card-container:nth-child(2) { grid-column: 1 / 2; grid-row: 3 / 4; }
    .pw-mosaic-grid .card-container:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 4; }
    .pw-mosaic-grid .card-container:nth-child(4) { grid-column: 1 / 2; grid-row: 4 / 5; }
    .pw-mosaic-grid .card-container:nth-child(5) { grid-column: 2 / 3; grid-row: 4 / 5; }
    .pw-mosaic-grid .card-container:nth-child(6) { display: none; } /* Hide 6th to keep visual symmetry on tablets */
}

@media (max-width: 768px) {
    .pw-mosaic-grid { display: flex; flex-direction: column; gap: 20px; }
    .pw-mosaic-grid .card-container { height: 350px !important; }
    .pw-mosaic-grid .card-container:nth-child(6) { display: block; } /* Bring 6th back on mobile */
}

/* ==========================================================================
   THE VAULTS: RESTRICTED TERMINAL ARCHIVE
   ========================================================================== */
.pw-terminal-wrapper {
    font-family: 'Courier New', Courier, monospace;
    color: var(--y);
    background: #050505;
    padding: 40px;
    border: 2px solid var(--y);
    box-shadow: inset 0 0 30px rgba(255, 204, 0, 0.1);
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.pw-term-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
    border-bottom: 1px dashed var(--y);
    padding-bottom: 15px;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.5);
    letter-spacing: 2px;
}

.pw-term-cursor {
    animation: blink 1s step-end infinite;
    display: inline-block;
    width: 12px;
    height: 24px;
    background: var(--y);
    vertical-align: bottom;
    margin-left: 5px;
}

@keyframes blink { 50% { opacity: 0; } }

.pw-term-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pw-term-table th {
    text-align: left;
    padding: 15px 10px;
    border-bottom: 2px solid var(--y);
    color: #fff;
    text-transform: uppercase;
    font-family: 'Arial Black', sans-serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 2px;
}

.pw-term-table td {
    padding: 15px 10px;
    border-bottom: 1px dotted #333;
    transition: 0.2s;
}

.pw-term-table tr:hover td {
    background: rgba(255, 204, 0, 0.05);
}

.pw-term-link {
    color: var(--y);
    text-decoration: none;
    display: block;
    font-weight: bold;
    letter-spacing: 1px;
}

.pw-term-table tr:hover .pw-term-link {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.pw-term-badge {
    font-size: 10px;
    padding: 3px 8px;
    background: var(--r);
    color: #fff;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}

/* Mobile Adjustments for Terminal */
@media(max-width: 768px){
    .pw-terminal-wrapper { padding: 20px; border-width: 1px; }
    .pw-term-header { font-size: 16px; }
    .pw-term-cursor { height: 16px; width: 8px; }
    .pw-term-table th, .pw-term-table td { padding: 10px 5px; font-size: 12px; }
    .pw-term-link { font-size: 11px; }
    .hide-mobile { display: none; }
}

/* ==========================================================================
   THE VAULTS: TAPE LIBRARY ARCHIVE
   ========================================================================== */
.pw-tape-library-header { text-align: center; margin-bottom: 50px; }
.pw-tape-library-header h1 { font-family: 'Arial Black', sans-serif; font-size: 48px; color: #fff; text-transform: uppercase; font-style: italic; margin: 0; text-shadow: 0 5px 15px rgba(0,0,0,0.8); }
.pw-tape-library-header h1 span { color: var(--y); }
.pw-tape-library-header p { color: #888; font-weight: 900; letter-spacing: 3px; font-size: 12px; margin-top: 10px; }

.pw-tape-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; margin-bottom: 80px; }

.pw-tape-card { display: block; text-decoration: none; background: #111; border: 2px solid #222; padding: 15px; transition: 0.3s; position: relative; box-shadow: 5px 5px 0px #000; }
.pw-tape-card:hover { transform: translateY(-5px) scale(1.02); border-color: #444; box-shadow: 10px 10px 0px rgba(204,0,0,0.5); z-index: 10; }

.pw-tape-sleeve { position: relative; width: 100%; aspect-ratio: 4/3; background-color: #000; background-size: cover; background-position: center; border: 1px solid #000; overflow: hidden; filter: grayscale(80%) contrast(120%) sepia(30%); transition: 0.3s; }
.pw-tape-card:hover .pw-tape-sleeve { filter: grayscale(0%) contrast(100%) sepia(0%); }

/* VCR Static/Grime Overlay */
.pw-tape-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px); z-index: 1; pointer-events: none; }

.pw-tape-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); font-family: 'Arial Black', sans-serif; font-size: 32px; color: var(--r); background: rgba(0,0,0,0.8); padding: 10px 20px; border: 3px solid var(--r); opacity: 0; transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 2; }
.pw-tape-card:hover .pw-tape-play-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.pw-tape-label { background: #dedede; margin-top: 15px; padding: 10px 10px 10px 15px; border-left: 8px solid var(--r); border-radius: 2px; position: relative; background-image: repeating-linear-gradient(transparent, transparent 18px, #ccc 18px, #ccc 20px); background-position: 0 5px; }
.pw-tape-date { font-family: 'Courier New', monospace; font-size: 10px; color: #555; font-weight: bold; margin-bottom: 5px; }
.pw-tape-title { font-family: 'Arial', sans-serif; font-size: 16px; font-weight: 900; color: #000; text-transform: uppercase; line-height: 1.2; }

@media(max-width: 768px){
    .pw-tape-grid { grid-template-columns: 1fr; }
    .pw-tape-library-header h1 { font-size: 32px; }
}

/* ==========================================================================
   THE VAULTS: DECADE MATRIX TIMELINE
   ========================================================================== */
.pw-matrix-header {
    text-align: center;
    margin-bottom: 60px;
}
.pw-matrix-header h1 {
    font-family: 'Arial Black', sans-serif;
    font-size: 52px;
    color: #fff;
    text-transform: uppercase;
    font-style: italic;
    margin: 0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
}
.pw-matrix-header h1 span { color: var(--y); }
.pw-matrix-header p {
    color: #888;
    font-weight: 900;
    letter-spacing: 3px;
    font-size: 12px;
    margin-top: 10px;
}

.pw-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

/* The Central Vertical Line */
.pw-timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background: linear-gradient(180deg, transparent, var(--y), var(--y), transparent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    z-index: 1;
}

.pw-era-node {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    margin-bottom: 50px;
    z-index: 2;
}

/* Alternate Left and Right */
.pw-era-left { left: 0; text-align: right; }
.pw-era-right { left: 50%; text-align: left; }

/* The Dot on the Line */
.pw-era-node::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px;
    background-color: #000;
    border: 4px solid var(--r);
    top: 25px;
    border-radius: 50%;
    z-index: 3;
    transition: 0.3s;
}
.pw-era-right::after { left: -10px; right: auto; }
.pw-era-node:hover::after { background-color: var(--y); border-color: #fff; box-shadow: 0 0 15px var(--y); transform: scale(1.2); }

.pw-era-content {
    padding: 30px;
    background: rgba(10,10,10,0.85);
    border: 1px solid #333;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    transition: 0.3s;
    backdrop-filter: blur(10px);
}
.pw-era-node:hover .pw-era-content {
    border-color: var(--y);
    transform: translateY(-5px);
}

.pw-era-dates { font-family: 'Courier New', monospace; color: var(--r); font-weight: bold; font-size: 12px; margin-bottom: 5px; }
.pw-era-title { font-family: 'Arial Black', sans-serif; font-size: 26px; color: #fff; text-transform: uppercase; font-style: italic; line-height: 1.1; margin-bottom: 10px; }
.pw-era-desc { font-family: 'Arial', sans-serif; font-size: 13px; color: #ccc; line-height: 1.5; margin-bottom: 20px; }
.pw-era-promos { font-size: 11px; color: #777; font-weight: 900; letter-spacing: 1px; border-top: 1px solid #222; padding-top: 10px; margin-bottom: 20px; }

/* The Post Grid inside the node */
.pw-era-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.pw-era-left .pw-era-posts { justify-content: flex-end; }
.pw-era-right .pw-era-posts { justify-content: flex-start; }

.pw-era-post-item {
    width: calc(50% - 8px);
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
}
.pw-era-post-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    transition: 0.3s;
}
.pw-era-post-item:hover img { filter: grayscale(0); }
.pw-era-post-title {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.8);
    padding: 8px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}

/* Mobile Adjustments */
@media screen and (max-width: 768px) {
    .pw-timeline::after { left: 31px; }
    .pw-era-node { width: 100%; padding-left: 70px; padding-right: 0; text-align: left; }
    .pw-era-left, .pw-era-right { left: 0; }
    .pw-era-node::after { left: 21px; right: auto; }
    .pw-era-left .pw-era-posts { justify-content: flex-start; }
    .pw-era-post-item { width: 100%; }
    .pw-matrix-header h1 { font-size: 32px; }
}