/* AITCOH News Desk — newspaper front-page edition (news.aitcoh.com).
   Warm linen paper + warm ink from the brand palette; Playfair Display
   nameplate/headlines, Source Serif 4 article text, Source Sans Pro chrome.
   Trust-blue and Radiant-Gold-derived bronze carry the brand through. */

:root {
    --paper: #faf7ec;
    --paper-deep: #f3eeda;     /* boxes, image mats */
    --ink: #24211c;
    --ink-soft: #5c564a;
    --rule: #c9c2ad;           /* hairlines on aged paper */
    --rule-dark: #24211c;      /* heavy section rules */
    --trust-blue-dark: #1b477e;
    --trust-blue: #255ea0;
    --radiant-gold: #fdd841;
    --bronze: #8a6b12;         /* Radiant Gold, ink-adjusted for paper contrast */
    --charcoal: #333333;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-sans: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
}
img { max-width: 100%; height: auto; }
em { font-style: italic; }

.masthead, .controls-inner, .feed, .colophon-inner {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
}

/* ---------- Masthead ---------- */
.masthead { padding-top: 14px; }
.masthead-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
}
.strip-logo img { display: block; }
.strip-stamp {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--charcoal);
    background: var(--radiant-gold);
    border: 2px solid var(--charcoal);
    padding: 5px 14px;
    transform: rotate(-2deg);
    box-shadow: 1px 2px 0 rgba(36, 33, 28, 0.25);
    white-space: nowrap;
}

.nameplate-block {
    text-align: center;
    padding: 22px 0 0;
}
.kicker {
    margin: 0 0 6px;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.kicker em {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
}
.nameplate {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(40px, 7vw, 74px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--trust-blue-dark);
}
.dateline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 14px;
    padding: 8px 0;
    border-top: 3px double var(--rule-dark);
    border-bottom: 1px solid var(--rule-dark);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}
.dateline-sep { color: var(--bronze); }
.status-sources {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--trust-blue-dark);
    background: none;
    border: none;
    border-bottom: 1px dotted var(--trust-blue-dark);
    padding: 0 0 1px;
    cursor: pointer;
}
.status-sources:hover, .status-sources:focus-visible { color: var(--trust-blue); }
.status-sources.has-failures { color: var(--bronze); border-bottom-color: var(--bronze); }
.btn-reload {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--trust-blue-dark);
    border: none;
    padding: 4px 12px;
    cursor: pointer;
}
.btn-reload:hover, .btn-reload:focus-visible { background: var(--trust-blue); }

.status-demo {
    margin: 10px auto 0;
    max-width: 620px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--charcoal);
    background: var(--radiant-gold);
    border: 1px solid var(--charcoal);
    padding: 4px 12px;
}
.status-demo[hidden] { display: none; }

.source-health {
    list-style: none;
    margin: 12px auto 0;
    max-width: 900px;
    padding: 12px 18px;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 4px 18px;
    font-family: var(--font-sans);
    font-size: 13px;
    text-align: left;
}
.source-health[hidden] { display: none; }
.source-health .ok::before { content: '● '; color: var(--trust-blue); }
.source-health .fail::before { content: '● '; color: var(--bronze); }

/* ---------- Controls (section index) ---------- */
.controls {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-dark);
    box-shadow: 0 1px 0 var(--paper);
}
.controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 22px;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
}
.tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 8px 14px 6px;
    cursor: pointer;
    white-space: nowrap;
}
.tab + .tab { border-left: 1px solid var(--rule); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] {
    color: var(--trust-blue-dark);
    border-bottom-color: var(--trust-blue-dark);
}
.tab .count { font-weight: 400; margin-left: 5px; color: var(--ink-soft); }
.controls-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 300px;
    justify-content: flex-end;
}
.search, .source-select {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 7px 11px;
}
.search { flex: 1 1 170px; max-width: 300px; }
.source-select { max-width: 220px; }
.search:focus, .source-select:focus {
    outline: 2px solid var(--trust-blue);
    outline-offset: 1px;
    border-color: var(--trust-blue);
}

