/* ==========================================================================
   SEO-Serps News
   Palette: #ff7600 (accent) on #000 (ground). Typeface: Courier throughout.
   ========================================================================== */

:root {
    --orange:     #ff7600;
    --orange-dim: #b35300;
    --orange-glow: rgba(255, 118, 0, 0.10);
    --black:      #000000;
    --panel:      #0b0b0b;
    --panel-2:    #121212;
    --border:     #262626;
    --border-lit: #3a3a3a;
    --text:       #ececec;
    --text-dim:   #8f8f8f;
    /* Tertiary text (timestamps, colophon). Was #6f6f6f, which measured
       3.9:1 against the panel and failed WCAG AA for small text; #7f7f7f
       measures ~4.9:1 while staying visibly quieter than --text-dim. */
    --text-faint: #7f7f7f;
    --font:       "Courier New", Courier, "Nimbus Mono PS", monospace;
    --maxw:       1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--black);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
}

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

a { color: var(--orange); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--orange); color: var(--black);
    padding: 10px 16px; z-index: 100; font-weight: bold;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Masthead ---------------------------------------------------- */

.site-header {
    border-bottom: 2px solid var(--orange);
    background:
        linear-gradient(180deg, rgba(255,118,0,0.06), transparent 70%),
        var(--black);
}

.header-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    min-width: 0;
}
.brand:hover { text-decoration: none; }

.brand-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 2px solid var(--orange);
    border-radius: 8px;
    background: var(--panel);
    padding: 2px;
    flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; min-width: 0; }

.brand-name {
    font-size: clamp(22px, 3.6vw, 34px);
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--orange);
    line-height: 1.1;
    white-space: nowrap;
}
.brand-dot { color: var(--text); }

.brand-tagline {
    color: var(--text-dim);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.35;
}

/* ---------- Search ------------------------------------------------------ */

.search-form { display: flex; gap: 0; flex-shrink: 0; }

.search-form input[type="search"] {
    font-family: var(--font);
    font-size: 14px;
    background: var(--panel);
    border: 1px solid var(--border-lit);
    border-right: none;
    color: var(--text);
    padding: 10px 14px;
    width: 230px;
    max-width: 52vw;
    border-radius: 3px 0 0 3px;
}
.search-form input[type="search"]::placeholder { color: #6a6a6a; }
.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--orange);
}

.search-form button {
    font-family: var(--font);
    font-size: 14px;
    font-weight: bold;
    background: var(--orange);
    color: var(--black);
    border: 1px solid var(--orange);
    padding: 10px 18px;
    min-height: 44px;          /* WCAG 2.5.5 target size */
    cursor: pointer;
    border-radius: 0 3px 3px 0;
}
.search-form button:hover { background: #ff8c26; }

.search-form input[type="search"] { min-height: 44px; }

/* ---------- Section nav ------------------------------------------------- */

.section-nav {
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 20;
}

.section-nav-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.section-nav-inner .nav-chip { scroll-snap-align: start; }

/* At narrow widths roughly 420px of the nav sits off-screen with nothing to
   say so. This fades the right edge as a scroll affordance. It is scoped to
   small viewports because the nav fits comfortably above ~900px, where a
   permanent fade would just look like a rendering fault. */
@media (max-width: 900px) {
    .section-nav { position: sticky; }

    .section-nav::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 44px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(11,11,11,0), var(--panel) 78%);
    }
}

.nav-chip {
    flex-shrink: 0;
    padding: 13px 16px;
    font-size: 13px;
    color: var(--text-dim);
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    letter-spacing: .4px;
}
.nav-chip:hover { color: var(--text); text-decoration: none; }
.nav-chip.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
    background: var(--orange-glow);
}

/* ---------- Page heading & standfirst ----------------------------------- */

.page-intro {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,118,0,0.04), transparent);
}

.page-intro-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 26px 20px 24px;
}

.crumbs { margin-bottom: 12px; }

.crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-dim);
}

.crumbs li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--border-lit);
}

.page-h1 {
    font-size: clamp(21px, 3.1vw, 31px);
    line-height: 1.24;
    margin: 0;
    color: var(--orange);
    letter-spacing: .3px;
}

