/*
Theme Name: SISTEM
Theme URI: https://skripnikova.com
Author: Elena Skripnikova
Author URI: https://skripnikova.com
Description: Newspaper magazine theme for SISTEM
Version: 1.0
Text Domain: sistem
*/

/* ==========================
   RESET
========================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

ul {
    list-style: none;
}

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

/* ==========================
   TOKENS
========================== */
:root {
    --paper:    #f0ebe0;
    --paper-2:  #e8e2d5;
    --ink:      #0e0c08;
    --ink-soft: #5a5448;
    --neon:     #b8ff00;
    --ruby:     #c8001a;
    --mint:     #00ffc8;
    --punch:    #ff3366;
}

/* ==========================
   BASE
========================== */
body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
}

/* ==========================
   ТИКЕР
========================== */
.ticker {
    background: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    padding: 7px 0;
}

.ticker__inner {
    display: inline-flex;
    animation: ticker 15s linear infinite;
}

.ticker__item {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neon);
    margin: 0 24px;
}

.ticker__item a {
    color: var(--neon);
}

.ticker__sep {
    color: var(--neon);
    font-size: 10px;
    align-self: center;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================
   ТОПБАР
========================== */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 40px;
    border-bottom: 1px solid var(--ink);
}

.topbar__brand {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
}

.topbar__slogan {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--ink-soft);
}

.topbar__nav {
    display: flex;
    gap: 20px;
}

.topbar__nav a {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.topbar__nav a:hover {
    color: var(--ink);
    text-decoration: none;
}

/* ==========================
   НАВИГАЦИЯ
========================== */
.mainnav {
    display: flex;
    align-items: center;
    padding: 0 40px;
    border-bottom: 3px solid var(--ink);
}

.mainnav a {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    padding: 11px 20px;
    border-right: 1px solid var(--paper-2);
}

.mainnav a:first-child {
    padding-left: 0;
}

.mainnav a:hover {
    background: var(--paper-2);
    text-decoration: none;
}

.mainnav__back {
    margin-left: auto;
    color: var(--ruby) !important;
    border-right: none !important;
    padding-right: 0 !important;
}

.mainnav__back:hover {
    background: none !important;
    text-decoration: underline !important;
}

/* ==========================
   MASTHEAD
========================== */
.masthead {
    text-align: center;
    padding: 24px 40px 20px;
    border-bottom: 3px solid var(--ink);
}

.top-line {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.logo {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: clamp(56px, 10vw, 120px);
    line-height: 0.9;
    letter-spacing: -4px;
    text-transform: uppercase;
    color: var(--ink);
}

.logo a {
    color: var(--ink);
}

.tagline {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    margin-top: 12px;
}

/* ==========================
   ISSUE LINE
========================== */
.issue-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 40px;
    border-bottom: 1px solid var(--ink);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.issue-line strong {
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 11px;
    color: var(--ruby);
    letter-spacing: 1px;
}

/* ==========================
   NEWSPAPER GRID
========================== */
.newspaper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: 0;
    padding: 0 40px;
}

.left-column {
    border-right: 1px solid var(--ink);
    padding: 32px 24px 32px 0;
}

.main-column {
    padding: 32px 32px;
    border-right: 1px solid var(--ink);
}

.right-column {
    padding: 32px 0 32px 24px;
}

/* ==========================
   TYPOGRAPHY — HEADINGS
========================== */
.main-column h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 16px;
}

h3 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ink);
}

/* ==========================
   LABELS
========================== */
.label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
    display: block;
}

.label--neon  { background: var(--neon);  color: var(--ink);   padding: 2px 8px; }
.label--ruby  { background: var(--ruby);  color: var(--paper); padding: 2px 8px; }
.label--punch { background: var(--punch); color: var(--paper); padding: 2px 8px; }

/* ==========================
   DECK & META
========================== */
.deck {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 16px;
}

.meta {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
}

/* ==========================
   LEFT COLUMN — TABS
========================== */
.tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--ink);
    margin-bottom: 0;
}

.tab {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 12px 0;
    cursor: pointer;
    color: var(--ink-soft);
    text-align: left;
    transition: color 0.15s;
}

.tab--active {
    color: var(--ink);
}

.tab:hover {
    color: var(--ink);
}

.tab-content {
    padding-top: 20px;
}

/* ==========================
   LEFT COLUMN — ARTICLE LIST
========================== */
.article-list__item {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    align-items: start;
    padding: 12px 0;
    border-bottom: 1px solid var(--paper-2);
}

.article-list__item:last-child {
    border-bottom: none;
}

.article-list__num {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--ruby);
    line-height: 1.5;
}

.article-list__title {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink);
}

.article-list__title:hover {
    text-decoration: underline;
}

/* ==========================
   SINGLE ARTICLE
========================== */
.single-wrap {
    max-width: 740px;
    margin: 0 auto;
    padding: 48px 40px;
}

.single-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: var(--ink);
    margin: 16px 0;
}

.single-body {
    margin-top: 32px;
    border-top: 1px solid var(--ink);
    padding-top: 32px;
}

.single-body p {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink);
    margin-bottom: 24px;
}

.single-body h2,
.single-body h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--ink);
    margin: 32px 0 12px;
    letter-spacing: 0;
    text-transform: none;
    border: none;
    padding: 0;
}

.single-body h2 { font-size: 28px; }
.single-body h3 { font-size: 20px; }

.single-body blockquote {
    border-left: 3px solid var(--ruby);
    padding-left: 20px;
    margin: 24px 0;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ==========================
   RESPONSIVE
========================== */
@media (max-width: 1000px) {
    .topbar__slogan { display: none; }
    .topbar__nav    { display: none; }

    .mainnav {
        overflow-x: auto;
        padding: 0 20px;
    }

    .newspaper {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .left-column,
    .main-column,
    .right-column {
        border: none;
        padding: 24px 0;
        border-bottom: 1px solid var(--ink);
    }

    .right-column {
        border-bottom: none;
    }
}