/*
Theme Name: Chrome Siren
Template: ashe
Author: Matthias Pagel
Version: 1.0
Description: Chrome Siren Systems HUD Theme
*/

/* ===================================================
   CHROME SIREN OS · BUILD 0.2 SYSTEM ALIVE
   Stable Ashe Child Theme CSS
   =================================================== */

:root {
    --cs-bg: #030507;
    --cs-bg-soft: #070b10;
    --cs-panel: rgba(8, 13, 18, 0.94);

    --cs-cyan: #19d7ff;
    --cs-orange: #ff6a2a;

    --cs-text: #dce5ee;
    --cs-bright: #eefaff;
    --cs-muted: #8f9aa7;

    --cs-border: rgba(25, 215, 255, 0.26);
    --cs-glow: rgba(25, 215, 255, 0.22);
}

/* ===================================================
   BASE
   =================================================== */

body {
    background:
        radial-gradient(circle at top center, rgba(25,215,255,0.08), transparent 34%),
        linear-gradient(180deg, #030507 0%, #070b10 48%, #030507 100%);
    color: var(--cs-text);
    font-family: "Exo 2", Arial, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(rgba(25,215,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25,215,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
}

#page,
.site,
.site-content,
.content-area,
.site-main {
    position: relative;
    z-index: 2;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title {
    font-family: "Orbitron", Arial, sans-serif;
    color: var(--cs-bright);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

a {
    color: var(--cs-cyan);
    transition: 0.25s ease;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px var(--cs-glow);
}

/* ===================================================
   HEADER · ASHE SAFE
   =================================================== */

.site-header,
#masthead,
.site-branding,
.header-logo,
.header-wrap,
.header-inner,
.header-container {
    background: #030507 !important;
}

.site-header,
#masthead {
    position: relative;
    z-index: 9999;
    overflow: visible !important;
    border-bottom: 1px solid var(--cs-border);
    box-shadow: 0 0 28px rgba(25,215,255,0.16);
}

.site-branding {
    padding: 25px 0;
    text-align: center;
}

.site-title a {
    font-family: "Orbitron", Arial, sans-serif;
    color: var(--cs-bright) !important;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(25,215,255,0.8);
    text-decoration: none;
}

.site-title a::before {
    content: "▲\A◄  ◎  ►\A▼";
    white-space: pre;
    display: block;
    margin-bottom: 10px;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: 4px;
    color: var(--cs-cyan);
    text-shadow: 0 0 12px rgba(25,215,255,0.9);
}

.site-description {
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-muted) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.main-navigation,
#main-nav {
    position: relative;
    z-index: 9999;
    overflow: visible !important;
    border-top: 1px solid rgba(25,215,255,0.16);
    border-bottom: 1px solid rgba(25,215,255,0.16);
    background: rgba(25,215,255,0.035);
}

.main-navigation a,
#main-nav a,
.menu a {
    font-family: "Rajdhani", Arial, sans-serif;
    color: #dff8ff !important;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 600;
    text-decoration: none;
}

.main-navigation a:hover,
#main-nav a:hover,
.menu a:hover {
    color: var(--cs-cyan) !important;
    text-shadow: 0 0 10px rgba(25,215,255,0.9);
}

.sub-menu,
.children {
    background: #030507 !important;
    border: 1px solid var(--cs-border) !important;
    box-shadow: 0 0 22px rgba(25,215,255,0.25) !important;
    z-index: 99999 !important;
}

.sub-menu a,
.children a {
    color: var(--cs-text) !important;
    background: transparent !important;
}

.sub-menu a:hover,
.children a:hover {
    color: var(--cs-cyan) !important;
    background: rgba(25,215,255,0.08) !important;
}

.site-header::after,
#masthead::after {
    content: "CORE: READY · BUILD 0.2 SYSTEM ALIVE · SECURITY: ALPHA · PROJECT: ATLAS";
    display: block;
    padding: 8px 12px;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--cs-cyan);
    text-align: center;
    border-top: 1px solid rgba(25,215,255,0.18);
    background: rgba(25,215,255,0.05);
}

/* ===================================================
   WORDPRESS CONTENT
   =================================================== */

article,
.post,
.page-content,
.entry-content,
.widget {
    background: linear-gradient(135deg, rgba(8,13,18,0.96), rgba(18,26,34,0.92));
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    box-shadow:
        0 0 18px rgba(25,215,255,0.08),
        inset 0 0 18px rgba(25,215,255,0.035);
}

.container-wrapper {
    background: transparent !important;
}

/* ===================================================
   BUTTONS
   =================================================== */

button,
input[type="submit"],
.wp-block-button__link,
.read-more a {
    font-family: "Rajdhani", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #132530, #071018);
    color: var(--cs-bright) !important;
    border: 1px solid var(--cs-cyan);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(25,215,255,0.22);
    transition: 0.25s ease;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.read-more a:hover {
    background: linear-gradient(135deg, #1b3b4a, #091219);
    border-color: #ffffff;
    box-shadow: 0 0 20px var(--cs-glow);
}

/* ===================================================
   CONTROL CENTER
   =================================================== */

.cs-control-center {
    max-width: 1200px;
    margin: 40px auto;
    padding: 34px;
    border: 1px solid var(--cs-border);
    background: linear-gradient(135deg, rgba(5,7,10,0.98), rgba(12,22,32,0.96));
    box-shadow: 0 0 40px rgba(25,215,255,0.18);
    position: relative;
    overflow: hidden;
}

.cs-control-center::before {
    content: "CHROME SIREN OS · CONTROL CENTER";
    position: absolute;
    top: 12px;
    left: 24px;
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    letter-spacing: 2px;
    font-size: 13px;
}

.cs-status {
    display: inline-block;
    margin: 18px 0 20px;
    padding: 8px 14px;
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    border: 1px solid var(--cs-border);
    background: rgba(25,215,255,0.06);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cs-terminal-title {
    margin-top: 38px;
    font-size: clamp(2.2rem, 6vw, 5rem);
    text-shadow: 0 0 18px rgba(25,215,255,0.75);
    animation: csTitlePulse 9s ease-in-out infinite;
}

.cs-terminal-sub {
    max-width: 760px;
    color: var(--cs-muted);
    font-size: 1.1rem;
}

.cs-bootline {
    margin-top: 30px;
    padding: 12px 14px;
    border-left: 3px solid var(--cs-cyan);
    background: rgba(25,215,255,0.06);
    font-family: "Rajdhani", Arial, sans-serif;
    letter-spacing: 1.4px;
    color: var(--cs-cyan);
    text-transform: uppercase;
    position: relative;
}

.cs-bootline::after {
    content: " · SYSTEM READY";
    animation: csBootMessage 11s steps(1, end) infinite;
}

/* ===================================================
   REAL SCANNER ELEMENT
   Wichtig: Im HTML muss direkt nach .cs-control-center stehen:
   <div class="cs-scanner-line"></div>
   =================================================== */

.cs-control-center > * {
    position: relative;
    z-index: 2;
}

.cs-scanner-line {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: -90px;
    width: 70px;
    pointer-events: none;
    z-index: 1 !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(25,215,255,0.00) 22%,
            rgba(25,215,255,0.06) 38%,
            rgba(25,215,255,0.18) 49%,
            rgba(255,255,255,0.22) 50%,
            rgba(25,215,255,0.18) 51%,
            rgba(25,215,255,0.06) 62%,
            transparent 100%
        );

    box-shadow:
        0 0 8px rgba(25,215,255,0.18),
        0 0 18px rgba(25,215,255,0.08);

    opacity: 0;
    animation: csSubtleScanner 11s ease-in-out infinite;
}

/* ===================================================
   MODULE CARDS
   =================================================== */

.cs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 36px;
}

.cs-module {
    display: block;
    min-height: 245px;
    padding: 24px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--cs-border);
    background: rgba(25,215,255,0.045);
    position: relative;
    transition: all .25s ease;
    animation: csModuleBreathe 8s ease-in-out infinite;
}

.cs-module:nth-child(2) { animation-delay: 1.2s; }
.cs-module:nth-child(3) { animation-delay: 2.4s; }
.cs-module:nth-child(4) { animation-delay: 3.6s; }

.cs-module:hover {
    color: inherit;
    text-decoration: none;
    transform: translateY(-6px);
    border-color: var(--cs-cyan);
    box-shadow: 0 0 25px rgba(25,215,255,.30);
}

.cs-module span {
    display: block;
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cs-module h3 {
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.cs-module p {
    color: var(--cs-muted);
    margin-bottom: 0;
}

.cs-module-status {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(25,215,255,0.18);
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    position: relative;
}

.cs-module-status strong {
    float: right;
    color: var(--cs-cyan);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(25,215,255,.6);
}

.cs-module::after {
    content: "ACCESS >";
    display: block;
    margin-top: 14px;
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    letter-spacing: 2px;
    opacity: 0.45;
    transition: 0.25s ease;
}

.cs-module:hover::after {
    content: "ACCESS GRANTED >";
    opacity: 1;
    letter-spacing: 3px;
    text-shadow: 0 0 12px rgba(25,215,255,0.8);
}

.cs-module::before {
    content: "SIGNAL\A100%";
    white-space: pre;
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 1.5px;
    color: rgba(25,215,255,0.55);
    text-align: right;
    opacity: 0.35;
    transition: 0.25s ease;
}

.cs-module:hover::before {
    opacity: 1;
    color: var(--cs-cyan);
    text-shadow: 0 0 10px rgba(25,215,255,.7);
}

/* ATA / Restricted */

.cs-restricted,
.ata-panel {
    border-color: rgba(255,106,42,0.45) !important;
    box-shadow: 0 0 20px rgba(255,106,42,0.12);
}

.cs-restricted span,
.cs-restricted .cs-module-status,
.cs-restricted::after,
.ata-panel .cs-label {
    color: var(--cs-orange);
}

.cs-restricted .cs-module-status strong {
    color: var(--cs-orange);
    text-shadow: 0 0 10px rgba(255,106,42,.6);
}

.cs-restricted::before {
    content: "SIGNAL\AENCRYPTED";
    color: rgba(255,106,42,0.55);
}

.cs-restricted:hover {
    box-shadow: 0 0 28px rgba(255,106,42,0.28);
}

.cs-restricted:hover::before {
    color: var(--cs-orange);
    text-shadow: 0 0 10px rgba(255,106,42,.7);
}

/* ===================================================
   PANELS
   =================================================== */

.cs-panel,
.cs-hero {
    position: relative;
    padding: 28px;
    margin: 24px 0;
    background: var(--cs-panel);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    box-shadow: inset 0 0 20px rgba(25,215,255,0.04);
}

.cs-panel::before,
.cs-panel::after,
.cs-hero::before,
.cs-hero::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
}

.cs-panel::before,
.cs-hero::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--cs-cyan);
    border-left: 2px solid var(--cs-cyan);
}