/* Measure is capped in ch across the site. Courier is monospace, so lines
   run visibly longer than the same character count would in a proportional
   face — the lead summary was reaching 128 characters per line at desktop
   width, roughly double a comfortable measure. */
.page-standfirst {
    margin: 12px 0 0;
    max-width: 70ch;
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--text-dim);
}

/* ---------- Lead story -------------------------------------------------- */

.lead-wrap {
    max-width: var(--maxw);
    margin: 28px auto 0;
    padding: 0 20px;
}

.lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    overflow: hidden;
}

/* Plenty of feeds ship no image at all; without this the two-column grid
   leaves an empty half-panel next to the headline. */
.lead-noimage { grid-template-columns: 1fr; }

.lead-media {
    order: 2;
    min-height: 220px;
    background: var(--panel-2);
    overflow: hidden;
}
.lead-media img { width: 100%; height: 100%; object-fit: cover; }

.lead-body { order: 1; padding: 26px 28px; }

.lead-title {
    font-size: clamp(20px, 2.6vw, 30px);
    line-height: 1.28;
    margin: 12px 0 14px;
}
.lead-title a { color: var(--text); }
.lead-title a:hover { color: var(--orange); text-decoration: none; }

.lead-summary {
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1.62;
    margin: 0 0 18px;
    max-width: 70ch;
}

.lead-cta {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: var(--orange);
    border: 1px solid var(--orange);
    padding: 9px 16px;
    border-radius: 3px;
}
.lead-cta:hover {
    background: var(--orange);
    color: var(--black);
    text-decoration: none;
}

/* ---------- Tags -------------------------------------------------------- */

.tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

.tag {
    padding: 3px 8px;
    border: 1px solid var(--border-lit);
    border-radius: 2px;
    color: var(--text-dim);
    white-space: nowrap;
}
.tag-source { color: var(--orange); border-color: var(--orange-dim); }
.tag-lead   { background: var(--orange); color: var(--black); border-color: var(--orange); font-weight: bold; }
.tag-update { background: rgba(255,118,0,.16); color: var(--orange); border-color: var(--orange); font-weight: bold; }
.tag-ai     { color: #d8d8d8; border-color: var(--border-lit); }

.tag-time { color: var(--text-faint); margin-left: auto; white-space: nowrap; }

/* ---------- Update radar ------------------------------------------------ */

.radar {
    max-width: var(--maxw);
    margin: 24px auto 0;
    padding: 0 20px;
}

.radar-inner {
    background: linear-gradient(180deg, var(--orange-glow), transparent), var(--panel);
    border: 1px solid var(--orange-dim);
    padding: 18px 22px;
}

.radar-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--orange);
    margin: 0 0 12px;
}

.radar-dot {
    width: 9px; height: 9px;
    background: var(--orange);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255,118,0,.55); }
    50%      { opacity: .55; box-shadow: 0 0 0 7px rgba(255,118,0,0); }
}
@media (prefers-reduced-motion: reduce) {
    .radar-dot { animation: none; }
}

.radar-sub {
    margin: -6px 0 12px;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* Model Watch reuses the radar shell but reads as a companion strip rather
   than a second alert, so its frame is quieter than the update radar's. */
.model-watch .radar-inner {
    border-color: var(--border-lit);
    background: var(--panel);
}

.radar-list { list-style: none; margin: 0; padding: 0; }

.radar-list li {
    padding: 8px 0;
    border-top: 1px dashed var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
}
.radar-list li:first-child { border-top: none; }
.radar-list a { color: var(--text); }
.radar-list a:hover { color: var(--orange); }

.radar-meta {
    color: var(--text-dim);
    font-size: 11px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ---------- Stream ------------------------------------------------------ */

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 20px 56px;
}

.stream-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.stream-title {
    font-size: 19px;
    color: var(--orange);
    margin: 0;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.stream-blurb {
    color: var(--text-dim);
    font-size: 12.5px;
    margin: 6px 0 0;
}

.clear-filters { font-size: 12px; color: var(--text-dim); }
.clear-filters:hover { color: var(--orange); }

.source-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 26px;
}

.source-chip {
    font-size: 11.5px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 6px 11px;
    border-radius: 3px;
}
.source-chip:hover {
    border-color: var(--border-lit);
    color: var(--text);
    text-decoration: none;
}
.source-chip.active {
    border-color: var(--orange);
    color: var(--orange);
    background: var(--orange-glow);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 18px;
}

.card {
    position: relative;        /* containing block for the stretched link */
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-lit);
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    transition: border-color .15s ease, transform .15s ease;
}
.card:hover {
    border-color: var(--border-lit);
    border-left-color: var(--orange);
    transform: translateY(-2px);
}
.card-update { border-left-color: var(--orange); }

