/*!
Theme Name: 519 Magazine Custom
Theme URI: https://519magazine.com
Author: 519 Magazine
Author URI: https://519magazine.com
Description: A cutting-edge, lightweight magazine theme built for 519 Local. Refined typography, cinematic headers, and modular ad placements.
Version: 2.4.0

MASTER INDEX:
01. CSS Variables (Color Palette & Dark Mode)
02. Generic & Reset
03. Typography
04. Read More Buttons
05. Global Layout
06. Ad Architecture Styles
07. Sidebar Contest & Ad Styling
08. Header & Navigation
09. Single Article Styling
10. Front Page Hero & Film Animations
11. Film Keyframes
12. Category Sections
13. Sidebar & Widgets
14. Homepage News Grid
15. Footer
16. Review Rating Stars
17. Post Hero Watermark & Image Protection
18. Author Bio & Tightened Spacing
19. Dynamic "Read More" by Subject
20. 519 Cinematic Gallery
*/

/*--------------------------------------------------------------
# 01. CSS Variables (Color Palette & Dark Mode)
--------------------------------------------------------------*/
:root {
    --bg-body: #fcfbf9; /* Apple Starlight fallback base */
    --text-base: #2c2c2e;
    --heading-base: #111111;
    --border-light: #e5e5ea;
    --card-bg: #ffffff;
    --accent-color: #3277a1;
    --accent-hover: #1a4d6d;
    --font-headline: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;

    /* NEW: Light Mode Apple Starlight Spotlight */
    --bg-gradient: radial-gradient(circle at 50% 50%, #fcfbf9 0%, #e1dfda 100%);
}

[data-theme="dark"] {
    --bg-body: #28282a;
    --text-base: #d1d1d6;
    --heading-base: #ffffff;
    --border-light: #2c2c2e;
    --card-bg: #1c1c1e;
    --accent-color: #5fa8d3;   /* lighter blue — passes AA on all dark surfaces */
    --accent-hover: #7ec6e8;   /* hover brightens in dark mode (reverses light-mode pattern) */

    /* NEW: Symmetrical Dark Gradient (Graphite center, deep charcoal edges) */
    --bg-gradient: radial-gradient(circle at 50% 50%, #2e2e30 0%, #151516 100%);
}

/*--------------------------------------------------------------
# 02. Generic & Reset
--------------------------------------------------------------*/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* Fixed gradient background via a composited fixed pseudo-element — avoids
   background-attachment:fixed which forces full-page repaints on every scroll. */
html::before {
    content: '';
    position: fixed;
    inset: 0;
    background-color: var(--bg-body);
    background-image: var(--bg-gradient);
    background-size: cover;
    z-index: -1;
    pointer-events: none;
    transition: background-color 0.3s ease, background-image 0.3s ease;
}

/* Film grain: SVG fractalNoise tile, fixed viewport overlay — no image file, no HTTP request */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}
[data-theme="dark"] body::after {
    opacity: 0.065;
}

body {
    margin: 0;
    background-color: transparent;

    color: var(--text-base);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;

    transition: color 0.3s ease;
}

img {
    height: auto;
    max-width: 100%;
    display: block;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

a:hover {
    color: var(--accent-hover);
}

/*--------------------------------------------------------------
# 03. Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    clear: both;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: var(--heading-base);
}

p {
    margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# 04. Read More Buttons
--------------------------------------------------------------*/
.read-more-btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff !important;
    padding: 10px 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: background 0.3s ease, transform 0.2s ease;
    text-decoration: none;
}

.read-more-btn:hover {
    background-color: var(--heading-base);
    color: var(--bg-body) !important;
    text-decoration: none;
    transform: translateY(-2px);
}

/*--------------------------------------------------------------
# 05. Global Layout (The Seamless Hand-off)
--------------------------------------------------------------*/
.f519-post-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border-light);
}

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px; /* This is the only top gap allowed */
    align-items: flex-start;
}

/* Kills the gap between the Header and the very first story */
.home .content-wrapper,
.single #f519-scroll-shell {
    padding-top: 20px;
}

.site-main, #primary {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

/* Infinite scroll shell: articles column takes flex:1, sidebar stays sticky across all posts */
#f519-infinite-container {
    flex: 1;
    min-width: 0;
}

/* Reset #primary inside the infinite container — it's no longer a direct flex child */
#f519-infinite-container .site-main,
#f519-infinite-container #primary {
    flex: none;
    width: 100%;
}

/* Space between infinite-scroll posts */
#f519-infinite-container .f519-post-wrapper { padding-top: 40px; }
#f519-infinite-container .f519-post-wrapper:first-child { padding-top: 0; }

#secondary {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
    margin: 0 !important;
    position: sticky;
    top: 90px;
    align-self: flex-start;
}

/* On single posts: autonomous sidebar loop — sticky window, JS drives the inner tape */
#f519-scroll-shell #secondary {
    overflow: hidden;
    will-change: transform;
}

/* 
   THE PRECISION ALIGNMENT FIX 
   Stripping every possible margin from the first elements 
   in both the Main and Sidebar columns.
*/
#primary > *:first-child,
.hero-article:first-child,
.single-article:first-child,
#secondary > *:first-child,
#secondary > *.sidebar-ad-item:first-child .f519-ad-container,
#secondary > *.sidebar-ad-item:first-child .ad-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@media (max-width: 899px) {
    aside#secondary { position: static; width: 100%; max-width: 100%; margin-top: 40px; }
    .content-wrapper { padding-top: 20px; }
    .f519-byline-score { display: none !important; }
    /* Only cap sidebar ads at 300px — banner/front-page slots must stay full-width */
    #secondary .ad-container,
    #secondary .f519-ad-container,
    .sidebar-ad-item .ad-container,
    .sidebar-ad-item .f519-ad-container { max-width: 300px; }
}

/*--------------------------------------------------------------
# 06. Ad Architecture Styles
--------------------------------------------------------------*/

/* Universal ad spacing — covers all ad containers site-wide */
.ad-container,
.f519-ad-container {
    max-width: 100%;
    margin: 12px auto;
    text-align: center;
    display: flow-root; /* clears floats + new formatting context without CSS containment */
    clear: both;
    min-height: 90px; /* Reserve space before AdSense loads — prevents CLS */
}

/* Ensure AdSense slots always have a measurable width so availableWidth is never 0 */
.ad-container ins.adsbygoogle,
.f519-ad-container ins.adsbygoogle {
    width: 100%;
    display: block;
}

/* fp_hero: hero-article adds 20px below it, category-block adds 20px above next section.
   Negative margins cancel most of that so it sits tight against both neighbours. */
.ad-container.ad-fp_hero {
    margin-top: -17px;
    margin-bottom: -17px;
}

.ad-container img,
.f519-ad-container img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Banner / front-page slots fill the full column width */
.ad-container img {
    width: 100%;
}

/* Sidebar ads stay at their natural width (capped by container) */
#secondary .ad-container img,
.sidebar-ad-item .ad-container img {
    width: auto;
}

.in-article-top-wrap {
    margin: 30px 0;
    clear: both;
}

.in_article_mid-ad, .in_article_top-ad {
    margin: 30px 0;
}

.in-article-bottom-wrap {
    margin: 30px 0;
}


/*--------------------------------------------------------------
# 07. Sidebar Contest & Ad Styling
--------------------------------------------------------------*/
.sidebar-contest-cta {
    margin-bottom: 30px;
}

.contest-card {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}

.contest-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    opacity: 0.6;
    transition: 0.3s ease;
}

