/* ============================================================ THE ATHENAEUM — article template styles Ported from AlienLifeCreations/_shared/article.css (the proven ALC dossier renderer's stylesheet — TOA_ARTICLES_BUILD_PLAN.md §6, "reuse the ALC pipeline exactly", ZERO change to structure/ layout). Only the PALETTE differs from the ALC source, and only in the ways the plan calls out (§6, SEV-9, SEV-10): 1. TIER BADGES remap from ALC's green-first t1..t4 to ToA's own already-established tier palette (see _shared/styles.css's "TIER PALETTE = BRAND PALETTE" block): t1=gold, t2=cyan, t3=violet, t4=stone. 2. FAMILY / LEFT-EDGE color is no longer a fixed per-wing body class (ALC's .wing-species/.wing-sites/.wing-myth/.wing-ufo/ .wing-lost, each hardcoding one of ALC's 5 wing colors into a CSS selector). The Athenaeum has many wings grouped into 7 realms (plan §3), so family color is carried by ONE custom property, --wing-realm, SET AT RENDER per page/per wing (by the ToA build path, via wing_realm.py's wing -> realm -> token resolver) rather than hardcoded into any selector here. A body-level fallback below keeps an unstyled/preview page from going colorless. 3. BODY INK (reading-copy color) is warmed. ALC's article prose uses a literal #cdd8ce (a cool green-grey, matching ALC's alien-signal aesthetic) for paragraph/table/claim/verdict text — NOT one of ALC's --ink/--ink-soft tokens, a separate third tone tuned for long-form readability. ToA's equivalent lives in --article-ink below, aliased to the already-minted --stone-tier-bright token (_shared/styles.css: "brighter stone for text on dark") — warm, dimmed relative to full --ink, brighter than --ink-soft, and in ToA's own warm-parchment family rather than ALC's cool one. 4. A few literal rgba() overlay colors that were tuned to ALC's own near-black (a green-tinged #08 0B 08, not actually equal to any ALC token) are retuned to ToA's actual --space value (#0A0A12 = rgb(10,10,18)) instead, and the cyan/violet-tinted gradients are retuned to ToA's --cyan/--violet RGB triplets so they read correctly against the new palette. Everything else — spacing, grid, responsive rules, block anatomy (claim/pullquote/table/factbox/verdict/sources/imgcredits) — is unchanged from the ALC source. Guarded by no_alc_palette.py: this file must never contain ALC's literal hexes or its ALC-style capitalized wing-label word (see that script's own docstring for the exact term, spelled out there so this file stays clean of it). ============================================================ */ :root{ /* Dimmed reading-copy ink — see point 3 above. Local alias so every ALC #cdd8ce occurrence below reads from one place. */ --article-ink:var(--stone-tier-bright); } /* Family/left-edge fallback (mirrors ALC's `body{--sec:var(--green)}` pattern) — gold, ToA's "thread through all realms" accent (plan §2), so a page rendered before its --wing-realm is stamped still reads coherently instead of falling back to an undefined custom property. The real value is set per-page: an inline style on (or a wrapping element) carrying `--wing-realm:`, where is whatever wing_realm.py's wing_realm_token() resolves for that article's wing (e.g. `--wing-realm:var(--amber)` for a Deep Past piece). This file only ever READS --wing-realm, never assigns it per-family. */ body{--wing-realm:var(--gold)} /* No element may pan the page sideways on phones: overflow-x:clip kills the horizontal scroll a single over-wide element used to create (ALC finding, carried over: the .src-list grid blew out on a narrow phone, letting the whole page slide). clip, not hidden — clip doesn't create a scroll container, so position:sticky/fixed keep working. Tables still scroll INSIDE their own .tbl-wrap. */ body{overflow-x:clip} .article{max-width:920px;margin:0 auto;padding:8px 0 20px;overflow:visible} .art-hero{padding:44px 0 8px;text-align:center} .art-hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase; color:var(--wing-realm);text-shadow:0 0 14px rgba(255,255,255,.12)} .art-hero h1{font-size:clamp(28px,5vw,46px);font-weight:800;line-height:1.15;color:var(--ink);margin:16px 0 0} .art-hero .deck{color:var(--ink-soft);font-size:clamp(16px,2.2vw,19px);line-height:1.6;margin:18px auto 0;max-width:60ch} .art-meta{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;align-items:center;margin:22px 0 4px; font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;color:var(--ink-soft)} .art-meta .caseid{color:var(--wing-realm);border:1px solid var(--card-line);border-radius:6px;padding:2px 8px} .hero-fig{margin:26px 0 10px;border-radius:16px;overflow:hidden;border:1px solid var(--card-line);position:relative} .hero-fig img{width:100%;height:auto;display:block;max-height:480px;object-fit:cover} /* a hero image the placer marks as a document/map shows WHOLE (letterboxed), never cropped */ .hero-fig.contain img{object-fit:contain;max-height:520px;background:#0b0f0b} .hero-fig figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:9px 14px; background:rgba(10,10,18,.6);letter-spacing:.3px} /* full-width inline figure: for WIDE / landscape images, shown at natural aspect across the column with text flowing above and below (no side-column crop, no height-match gap). */ .art-fig{margin:28px auto;border-radius:14px;overflow:hidden;border:1px solid var(--card-line);clear:both} .art-fig img{width:100%;height:auto;display:block;max-height:600px;object-fit:cover} /* a full-width figure holding a portrait/tall image shows WHOLE (letterboxed), never cropped */ .art-fig.contain img{object-fit:contain;max-height:640px;background:#0b0f0b} .art-fig figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:9px 14px; background:rgba(10,10,18,.6);letter-spacing:.3px} /* the evidence legend — the transparency contract, up top */ .tierlegend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px auto 0} .tierlegend .t{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px; letter-spacing:.5px;color:var(--ink-soft);border:1px solid var(--card-line);border-radius:20px;padding:4px 11px} .tierlegend .dot{width:8px;height:8px;border-radius:50%} /* tier remap (point 1 above): t1=gold, t2=cyan, t3=violet, t4=stone — matches ToA's own established tier palette in _shared/styles.css */ .dot.d1{background:var(--gold)} .dot.d2{background:var(--cyan)} .dot.d3{background:var(--violet)} .dot.d4{background:var(--stone-tier)} /* centered numbered section headers (e.g. "01 The Desert Canvas") — AEON quality upgrade 2026-07-22, site-wide via shared CSS (no rebuild). Size unchanged (it reads well); the inline .n number span stays inline and rides the centered line. Body

alignment is untouched (stays left). */ .article h2{font-size:clamp(21px,3vw,27px);font-weight:800;color:var(--ink);margin:40px 0 6px;letter-spacing:.2px;clear:both;text-align:center} .article h2 .n{font-family:var(--mono);font-size:14px;color:var(--wing-realm);margin-right:10px;opacity:.8} .article p{color:var(--article-ink);font-size:16.5px;line-height:1.75;margin:16px 0} .article p b{color:var(--ink)} .article a.inline{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(69,214,223,.4)} /* magazine wrap: figures + tables float, alternating sides, text flows around them. The renderer stamps .wrap-r / .wrap-l on inline figures and tables, zig-zagging down the page. The top hero-fig stays full width (no wrap class). */ .article .wrap-l,.article .wrap-r{width:min(48%,400px);margin-top:6px;margin-bottom:16px} .article .wrap-r{float:right;clear:right;margin-left:30px} .article .wrap-l{float:left;clear:left;margin-right:30px} .article .tbl-wrap.wrap-l table,.article .tbl-wrap.wrap-r table{min-width:0;font-size:13px} .article .tbl-wrap.wrap-l th,.article .tbl-wrap.wrap-r th, .article .tbl-wrap.wrap-l td,.article .tbl-wrap.wrap-r td{padding:8px 10px} .article .hero-fig.wrap-l img,.article .hero-fig.wrap-r img{max-height:300px} /* full-width blocks always break past floats */ .article .factbox,.article .verdict,.article .sources,.article .pullquote{clear:both} @media(max-width:680px){ .article .wrap-l,.article .wrap-r{float:none;width:100%;margin-left:0;margin-right:0} } /* ALIGNED MEDIA ROW: when a section leads with a figure or table, the media and the text share one exact top line and form a clean rectangle. Media side alternates down the article. The renderer emits this for media-led sections. */ .article .mediarow{display:grid;gap:30px;align-items:stretch;margin:38px 0 12px; grid-template-columns:minmax(0,360px) minmax(0,1fr)} .article .mediarow.media-right{grid-template-columns:minmax(0,1fr) minmax(0,360px)} .article .mediarow.media-right .media{order:2} .article .mediarow.media-right .rowtext{order:1} /* min-width:0 on BOTH children: a bare 1fr track's min-width:auto sizes to the widest table/nowrap-tag min-content and pushes the whole track past the page */ .article .mediarow .rowtext,.article .mediarow .media{min-width:0} .article .mediarow .rowtext>:first-child{margin-top:0} .article .mediarow .rowtext h2{margin-top:0;clear:none} /* image media shows at its natural aspect within the column, top-aligned beside its text. No forced height-match: a wide image is never squeezed into a tall column and a tall image is never stretched flat. A generous max-height only lightly caps extreme portraits. */ .article .mediarow .media.figmedia{align-self:start} .article .mediarow .media.figmedia figure{display:flex;flex-direction:column;margin:0;width:100%} .article .mediarow .media.figmedia img{width:100%;height:auto;max-height:540px;object-fit:cover;display:block} /* table media stretches its rows to fill the row height, so the table bottom lines up with the bottom of the paired text/cards (a true box). */ .article .mediarow .media.tblmedia{align-self:stretch} .article .mediarow .media.tblmedia .tbl-wrap{margin:0;height:100%;display:flex} .article .mediarow .media.tblmedia table{min-width:0;font-size:13.5px;height:100%;flex:1} .article .mediarow .media.tblmedia th,.article .mediarow .media.tblmedia td{padding:8px 11px;vertical-align:middle} @media(max-width:680px){ .article .mediarow,.article .mediarow.media-right{grid-template-columns:minmax(0,1fr)} .article .mediarow .media,.article .mediarow.media-right .media,.article .mediarow.media-right .rowtext{order:0} .article .mediarow .media.figmedia{height:auto} .article .mediarow .media.figmedia img{height:auto;object-fit:contain;max-height:340px} } /* tier claim callouts — every non-obvious claim wears its evidence. Default fallback (no .tN class) now points at --gold, matching the new t1. */ .claim{display:flex;gap:13px;margin:18px 0;padding:15px 17px;border-radius:12px;background:var(--card); border:1px solid var(--card-line);border-left:3px solid var(--tc,var(--gold))} .claim .tag{font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--tc,var(--gold)); white-space:nowrap;padding-top:2px;font-weight:600} .claim p{margin:0;font-size:15px;color:var(--article-ink)} .claim.t1{--tc:var(--gold)} .claim.t2{--tc:var(--cyan)} .claim.t3{--tc:var(--violet)} .claim.t4{--tc:var(--stone-tier)} /* inside a mediarow's narrow text column the tag's desktop nowrap can exceed the column at ANY viewport (worst at tablet widths) — wrap there, at all sizes */ .rowtext .claim{flex-wrap:wrap} .rowtext .claim .tag,.rowtext .verdict .vtag{white-space:normal;line-height:1.5} .pullquote{font-size:clamp(19px,2.6vw,25px);line-height:1.4;font-weight:700;color:var(--ink); text-align:center;margin:34px auto;max-width:22ch;padding:0 10px} .pullquote .em{color:var(--wing-realm)} /* fast-facts box */ .factbox{background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(10,10,18,.4));border:1px solid var(--card-line); border-radius:14px;padding:20px 22px;margin:28px 0} .factbox h3{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--wing-realm);margin-bottom:12px} .factbox dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0} .factbox dt{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.3px} .factbox dd{color:var(--ink);font-size:14.5px} /* tables */ .tbl-wrap{overflow-x:auto;margin:24px 0;border:1px solid var(--card-line);border-radius:12px} .article table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:440px} .article caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase; color:var(--ink-stone);padding:12px 14px 8px} .article th,.article td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--card-line)} .article th{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft);background:rgba(255,255,255,.03)} .article td{color:var(--article-ink)} .article tr:last-child td{border-bottom:none} /* the honest verdict */ .verdict{margin:38px 0 8px;padding:24px 24px 20px;border-radius:16px;border:1px solid var(--card-line); background:linear-gradient(160deg,rgba(69,214,223,.06),rgba(155,93,229,.05))} .verdict h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px} .verdict .sub{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);margin-bottom:14px} .verdict .line{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--card-line)} .verdict .line:first-of-type{border-top:none} .verdict .vtag{font-family:var(--mono);font-size:10px;letter-spacing:.6px;text-transform:uppercase;font-weight:600; white-space:nowrap;color:var(--vc);padding-top:2px} .verdict .v1{--vc:var(--gold)} .verdict .v2{--vc:var(--cyan)} .verdict .v3{--vc:var(--violet)} .verdict .v4{--vc:var(--stone-tier)} .verdict p{margin:0;font-size:15px;color:var(--article-ink)} /* sources & further reading — ToA as the receipts, not the main act */ .sources{margin:34px 0 10px;padding:24px;border-radius:16px;border:1px solid var(--card-line);background:var(--card)} .sources .head{display:flex;align-items:center;gap:10px;margin-bottom:6px} .sources h3{font-size:17px;font-weight:800;color:var(--ink)} .sources .note{color:var(--ink-soft);font-size:13px;margin-bottom:16px} /* minmax(0,1fr) is load-bearing: without it the grid track's min-width:auto sizes to the longest nowrap .ti title and overflows the page on phones */ .src-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)} .src{min-width:0} .src{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-radius:10px; background:rgba(10,10,18,.5);border:1px solid var(--card-line);text-decoration:none;transition:.18s} .src:hover{border-color:var(--cyan-deep);background:rgba(69,214,223,.05)} .src .l{display:flex;align-items:center;gap:12px;min-width:0} .src .id{font-family:var(--mono);font-size:11px;color:var(--cyan);border:1px solid var(--card-line);border-radius:5px;padding:2px 7px;flex:none} .src .ti{color:var(--ink);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .src .go{font-family:var(--mono);font-size:11px;color:var(--ink-soft);flex:none} .src:hover .go{color:var(--cyan)} /* image credits — every picture on the page named + sourced, under the links */ .imgcredits{margin:18px 0 10px;padding:18px 22px;border-radius:14px;border:1px solid var(--card-line);background:var(--card)} .imgcredits h4{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-stone);margin-bottom:12px} .imgcredits ul{list-style:none;display:grid;gap:8px;margin:0;padding:0} .imgcredits li{color:var(--ink-soft);font-size:12px;line-height:1.55;overflow-wrap:anywhere} .imgcredits li b{color:var(--ink)} .imgcredits li .lic{font-family:var(--mono);font-size:10px;letter-spacing:.3px;color:var(--ink-stone); border:1px solid var(--card-line);border-radius:12px;padding:1px 7px;margin-left:4px;white-space:nowrap} .imgcredits a{color:var(--cyan);text-decoration:none} .imgcredits a:hover{text-decoration:underline} .backline{text-align:center;margin:30px 0 60px} @media(max-width:560px){ .claim{flex-direction:column;gap:6px} /* phones (360-430px wide, any aspect ratio): stack label-over-value instead of side columns, and tighten tables so their internal scroll carries less */ .factbox dl{grid-template-columns:1fr;gap:2px} .factbox dt{margin-top:10px} .factbox dl dt:first-of-type{margin-top:0} .verdict .line{flex-direction:column;gap:6px} .article table{font-size:13px} .article th,.article td{padding:8px 10px} .verdict{padding:18px 16px 14px} .factbox{padding:16px 16px} /* tier tags/labels sit on their own stacked line here, so let long ones WRAP instead of nowrap-escaping their box (nowrap is a desktop side-column need) */ .claim .tag,.verdict .vtag{white-space:normal;line-height:1.5} .imgcredits li .lic{white-space:normal} }