/* ================================================
   article-page1.css
   Individual article page — everything NOT already
   covered by bettersquash1.css (reset, nav, footer,
   .hero/.kicker/.lede, .crumb, .about-strip, base
   type, and — as of 2.0 — general section/paragraph/
   heading typography too). Load order: bettersquash1.css
   → this file.

   Version: 2.0  Structural change, not just a style tweak:
                 articles are now built exactly like
                 masterathletics.html and every other
                 project page (RightBall/RSTE) — a run of
                 bare <section id="..."> blocks, one per H2,
                 directly in .content-wrap. <article class="art">
                 and .art__body are GONE from the template;
                 bettersquash1.css's own generic `section`/
                 `section h2`/`p` rules do the job the
                 deleted .art__body/.art__body h2/.art__body p
                 rules used to do by duplicating them. Kept:
                 .art-meta (Article Details), .art__img/
                 .art__caption, .tldr/.art__final, .art__prevnext
                 — none of those depended on .art__body anyway.
                 Real visual deltas from dropping the duplicate
                 rules: paragraph spacing/line-height now match
                 the site's generic values (were 1.4rem/1.8,
                 now bettersquash1.css's 1em/1.6), and body
                 links go back to underline-on-hover (were
                 always-underlined). convert_articles.py's
                 --restructure-only pass migrates already-
                 converted articles to this shape.
   Version: 1.5  Kept .hero's petrol border-bottom as
                 intentional (no longer overridden here) —
                 fixed the fusion with .art-meta by giving
                 the box its own 1em top margin instead.
                 "Article Details" caption (was "Meta
                 Details").
   Version: 1.4  Meta row redesign: "META DETAILS" caption
                 + a glyph before each item (calendar / stop-
                 watch / globe), pure CSS ::before content —
                 no markup change, applies to every article
                 automatically.
   Version: 1.3  .art-meta border restored (the dark line
                 in question was .hero's border-bottom, not
                 this — confirmed, and that override stays).
   Version: 1.2  TEST: .art-meta border removed, .hero's
                 border-bottom (bettersquash1.css, coloured
                 by the page's --signature override — petrol
                 for articles) killed here too. The two were
                 sitting flush against each other with no gap,
                 reading as one thick bicolor border on the
                 meta box.
   Version: 1.1  Meta row: full border (not just left
                 accent) + vertical dividers between items.
                 Prev/Next: compound selector so the CTA-
                 button styling can't lose to .content-wrap a.
   Version: 1.0  Initial release — condensed from articles.css
                 / global.css / reset.css / article-page.css.
   ================================================ */

:root { --article-page1-css-version: "2.0"; }


/* ── CONTENT WRAP ─────────────────────────────────
   .crumb sits outside this (its own top padding clears
   the fixed nav, same as every other converted page) —
   this just gives the rest of the article its reading-
   column width, replacing the generic <main> so its
   nav-clearing top padding doesn't stack under .crumb
   and push everything down twice. */