.cs-panel::after,
.cs-hero::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--cs-cyan);
    border-bottom: 2px solid var(--cs-cyan);
}

.cs-label {
    display: inline-block;
    margin-bottom: 12px;
    font-family: "Rajdhani", Arial, sans-serif;
    color: var(--cs-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cs-data {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(25,215,255,.15);
    font-family: "Rajdhani", Arial, sans-serif;
}

.cs-data span:first-child {
    color: #8fa1b2;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cs-data span:last-child {
    color: var(--cs-cyan);
    font-weight: bold;
}

/* ===================================================
   ANIMATIONS
   =================================================== */

@keyframes csSubtleScanner {
    0% { transform: translateX(0); opacity: 0; }
    12% { opacity: 0.65; }
    42% { transform: translateX(1400px); opacity: 0.65; }
    50% { opacity: 0; }
    100% { transform: translateX(1400px); opacity: 0; }
}

@keyframes csModuleBreathe {
    0%, 100% { box-shadow: 0 0 0 rgba(25,215,255,0); }
    50% { box-shadow: 0 0 14px rgba(25,215,255,0.10); }
}

@keyframes csTitlePulse {
    0%, 100% { text-shadow: 0 0 18px rgba(25,215,255,0.65); }
    45% { text-shadow: 0 0 18px rgba(25,215,255,0.65), 0 0 30px rgba(25,215,255,0.18); }
    55% { text-shadow: 0 0 20px rgba(25,215,255,0.85), 0 0 36px rgba(25,215,255,0.28); }
}

@keyframes csBootMessage {
    0% { content: " · INITIALIZING"; }
    25% { content: " · MODULE VERIFIED"; }
    50% { content: " · SYSTEM READY"; }
    75% { content: " · SENSOR SWEEP COMPLETE"; }
}

/* ===================================================
   MOBILE FIELD TERMINAL
   =================================================== */

@media (max-width: 768px) {

    body::before {
        background-size: 32px 32px;
    }

    .site-title a {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .site-title a::before {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .site-description {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .site-header::after,
    #masthead::after {
        content: "CORE: READY · BUILD 0.2 · ALPHA";
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.4;
    }

    .cs-control-center {
        margin: 18px 10px;
        padding: 18px 14px;
        border-radius: 0;
        box-shadow: 0 0 22px rgba(25,215,255,0.16);
    }

    .cs-control-center::before {
        content: "CHROME SIREN OS · FIELD TERMINAL";
        position: static;
        display: block;
        margin-bottom: 18px;
        font-family: "Rajdhani", Arial, sans-serif;
        color: var(--cs-cyan);
        font-size: 12px;
        letter-spacing: 2px;
        text-align: center;
    }

    .cs-scanner-line {
        left: -60px;
        width: 46px;
        animation-duration: 13s;
    }

    .cs-status {
        display: block;
        margin: 0 0 14px 0;
        padding: 8px 10px;
        font-size: 11px;
        letter-spacing: 1px;
        line-height: 1.5;
        text-align: center;
        white-space: normal;
    }

    .cs-terminal-title {
        font-size: 30px;
        line-height: 1.1;
        margin: 18px 0 12px;
        text-align: center;
        letter-spacing: 2px;
    }

    .cs-terminal-title::before {
        content: "FIELD TERMINAL";
        display: block;
        margin-bottom: 10px;
        font-family: "Rajdhani", Arial, sans-serif;
        font-size: 13px;
        color: var(--cs-cyan);
        letter-spacing: 3px;
    }

    .cs-terminal-sub {
        font-size: 14px;
        line-height: 1.55;
        text-align: center;
    }

    .cs-bootline {
        margin-top: 18px;
        padding: 10px;
        font-size: 12px;
        line-height: 1.4;
        letter-spacing: 1px;
        text-align: center;
    }

    .cs-grid {
        display: block;
        margin-top: 24px;
    }

    .cs-module {
        display: block;
        min-height: unset;
        margin: 0 0 12px 0;
        padding: 14px 12px;
        border-radius: 0;
        border-left: 3px solid var(--cs-cyan);
        border-top: 1px solid rgba(25,215,255,0.18);
        border-right: 1px solid rgba(25,215,255,0.10);
        border-bottom: 1px solid rgba(25,215,255,0.18);
        background: rgba(25,215,255,0.035);
        box-shadow: none;
        transform: none;
        animation: none;
    }

    .cs-module:hover {
        transform: none;
        box-shadow: 0 0 14px rgba(25,215,255,0.18);
    }

    .cs-module::before {
        content: "> OPEN MODULE";
        display: block;
        position: static;
        margin-bottom: 6px;
        font-family: "Rajdhani", Arial, sans-serif;
        font-size: 12px;
        color: var(--cs-muted);
        letter-spacing: 2px;
        opacity: 1;
        text-align: left;
    }

    .cs-module span {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .cs-module h3 {
        margin: 4px 0 6px;
        font-size: 19px;
        line-height: 1.2;
        letter-spacing: 1px;
    }

    .cs-module p {
        margin: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: var(--cs-muted);
    }

    .cs-module-status {
        margin-top: 10px;
        padding-top: 8px;
        font-size: 12px;
        letter-spacing: 1.5px;
    }

    .cs-module::after {
        content: "ACCESS >";
        margin-top: 8px;
        font-size: 12px;
        letter-spacing: 2px;
        opacity: 0.75;
    }

    .cs-module:hover::after {
        content: "ACCESS >";
        letter-spacing: 2px;
    }

    .cs-restricted {
        border-left-color: var(--cs-orange) !important;
        border-color: rgba(255,106,42,0.35) !important;
        background: rgba(255,106,42,0.045);
    }

    .cs-restricted span,
    .cs-restricted .cs-module-status,
    .cs-restricted::after,
    .cs-restricted::before {
        color: var(--cs-orange);
    }

    @keyframes csSubtleScanner {
        0% { transform: translateX(0); opacity: 0; }
        12% { opacity: 0.55; }
        42% { transform: translateX(520px); opacity: 0.55; }
        50% { opacity: 0; }
        100% { transform: translateX(520px); opacity: 0; }
    }
}
/* ===========================================
   SYSTEM INITIALIZATION PANEL
   =========================================== */

.cs-init-panel{

    position:relative;

    margin:50px auto;

    padding:35px;

    border:1px solid rgba(25,215,255,.25);

    background:linear-gradient(

        135deg,

        rgba(5,8,11,.96),

        rgba(10,18,28,.95)

    );

    box-shadow:

        0 0 25px rgba(25,215,255,.12),

        inset 0 0 20px rgba(25,215,255,.04);

}

.cs-init-head{

    font-family:"Rajdhani";

    color:#19d7ff;

    letter-spacing:4px;

    font-size:13px;

}

.cs-init-title{

    margin-top:10px;

    font-family:"Orbitron";

    font-size:34px;

    letter-spacing:3px;

    color:#eefaff;

}

.cs-init-module{

    margin-top:12px;

    margin-bottom:30px;

    color:#19d7ff;

    font-family:"Rajdhani";

    letter-spacing:2px;

}

.cs-progress{

    height:8px;

    background:#091018;

    border:1px solid rgba(25,215,255,.2);

    overflow:hidden;

    margin-bottom:30px;

}

.cs-progress-bar{

    height:100%;

    width:0;

    background:

    linear-gradient(

        90deg,

        #19d7ff,

        #9befff,

        #19d7ff

    );

    animation:csBoot 3s ease forwards;

}

@keyframes csBoot{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

.cs-terminal{

    margin-top:30px;

    padding:20px;

    background:#05080b;

    border-left:3px solid #19d7ff;

    font-family:"Rajdhani";

    color:#19d7ff;

    line-height:2;

}

.cs-terminal div{

    opacity:0;

    animation:terminalLine .5s forwards;

}

.cs-terminal div:nth-child(1){animation-delay:.2s;}
.cs-terminal div:nth-child(2){animation-delay:.8s;}
.cs-terminal div:nth-child(3){animation-delay:1.4s;}
.cs-terminal div:nth-child(4){animation-delay:2.1s;}

@keyframes terminalLine{

    from{

        opacity:0;

        transform:translateX(-12px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
/* ===================================================
   ATA DIVISION
   CLASSIFIED TERMINAL
   =================================================== */

.ata-panel{

    border:1px solid rgba(255,120,40,.45);

    box-shadow:
        0 0 28px rgba(255,120,40,.18),
        inset 0 0 20px rgba(255,120,40,.05);

    background:
        linear-gradient(
            135deg,
            rgba(18,10,6,.98),
            rgba(34,18,10,.96)
        );

}

.ata-panel .cs-init-head{

    color:#ff8b35;

}

.ata-panel .cs-init-title{

    color:#ffd8b5;

    text-shadow:0 0 18px rgba(255,120,40,.35);

}

.ata-panel .cs-init-module{

    color:#ff8b35;

}

.ata-panel .cs-data span:last-child{

    color:#ff8b35;

}

.ata-panel .cs-progress{

    border-color:rgba(255,120,40,.35);

}

.ata-panel .cs-progress-bar{

    background:

    linear-gradient(

        90deg,

        #ff6d2a,

        #ffb066,

        #ff6d2a

    );

}

.ata-panel .cs-terminal{

    background:#120a06;

    border-left:3px solid #ff8b35;

    color:#ffb066;

}

.ata-panel .cs-label{

    color:#ff8b35;

}
/* =========================================================
   CHROME SIREN SYSTEMS
   SINGLE POST / ARCHIVE RECORD
   ========================================================= */

.css-single-main {
    width: 100%;
    background: #07090b;
    padding: 60px 20px 100px;
}

.css-record {
    --css-bg: #090b0e;
    --css-panel: #0e1115;
    --css-line: rgba(255,255,255,0.09);
    --css-text: #d5d7d9;
    --css-muted: #747b82;
    --css-accent: #ff6a00;

    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--css-bg);
    color: var(--css-text);
    border: 1px solid var(--css-line);
    overflow: hidden;
}


/* ORANGE SYSTEM LINE */

.css-record::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 2px;
    background: var(--css-accent);
    box-shadow:
        0 0 8px rgba(255,106,0,0.65),
        0 0 20px rgba(255,106,0,0.25);
}


/* =========================================================
   HEADER
   ========================================================= */

.css-record-header {
    position: relative;
    padding: 65px 65px 55px;

    background:
        linear-gradient(
            90deg,
            rgba(255,106,0,0.035),
            transparent 40%
        );

    border-bottom: 1px solid var(--css-line);
}


.css-record-systemline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;

    margin-bottom: 38px;

    color: var(--css-accent);

    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


.css-record-systemline span::before {
    content: "// ";
    opacity: 0.35;
}


.css-record-id {
    margin-bottom: 13px;

    font-family: "Orbitron", sans-serif;
    font-size: 10px;
    letter-spacing: 2.5px;

    color: #727980;
}


.css-record-title {
    max-width: 950px;

    margin: 0;

    font-family: "Orbitron", sans-serif;
    font-size: clamp(34px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.08;

    letter-spacing: 1px;
    text-transform: uppercase;

    color: #f0f0f0;
}


.css-record-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 30px;

    color: var(--css-accent);

    font-family: "Orbitron", sans-serif;
    font-size: 9px;
    letter-spacing: 1.8px;
}


.css-status-light {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--css-accent);

    box-shadow:
        0 0 5px var(--css-accent),
        0 0 12px rgba(255,106,0,0.7);
}


/* =========================================================
   META / SYSTEM DATA
   ========================================================= */

.css-record-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-bottom: 1px solid var(--css-line);
}


.css-meta-cell {
    padding: 20px 26px;

    border-right: 1px solid var(--css-line);
}


.css-meta-cell:last-child {
    border-right: none;
}


.css-meta-label {
    display: block;

    margin-bottom: 6px;

    color: var(--css-muted);

    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.css-meta-value {
    color: #d3d5d6;

    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    letter-spacing: 1px;

    text-transform: uppercase;
}


.css-active {
    color: var(--css-accent);
}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.css-record-image {
    position: relative;

    width: 100%;

    border-bottom: 1px solid var(--css-line);

    background: #050607;

    overflow: hidden;
}


.css-record-featured-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 700px;

    object-fit: cover;

    filter:
        saturate(0.78)
        contrast(1.08)
        brightness(0.92);

    transition: filter 0.4s ease;
}


.css-record-image:hover .css-record-featured-image {
    filter:
        saturate(1)
        contrast(1.05)
        brightness(1);
}


.css-image-code {
    position: absolute;

    right: 20px;
    bottom: 16px;

    padding: 7px 10px;

    background: rgba(4,5,6,0.78);

    color: rgba(255,255,255,0.48);

    border: 1px solid rgba(255,255,255,0.07);

    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    letter-spacing: 1.8px;
}


/* =========================================================
   ARTICLE
   ========================================================= */

.css-record-content {
    padding: 65px 65px 90px;

    font-family: "Rajdhani", sans-serif;
}


.css-record-content > * {
    max-width: 850px;
}


.css-record-content p {
    margin: 0 0 29px;

    color: #c1c4c7;

    font-size: 19px;
    font-weight: 400;
    line-height: 1.75;
}


.css-record-content h2 {
    position: relative;

    margin: 75px 0 28px;

    padding-left: 22px;

    color: #ececec;

    font-family: "Orbitron", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.css-record-content h2::before {
    content: "";

    position: absolute;

    top: 2px;
    left: 0;
    bottom: 2px;

    width: 2px;

    background: var(--css-accent);

    box-shadow: 0 0 8px rgba(255,106,0,0.55);
}


.css-record-content h3 {
    margin: 50px 0 20px;

    color: var(--css-accent);

    font-family: "Orbitron", sans-serif;
    font-size: 15px;
    font-weight: 500;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


.css-record-content strong {
    color: #eeeeee;
}


.css-record-content a {
    color: var(--css-accent);
    text-decoration: none;

    border-bottom: 1px solid rgba(255,106,0,0.35);
}


.css-record-content a:hover {
    border-color: var(--css-accent);
}


/* =========================================================
   BLOCKQUOTES
   ========================================================= */

.css-record-content blockquote {
    margin: 55px 0;

    padding: 6px 0 6px 28px;

    border-left: 1px solid var(--css-accent);

    color: #ececec;

    font-size: 27px;
    font-weight: 300;
    line-height: 1.45;
}


.css-record-content blockquote p {
    margin: 0;

    color: inherit;

    font-size: inherit;
}


/* =========================================================
   IMAGES IN ARTICLE
   ========================================================= */

.css-record-content figure {
    max-width: 950px;

    margin: 55px 0;
}


.css-record-content figure img {
    display: block;

    width: 100%;
    height: auto;
}


.css-record-content figcaption {
    margin-top: 10px;

    color: var(--css-muted);

    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* =========================================================
   LISTS
   ========================================================= */

.css-record-content ul,
.css-record-content ol {
    margin: 30px 0;

    padding-left: 30px;

    color: #bfc2c4;

    font-size: 18px;
    line-height: 1.7;
}


.css-record-content li {
    margin-bottom: 8px;
}


.css-record-content li::marker {
    color: var(--css-accent);
}


/* =========================================================
   SEPARATOR
   ========================================================= */

.css-record-content hr {
    max-width: 850px;

    margin: 60px 0;

    border: 0;
    border-top: 1px solid var(--css-line);
}


/* =========================================================
   CODE / TECHNICAL DATA
   ========================================================= */

.css-record-content pre {
    max-width: 850px;

    padding: 25px;

    background: #0d1013;

    border: 1px solid var(--css-line);
    border-left: 2px solid var(--css-accent);

    overflow-x: auto;

    color: #bfc4c8;

    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
}


.css-record-content code {
    color: #ff8a38;
}


/* =========================================================
   FOOTER
   ========================================================= */

.css-record-footer {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 25px 65px;

    border-top: 1px solid var(--css-line);

    color: #61686e;

    font-family: "Orbitron", sans-serif;
    font-size: 7px;
    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .css-single-main {
        padding: 20px 10px 60px;
    }


    .css-record-header {
        padding: 45px 28px 40px;
    }


    .css-record-systemline {
        gap: 8px 15px;

        margin-bottom: 28px;

        font-size: 7px;
    }


    .css-record-title {
        font-size: clamp(30px, 9vw, 45px);
    }


    .css-record-meta {
        grid-template-columns: repeat(2, 1fr);
    }


    .css-meta-cell {
        border-bottom: 1px solid var(--css-line);
    }


    .css-record-content {
        padding: 45px 28px 65px;
    }


    .css-record-content p {
        font-size: 17px;
    }


    .css-record-content h2 {
        margin-top: 55px;

        font-size: 20px;
    }


    .css-record-content blockquote {
        font-size: 22px;
    }


    .css-record-footer {
        padding: 22px 28px;

        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .css-record-meta {
        grid-template-columns: 1fr;
    }


    .css-meta-cell {
        border-right: none;
    }

}
/* =========================================================
   CHROME SIREN SYSTEMS
   DIVISION COLOR SYSTEM
   ========================================================= */


/* DEFAULT / CSS SYSTEM */

.css-record.css-division-default {
    --css-accent: #ff6a00;
}


/* LAB / EMBEDDED / DEVELOPMENT */

.css-record.css-division-lab {
    --css-accent: #ff6a00;
}


/* GENESIS FILES / MAYHEM */

.css-record.css-division-genesis {
    --css-accent: #ff2c86;
}


/* ATA DIVISION */

.css-record.css-division-ata {
    --css-accent: #ff3030;
}


/* SIREN OS */

.css-record.css-division-siren {
    --css-accent: #00d9ff;
}
/* =========================================================
   ENTITY IDENTIFICATION
   ========================================================= */

.css-entity-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
    margin-top: 22px;
    color: var(--css-text-muted);
    font-family: "Orbitron", "Rajdhani", Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.css-entity-line span::before {
    content: "// ";
    color: var(--css-accent);
    opacity: 0.7;
}