/* ---------------------------------------------------------
   ARAVEIL — Newsroom styles
   (comment header only; page copy avoids em dashes)
   Shared by the /news index page (news.html) and the
   server-rendered /news/<slug> article pages (api/post.js).
   Builds on the tokens, nav, footer and buttons in site.css.

   Design language: an editorial, print-like layout with square
   corners and hairline rules (no rounded cards). The dot field
   is Araveil's signature texture, kept calm and sparse. Amber
   is used only for small accents (active topic, links, focus).

   1. TOKENS + DOT MOTIF
   2. LAYOUT (left rail + main column)
   3. LEFT RAIL + TOPIC NAV
   4. SHARED: EYEBROW + COVER FALLBACK
   5. FEATURED TWO-UP
   6. FEATURED GRID
   7. RECENTLY PUBLISHED (search + list + see more)
   8. LOADING + STATES
   9. ARTICLE PAGE
   10. NOT-FOUND
   11. RESPONSIVE
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   1. TOKENS + DOT MOTIF
   --------------------------------------------------------- */
:root {
    --dot: rgba(26, 25, 24, 0.16);
    --dot-accent: #F1592A;
    --news-line: var(--border);
}
[data-theme="dark"] {
    --dot: rgba(244, 244, 245, 0.14);
    --dot-accent: #FB923C;
}

/* Calm dot field: an even grid of small dots that dissolves at the edges via a
   mask, with one sparse accent dot. Drawn as pure-CSS backgrounds so it costs
   no layout and is cheap for the GPU. Always decorative (aria-hidden). */