.contest-card:hover .contest-image img {
    transform: scale(1.05);
    opacity: 0.8;
}

.contest-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
}

.contest-overlay h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.3;
}

.enter-btn {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 3px;
}

.sidebar-ad-item {
    margin-bottom: 30px;
    text-align: center;
}

.sidebar-divider {
    border: 0;
    border-top: 1px solid var(--border-light);
    margin: 20px 0;
}

/*--------------------------------------------------------------
# 08. Header & Navigation (Stable Cinematic Aura & Fixes)
--------------------------------------------------------------*/
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

.dark-magazine-header {
    background-color: #111;
    border-bottom: 4px solid var(--accent-color);
}

.header-inner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.site-branding {
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    width: 120px; 
    height: 120px;
}

.site-logo {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
}

/* KILL THE LOGO LINK ACTION */
.site-logo a {
    pointer-events: none !important; 
    cursor: default !important;
}

/* THE SONAR PULSE */
.site-logo::before {
    content: "";
    position: absolute;
    top: 30px; 
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 4px rgba(50, 119, 161, 0.5);
    opacity: 0;
    z-index: 1;
    transition: all 0.5s ease;
    pointer-events: none;
}

/* THE BASE LOGO */
.site-logo img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid #fff;
    background-color: #000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transform: translateY(30px); /* Permanent Overhang */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    z-index: 10;
    cursor: default !important; /* No pointer finger */
    pointer-events: auto !important; /* Allows the hover effect to still trigger */
}

/* 1. THE HOVER: Magnetic Lift & Cinematic Optical Bloom */
.site-logo:hover img {
    transform: translateY(22px) scale(1.05); 
    border-color: #fff;
    box-shadow:
        0 0 15px rgba(255,255,255,0.9),     
        0 0 30px rgba(50, 119, 161, 0.9),   
        0 0 60px rgba(50, 119, 161, 0.6),   
        0 20px 100px rgba(50, 119, 161, 0.4);
}

/* 2. THE HOVER: Trigger the Sonar Pulse */
.site-logo:hover::before {
    animation: f519-aura-pulse 2s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes f519-aura-pulse {
    0% { transform: translateY(30px) scale(1); opacity: 0.8; box-shadow: 0 0 0 4px rgba(50, 119, 161, 0.8); }
    100% { transform: translateY(30px) scale(1.6); opacity: 0; box-shadow: 0 0 0 2px rgba(50, 119, 161, 0); }
}

/* 3. TACTILE CLICK */
.site-logo:active img {
    transform: translateY(30px) scale(0.98);
    box-shadow: 0 0 20px rgba(50, 119, 161, 0.8);
    transition: all 0.1s;
}

/* NAVIGATION & ICONS */
.header-right-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-social-links {
    display: flex;
    gap: 10px;
}

.social-icon, .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #222;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    padding: 0;
}

.social-icon:hover, .theme-toggle:hover { 
    transform: scale(1.1); 
}

.social-icon.facebook:hover { background-color: #1877F2; }
.social-icon.instagram:hover { background-color: #E4405F; }
.social-icon.twitter:hover { background-color: #000; }
.social-icon.email:hover { background-color: var(--accent-color); }

.theme-toggle {
    position: relative;
    background-color: #333;
}
/* Glow ring on a pseudo-element so only opacity is animated — fully composited */
.theme-toggle::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(50, 119, 161, 0.75);
    animation: f519-toggle-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
.theme-toggle:hover { background-color: var(--accent-color); }
.theme-toggle:hover::after { animation: none; opacity: 1; }
.theme-toggle svg { transition: transform 0.4s ease; }
[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }
@keyframes f519-toggle-pulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}
.sun-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }

/* SEARCH BAR FIXES */
.header-search {
    color: #fff;
    display: flex;
    align-items: center;
}

.header-search label {
    display: none; /* Hide "Search for:" label — icon-only in header */
}

.header-search form {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0;
}

.header-search input[type="search"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 4px 8px;
    font-size: 0.8rem;
    width: 110px;
    transition: width 0.3s ease, border-color 0.2s;
}

.header-search input[type="search"]::placeholder { color: rgba(255,255,255,0.45); }

.header-search input[type="search"]:focus {
    width: 160px;
    outline: none;
    border-bottom-color: rgba(255,255,255,0.75);
}

.header-search button,
.header-search input[type="submit"] {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    padding: 4px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-search button:hover,
.header-search input[type="submit"]:hover { color: #fff; }

/* Autocomplete wrap: stay inline in header, right-align dropdown */
.header-search .f519-search-wrap { width: auto; display: inline-flex; align-items: center; }
.header-search .f519-search-dropdown { right: 0; left: auto; min-width: 260px; }

.main-navigation { flex-grow: 1; margin: 0 30px; }
.main-navigation ul { display: flex; list-style: none; padding: 0; margin: 0; }
.main-navigation li { 
    margin-right: 20px; 
    position: relative; /* Critical: anchors the submenu to the parent item */
}
.main-navigation a { font-weight: bold; text-transform: uppercase; color: #fff; font-size: 0.85rem; }
.main-navigation a:hover { color: var(--accent-color); }
.main-navigation .menu-item-contact-us { margin-left: auto; margin-right: 0; }

/* --- SUBMENU: The "Apple" Glassmorphism Dropdown --- */

/* 1. Base State: Hidden, floating, blurred */
.main-navigation ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    padding: 10px 0;
    margin: 0;
    
    /* The Glass Effect */
    background: rgba(20, 20, 22, 0.75); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);

    /* Animation Prep */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px); /* Start slightly lower */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, snappy Apple-like curve */
    z-index: 1000;
}

/* 2. Hover State: Reveal and slide up */
.main-navigation li:hover > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(10px); /* Slides up to sit just below the header */
}

/* 3. Submenu Item Layout */
.main-navigation ul.sub-menu li {
    margin: 0; /* Kills the 20px right margin from the top level */
    width: 100%;
}

/* 4. Submenu Link Styling */
.main-navigation ul.sub-menu a {
    display: block;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none; /* Standard case is cleaner for dropdowns */
    letter-spacing: 0.5px;
    color: #d1d1d6; /* Muted white */
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

/* 5. Submenu Link Hover */
.main-navigation ul.sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.06); /* Very subtle highlight */
    color: #ffffff;
    padding-left: 24px; /* Slight typographic shift on hover */
}

/* --- NESTED SUBMENUS: The Side Flyouts --- */

/* 6. Base State for Nested Submenus (Third-Tier) */
.main-navigation ul.sub-menu ul.sub-menu {
    top: -10px; /* Aligns vertically with the top of the parent list item */
    left: 100%; /* Pushes it entirely to the right edge of the parent menu */
    margin-left: 2px; /* Creates a tiny, crisp gap between the glass panels */
    
    /* Override the downward animation from the parent rule, prep for side-slide */
    transform: translateX(-15px); 
}

/* 7. Hover State for Nested Submenus */
.main-navigation ul.sub-menu li:hover > ul.sub-menu,
.main-navigation ul.sub-menu li:focus-within > ul.sub-menu {
    /* Override the translateY(10px) vertical slide from the first-tier hover */
    transform: translateX(0); 
}