/* The headline link is stretched over the whole card, so the entire tile is
   the click target rather than one line of text. Everything that must stay
   independently clickable is lifted above it below. */
.card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The headline link keeps its own outline on keyboard focus — it draws
   around the headline text, which is unambiguous. The border change is an
   additional cue on the card as a whole, never the only one: an outline
   suppressed in favour of a border is a focus indicator that disappears
   entirely if the border rule ever fails to apply. */
.card:focus-within {
    border-color: var(--orange);
    border-left-color: var(--orange);
}

@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:hover { transform: none; }
}

.card-title {
    font-size: 15.5px;
    line-height: 1.42;
    margin: 0;
    font-weight: bold;
}
.card-title a { color: var(--text); }
.card-title a:hover { color: var(--orange); text-decoration: none; }

.card-summary {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim);
    margin: 0;
    flex-grow: 1;
}

/* Sits above the stretched headline link so it stays separately clickable,
   and carries enough padding to be a comfortable tap target on its own. */
.card-link {
    position: relative;
    z-index: 1;
    font-size: 12px;
    align-self: flex-start;
    padding: 13px 0;
    margin-top: -8px;
    /* text-decoration rather than border-bottom: the padding that makes this
       a 44px tap target would push a border 13px clear of the text and leave
       a detached line floating near the card edge. */
    text-decoration: underline dotted var(--orange-dim);
    text-underline-offset: 4px;
}
.card-link:hover {
    text-decoration: underline solid var(--orange);
}

.empty-state {
    border: 1px dashed var(--border-lit);
    padding: 56px 24px;
    text-align: center;
    color: var(--text-dim);
}
.empty-head { color: var(--orange); font-size: 17px; margin: 0 0 10px; }
.empty-state .lead-cta { margin-top: 16px; }

/* ---------- Update archive ---------------------------------------------- */

.nav-chip-feature::before {
    content: "◆";
    margin-right: 7px;
    color: var(--orange);
    font-size: 9px;
    vertical-align: middle;
}

.stat-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 28px;
}

.stat {
    background: var(--panel);
    padding: 18px 16px;
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 30px;
    font-weight: bold;
    color: var(--orange);
    line-height: 1.1;
}

.stat-unit { font-size: 16px; margin-left: 1px; }

.stat-label {
    display: block;
    margin-top: 7px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-dim);
    line-height: 1.4;
}

.year-block { margin-bottom: 34px; }

.year-heading {
    font-size: 15px;
    color: var(--orange);
    letter-spacing: 2px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

/* The table has six columns of monospace; below roughly 800px it has to
   scroll inside its own box rather than forcing the whole page sideways. */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    background: var(--panel);
}

.updates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 720px;
}

.updates-table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-lit);
    white-space: nowrap;
    background: var(--panel-2);
}

.updates-table td,
.updates-table tbody th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
    font-weight: normal;
}

.updates-table tbody tr:last-child td,
.updates-table tbody tr:last-child th { border-bottom: none; }

.updates-table tbody tr:hover { background: rgba(255, 118, 0, 0.04); }

.u-name { color: var(--text); font-weight: bold; min-width: 210px; }
.u-name a { color: var(--text); }
.u-name a:hover { color: var(--orange); }

.u-date { white-space: nowrap; color: var(--text-dim); }
.u-time { display: block; font-size: 10.5px; color: var(--text-faint); margin-top: 3px; }
.u-duration { white-space: nowrap; color: var(--orange); font-weight: bold; }
.u-products { color: var(--text-dim); font-size: 11.5px; }