.dotfield {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at center, var(--dot-accent) 1.6px, transparent 1.8px),
        radial-gradient(circle at center, var(--dot) 1.3px, transparent 1.5px);
    background-size: 132px 132px, 24px 24px;
    background-position: 30px 46px, 0 0;
    opacity: 0.6;
    -webkit-mask-image: var(--df-mask, radial-gradient(120% 130% at 82% -12%, #000 0%, rgba(0, 0, 0, 0.4) 46%, transparent 78%));
    mask-image: var(--df-mask, radial-gradient(120% 130% at 82% -12%, #000 0%, rgba(0, 0, 0, 0.4) 46%, transparent 78%));
}

/* Cover fallback: the branded panel shown wherever a post has no cover image.
   A soft ground plus a calm dot grid that fades toward the centre. Square. */
.cover-fallback {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-subtle);
    background-image:
        radial-gradient(circle at center, var(--dot-accent) 2.1px, transparent 2.3px),
        radial-gradient(circle at center, var(--dot) 1.7px, transparent 1.9px);
    background-size: 120px 120px, 22px 22px;
    background-position: 22px 34px, 0 0;
    -webkit-mask-image: radial-gradient(150% 150% at 50% 45%, #000 55%, rgba(0, 0, 0, 0.7) 82%, rgba(0, 0, 0, 0.45) 100%);
    mask-image: radial-gradient(150% 150% at 50% 45%, #000 55%, rgba(0, 0, 0, 0.7) 82%, rgba(0, 0, 0, 0.45) 100%);
}

/* ---------------------------------------------------------
   2. LAYOUT
   --------------------------------------------------------- */
.news-room { position: relative; padding: 3rem 0 4rem; }
.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 3.5rem;
    align-items: start;
}
/* Content on the left, the Newsroom rail on the right (DOM order is rail then
   column, so place them explicitly). */
.news-col { min-width: 0; grid-column: 1; grid-row: 1; }
.news-rail { grid-column: 2; grid-row: 1; }

/* ---------------------------------------------------------
   3. LEFT RAIL + TOPIC NAV
   --------------------------------------------------------- */
.news-rail { position: sticky; top: 88px; }
.rail-inner { display: flex; flex-direction: column; }
.rail-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
    color: var(--text-main);
}
.rail-tagline {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0.75rem 0 1.5rem;
    max-width: 22ch;
}
.rail-divider { border: none; border-top: 1px solid var(--news-line); margin: 0 0 1.25rem; }
.rail-list { display: flex; flex-direction: column; gap: 0.1rem; }
.cat-btn {
    display: block; width: 100%; text-align: left;
    background: none; border: none; border-left: 2px solid transparent; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 500;
    color: var(--text-muted); padding: 0.5rem 0.85rem;
    transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.cat-btn:hover { color: var(--text-main); background: var(--bg-subtle); }
.cat-btn.is-active {
    color: var(--text-main); font-weight: 600;
    background: var(--bg-subtle); border-left-color: var(--primary);
}
.cat-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ---------------------------------------------------------
   4. SHARED: EYEBROW + COVER FALLBACK SIZING
   --------------------------------------------------------- */
.post-eyebrow {
    display: block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted);
}
.post-eyebrow .sep { margin: 0 0.5em; opacity: 0.6; }

/* Any media link (cover image or fallback) is a square-cornered block. */
.feat-media, .fcard-media, .prow-thumb { display: block; position: relative; }
.feat-media img, .fcard-media img, .prow-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------
   5. FEATURED TWO-UP (borderless: image, then text below)
   --------------------------------------------------------- */
.feat-two {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--news-line);
}
.feat-two[hidden] { display: none; }
.feat-two.one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.feat { display: flex; flex-direction: column; min-width: 0; }
.feat-media { border: 1px solid var(--news-line); background-color: var(--bg-subtle); margin-bottom: 1.15rem; }
.feat-lead .feat-media { aspect-ratio: 16 / 10; }
.feat-second .feat-media { aspect-ratio: 16 / 10; }
.feat-body { display: flex; flex-direction: column; }
.feat-title { margin: 0.7rem 0 0.55rem; letter-spacing: -0.02em; line-height: 1.14; }
.feat-lead .feat-title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.feat-second .feat-title { font-size: 1.3rem; }
.feat-title a { color: inherit; }
.feat-title a:hover { color: var(--primary); }
.feat-ex { color: var(--text-muted); font-size: 1rem; line-height: 1.6; max-width: 54ch; }
.feat-second .feat-ex { font-size: 0.95rem; }

/* ---------------------------------------------------------
   6. FEATURED GRID
   --------------------------------------------------------- */
.news-block { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--news-line); }
.news-block:last-child { border-bottom: none; margin-bottom: 0; }
.news-block[hidden] { display: none; }
/* Recently published is the last visible block, but the hidden empty/error
   siblings defeat :last-child, so drop its trailing rule explicitly. The post
   list already closes itself with its own bottom hairline. */
#recentSection { border-bottom: none; padding-bottom: 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.block-head h2 { font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text-main); }

.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.fcard { display: flex; flex-direction: column; min-width: 0; }
.fcard-media { border: 1px solid var(--news-line); background-color: var(--bg-subtle); aspect-ratio: 16 / 10; margin-bottom: 1rem; }
.fcard-body { display: flex; flex-direction: column; }
.fcard-title { font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.25; margin: 0.6rem 0 0.5rem; }
.fcard-title a { color: inherit; }
.fcard-title a:hover { color: var(--primary); }
.fcard-ex { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ---------------------------------------------------------
   7. RECENTLY PUBLISHED
   --------------------------------------------------------- */
.recent-head { align-items: center; }
.news-search {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--news-line); background: var(--bg-surface);
    padding: 0.5rem 0.8rem; color: var(--text-muted); min-width: 220px;
    transition: border-color 0.18s;
}
.news-search:focus-within { border-color: var(--primary); color: var(--text-main); }
.news-search svg { flex-shrink: 0; }
.news-search input {
    border: none; background: none; outline: none; width: 100%;
    font-family: 'Manrope', sans-serif; font-size: 0.92rem; color: var(--text-main);
}
.news-search input::placeholder { color: var(--text-muted); }

