/* ADMEbio — Article 02 scoped article styles. (ARTICLE-02-PREVIEW-1)
*
* Article 02 deliberately reuses Article 01's APPROVED values verbatim -- the 900px centred
* column, the type scale, the gold table header, the figure frame, the CTA and the reference
* list -- so the two articles read as siblings in one series rather than two designs. The
* only differences are the scope class and one development-only component (.a02-figpending).
* If Article 01's approved look changes, this file should be updated to match it, not drift.
*
* EVERY rule is scoped under .article-02. There are no bare element selectors, because
* basic.css is global and an unscoped `h2{}` or `table{}` here would reach the shared header,
* the navbar and every other page that loads this file. Article 01's own .article-01 rules
* are untouched by this file, and this file is only ever loaded by Article 02's own page.
*
* COLOURS ARE REUSED, NOT INVENTED. Each value was read out of assets/css/basic.css:
* #eeb800 the brand gold .btn-s3 background-color, .bg-red
* #0071bb the site blue used 9x in basic.css
* #333 #666 #ddd #eee #f4f4f4 basic.css neutrals
* #fcf8e3 #faebcc the theme's notice fill/border
*
* TWO CONTRAST DECISIONS, inherited from Article 01 and kept for consistency:
* - Table headers use #333 ON gold, not white on gold. White on #eeb800 measures about
* 1.9:1 and fails WCAG AA; #333 on #eeb800 measures about 6.7:1 and passes.
* - Body links use #0071bb (about 5.2:1) rather than the .fc-lb cyan #00a9c8 (about 2.8:1).
*
* NO @media QUERIES, DELIBERATELY. The storefront has no viewport meta and .container is a
* fixed 1008px, so a component-level width breakpoint fires on a narrow device while the
* container around it is still 1008px -- that combination has already pushed a primary CTA
* off screen once on this site. Reflow here is container-driven only, exactly as Article 01.
*
* MEASURED, 2026-10-11, so the next person does not have to re-derive it. Without viewport
* meta a phone falls back to a ~1008px layout viewport and scales the page down; a 375px
* device therefore renders this article at roughly 37% scale and the 15px body text presents
* at about 5.6px apparent size, legible only after pinch-zoom. The obvious fix makes it
* WORSE: injecting at
* runtime raised horizontal overflow from 28px to 633px at 375px wide, and from 28px to 240px
* at 768px, because .container stays a hard 1008px and simply stops being scaled down.
* So DO NOT add viewport meta to this page or to the shared header as an isolated change. It
* is only safe once .container is fluid, which is a site-wide responsive programme with
* full-page visual regression -- not a per-article edit.
*/
/* ---- the article column -------------------------------------------------------------- */
/* ONE centred column. Everything -- title, subtitle, paragraphs, heading rules, callouts,
tables, figures, checklist, FAQ, CTA and references -- shares this width, so the left and
right gutters are symmetric and nothing extends past the text. There is deliberately no
element-level width limit anywhere below. */
.article-02{max-width:900px;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
padding:18px 16px 40px;color:#333;font-size:15px;line-height:1.72;}
/* basic.css line 7 zeroes the margin on every heading and p; restore it inside the article
only, or headings collapse onto the block that follows them. */
.article-02 h1,
.article-02 h2,
.article-02 h3,
.article-02 p,
.article-02 ul,
.article-02 ol{margin:0 0 14px;}
/* The standfirst rule Article 01 uses is deliberately absent: Article 02's subtitle was
removed because the approved H1 already ends in "What Matters?". The H1's bottom margin is
therefore raised from Article 01's 10px to 18px, so the gap down to the opening paragraph
matches what the standfirst used to provide and the title does not sit on the body text. */
.article-02 h1{font-size:32px;line-height:1.22;color:#0071bb;margin:6px 0 18px;font-weight:bold;}
.article-02 h2{font-size:23px;line-height:1.3;color:#0071bb;margin:34px 0 12px;font-weight:bold;
padding-bottom:7px;border-bottom:2px solid #eee;}
/* h3 carries NO rule and a smaller step, so 4.1 reads as subordinate to section 4 rather
than as a seventh top-level section. The FAQ questions use the same level. */
.article-02 h3{font-size:17px;line-height:1.35;color:#333;margin:22px 0 7px;font-weight:bold;}
.article-02 a{color:#0071bb;text-decoration:none;}
.article-02 a:hover{text-decoration:underline;}
/* basic.css line 11 sets ol,ul{list-style:none} globally, so the pre-order questions lose
their bullets and the references lose their numbers -- while the body cites [1]..[3].
Markers are restored here only, which is how the theme already handles it elsewhere. */
.article-02 ul,.article-02 ol{padding-left:24px;}
.article-02 ul li{list-style-type:disc;}
.article-02 ol.a02-refs{list-style-type:decimal;}
.article-02 ol.a02-refs li{list-style-type:decimal;}
.article-02 li{margin-bottom:7px;}
.article-02 .a02-fineprint{font-size:13px;color:#666;font-style:italic;}
/* The scope line under the standfirst: present on the page, not shouted. */
.article-02 .a02-scope{font-size:13.5px;color:#666;margin:0 0 20px;}
/* ---- key-point callout: gold accent, matching the brand ------------------------------- */
.article-02 .a02-callout{background:#f4f4f4;border-left:4px solid #eeb800;padding:14px 18px;margin:0 0 20px;}
.article-02 .a02-callout p{margin:0;}
/* ---- development-only notice (never rendered on Production) --------------------------- */
.article-02 .a02-devnote{background:#fcf8e3;border:1px solid #faebcc;color:#8a6d3b;
padding:9px 14px;margin:0 0 18px;font-size:13px;}
/* ---- tables: the theme's .table look, with a gold header ------------------------------ */
.article-02 .a02-table-wrap{overflow-x:auto;max-width:100%;margin:0 0 22px;}
.article-02 .a02-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;}
.article-02 .a02-table th{background:#eeb800;color:#333;text-align:left;padding:9px 11px;
font-weight:bold;border:1px solid #e0ad00;vertical-align:bottom;}
.article-02 .a02-table td{padding:9px 11px;border:1px solid #ddd;vertical-align:top;}
/* ROW headers keep scope="row" for screen readers -- that is strictly better than Article
01's plain , and it is the one place this file improves on it. But they must
LOOK like Article 01's first column, so the gold rule above is undone for tbody th:
otherwise the | selector paints the entire first column gold and the table reads as two
header bands. Bold text in an ordinary cell, striping with its row. */
.article-02 .a02-table tbody th{background:transparent;color:#333;font-weight:bold;
text-align:left;padding:9px 11px;border:1px solid #ddd;vertical-align:top;}
.article-02 .a02-table tbody tr:nth-child(even) td,
.article-02 .a02-table tbody tr:nth-child(even) th{background:#f9f9f9;}
/* The dilution table's numeric columns read better right-aligned against each other; the
verdict column stays left-aligned as prose. */
.article-02 .a02-table .a02-num{white-space:nowrap;}
/* ---- figures -------------------------------------------------------------------------- */
/* The image is capped at its natural width and otherwise fills the figure, so inside the
1008px site container it renders near 970px. overflow-x:auto is a safety net: if the
figure is ever placed somewhere narrower, it scrolls rather than forcing the PAGE to
scroll. The figcaption is OUTSIDE that scrolling box on purpose. */
.article-02 .a02-fig{max-width:100%;box-sizing:border-box;margin:0 0 24px;padding:12px;border:1px solid #ddd;background:#fff;}
.article-02 .a02-fig-scroll{overflow-x:auto;}
.article-02 .a02-fig-scroll:focus{outline:2px solid #0071bb;outline-offset:2px;}
.article-02 .a02-fig-img{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;}
.article-02 .a02-fig figcaption{font-size:13px;line-height:1.55;color:#666;margin:11px 2px 0;}
.article-02 .a02-fig figcaption a{color:#0071bb;}
.article-02 .a02-fig-full{display:inline-block;margin-top:6px;font-weight:bold;}
/* ---- figure-pending placeholder: DEVELOPMENT ONLY ------------------------------------- */
/* Reserves the figure's position and spacing so the preview shows the real page rhythm
while the supplied SVG/PNG assets are still outstanding. Deliberately dashed, grey and
captioned as pending so it can never be mistaken for a finished figure in a screenshot.
The view renders this ONLY off Production; see the view's comment for why. */
.article-02 .a02-figpending{display:flex;align-items:center;justify-content:center;
min-height:190px;padding:20px;box-sizing:border-box;
border:2px dashed #c9c9c9;background:#fafafa;color:#8a6d3b;text-align:center;}
.article-02 .a02-figpending p{margin:0;font-size:13px;line-height:1.6;}
.article-02 .a02-figpending code{font-size:12px;color:#333;background:#eee;padding:1px 5px;}
/* ---- call to action: brand gold, matching Article 01 ---------------------------------- */
.article-02 .a02-cta{background:#f4f4f4;border:1px solid #ddd;border-top:3px solid #eeb800;
padding:22px 24px;margin:30px 0;}
.article-02 .a02-cta h2{margin-top:0;border-bottom:none;padding-bottom:0;}
/* THE BUTTON LABEL IS #333, NOT WHITE, AND THAT IS DELIBERATE. DO NOT "RESTORE" IT TO #fff
FOR CONSISTENCY WITH basic.css OR ARTICLE 01.
White on #eeb800 measures 1.83:1, which fails WCAG AA (4.5:1 is required at this size and
weight -- 15px bold is NOT "large text", which needs >=18.66px bold or >=24px). #333 on the
same gold measures 6.91:1 and passes, and on the #d9a800 hover state it measures 5.75:1 and
also passes. The brand colour is unchanged; only the label colour moved.
This is the same decision already taken for this article's table headers, and it is applied
here ONLY. The global .btn-s3 (basic.css line 158) and Article 01's .a01-btn still use white
on gold and are deliberately untouched: correcting them is an estate-wide brand change that
belongs to its own reviewed release, not to Article 02. See the maintenance note in the
audit report of 2026-10-11 for the full measurement. */
.article-02 .a02-btn{display:inline-block;margin:8px 10px 0 0;padding:0 18px;min-height:34px;
line-height:34px;border-radius:4px;font-size:15px;font-weight:bold;text-transform:uppercase;
text-decoration:none;color:#333;background-color:#eeb800;border:1px solid #ffdd66;}
.article-02 .a02-btn:hover{background-color:#d9a800;text-decoration:none;}
.article-02 .a02-btn-alt{color:#0071bb;background:#fff;border:1px solid #0071bb;}
.article-02 .a02-btn-alt:hover{background:#f4f4f4;}
/* ---- references ----------------------------------------------------------------------- */
.article-02 .a02-refs{font-size:13.5px;color:#666;}
.article-02 .a02-refs li{margin-bottom:10px;}
| |