/* ==========================================================================
   ONPUNTO — "News Wire" design system
   Ink navy + paper + signal amber. Headlines in a condensed grotesk,
   body copy in a newspaper serif, metadata in mono — like a wire service
   crossed with a terminal.
   ========================================================================== */

:root{
    --ink:        #0E1116;
    --ink-soft:   #171B22;
    --paper:      #ECEAE2;
    --paper-dim:  #B9B6AC;
    --amber:      #FFB238;
    --teal:       #3FA796;
    --alert:      #E4572E;
    --border:     #2A2F38;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Source Serif 4', serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }

/* ---------- Ticker (desktop only) ---------- */
.ticker-bar{
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--ink-soft);
    border-bottom: 1px solid var(--border);
    padding: .5rem 1.25rem;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: .78rem;
}
.ticker-dot{
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--alert);
    box-shadow: 0 0 0 0 rgba(228,87,46,.6);
    animation: pulse 1.6s infinite;
    flex-shrink: 0;
}
@keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(228,87,46,.55); }
    70%{ box-shadow: 0 0 0 7px rgba(228,87,46,0); }
    100%{ box-shadow: 0 0 0 0 rgba(228,87,46,0); }
}
.ticker-live{
    color: var(--alert);
    font-weight: 600;
    letter-spacing: .08em;
    flex-shrink: 0;
}
.ticker-track{ overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-content{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: scroll-left 55s linear infinite;
}
.ticker-content:hover{ animation-play-state: paused; }
@keyframes scroll-left{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(-50%); }
}
.ticker-item{ color: var(--paper-dim); padding: 0 .5rem; }
.ticker-item:hover{ color: var(--amber); }
.ticker-sep{ color: var(--border); }

/* ---------- Masthead ---------- */
.masthead{ border-bottom: 1px solid var(--border); }
.masthead-inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: end;
    gap: 1rem 1.5rem;
}
.logo{ display: flex; align-items: center; gap: .5rem; grid-row: 1; }
.logo-mark{
    width: 22px; height: 22px;
    background: var(--amber);
    -webkit-mask: radial-gradient(circle at 30% 30%, transparent 3px, #000 3.5px);
    border-radius: 3px;
    position: relative;
}
.logo-mark::after{
    content:'';
    position: absolute; inset: 6px;
    background: var(--ink);
    border-radius: 2px;
}
.logo-text{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -.01em;
}
.logo-text em{ font-style: normal; color: var(--amber); }
.tagline{
    grid-row: 2; grid-column: 1;
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--paper-dim);
    margin: 0;
}
.category-nav{
    grid-row: 1 / 3; grid-column: 2;
    align-self: center;
    display: flex; gap: 1.75rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
}
.category-nav a{ color: var(--paper-dim); position: relative; padding-bottom: 2px; }
.category-nav a.active, .category-nav a:hover{ color: var(--paper); }
.category-nav a.active::after{
    content:''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--amber);
}
.lang-toggle{
    grid-row: 1 / 3; grid-column: 3;
    align-self: center;
    display: flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: .78rem;
}
.lang-opt{ padding: .4rem .8rem; color: var(--paper-dim); }
.lang-opt.active{ background: var(--amber); color: var(--ink); font-weight: 600; }

/* ---------- Ad units ---------- */
.ad-unit{
    max-width: 1180px;
    margin: 1.25rem auto;
    padding: .5rem 1.25rem;
    text-align: center;
}
.ad-label{
    display: block;
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    color: var(--paper-dim);
    margin-bottom: .4rem;
    text-transform: uppercase;
    opacity: .6;
}