.post-list { display: flex; flex-direction: column; }
.prow {
    display: grid; grid-template-columns: 104px minmax(0, 1fr) auto;
    gap: 1.5rem; align-items: center;
    padding: 1.35rem 0; border-top: 1px solid var(--news-line);
    transition: background 0.15s;
}
.post-list .prow:last-child { border-bottom: 1px solid var(--news-line); }
.prow:hover { background: var(--bg-subtle); }
.prow:hover .prow-title { color: var(--primary); }
.prow:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.prow-thumb {
    width: 104px; aspect-ratio: 16 / 11; background-color: var(--bg-subtle);
    border: 1px solid var(--news-line);
}
.prow-main { min-width: 0; }
.prow-title {
    display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
    font-size: 1.08rem; letter-spacing: -0.015em; line-height: 1.3; color: var(--text-main);
    transition: color 0.15s;
}
.prow-ex {
    display: block; color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin-top: 0.3rem;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.prow-date {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap;
}

.list-none { padding: 2.5rem 0; color: var(--text-muted); }
.list-none[hidden] { display: none; }

.news-more { display: flex; justify-content: center; margin-top: 2.25rem; }
.news-more[hidden] { display: none; }
.see-more {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.9rem;
    color: var(--text-main); background: var(--bg-surface); border: 1px solid var(--news-line);
    padding: 0.7rem 1.75rem; cursor: pointer; transition: background 0.18s, border-color 0.18s;
}
.see-more:hover { background: var(--bg-subtle); border-color: var(--text-muted); }
.see-more:disabled { opacity: 0.6; cursor: default; }
.see-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------------------------------------------------------
   8. LOADING + STATES
   --------------------------------------------------------- */
.news-loading[hidden] { display: none; }
.news-loading .feat-two { border-bottom: none; margin-bottom: 2.5rem; padding-bottom: 0; }
.sk { background: var(--bg-subtle); border: 1px solid var(--news-line); position: relative; overflow: hidden; }
.sk-lead { aspect-ratio: 16 / 10; }
.sk-second { aspect-ratio: 16 / 10; }
.sk-card { aspect-ratio: 16 / 10; }
.sk-shimmer::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: skShimmer 1.4s ease infinite;
}
[data-theme="dark"] .sk-shimmer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); }
@keyframes skShimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk-shimmer::after { animation: none; } }

.news-status { text-align: center; padding: 4rem 0; color: var(--text-muted); }
.news-status h2 { font-size: 1.35rem; color: var(--text-main); margin-bottom: 0.6rem; }
.news-status p { max-width: 42ch; margin: 0 auto 1.5rem; line-height: 1.6; }
.news-status[hidden] { display: none; }

/* ---------------------------------------------------------
   9. ARTICLE PAGE
   --------------------------------------------------------- */
.article { padding: 2.75rem 0 1rem; }
.article-shell { max-width: 720px; }
.article-back {
    display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-muted);
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.85rem; margin-bottom: 2rem;
}
.article-back:hover { color: var(--primary); }
.article-back svg { transition: transform 0.2s; }
.article-back:hover svg { transform: translateX(-2px); }