/* ---------- Feed ---------- */
.feed { padding-top: 26px; padding-bottom: 56px; min-height: 40vh; }
.feed-loading, .feed-empty { color: var(--ink-soft); font-style: italic; }
.feed-error {
    background: var(--paper-deep);
    border: 1px solid var(--bronze);
    padding: 18px 20px;
    font-family: var(--font-sans);
}

.group-title {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 38px 0 20px;
}
.group-title::before, .group-title::after {
    content: '';
    flex: 1;
    border-top: 3px double var(--rule-dark);
}
#feed-groups > .group-title:first-child { margin-top: 0; }

/* Datelines, tags */
.story-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
}
.tag { font-weight: 700; }
.tag-remodeling { color: var(--trust-blue); }
.tag-aging-in-place { color: var(--bronze); }
.tag-senior-care { color: var(--charcoal); }
.story-meta time { font-weight: 400; letter-spacing: 0.06em; }

.headline a { color: inherit; text-decoration: none; }
.headline a:hover, .headline a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: var(--trust-blue-dark);
}

/* Lead story */
.front-page { border-bottom: 1px solid var(--rule-dark); padding-bottom: 22px; margin-bottom: 22px; }
.lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 36px;
}
.lead.has-image { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lead .headline {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(30px, 4.6vw, 48px);
    line-height: 1.06;
    letter-spacing: -0.01em;
}
.lead-summary {
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
}
.lead-summary::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.1em;
    line-height: 0.82;
    float: left;
    padding: 4px 8px 0 0;
    color: var(--trust-blue-dark);
}
.story-link {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trust-blue-dark);
    text-decoration: none;
}
.story-link:hover, .story-link:focus-visible { text-decoration: underline; }

figure.art {
    margin: 0;
    align-self: start;
}
figure.art img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 1px solid var(--ink);
    background: var(--paper-deep);
}
figure.art figcaption {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 5px;
    text-align: right;
}

/* Secondary stories */
.secondaries {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.secondary + .secondary { border-left: 1px solid var(--rule); padding-left: 36px; }
.secondary .headline {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 23px;
    line-height: 1.18;
}
.secondary-body { display: flex; gap: 14px; align-items: flex-start; }
.secondary-body figure.art { flex: 0 0 120px; }
.secondary-body figure.art img { aspect-ratio: 1 / 1; }
.secondary-body figure.art figcaption { display: none; }
.secondary p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }

/* Briefs columns */
.briefs {
    column-count: 3;
    column-gap: 36px;
    column-rule: 1px solid var(--rule);
}
.brief {
    break-inside: avoid;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.brief .headline {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.22;
}
.brief p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Colophon ---------- */
.colophon {
    border-top: 3px double var(--rule-dark);
    margin-top: 20px;
    padding: 30px 0 44px;
    text-align: center;
    font-size: 14.5px;
    color: var(--ink-soft);
}
.colophon-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.colophon-inner img { margin-bottom: 6px; }
.colophon-inner p { margin: 0; }
.colophon-brand { font-size: 17px; color: var(--ink); }
.colophon-note, .colophon-sources {
    font-family: var(--font-sans);
    font-size: 12.5px;
    max-width: 640px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .lead.has-image { grid-template-columns: 1fr; }
    .lead figure.art { order: 2; }
    .lead .lead-text { order: 1; }
    .briefs { column-count: 2; }
}
@media (max-width: 620px) {
    .masthead, .controls-inner, .feed, .colophon-inner { padding-left: 18px; padding-right: 18px; }
    .secondaries { grid-template-columns: 1fr; }
    .secondary + .secondary {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--rule);
        padding-top: 14px;
        margin-top: 14px;
    }
    .briefs { column-count: 1; }
    .strip-stamp { font-size: 10.5px; padding: 4px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ---------- Print ---------- */
@media print {
    .controls, .btn-reload, .status-sources, .source-health { display: none !important; }
    .feed { padding-top: 10px; }
    body { background: #fff; }
}