:root{
    --void:        #0a0806;
    --panel:       #16110c;
    --panel-edge:  #2a2015;
    --caliche:     #ddceac;
    --caliche-dim: #9c8f74;
    --rust:        #c1502e;
    --amber:       #e8a33d;
    --crack:       #3a2c1c;
    --code:        #8f81ff;
}

*{ box-sizing: border-box; }

html, body{
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--void);
    background-image:
            radial-gradient(ellipse 80% 50% at 50% -10%, rgba(193,80,46,0.10), transparent 60%),
            repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    color: var(--caliche);
    font-family: 'IBM Plex Mono', monospace;
}

/* ---------- top ticker ---------- */
.ticker{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--caliche-dim);
    border-bottom: 1px solid var(--crack);
    flex-wrap: wrap;
    text-align: center;
}
.ticker .dot{
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 6px 1px var(--amber);
    animation: pulse 2.2s ease-in-out infinite;
    flex: none;
}
@keyframes pulse{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ---------- nav header ---------- */
.site-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.site-header .brand{
    font-family: 'VT323', monospace;
    font-size: 26px;
    letter-spacing: 0.06em;
    color: var(--amber);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(232,163,61,0.4);
}
.site-nav{
    display: flex;
    gap: 20px;
}
.site-nav a{
    color: var(--caliche-dim);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.12em;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
}
.site-nav a:hover,
.site-nav a.active{
    color: var(--amber);
    border-color: var(--amber);
}

/* ---------- crack divider (signature element) ---------- */
.crack{
    display: block;
    width: 100%;
    height: 18px;
    margin: 0 auto;
}
.crack svg{ display:block; width:100%; height:100%; }
.crack path{
    fill: none;
    stroke: var(--crack);
    stroke-width: 1.4;
}
.crack path.hi{
    stroke: var(--rust);
    opacity: 0.35;
}

/* ---------- footer ---------- */
footer{
    text-align: center;
    padding: 26px 20px 40px;
    font-size: 11.5px;
    color: var(--caliche-dim);
    letter-spacing: 0.03em;
}
footer a{
    color: var(--rust);
    text-decoration: none;
    border-bottom: 1px solid rgba(193,80,46,0.4);
}
footer a:hover{ color: var(--amber); border-color: var(--amber); }
footer .sysop{ margin-top: 6px; opacity: 0.75; }

@media (prefers-reduced-motion: reduce){
    .ticker .dot{ animation: none; }
}