/*--------------------------------------------------------------
# 09. Single Article Styling
--------------------------------------------------------------*/
.category-right-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.category-label a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-color);
    color: #fff !important;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.15s ease;
}
.category-label a::before {
    content: '▸';
    font-size: 0.65rem;
    opacity: 0.75;
}
.category-label a:hover {
    background: var(--accent-hover);
    transform: translateX(3px);
}
[data-theme="dark"] .category-label a { color: #1a1a1c !important; }
[data-theme="dark"] .category-label a::before { opacity: 0.5; }

.header-date {
    font-size: 0.8rem;
    font-weight: 700; 
    color: var(--heading-base); 
    margin-top: 2px;
    text-transform: uppercase;
}

/* ==========================================================================
   DISPLAY FONT — Oswald on all major headlines
   ========================================================================== */
.single-title,
.entry-title,
.hero-title,
.hero-title a,
.page-title,
.section-title-defined,
.single-article .entry-content h2,
.single-article .entry-content h3 {
    font-family: var(--font-headline);
    letter-spacing: 0;
}

.single-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 5px;
    margin-bottom: 15px;
}

/* Non-post title treatment (desktop only): match right-rail "HEADLINES" style */
@media (min-width: 1024px) {
    body.page .entry-header {
        text-align: right;
    }

    body.page .entry-header > .single-title,
    body:not(.single-post) .page-header .page-title {
        display: inline-block;
        text-align: right;
        text-transform: uppercase;
        border-bottom: 4px solid var(--accent-color);
        padding-bottom: 6px;
    }
}

/* About Us page only */
.about-us-title {
    text-align: right;
}

/* Single article: staggered title-card reveal on load */
@media (prefers-reduced-motion: no-preference) {
    .single-article .category-right-wrapper {
        animation: f519-reveal-drop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    }
    .single-article .single-title {
        animation: f519-reveal-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
    }
    .single-article .entry-meta {
        animation: f519-reveal-fade 0.55s ease 0.58s both;
    }
}
@keyframes f519-reveal-drop {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes f519-reveal-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes f519-reveal-fade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.entry-meta {
    margin-bottom: 30px;
    padding: 0;
}

/* --- Event Review Box (Concert Ticket) --- */
.f519-event-box {
    float: right;
    display: flex;
    width: 240px;
    margin: 2px 0 22px 26px;
    border-radius: 10px;
    overflow: hidden;
    background: #0d1a25;
    border: 1px solid rgba(50, 119, 161, 0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    font-family: inherit;
}

/* --- Main ticket body --- */
.f519-ticket-main {
    flex: 1;
    min-width: 0;
    padding: 12px 13px 12px;
    display: flex;
    flex-direction: column;
}
.f519-event-box-title {
    margin: 0 0 9px;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.38;
    color: #ffffff;
}
.f519-ticket-perf {
    border: none;
    border-top: 1.5px dashed rgba(50, 119, 161, 0.45);
    margin: 0 0 9px;
}
.f519-event-box-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 7px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.4;
}
.f519-event-box-row:last-of-type { margin-bottom: 0; }
.f519-ev-icon {
    width: 13px;
    height: 13px;
    min-width: 13px;
    margin-top: 2px;
    stroke: var(--accent-color);
}
.f519-ticket-admit {
    margin-top: auto;
    padding-top: 10px;
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.2);
    text-align: center;
}
.f519-ticket-cta-wrap { margin-top: 10px; }
.f519-ticket-cta-label {
    display: block;
    font-size: 7.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.38);
    margin-bottom: 5px;
    text-align: center;
}
.f519-event-box-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(50, 119, 161, 0.5);
    text-decoration: none !important;
    transition: background 0.2s, border-color 0.2s;
    line-height: 0;
}
.f519-event-box-cta:hover {
    background: rgba(50, 119, 161, 0.18);
    border-color: rgba(50, 119, 161, 0.85);
}
.f519-event-box-cta img {
    height: 17px;
    width: auto;
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.f519-event-box-cta:hover img { opacity: 1; }

/* --- Tear-off stub --- */
.f519-ticket-stub {
    width: 50px;
    min-width: 50px;
    border-left: 1.5px dashed rgba(50, 119, 161, 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 0;
    position: relative;
    background: rgba(255,255,255,0.02);
}

/* Punch-hole circles at top and bottom of the tear seam.
   var(--bg-body) makes them appear as cutouts into the page. */
.f519-ticket-stub::before,
.f519-ticket-stub::after {
    content: '';
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-body);
    z-index: 2;
}
.f519-ticket-stub::before { top: -8px; }
.f519-ticket-stub::after  { bottom: -8px; }

.f519-ticket-stub-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.3);
    line-height: 1;
}
.f519-ticket-barcode {
    width: 30px;
    height: 46px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.5)  0px,  rgba(255,255,255,0.5)  1.5px,
        transparent            1.5px, transparent            3px,
        rgba(255,255,255,0.5)  3px,   rgba(255,255,255,0.5)  4px,
        transparent            4px,   transparent            5.5px,
        rgba(255,255,255,0.5)  5.5px, rgba(255,255,255,0.5)  7.5px,
        transparent            7.5px, transparent            9.5px,
        rgba(255,255,255,0.5)  9.5px, rgba(255,255,255,0.5)  11px,
        transparent            11px,  transparent            12px,
        rgba(255,255,255,0.5)  12px,  rgba(255,255,255,0.5)  13.5px,
        transparent            13.5px,transparent            15.5px,
        rgba(255,255,255,0.5)  15.5px,rgba(255,255,255,0.5)  18px,
        transparent            18px,  transparent            20.5px,
        rgba(255,255,255,0.5)  20.5px,rgba(255,255,255,0.5)  22px,
        transparent            22px,  transparent            23px,
        rgba(255,255,255,0.5)  23px,  rgba(255,255,255,0.5)  25px,
        transparent            25px,  transparent            27px,
        rgba(255,255,255,0.5)  27px,  rgba(255,255,255,0.5)  30px
    );
    opacity: 0.38;
    border-radius: 1px;
}
.f519-ticket-num {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.22);
    font-family: "Courier New", monospace;
}

@media (max-width: 600px) {
    .f519-event-box { float: none; width: auto; margin: 0 0 20px; }
}

/* --- Mobile star rating badge (header, float right) --- */
.f519-mob-rating {
    display: none; /* shown only on mobile via media query below */
}
@media (max-width: 899px) {
    .f519-mob-rating {
        float: right;
        margin: 0 0 10px 12px;
        padding: 5px 9px;
        background: var(--card-bg);
        border: 1px solid var(--border-light);
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
        line-height: 1;
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .f519-rating-box {
        display: none !important; /* replaced by header badge on mobile */
    }
}
.f519-mob-stars {
    color: #E5A823;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 1;
}
.f519-mob-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-base);
    opacity: 0.65;
}

.credit-line {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.credit-label {
    color: var(--heading-base); 
    font-weight: normal;
    margin-right: 4px;
}

.credit-label-alt {
    color: #999; 
    font-weight: normal;
    margin-right: 4px;
}

.smidgen-closer {
    margin-left: 6px; 
}

.credit-item a, .credit-item {
    font-weight: 700;
    color: var(--heading-base);
}

.credit-sep {
    margin: 0 10px;
    color: var(--border-light);
    font-weight: 300;
}

/*--------------------------------------------------------------
# 10. Front Page Hero & Film Animations
--------------------------------------------------------------*/
.hero-article {
    margin-bottom: 20px;
    perspective: 1000px;
}

/* hero-animate-wipe removed — no entrance animation on hero */

/* Hero: fixed 3:2 crop so all slideshow slides are identical height. */
.hero-visual-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #111;
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 3 / 2;
    line-height: 0;
}

/* Crush any old wrapper widths from the 2010 HTML */
.hero-visual-wrapper figure,
.hero-visual-wrapper a {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-main-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    object-position: center center;
    vertical-align: top;
}

.home .hero-main-img {
    filter: brightness(0.85);
}

.hero-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