/* Calm dot accent behind the eyebrow + title, echoing the index. */
.article-head { position: relative; margin-bottom: 2rem; padding-top: 0.5rem; }
.article-head .dotfield {
    --df-mask: radial-gradient(70% 150% at 96% -20%, #000 0%, rgba(0, 0, 0, 0.22) 42%, transparent 72%);
    inset: -1.5rem 0 auto 0; height: 240px; opacity: 0.5;
}
.article-head > *:not(.dotfield) { position: relative; z-index: 1; }
.article-head .eyebrow { color: var(--text-muted); }
.article-head h1 {
    font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.1;
    margin: 1rem 0 1.25rem;
}
.article-byline {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
    color: var(--text-muted); font-size: 0.9rem;
}
.article-byline .byline-author { color: var(--text-main); font-weight: 600; }
.article-byline .byline-dot { opacity: 0.5; }

.article-hero { margin: 0 0 2.5rem; overflow: hidden; background: var(--bg-subtle); border: 1px solid var(--news-line); }
.article-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

/* Long-form body — clean measure and rhythm */
.article-body { color: var(--text-main); font-size: 1.09rem; line-height: 1.75; }
.article-body > * + * { margin-top: 1.35rem; }
.article-body h2 { font-size: clamp(1.5rem, 3vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.2; margin-top: 2.75rem; margin-bottom: 0.25rem; }
.article-body h3 { font-size: 1.32rem; letter-spacing: -0.015em; margin-top: 2.25rem; margin-bottom: 0.1rem; }
.article-body h4 { font-size: 1.1rem; margin-top: 1.9rem; margin-bottom: 0; }
.article-body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--primary-hover); }
.article-body strong { font-weight: 700; }
.article-body em { font-style: italic; }
.article-body mark { background: var(--primary-glow); color: inherit; padding: 0.05em 0.2em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-top: 0.5rem; padding-left: 0.35rem; }
.article-body li::marker { color: var(--primary); }
.article-body blockquote {
    margin-left: 0; margin-right: 0; padding: 0.4rem 0 0.4rem 1.5rem;
    border-left: 3px solid var(--primary); color: var(--text-muted);
    font-family: 'Plus Jakarta Sans', sans-serif; font-style: italic; font-size: 1.15rem; line-height: 1.5;
}
.article-body pre {
    background: var(--bg-subtle); border: 1px solid var(--news-line);
    padding: 1.15rem 1.25rem; overflow-x: auto; font-size: 0.9rem; line-height: 1.6;
}
.article-body pre code { background: none; padding: 0; font-size: inherit; border: none; }
.article-body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em;
    background: var(--bg-subtle); border: 1px solid var(--news-line); padding: 0.12em 0.4em;
}
.article-body img { max-width: 100%; height: auto; display: block; border: 1px solid var(--news-line); }
.article-body figure { margin-left: 0; margin-right: 0; }
.article-body figcaption { color: var(--text-muted); font-size: 0.85rem; text-align: center; margin-top: 0.7rem; }
.article-body hr { border: none; border-top: 1px solid var(--news-line); margin: 2.25rem 0; }

.article-rule { border: none; border-top: 1px solid var(--news-line); margin: 3rem 0 1.75rem; }
.article-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1rem; }
.article-share { gap: 0.55rem; }
.article-more {
    display: inline-flex; align-items: center; gap: 0.45rem; color: var(--primary);
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.92rem;
}
.article-more svg { transition: transform 0.2s; }
.article-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------
   10. NOT-FOUND
   --------------------------------------------------------- */
.article-missing { text-align: center; padding: 6rem 0 4rem; }
.article-missing h1 { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; margin: 1.1rem 0 1rem; }
.article-missing p { color: var(--text-muted); font-size: 1.08rem; line-height: 1.65; max-width: 44ch; margin: 0 auto 2rem; }
.article-missing .eyebrow { justify-content: center; }

/* ---------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 960px) {
    .news-layout { grid-template-columns: 1fr; gap: 2rem; }
    /* Single column: let the rail and content flow in DOM order (rail on top). */
    .news-rail, .news-col { grid-column: auto; grid-row: auto; }
    .news-rail { position: static; top: auto; }
    .rail-title { font-size: 1.5rem; }
    .rail-tagline { max-width: none; }
    .rail-divider { margin-bottom: 1rem; }
    .rail-list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
    .cat-btn { width: auto; border: 1px solid var(--news-line); border-left-width: 1px; padding: 0.4rem 0.9rem; }
    .cat-btn.is-active { border-color: var(--primary); }
    .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .feat-two, .feat-two.one { grid-template-columns: 1fr; }
    .feat-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .recent-head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
    .news-search { width: 100%; }
    .prow { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; }
    .prow-thumb { width: 84px; }
    .prow-date { grid-column: 2; }
}
@media (max-width: 520px) {
    .news-room { padding-top: 2rem; }
    .article-foot { flex-direction: column; align-items: flex-start; }
    .prow { grid-template-columns: 1fr; }
    .prow-thumb { display: none; }
}