/* ---------- Feed / cards ---------- */
.feed{ max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.empty-state{
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 2.5rem;
    text-align: center;
    color: var(--paper-dim);
    font-family: var(--font-mono);
    font-size: .85rem;
}
.article-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.card{
    background: var(--ink-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-2px); border-color: var(--teal); }
.card-lead{ grid-column: span 2; grid-row: span 2; }
.card-lead .card-title a{ font-size: 1.5rem; }
.card-media{ position: relative; aspect-ratio: 16/9; background: var(--border); }
.card-lead .card-media{ aspect-ratio: 16/8; }
.card-media img{ width: 100%; height: 100%; object-fit: cover; }
.card-media-placeholder{
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,178,56,.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(63,167,150,.18), transparent 45%),
        var(--ink);
}
.card-category{
    position: absolute; top: .6rem; left: .6rem;
    background: var(--ink); color: var(--amber);
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
    padding: .2rem .55rem; border-radius: 999px; letter-spacing: .05em;
    border: 1px solid var(--border);
}
.card-body{ padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-meta{
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: .7rem; color: var(--paper-dim);
    text-transform: uppercase; letter-spacing: .04em;
}
.card-title{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.card-title a:hover{ color: var(--amber); }
.card-excerpt{ margin: 0; font-size: .92rem; line-height: 1.55; color: var(--paper-dim); flex: 1; }
.card-readmore{
    font-family: var(--font-mono); font-size: .75rem; color: var(--teal);
    align-self: flex-start; margin-top: .2rem;
}
.card-readmore:hover{ color: var(--amber); }
.card-photo-credit{
    font-family: var(--font-mono); font-size: .62rem; color: var(--paper-dim);
    opacity: .5; margin-top: -.3rem;
}
.card-ad{ display: flex; align-items: center; justify-content: center; background: transparent; border-style: dashed; }
.card-ad .ad-unit{ margin: 0; padding: 1rem; }
.card-original-badge{
    position: absolute; top: .6rem; right: .6rem;
    background: var(--teal); color: var(--ink);
    font-family: var(--font-mono); font-weight: 600; font-size: .65rem;
    padding: .2rem .5rem; border-radius: 999px; letter-spacing: .05em;
}

/* ---------- Article page (Tier A original articles) ---------- */
.article-page{
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}
.article-eyebrow{
    font-family: var(--font-mono); font-size: .78rem; color: var(--teal);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .6rem;
}
.article-h1{
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.15;
    margin: 0 0 1.25rem;
}
.article-figure{ margin: 0 0 1.5rem; }
.article-figure img{ width: 100%; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; }
.article-figure figcaption{ font-family: var(--font-mono); font-size: .7rem; color: var(--paper-dim); opacity: .6; margin-top: .4rem; }
.article-figure figcaption a{ color: inherit; }
.article-body{ font-size: 1.08rem; line-height: 1.75; }
.article-body p{ margin: 0 0 1.25rem; }
.article-source-credit{
    font-family: var(--font-mono); font-size: .8rem; color: var(--paper-dim);
    border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1rem;
}
.article-source-credit a{ color: var(--amber); }
.related{ max-width: 760px; margin: 2rem auto 0; padding: 0 1.25rem; }
.related h2{ font-family: var(--font-display); font-size: 1.1rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.related-grid{ display: grid; gap: .75rem; }
.related-item{
    font-family: var(--font-body); font-size: .95rem;
    padding: .75rem 1rem; background: var(--ink-soft); border: 1px solid var(--border); border-radius: 8px;
}
.related-item:hover{ border-color: var(--teal); color: var(--amber); }

/* ---------- Reviewer quotes & specs table ---------- */
.reviewer-quotes, .specs-table{ margin: 2rem 0; }
.reviewer-quotes h2, .specs-table h2{
    font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .9rem;
}
.reviewer-quotes blockquote{
    margin: 0 0 1rem; padding: .9rem 1.1rem;
    background: var(--ink-soft); border-left: 3px solid var(--teal); border-radius: 0 8px 8px 0;
}
.reviewer-quotes blockquote p{ margin: 0 0 .4rem; font-style: italic; }
.reviewer-quotes cite{
    font-family: var(--font-mono); font-size: .75rem; font-style: normal; color: var(--paper-dim);
}
.reviewer-quotes cite a{ color: var(--amber); }
.specs-table dl{
    display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem;
    font-family: var(--font-mono); font-size: .88rem;
    background: var(--ink-soft); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem;
}
.specs-table dt{ color: var(--paper-dim); }
.specs-table dd{ margin: 0; color: var(--paper); }
.article-body ul{ margin: 0 0 1.25rem; padding-left: 1.3rem; }
.article-body li{ margin-bottom: .4rem; }

/* ---------- Footer ---------- */
.site-footer{
    border-top: 1px solid var(--border);
    padding: 1.75rem 1.25rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--paper-dim);
}
.footer-brand em{ font-style: normal; color: var(--amber); }
.footer-credit{ margin-top: .35rem; opacity: .55; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
    .article-grid{ grid-template-columns: repeat(2, 1fr); }
    .card-lead{ grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 640px){
    /* Ticker is a desktop-only feature per spec — fully removed on mobile */
    .ticker-bar{ display: none; }

    .masthead-inner{
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
    }
    .category-nav{ grid-row: 3; grid-column: 1 / 3; justify-content: space-between; }
    .lang-toggle{ grid-row: 1; grid-column: 2; }
    .tagline{ grid-row: 2; grid-column: 1 / 3; }
    .article-grid{ grid-template-columns: 1fr; }
    .card-lead{ grid-column: 1; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
    .ticker-content{ animation: none; }
    .ticker-dot{ animation: none; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible{
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}