.hero-sprockets {
    position: absolute;
    top: -2400px;
    left: 15px;
    width: 35px;
    height: 6000px;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 56px,
        rgba(0,0,0,0.85) 56px,
        rgba(0,0,0,0.85) 80px
    );
    z-index: 5;
    animation: film-reel-down 20s linear infinite;
    will-change: transform;
    border-left: 1px solid rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.05);
}

.hero-sprockets::after {
    content: "519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022 519 SAFETY FILM \2022\2022";
    position: absolute;
    top: 0;
    left: 100%; 
    margin-left: 0; 
    color: rgba(229, 177, 58, 0.8); 
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 4px;
    white-space: nowrap;
    writing-mode: vertical-lr; 
    pointer-events: none;
}

.hero-frame-line {
    position: absolute;
    top: 0;
    left: 65px;
    width: 2px;
    height: 100%;
    background: rgba(255, 255, 255, 0.25);
    z-index: 6;
    pointer-events: none;
    box-shadow: 1px 0 3px rgba(0,0,0,0.4);
}

/* Film scratch video overlay — screen blend over hero/gallery images. */
.hero-grain-video,
.sg-grain-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.30;
    pointer-events: none;
    z-index: 5;
}

.hero-content {
    position: relative;
    z-index: 10;
    margin: -36px 0 0;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 14px 28px 28px;
}

[data-theme="dark"] .hero-content {
    background: rgba(28, 28, 30, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-color);
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    line-height: 1;
}
.hero-label::before {
    content: '▸';
    font-size: 0.65rem;
    opacity: 0.75;
}
[data-theme="dark"] .hero-label { color: #1a1a1c; }

.hero-title {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
    color: var(--heading-base);
}

.hero-title a {
    color: inherit;
    text-decoration: none;
}

/*--------------------------------------------------------------
# 11. Film Keyframes
--------------------------------------------------------------*/
@keyframes film-reel-down {
    from { transform: translateY(-2400px); }
    to { transform: translateY(0); }
}


/*--------------------------------------------------------------
# 12. Category Sections (Defined Editorial Plates)
--------------------------------------------------------------*/
.category-block-defined {
    margin-top: 20px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--accent-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-block-inner {
    padding: 20px 24px;
}

/* Dark Mode Plate adjustments */
[data-theme="dark"] .category-block-defined {
    background: rgba(28, 28, 30, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

/* Section Header - The "Defined" look */
.section-header-defined {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-light);
}

.section-title-defined {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--heading-base);
    line-height: 1;
}

/* View All Pill Button */
.section-view-all-defined {
    background: var(--border-light);
    color: var(--text-base);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: 20px;
    transition: all 0.2s ease;
}

.section-view-all-defined:hover {
    background: var(--accent-color);
    color: #fff;
    transform: translateY(-1px);
}

/*--------------------------------------------------------------
# 13. Sidebar & Widgets (Compact Plate UI)
--------------------------------------------------------------*/
.widget {
    padding: 0 0 22px;
    margin-bottom: 20px;
}

[data-theme="dark"] .widget {
    background: none;
}

.widget-title {
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--heading-base);
    margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
}

.widget-title::before {
    content: ""; display: inline-block; width: 3px; height: 14px;
    background: var(--accent-color); border-radius: 2px;
}

.trending-list { display: flex; flex-direction: column; gap: 14px; }
.trending-item { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; }
.trending-rank { font-size: 1.1rem; font-weight: 900; color: var(--accent-color); line-height: 1; opacity: 0.3; min-width: 20px; }
.trending-item:hover .trending-rank { opacity: 1; }

.sidebar-ad-item { margin-bottom: 20px; clear: both; }
.sidebar-ad-item .f519-ad-container { margin: 0 !important; }

/*--------------------------------------------------------------
# 14. Magazine Grid (Inside Defined Plates)
--------------------------------------------------------------*/
.magazine-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px;
    width: 100%;
}

@media (max-width: 900px) {
    .magazine-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .magazine-grid {
        grid-template-columns: 1fr !important;
    }
}

.magazine-grid-4-col { grid-template-columns: repeat(4, 1fr) !important; }
.magazine-grid-4-col .post-thumbnail { aspect-ratio: 1 / 1; }
.magazine-grid-3-col { grid-template-columns: repeat(3, 1fr) !important; }
.magazine-grid-3-col .post-thumbnail { aspect-ratio: 16 / 9; }
.magazine-grid-2-col { grid-template-columns: repeat(2, 1fr) !important; }
.magazine-grid-2-col .post-thumbnail { aspect-ratio: 21 / 9; }

.grid-item { display: flex; flex-direction: column; }
.post-thumbnail { border-radius: 10px; overflow: hidden; background: #000; line-height: 0; position: relative; aspect-ratio: 3 / 2; }
.post-thumbnail img { position: absolute; inset: 0; }
.grid-item img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center 15%; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.4s ease; }
.grid-item:hover img { transform: scale(1.08); filter: saturate(1.35) contrast(1.06); }
.entry-header { padding-top: 15px; }
.entry-title { font-size: 1.05rem; line-height: 1.35; font-weight: 600; margin: 0; }
.entry-title a { color: var(--heading-base); text-decoration: none; }
.grid-item:hover .entry-title a { color: var(--accent-color); }

/* Entrance animations — gated by .f519-ready so cards are visible if JS never runs */
.f519-ready .grid-item,
.f519-ready .category-block-inner,
.f519-ready .f519-item {
    opacity: 0;
    transform: translateY(32px) scale(0.95);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.f519-ready .grid-item.f519-visible,
.f519-ready .category-block-inner.f519-visible,
.f519-ready .f519-item.f519-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .f519-ready .grid-item,
    .f519-ready .category-block-inner,
    .f519-ready .f519-item { opacity: 1; transform: none; transition: none; }
}

.page-header { margin-bottom: 40px; border-bottom: 1px solid var(--border-light); padding-bottom: 20px; text-align: right; }
.page-title { font-size: 2.4rem; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; }

/*--------------------------------------------------------------
# 15. Footer
--------------------------------------------------------------*/
.site-footer {
    background: #111;
    color: #ccc;
    padding: 60px 20px 30px;
    margin-top: 60px;
}