.content-wrap {
    max-width: var(--measure-wide);
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* bettersquash1.css colours body links via `main a` — articles don't use
   <main> (see .content-wrap note above), so that rule never reaches
   them. Restored here, scoped to this wrapper. */
.content-wrap a { color: var(--signature); }

/* ── META ROW (date · read time · translate) ──────
   Sits under the hero, above the article body. A bordered
   grey box with vertical rules between items — reads as
   a distinct info bar rather than a line of copy. Translate
   is a real link, so it's signature-coloured like every
   other text link on the site — not just on hover.

   "Article Details" caption + the three glyphs are pure CSS —
   ::before content on .art-meta itself (forced onto its own
   flex line via flex-basis: 100%, since flex-wrap is already
   on) and on the item spans/link by position. No markup
   change, so every article already carrying the old plain
   .art-meta HTML — converted or not — picks this up for free;
   nothing to re-run site-wide.

   Glyphs are plain Unicode (📅 ⏱️ 🌐), not inline SVG — the
   trade-off is real: they render in each OS/browser's native
   emoji style and colour, not monochrome, and won't inherit
   `color`. That's a deliberate "simple over pixel-perfect"
   choice; if they read as too cartoonish/colourful once you
   see them live, swapping to thin single-colour SVGs is the
   fix, at the cost of three small icon assets to maintain. */
.art-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 1em 0 2.5rem;
    padding: 0.9rem 1.25rem;
    background: #f4f4f4;
    border: 1px solid #d0d0d0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}
.art-meta::before {
    content: "Article Details";
    flex: 0 0 100%;
    margin: 0 0 0.7rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #dcdcdc;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #8a8a8a;
}
.art-meta > span:first-child::before { content: "\1F4C5  "; }  /* 📅 date — no VS15: Apple's emoji font has no
                                                                    monochrome fallback for this one, would show as
                                                                    a blank box instead; let it render native colour */
.art-meta > span:nth-child(3)::before { content: "\23F1\FE0F  "; }  /* ⏱️ read time — VS16 forces colour presentation;
                                                                        without it some platforms show a plain text
                                                                        glyph instead, which would look inconsistent
                                                                        next to the other two */
.art-meta > a::before { content: "\1F310  "; }  /* 🌐 translate — same reasoning as the calendar, no VS15 */
.art-meta-sep {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: #c4c4c4;
    margin: 0 1.25rem;
    flex-shrink: 0;
}
.art-meta a { color: var(--signature); font-weight: 700; }
.art-meta a:hover { text-decoration: underline; }

/* ── ARTICLE BODY ─────────────────────────────────
   No rules here any more — article body content is now
   bare <section id="..."> blocks (one per H2), styled
   entirely by bettersquash1.css's generic `section`/
   `section h2`/`p` rules, same as every other project
   page on the site. See the v2.0 changelog note above. */

.art__img {
    width: 100%;
    margin: 2.5rem 0 0;
    border: 1px solid #e5e7eb;
    padding: 6px;
    background: #fff;
}
.art__caption {
    font-size: 0.8rem;
    color: #9ca3af;
    font-style: italic;
    margin: 0.6rem 0 2.5rem;
    padding-left: 6px;
    line-height: 1.5;
    border-left: 2px solid #e5e7eb;
}

/* ── CALLOUT BOX — .art__final and .tldr share this look
   exactly (same background/border/padding); TL;DR just
   has a bold label + a plain list inside instead of a
   single paragraph, so it needs two extra lines, not a
   separate box style. ───────────────────────────────── */
.art__final,
.tldr {
    background: #f4f4f4;
    border-left: 3px solid var(--signature);
    padding: 1.25rem 1.5rem;
    line-height: 1.65;
    margin: 0 0 2rem;
}
.tldr p:first-child { font-weight: 700; margin-bottom: 0.5rem; }
.tldr ul { margin: 0; padding-left: 1.1em; }
.tldr li { margin-bottom: 0.35rem; }
.tldr li:last-child { margin-bottom: 0; }

/* ── PREV / NEXT — styled as CTA buttons ─────────── */
.art__prevnext {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}
/* Compound selector (.art__prevnext a.art__prev, not just .art__prev) is
   deliberate — outranks the earlier `.content-wrap a { color }` rule on
   specificity, so these stay solid white-on-signature buttons regardless
   of the generic body-link colour rule, no !important needed. */
.art__prevnext a.art__prev,
.art__prevnext a.art__next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--signature);
    border: 1px solid var(--signature);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.65rem 1.2rem;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
}
.art__prevnext a.art__prev:hover,
.art__prevnext a.art__next:hover {
    background: #fff;
    color: var(--signature);
    text-decoration: none;
}
.art__nav-arrow { font-size: 1rem; transition: transform 0.2s; }
.art__prev:hover .art__nav-arrow { transform: translateX(-3px); }
.art__next:hover .art__nav-arrow { transform: translateX(3px); }