.row-ongoing { background: rgba(255, 118, 0, 0.06); }
.ongoing-flag { color: var(--orange); font-weight: bold; }

.type-tag {
    display: inline-block;
    padding: 3px 8px;
    border: 1px solid var(--border-lit);
    border-radius: 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-dim);
    white-space: nowrap;
}
.type-core    { border-color: var(--orange); color: var(--orange); background: rgba(255,118,0,.12); font-weight: bold; }
.type-spam    { border-color: var(--orange-dim); color: var(--orange); }
.type-helpful,
.type-reviews,
.type-discover { border-color: var(--orange-dim); color: var(--orange); }
.type-ranking { border-color: var(--border-lit); color: var(--text); }

.method-note {
    border: 1px dashed var(--border-lit);
    padding: 20px 22px;
    margin-top: 30px;
}

.method-note h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--orange);
    margin: 0 0 12px;
}

.method-note p {
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-dim);
    margin: 0 0 12px;
    max-width: 76ch;
}
.method-note p:last-child { margin-bottom: 0; }

/* ---------- Pagination -------------------------------------------------- */

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.pager-btn {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: bold;
    color: var(--orange);
    border: 1px solid var(--orange);
    padding: 9px 18px;
    min-height: 44px;          /* WCAG 2.5.5 target size */
    border-radius: 3px;
    white-space: nowrap;
}
.pager-btn:hover { background: var(--orange); color: var(--black); text-decoration: none; }

.pager-btn.disabled {
    color: var(--text-faint);
    border-color: var(--border);
    cursor: default;
}
.pager-btn.disabled:hover { background: none; color: var(--text-faint); }

.pager-status {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: .5px;
}

.refresh-note {
    margin-top: 34px;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-faint);
}

/* ---------- Affiliate banner -------------------------------------------- */

.ad-band {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    padding: 26px 20px;
    text-align: center;
}

.ad-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-faint);
    margin: 0 0 14px;
}

/* Centres the creative and lets it shrink on narrow screens without
   overflowing — Awin serves fixed-pixel images, so the img itself is
   constrained rather than the link. */
.ad-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ad-banner a {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

/* width/height attributes on the img reserve the correct aspect ratio up
   front; max-width + height:auto then let it scale down on small screens
   without distorting or overflowing. */
.ad-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 0;
}

/* ---------- Footer ------------------------------------------------------ */

.site-footer {
    border-top: 2px solid var(--orange);
    background: var(--black);
}

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 34px 20px 26px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 34px;
}

.footer-col h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--orange);
    margin: 0 0 12px;
}

.footer-about p {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--text-dim);
    margin: 0;
}

.footer-sources { list-style: none; margin: 0; padding: 0; }
.footer-sources li { margin-bottom: 7px; font-size: 12.5px; }
.footer-sources a { color: var(--text-dim); }
.footer-sources a:hover { color: var(--orange); }

.footer-base {
    border-top: 1px solid var(--border);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 20px 26px;
    text-align: center;
    color: var(--text-faint);
    font-size: 11.5px;
}
.footer-base p { margin: 0 0 6px; }
.disclosure { max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
    .lead { grid-template-columns: 1fr; }
    .lead-media { order: 1; min-height: 180px; max-height: 260px; }
    .lead-body  { order: 2; padding: 22px 20px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    /* At 375px the standfirst runs to ~12 lines of monospace and pushes the
       first headline most of a screen down the page. People arrive here for
       the news, not the mission statement, so it's clamped on small screens.
       The text stays in the DOM — this is a visual cap, not a content cut. */
    .page-intro-inner { padding: 18px 20px 16px; }

    .page-standfirst {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.6;
    }

    .header-inner { flex-direction: column; align-items: stretch; padding: 16px; }
    .brand { justify-content: flex-start; }
    .brand-logo { width: 52px; height: 52px; }
    .search-form { width: 100%; }
    .search-form input[type="search"] { width: 100%; max-width: none; }
    .news-grid { grid-template-columns: 1fr; }
    .stream-head { align-items: flex-start; }
    .radar-list li { flex-direction: column; gap: 4px; }
    .tag-time { margin-left: 0; }
    .footer-inner { grid-template-columns: 1fr; gap: 26px; }
}