.footer-widgets {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-widget {
    flex: 1 1 250px;
}

.footer-title {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.site-info {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid #333;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
}

/*--------------------------------------------------------------
# 16. Review Rating Stars
--------------------------------------------------------------*/
.review-rating-display {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    background: var(--card-bg);
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.review-rating-label {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin-right: 12px;
    letter-spacing: 1.5px;
    color: var(--heading-base);
}

.star-rating {
    position: relative;
    display: inline-block;
    color: var(--border-light); 
    font-size: 1.25rem;
    line-height: 1;
}

.star-rating::before {
    content: '★★★★★';
}

.star-rating-filled {
    position: absolute;
    top: 0;
    left: 0;
    color: #E5A823; 
    overflow: hidden;
    white-space: nowrap;
}

.star-rating-filled::before {
    content: '★★★★★';
}

.review-rating-number {
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 10px;
    color: var(--heading-base);
}

/*--------------------------------------------------------------
# 17. Post Hero Watermark & Image Protection
--------------------------------------------------------------*/
.protect-img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.hero-photo-watermark {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    pointer-events: none;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/*--------------------------------------------------------------
# 18. Author Bio & Tightened Spacing
--------------------------------------------------------------*/
.entry-content {
    margin-bottom: 30px; 
}

/* Preserve Gutenberg/classic alignment semantics inside page/post content. */
.entry-content img.alignright,
.entry-content .wp-block-image.alignright,
.entry-content figure.alignright {
    float: right;
    margin: 0 0 1.25rem 1.5rem;
}

.entry-content img.alignleft,
.entry-content .wp-block-image.alignleft,
.entry-content figure.alignleft {
    float: left;
    margin: 0 1.5rem 1.25rem 0;
}

.entry-content img.aligncenter,
.entry-content .wp-block-image.aligncenter,
.entry-content figure.aligncenter {
    display: table;
    margin: 0 auto 1.25rem;
    float: none;
}

.entry-content .wp-block-image,
.entry-content figure {
    max-width: 100%;
}

.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.author-bio-box {
    margin: 30px 0; 
    padding: 25px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.author-bio-top {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 20px;
}

.author-avatar img {
    border-radius: 50%;
    border: 3px solid var(--accent-color);
    cursor: pointer;
}

.author-info {
    flex: 1;
    min-width: 280px;
}

.author-name {
    font-size: 1.4rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.author-description {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.author-social-links {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.author-social-links a {
    background: var(--accent-color);
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    transition: 0.2s ease;
}

.author-social-links a:hover {
    background: var(--heading-base);
    color: var(--bg-body);
}

.latest-by-title {
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: var(--heading-base);
}

.author-mini-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.mini-post a {
    display: block;
    text-decoration: none;
    color: var(--text-base);
}

.mini-post img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 3px;
    margin-bottom: 5px;
    transition: transform 0.2s ease;
}

.mini-post a:hover img {
    transform: translateY(-3px);
}

.mini-post span {
    display: block;
    font-size: 0.65rem;
    line-height: 1.2;
    font-weight: 600;
}

/*--------------------------------------------------------------
# 19. Dynamic "Read More" by Subject
--------------------------------------------------------------*/
.read-more-subjects {
    margin-bottom: 30px;
    padding-top: 10px;
}

.subject-row {
    margin-bottom: 30px;
}

.subject-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: var(--accent-color);
}

.more-stories-section {
    margin-top: 30px; 
    padding-top: 10px;
}

@media (max-width: 768px) {
    .author-mini-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .author-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/*--------------------------------------------------------------
# 20. 519 Cinematic Gallery
--------------------------------------------------------------*/
.five19-cinematic-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 30px 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
}

.five19-cinematic-gallery a {
    display: block;
    aspect-ratio: 1 / 1; 
    overflow: hidden;
    border-radius: 4px;
}

.five19-cinematic-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.five19-cinematic-gallery a:hover img {
    transform: scale(1.1);
}

@media (max-width: 900px) { .five19-cinematic-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .five19-cinematic-gallery { grid-template-columns: repeat(2, 1fr); } }

/* --- 1. VIEW TOGGLE BUTTONS (Modern & Spaced) --- */
.view-toggle-controls {
    display: flex;
    justify-content: flex-end; /* Aligns buttons to the right */
    gap: 12px;
    margin-top: 10px;
    margin-bottom: 40px; /* Gives it the breathing room above the posts */
    width: 100%;
    clear: both;
}

.view-toggle-controls button {
    background-color: transparent;
    color: #aaaaaa;
    border: 1px solid #555555;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.view-toggle-controls button:hover {
    color: #ffffff;
    border-color: #888888;
}

/* Matches the active button to a modern 519 blue style */
.view-toggle-controls button.active {
    background-color: #2c75a2; 
    color: #ffffff;
    border-color: #2c75a2;
}


/* --- 2. THE LIST VIEW OVERRIDES (Forcing the layout change) --- */
#magazine-archive-layout.list-view-active {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

/* Aligns the thumbnail and title side-by-side */
#magazine-archive-layout.list-view-active .grid-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Constrains the thumbnail to a small, uniform size */
#magazine-archive-layout.list-view-active .post-thumbnail {
    flex: 0 0 200px !important; /* Lock the width to 200px */
    max-width: 200px !important;
    margin-bottom: 0 !important;
}

#magazine-archive-layout.list-view-active .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Pushes the title to take up the rest of the row */
#magazine-archive-layout.list-view-active .entry-header {
    flex: 1 !important;
    text-align: left !important;
}

/*--------------------------------------------------------------
# 21. 519 Archive Vault Box
--------------------------------------------------------------*/
.f519-archive-vault-box {
    margin: 40px 0 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    background: var(--card-bg);
}

.f519-archive-vault-header {
    background: linear-gradient(135deg, #1a3a52 0%, #3277a1 100%);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.f519-archive-vault-eyebrow {
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0.95;
}

.f519-archive-vault-meta {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.f519-archive-vault-body {
    padding: 20px 24px;
}

.f519-archive-vault-body p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-base);
    opacity: 0.85;
}

[data-theme="dark"] .f519-archive-vault-box {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* --- Gallery Grid (519_gallery shortcode) --- */
.f519-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.f519-item { display: block; overflow: hidden; border-radius: 4px; background: #111; cursor: pointer; aspect-ratio: 3 / 2; }
.f519-item img { width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; display: block; }
.f519-hidden { display: none !important; }
.f519-more-wrapper { text-align: center; margin: 20px 0; }
.f519-more-btn { background: #3277a1; color: #fff !important; padding: 12px 25px; border-radius: 5px; text-decoration: none !important; font-weight: bold; cursor: pointer; display: inline-block; transition: 0.3s; }
.f519-more-btn:hover { background: #255a7a; transform: scale(1.05); }
@media (max-width: 900px) { .f519-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .f519-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Gallery Lightbox --- */
@keyframes f519FadeIn { from { opacity:0; transform:scale(0.96); } to { opacity:1; transform:scale(1); } }
#f519-pop { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); z-index:2147483647; display:none; align-items:center; justify-content:center; cursor:pointer; }
#f519-box { position:relative; max-width:1200px; width:92%; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:16px; box-shadow:0 8px 48px rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:12px; animation:f519FadeIn 0.22s ease; cursor:default; }
#f519-img { max-width:100%; width:auto; height:auto; max-height:85vh; display:block; border-radius:10px; object-fit:contain; cursor:default; }
.f519-btn { position:absolute; background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff !important; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; font-weight:bold; z-index:2147483648; transition:background 0.2s; }
.f519-btn:hover { background:rgba(255,255,255,0.28); }
#f519-x { top:-22px; right:-22px; }
#f519-p { left:-64px; top:50%; transform:translateY(-50%); }
#f519-n { right:-64px; top:50%; transform:translateY(-50%); }
@media (max-width:1350px) { #f519-p { left:10px; } #f519-n { right:10px; } #f519-x { top:10px; right:10px; } }

/* ==========================================================================
   SECTION 0c — SMART THUMBNAIL CROP + PULL QUOTE + EDITORIAL NOTE + BYLINE
   ========================================================================== */

.post-thumbnail img,
.magazine-grid .attachment-medium,
.magazine-grid .attachment-thumbnail,
.mini-post img,
.attachment-medium.size-medium,
.attachment-thumbnail.size-thumbnail,
.author-mini-grid img {
    object-fit: cover;
    object-position: center 20%;
}

/* Pull Quote Film Card */
.f519-pull-quote-wrap {
    float: right;
    width: 48%;
    margin: 0 0 30px 30px;
    clear: right;
}
.f519-pull-quote {
    position: relative;
    display: flex;
    align-items: stretch;
    background-color: #0a0a0a;
    background-image: var(--pq-bg, none);
    background-size: cover;
    background-position: center 15%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.f519-film-strip {
    width: 28px;
    min-width: 28px;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    background-color: rgba(8,8,8,0.94);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22'%3E%3Crect x='7' y='4' width='14' height='10' rx='2' fill='%23000' stroke='%23333' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 28px 22px;
}
.f519-film-strip-left  { border-right: 2px solid #1a1a1a; }
.f519-film-strip-right { border-left:  2px solid #1a1a1a; }
.f519-pull-quote-inner {
    flex: 1;
    padding: 24px 20px;
    background: transparent;
    position: relative;
    height: auto;
    min-height: 0;
    z-index: 2;
}
.f519-pull-quote-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(8,8,8,0.78) 0%, rgba(4,4,4,0.85) 100%);
    pointer-events: none;
    z-index: 0;
}
.f519-pull-quote-inner::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}
.f519-pull-quote-text,
.f519-pull-quote-attribution { position: relative; z-index: 2; }
.f519-pull-quote-text {
    font-size: 1rem;
    line-height: 1.65;
    color: #e2e8f0;
    font-style: italic;
    margin: 0 0 18px 0;
    padding: 0;
    border: none;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0.01em;
}
.f519-pull-quote-attribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(50, 119, 161, 0.4);
}
.f519-pull-quote-speaker {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3277a1;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.f519-pull-quote-pub {
    font-size: 10px;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.f519-pull-quote-date {
    font-size: 10px;
    color: #475569;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
:root:not([data-theme="dark"]) .f519-pull-quote-inner::before {
    background: linear-gradient(160deg, rgba(8,8,8,0.72) 0%, rgba(4,4,4,0.80) 100%);
}
@media (max-width: 768px) {
    .f519-pull-quote-wrap { float: none; width: 100%; margin: 0 0 30px 0; }
}

/* Editorial Note */
.f519-editorial-note {
    position: relative;
    margin: 30px 0;
    padding: 22px 24px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    border: 1px solid rgba(50, 119, 161, 0.3);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    overflow: hidden;
}
.f519-editorial-note::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(to bottom, #10b981, #3277a1);
    border-radius: 12px 0 0 12px;
}
.f519-editorial-note::after {
    content: "519";
    position: absolute;
    bottom: 12px; right: 18px;
    font-size: 48px;
    font-weight: 900;
    color: rgba(255,255,255,0.03);
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
    letter-spacing: -2px;
    pointer-events: none;
    line-height: 1;
}
.f519-editorial-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    padding: 4px 10px 4px 8px;
    background: rgba(50, 119, 161, 0.15);
    border: 1px solid rgba(50, 119, 161, 0.4);
    border-radius: 20px;
}
.f519-editorial-icon {
    color: #3277a1;
    font-size: 10px;
    animation: f519spin 8s linear infinite;
    display: inline-block;
}
@keyframes f519spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.f519-editorial-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3277a1;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.f519-editorial-body {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #94a3b8;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}
.f519-editorial-body em {
    color: #cbd5e1;
    font-style: italic;
}
@media (prefers-color-scheme: light) {
    .f519-editorial-note {
        background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
        border-color: rgba(50, 119, 161, 0.2);
        box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    }
    .f519-editorial-note::after { color: rgba(0,0,0,0.03); }
    .f519-editorial-body { color: #475569; }
    .f519-editorial-body em { color: #1e293b; }
}
[data-theme="dark"] .f519-editorial-note {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: rgba(50, 119, 161, 0.3);
}
[data-theme="dark"] .f519-editorial-body { color: #94a3b8; }

/* Byline Card */
.f519-byline {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
    overflow: hidden;
    margin: 0;
}
.f519-byline::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3277a1 0%, #10b981 100%);
}
.f519-byline-primary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 16px;
    flex-wrap: wrap;
}
@keyframes f519-wiggle {
    0%        { transform: rotate(0deg)   scale(1); }
    15%       { transform: rotate(-8deg)  scale(1.08); }
    30%       { transform: rotate(7deg)   scale(1.08); }
    45%       { transform: rotate(-5deg)  scale(1.05); }
    60%       { transform: rotate(4deg)   scale(1.05); }
    75%       { transform: rotate(-2deg)  scale(1.02); }
    100%      { transform: rotate(0deg)   scale(1); }
}
.f519-byline-avatar { flex-shrink: 0; }
.f519-byline-avatar a { display: block; line-height: 0; }
.f519-byline-avatar-img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    display: block;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}
.f519-byline-avatar a:hover .f519-byline-avatar-img,
.f519-byline-avatar-img:hover {
    animation: f519-wiggle 0.55s ease forwards;
    box-shadow: 0 0 0 3px #3277a1;
}
.f519-byline-credits {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    flex: 1;
}
.f519-byline-item {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.f519-byline-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3277a1;
    white-space: nowrap;
    flex-shrink: 0;
}
.f519-byline-value {
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.3;
}
.f519-byline-value a { color: #111111; text-decoration: none; }
.f519-byline-value a:hover { color: #3277a1; }
.f519-byline-pubdate {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}
.f519-byline-and { font-size: 11px; color: #94a3b8; font-weight: 400; margin: 0 2px; }
.f519-byline-archive-wrap {
    border-top: 1px solid #e2e8f0;
    padding: 11px 22px;
    background: linear-gradient(90deg, rgba(50,119,161,0.06) 0%, rgba(16,185,129,0.03) 100%);
}
.f519-byline-archive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    border: none;
    border-radius: 0;
    background: none;
    padding: 0; margin: 0;
    width: auto;
    justify-content: flex-start;
}
.f519-byline-source {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #3277a1;
    display: flex;
    align-items: center;
    gap: 5px;
}
.f519-byline-archive-icon { font-size: 12px; opacity: 0.6; }
.f519-byline-date {
    font-size: 12px;
    color: #475569;
    font-weight: 400;
}
.f519-byline-date::before {
    content: "·";
    margin: 0 8px;
    color: #94a3b8;
}
[data-theme="dark"] .f519-byline {
    background: #1c1c1e;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 2px 20px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.2);
}
[data-theme="dark"] .f519-byline-value,
[data-theme="dark"] .f519-byline-value a { color: #f1f5f9; }
[data-theme="dark"] .f519-byline-pubdate { color: #64748b !important; }
[data-theme="dark"] .f519-byline-label { color: #60a5fa; }
[data-theme="dark"] .f519-byline-archive-wrap {
    border-top-color: rgba(255,255,255,0.08);
    background: linear-gradient(90deg, rgba(50,119,161,0.12) 0%, rgba(16,185,129,0.06) 100%);
}
[data-theme="dark"] .f519-byline-source { color: #60a5fa; }
[data-theme="dark"] .f519-byline-date { color: #64748b; }

/* ==========================================================================
   SECTION 0d — PAGINATION STYLING
   ========================================================================== */

.pagination .nav-links .screen-reader-text,
nav.navigation.pagination h2,
.posts-navigation .nav-links h2,
.navigation .nav-links h2 { display: none !important; }

nav.navigation.pagination,
.posts-navigation { margin: 40px 0 20px; clear: both; }

nav.navigation.pagination .nav-links,
.posts-navigation .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
nav.navigation.pagination .page-numbers,
.posts-navigation .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #3277a1;
    color: #3277a1;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
nav.navigation.pagination .page-numbers.current {
    background: #3277a1;
    color: #fff;
    border-color: #3277a1;
}
nav.navigation.pagination .page-numbers:hover,
.posts-navigation .nav-links a:hover { background: #3277a1; color: #fff; }
nav.navigation.pagination .page-numbers.dots {
    border-color: transparent;
    color: #888;
    pointer-events: none;
}
[data-theme="dark"] nav.navigation.pagination .page-numbers,
[data-theme="dark"] .posts-navigation .nav-links a {
    border-color: #3277a1;
    color: #a8c8e0;
    background: transparent;
}
[data-theme="dark"] nav.navigation.pagination .page-numbers.current,
[data-theme="dark"] nav.navigation.pagination .page-numbers:hover,
[data-theme="dark"] .posts-navigation .nav-links a:hover { background: #3277a1; color: #fff; }
[data-theme="dark"] nav.navigation.pagination .page-numbers.dots { color: #555; }

/* ==========================================================================
   READING PROGRESS BAR
   ========================================================================== */
#f519-progress-bar {
    position: fixed;
    top: 74px;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--accent-color, #3277a1);
    z-index: 998;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.08s linear;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
}
@media (max-width: 1023px) {
    #f519-progress-bar { top: 58px; }
}

/* Reading badge — rides the leading edge of the progress bar */
#f519-read-badge {
    position: fixed;
    top: 80px;
    left: clamp(24px, var(--f519-prog, 0%), calc(100% - 40px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    color: var(--text-base);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 997;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
    white-space: nowrap;
}
#f519-read-badge.f519-badge-visible { opacity: 1; }
#f519-read-badge::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-color);
    flex-shrink: 0;
}
[data-theme="dark"] #f519-read-badge { box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
@media (max-width: 1023px) {
    #f519-read-badge { top: 64px; }
}

/* ==========================================================================
   CATEGORY — FEATURED LATEST POST
   ========================================================================== */
.f519-cat-featured {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
    padding-bottom: 36px;
    border-bottom: 2px solid var(--border-light, #e5e5ea);
    align-items: flex-start;
}
.f519-cat-featured-thumb {
    flex: 0 0 55%;
    overflow: hidden;
    border-radius: 8px;
}
.f519-cat-featured-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}
.f519-cat-featured-thumb:hover .f519-cat-featured-img { transform: scale(1.03); }

/* Author page header */
.f519-author-header { margin-bottom: 32px; }
.f519-author-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    margin-bottom: 20px;
    text-align: right;
}
.f519-author-title-group { flex: 1; }
.f519-author-byline-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 4px;
}
.f519-author-name { margin: 0 0 8px; line-height: 1.1; }
.f519-author-bio {
    font-size: 0.9rem;
    color: var(--text-base);
    line-height: 1.6;
    max-width: 480px;
    margin: 0 0 0 auto;
}
.f519-author-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 10px;
}
.f519-social-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(128,128,128,.25);
    color: var(--text-base);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    text-decoration: none;
    transition: border-color .18s, color .18s;
    opacity: .75;
}
.f519-social-link:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    opacity: 1;
}
.f519-author-photo a { display: block; flex-shrink: 0; }
.f519-author-avatar {
    border-radius: 50%;
    border: 3px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--accent-color);
    width: 110px !important;
    height: 110px !important;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.f519-author-photo a:hover .f519-author-avatar,
.author-avatar a:hover img {
    animation: f519-wiggle 0.55s ease forwards;
    box-shadow: 0 0 0 4px #3277a1;
}
[data-theme="dark"] .f519-author-avatar { box-shadow: 0 0 0 2px var(--accent-color); }
.f519-cat-featured-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 10px 0;
}
.f519-cat-featured-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--accent-color, #3277a1);
}
.f519-cat-featured-title {
    font-family: var(--font-headline);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    color: var(--heading-base, #111);
}
.f519-cat-featured-title a { color: inherit; text-decoration: none; }
.f519-cat-featured-title a:hover { color: var(--accent-color, #3277a1); }
.f519-cat-featured-excerpt {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-base, #444);
    margin: 0;
}
.f519-cat-featured-meta { font-size: 11px; color: #94a3b8; }
@media (max-width: 767px) {
    .f519-cat-featured { flex-direction: column; gap: 16px; }
    .f519-cat-featured-thumb { flex: none; border-radius: 0; }
    .f519-cat-featured-title { font-size: 1.3rem; }
}
[data-theme="dark"] .f519-cat-featured { border-bottom-color: var(--border-light, #2c2c2e); }
[data-theme="dark"] .f519-cat-featured-title a { color: var(--heading-base, #fff); }

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.f519-404-wrap { padding: 40px 0; text-align: center; }
.f519-404-message { margin-bottom: 44px; }
.f519-404-image {
    max-width: 420px;
    width: 100%;
    height: auto;
    margin: 0 auto 28px;
    display: block;
}
.f519-404-heading { font-size: 2.2rem; margin: 0 0 10px; color: var(--heading-base, #111); }
.f519-404-sub { font-size: 1rem; color: #94a3b8; margin: 0; }
.f519-404-grid { margin-bottom: 44px; text-align: left; }
.f519-404-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.f519-404-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    background: var(--accent-color, #3277a1);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s;
}
.f519-404-btn:hover { background: var(--accent-hover, #1a4d6d); color: #fff; }
.f519-404-search { display: flex; gap: 8px; align-items: center; }
.f519-404-search input[type="search"] {
    padding: 10px 14px;
    border: 1px solid var(--border-light, #e5e5ea);
    border-radius: 6px;
    font-size: 0.875rem;
    background: var(--card-bg, #fff);
    color: var(--text-base, #2c2c2e);
    width: 220px;
    outline: none;
}
.f519-404-search input[type="search"]:focus { border-color: var(--accent-color, #3277a1); }
.f519-404-search button {
    padding: 10px 18px;
    background: var(--accent-color, #3277a1);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
}
.f519-404-search button:hover { background: var(--accent-hover, #1a4d6d); }
@media (max-width: 600px) {
    .f519-404-heading { font-size: 1.6rem; }
    .f519-404-search input[type="search"] { width: 160px; }
}
[data-theme="dark"] .f519-404-heading { color: var(--heading-base, #fff); }

/* ==========================================================================
   WHAT'S HOT SIDEBAR WIDGET
   ========================================================================== */
.f519-whats-hot {
    margin-bottom: 28px;
    padding: 0 0 20px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e5e5ea);
    border-radius: 8px;
    overflow: hidden;
}
.f519-whats-hot-list,
.f519-whats-hot-item { padding-left: 16px; padding-right: 16px; }
.f519-whats-hot-heading {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: var(--accent-color, #3277a1);
    margin: 0 0 16px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.f519-whats-hot-heading::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.f519-whats-hot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.f519-whats-hot-item { display: flex; gap: 12px; align-items: flex-start; }
.f519-whats-hot-thumb { flex: 0 0 60px; width: 60px; height: 60px; overflow: hidden; border-radius: 4px; }
.f519-whats-hot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f519-whats-hot-text { flex: 1; min-width: 0; }
.f519-whats-hot-title { font-size: 0.82rem; font-weight: 600; line-height: 1.35; margin: 0 0 4px; }
.f519-whats-hot-title a { color: var(--heading-base, #111); text-decoration: none; }
.f519-whats-hot-title a:hover { color: var(--accent-color, #3277a1); }
.f519-whats-hot-date { font-size: 10px; color: #94a3b8; }
[data-theme="dark"] .f519-whats-hot { background: var(--card-bg, #1c1c1e); border-color: var(--border-light, #2c2c2e); }
[data-theme="dark"] .f519-whats-hot-heading { background: var(--accent-color); color: #1a1a1c; }
[data-theme="dark"] .f519-whats-hot-heading::before { border-left-color: rgba(26,26,28,0.6); }

/* Dark mode: lighter accent needs dark text on button/label backgrounds */
[data-theme="dark"] .read-more-btn,
[data-theme="dark"] .enter-btn,
[data-theme="dark"] .section-view-all-defined:hover,
[data-theme="dark"] .author-social-links a { color: #1a1a1c !important; }
[data-theme="dark"] .f519-more-btn { background: var(--accent-color); color: #1a1a1c !important; }
[data-theme="dark"] .f519-more-btn:hover { background: var(--accent-hover); }
[data-theme="dark"] .f519-whats-hot-title a { color: var(--heading-base, #fff); }

/* ==========================================================================
   LINK LEGIBILITY (custom cursor context — NO underlines, ever)
   Gated on .f519-cursor-active so it only applies when our custom cursor
   is running and the browser pointer cursor is hidden.
   ========================================================================== */

/* Any clickable text turns accent blue on hover — base rule catches most cases */
a:hover { color: var(--accent-color); }

/* Explicit overrides for selectors that set non-accent colour on anchors */
.entry-title a:hover,
.single-title a:hover,
.hero-title a:hover,
.mini-post a:hover,
.mini-post a:hover span,
.trending-item a:hover,
.f519-whats-hot-title a:hover,
.f519-byline a:hover,
.f519-byline-value a:hover,
.author-mini-grid a:hover,
.category-block-inner a:hover,
.widget a:hover,
.site-footer a:hover { color: var(--accent-color); }

/* Text links in article body — subtle background highlight on hover, no underline */
.f519-cursor-active .entry-content a:not([class]) {
    border-radius: 2px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.f519-cursor-active .entry-content a:not([class]):hover {
    background-color: rgba(50, 119, 161, 0.12);
}
[data-theme="dark"] .f519-cursor-active .entry-content a:not([class]):hover {
    background-color: rgba(95, 168, 211, 0.15);
}

/* Photo / card clickability rings — visible at rest, full accent on hover.
   .post-thumbnail and .f519-item use box-shadow (no overflow:hidden parent).
   .mini-post-thumb uses outline — immune to the overflow:hidden on .category-block-defined. */
.f519-cursor-active .post-thumbnail,
.f519-cursor-active .f519-item {
    box-shadow: 0 0 0 2px rgba(50, 119, 161, 0.22);
    transition: box-shadow 0.25s ease;
}
.f519-cursor-active .grid-item:hover .post-thumbnail,
.f519-cursor-active .f519-item:hover {
    box-shadow: 0 0 0 3px var(--accent-color);
}
[data-theme="dark"] .f519-cursor-active .post-thumbnail,
[data-theme="dark"] .f519-cursor-active .f519-item {
    box-shadow: 0 0 0 2px rgba(95, 168, 211, 0.28);
}
[data-theme="dark"] .f519-cursor-active .grid-item:hover .post-thumbnail,
[data-theme="dark"] .f519-cursor-active .f519-item:hover {
    box-shadow: 0 0 0 3px var(--accent-color);
}
/* mini-post-thumb: inset bottom line — drawn inside the element, immune to all overflow clipping */
.f519-cursor-active .mini-post-thumb {
    box-shadow: inset 0 -3px 0 rgba(50, 119, 161, 0.28);
    transition: box-shadow 0.25s ease;
}
.f519-cursor-active .mini-post:hover .mini-post-thumb { box-shadow: inset 0 -3px 0 var(--accent-color); }
[data-theme="dark"] .f519-cursor-active .mini-post-thumb { box-shadow: inset 0 -3px 0 rgba(95, 168, 211, 0.32); }
[data-theme="dark"] .f519-cursor-active .mini-post:hover .mini-post-thumb { box-shadow: inset 0 -3px 0 var(--accent-color); }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.f519-cursor-active,
.f519-cursor-active * { cursor: none !important; }
/* Restore cursor inside the lightbox even when Vinyl Mode is on */
#f519-pop, #f519-pop * { cursor: default !important; }
#f519-pop #f519-x, #f519-pop #f519-p, #f519-pop #f519-n { cursor: pointer !important; }

#f519-dot {
    position: fixed;
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width 0.2s cubic-bezier(0.16,1,0.3,1),
                height 0.2s cubic-bezier(0.16,1,0.3,1),
                border-radius 0.2s,
                opacity 0.15s;
    will-change: left, top;
}
#f519-ring {
    position: fixed;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    backdrop-filter: saturate(1.6) brightness(1.04);
    -webkit-backdrop-filter: saturate(1.6) brightness(1.04);
    transition: width 0.35s cubic-bezier(0.16,1,0.3,1),
                height 0.35s cubic-bezier(0.16,1,0.3,1),
                border-color 0.35s,
                background 0.35s,
                backdrop-filter 0.35s,
                opacity 0.15s;
    will-change: left, top;
}
/* Nav hover — ring vanishes, just the dot */
.f519-cursor-nav #f519-ring {
    opacity: 0;
    width: 0; height: 0;
}

/* Link hover — dot becomes a rotated diamond, ring tightens */
.f519-cursor-link #f519-dot {
    width: 10px; height: 10px;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.f519-cursor-link #f519-ring {
    width: 48px; height: 48px;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.45);
    backdrop-filter: saturate(1.3) brightness(1.08);
    -webkit-backdrop-filter: saturate(1.3) brightness(1.08);
}
/* Photo hover — ring becomes a vivid colour-boosting lens */
.f519-cursor-photo #f519-ring {
    width: 80px; height: 80px;
    background: rgba(255,200,90,0.05);
    border-color: rgba(255,200,90,0.6);
    backdrop-filter: saturate(3) contrast(1.18) brightness(1.06);
    -webkit-backdrop-filter: saturate(3) contrast(1.18) brightness(1.06);
}

/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }
    .cover-hero-slide.wipe-in  { animation: none !important; opacity: 1 !important; transform: none !important; }
    .cover-hero-slide.wipe-out { animation: none !important; opacity: 0 !important; }
    .hero-grain-video,
    .sg-grain-video            { display: none !important; }
    #f519-progress-bar         { transition: none !important; }
}

/* ==========================================================================
   SEARCH — filter bar, result count, highlighted snippets
   ========================================================================== */
.f519-search-filter {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-light, #e5e5ea);
    border-radius: 8px;
    font-size: 0.875rem;
}
.f519-search-filter label {
    font-weight: 600;
    color: var(--text-base, #444);
}
.f519-search-filter select {
    padding: 7px 10px;
    border: 1px solid var(--border-light, #e5e5ea);
    border-radius: 6px;
    background: var(--bg-body, #fcfbf9);
    color: var(--text-base, #2c2c2e);
    font-size: 0.875rem;
    cursor: pointer;
}
.f519-filter-clear {
    margin-left: auto;
    font-size: 0.8rem;
    color: #94a3b8;
    text-decoration: underline;
}
.f519-filter-clear:hover { color: var(--accent-color, #3277a1); }

.f519-search-result-count {
    margin: 0 0 20px;
    font-size: 0.875rem;
    color: #94a3b8;
}
.f519-search-result-count strong { color: var(--text-base, #444); }

.f519-search-snippet {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-base, #555);
    margin: 7px 0 0;
}

mark.f519-hl {
    background: rgba(50, 119, 161, 0.18);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}

[data-theme="dark"] .f519-search-filter {
    background: var(--card-bg, #1c1c1e);
    border-color: var(--border-light, #2c2c2e);
}
[data-theme="dark"] .f519-search-filter select {
    background: var(--bg-body, #28282a);
    color: var(--text-base, #d1d1d6);
    border-color: var(--border-light, #3a3a3c);
}
[data-theme="dark"] mark.f519-hl { background: rgba(50, 119, 161, 0.35); }