/* ============================================================
illuminating.science — DEPLOYED DESIGN SYSTEM CSS (v2)
Paste this as a FULL REPLACEMENT of Appearance > Customize >
Additional CSS, then Publish and purge caches.
Generated 2026-06-13 from the v2 design kit bundled in the
illuminating-science-apply skill (reference/ chain).
Fonts are loaded by GP Element 12215 (wp_head ), so no
@import is needed here.
Section A = canonical v2 kit. Section B = back-compat shim for
v1 page markup not yet migrated; remove a block once its pages
are retrofitted to v2 (see WORDPRESS.md v1->v2 map).
============================================================ */
/* ============================================================
SECTION A — v2 KIT (canonical)
============================================================ */
/* --- colors_and_type.css (tokens + base type) --- */
/* ================================================================
Illuminating Science — Design Tokens
Type + color system. Source: illuminating.science design system page.
Webfonts imported from Google Fonts (exact families used on site).
================================================================ */
:root {
/* -----------------------------------------------------------
CHROME — slate (900 darkest → 50 lightest)
Used for: backgrounds, body text, borders, structural UI
----------------------------------------------------------- */
--slate-900: #1a2332;
--slate-700: #2c4158;
--slate-500: #4a6a82;
--slate-300: #8ba4b8;
--slate-200: #b3c5d3;
--slate-100: #dce4ea;
--slate-50: #f0f4f7;
--white: #ffffff;
/* -----------------------------------------------------------
ACCENT — coral / burnt orange.
The single "insight" accent. Also used for code-like mono tokens.
----------------------------------------------------------- */
--accent: #d4602c;
--accent-light: #e8845a;
--accent-bg: #fdf5f0;
/* -----------------------------------------------------------
INVARIANT RATIO — gold.
SIGNAL: anything gold = dimensionless, unit-invariant quantity.
Reserved exclusively for ratios / Planck-scale relative numbers.
----------------------------------------------------------- */
--ratio-900: #6b4f00;
--ratio-700: #8a6800;
--ratio-600: #a07a00;
--ratio-500: #b8860b;
--ratio-400: #d4a830;
--ratio-300: #dcc87a;
--ratio-200: #ece0b0;
--ratio-100: #f5ecd0;
--ratio-50: #faf6eb;
/* -----------------------------------------------------------
DIMENSIONAL COLORS (warm = SI base, cool = derived)
Each has dark (text/border), base (badge), light (bg).
----------------------------------------------------------- */
/* Length L */
--dim-length-dark: #a03d23;
--dim-length-base: #EC652D;
--dim-length-light: #fce9df;
/* Time T */
--dim-time-dark: #8f6510;
--dim-time-base: #d99a18;
--dim-time-light: #fdf3dd;
/* Mass M */
--dim-mass-dark: #82181e;
--dim-mass-base: #cf202f;
--dim-mass-light: #fce0e2;
/* Charge Q */
--dim-charge-dark: #0e3872;
--dim-charge-base: #134DA1;
--dim-charge-light: #dce8f8;
/* Energy E (derived, cool) */
--dim-energy-dark: #3d6a16;
--dim-energy-base: #62a132;
--dim-energy-light: #e8f5dc;
/* Velocity v */
--dim-velocity-dark: #3c4278;
--dim-velocity-base: #5e68b0;
--dim-velocity-light:#e4e6f3;
/* Force F */
--dim-force-dark: #4d3270;
--dim-force-base: #734b9e;
--dim-force-light: #ede4f5;
/* Acceleration a */
--dim-accel-dark: #6e2449;
--dim-accel-base: #9A3467;
--dim-accel-light: #f3e0eb;
/* Power P */
--dim-power-dark: #5a3060;
--dim-power-base: #8a4a90;
--dim-power-light: #f0e2f2;
/* Area A */
--dim-area-dark: #1a5a6e;
--dim-area-base: #28839c;
--dim-area-light: #ddf0f5;
/* -----------------------------------------------------------
SEMANTIC (content)
----------------------------------------------------------- */
--fg-1: var(--slate-900); /* primary body text */
--fg-2: var(--slate-700); /* secondary / h2 */
--fg-muted: var(--slate-500); /* labels, captions, h3 */
--fg-faint: var(--slate-300); /* disabled, meta */
--border: var(--slate-100);
--border-2: var(--slate-200);
--bg: var(--white);
--bg-alt: var(--slate-50);
/* Formula display wash — gold-paper, darkest at the label edge */
--formula-wash-edge: var(--ratio-50); /* left edge of gradient */
--formula-wash-body: #fdfcf8; /* constant shade from 48% on */
/* Worked-example wash — coral-paper, mirrors the formula wash */
--example-wash-edge: var(--accent-bg); /* left edge of gradient */
--example-wash-body: #fefbf9; /* constant shade from 48% on */
--bg-page: #efefef; /* page chrome, GeneratePress default */
--verified-dark: #2a6a2a; /* "observed / calculated agree" green */
--verified-bg: #f5faf5;
--verified-bd: #b4d8b4;
/* -----------------------------------------------------------
TYPE FAMILIES
----------------------------------------------------------- */
--font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--font-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
/* -----------------------------------------------------------
TYPE TOKENS — element roles
----------------------------------------------------------- */
--h1-size: 2.15rem; --h1-weight: 700; --h1-color: var(--slate-900); --h1-family: var(--font-body);
--h2-size: 1.4rem; --h2-weight: 600; --h2-color: var(--slate-700); --h2-family: var(--font-body);
--h3-size: 1.18rem; --h3-weight: 700; --h3-color: var(--slate-900); --h3-family: var(--font-body);
--h3-transform: none; /* sentence-case subheadings; was uppercase (mangled MathJax in h3) */ --h3-tracking: 0;
--body-size: 18px; --body-weight: 400; --body-color: var(--slate-900); --body-line: 1.72; /* @kind other */
--lede-size: 1.12rem;--lede-color: var(--slate-500);
--ui-label-size: 0.72rem; --ui-label-tracking: 0.06em; --ui-label-weight: 700;
--mono-size: 0.92rem;
/* -----------------------------------------------------------
SPACING (4px grid)
----------------------------------------------------------- */
--space-50: 4px;
--space-100: 8px;
--space-150: 12px;
--space-200: 16px;
--space-300: 24px;
--space-400: 32px;
--space-500: 40px;
--space-600: 48px;
--space-800: 64px;
/* -----------------------------------------------------------
RADII
----------------------------------------------------------- */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
/* -----------------------------------------------------------
SHADOWS (slate-tinted, not pure black)
----------------------------------------------------------- */
--shadow-sm: 0 1px 3px rgba(26,35,50,0.08);
--shadow-md: 0 2px 8px rgba(26,35,50,0.10);
--shadow-lg: 0 4px 16px rgba(26,35,50,0.12);
/* -----------------------------------------------------------
LAYOUT
----------------------------------------------------------- */
--content-width: 740px; /* prose column */
--wide-width: 880px; /* components, tables */
--page-max: 1000px; /* full site container */
}
/* ================================================================
BASE TYPE — apply to body by default
================================================================ */
body {
font-family: var(--font-body);
font-size: var(--body-size);
line-height: var(--body-line);
color: var(--body-color);
background: var(--bg-page);
}
h1 { font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight); color: var(--h1-color); line-height: 1.2; }
h2 { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); color: var(--h2-color); line-height: 1.3; border-bottom: 2px solid var(--border); padding-bottom: var(--space-100); }
h3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: var(--h3-weight); color: var(--h3-color); text-transform: var(--h3-transform); letter-spacing: var(--h3-tracking); }
code, .mono, pre { font-family: var(--font-mono); font-size: var(--mono-size); }
.ui { font-family: var(--font-ui); }
.lede { font-size: var(--lede-size); color: var(--lede-color); }
.ui-label { font-family: var(--font-ui); font-size: var(--ui-label-size); font-weight: var(--ui-label-weight); letter-spacing: var(--ui-label-tracking); text-transform: uppercase; color: var(--fg-muted); }
/* --- page-shell.css --- */
/* ============================================================
Illuminating Science — page shell & content primitives
Article-page structure (.page, .essay*) and the inline content
primitives shared by EVERY consumer of the system. Imported by
the root styles.css so static pages built per the
illuminating-science-apply skill's BUILDING.md get these classes
from the single stylesheet entry point — never link this file
directly. (The website UI kit also carries these rules inline so
it renders standalone; keep the two in sync.)
============================================================ */
/* ============ PAGE SHELL ============ */
.page {
max-width: var(--page-max);
margin: 0 auto;
padding: 56px 28px 20px;
}
/* ============ ESSAY STRUCTURE ============ */
.breadcrumb { margin-bottom: 28px; }
.breadcrumb a { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--slate-500); cursor: pointer; }
.breadcrumb a:hover { color: var(--accent); }
.essay { max-width: var(--content-width); margin: 0 auto; }
.essay-header { margin-bottom: 32px; }
.essay-meta { font-family: var(--font-ui); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate-500); margin-bottom: 10px; }
.essay h1 { font-family: var(--font-body); font-size: 2.4rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--slate-900); margin: 0 0 16px; }
.essay .lede { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.55; color: var(--slate-500); margin: 0; }
.essay-body { font-family: var(--font-body); font-size: 18px; line-height: 1.72; color: var(--slate-900); }
.essay-body p { margin: 0 0 22px; }
.essay-body h2 { font-family: var(--font-body); font-size: 1.55rem; font-weight: 700; color: var(--slate-900); margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--slate-100); text-transform: none; letter-spacing: 0; }
.essay-footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--slate-100); }
/* Divider between major parts (BUILDING.md §3). Use sparingly. */
hr.ds-divider {
border: 0;
border-top: 1px solid var(--slate-200);
max-width: 88px;
margin: 48px auto;
}
/* ============ CONTENT PRIMITIVES ============ */
.inline-mono {
font-family: var(--font-mono);
font-size: 0.92em;
color: var(--accent);
background: var(--accent-bg);
padding: 1px 6px;
border-radius: 3px;
}
.ratio-mark { color: var(--ratio-700); font-weight: 600; }
/* One neutral style for ALL dimension tags. The letter (L/T/M/Q/E…)
carries the dimension — not a color the reader has to track (there
are too many to be legible as a code). The --dim-*-* tokens remain
for illustrations and the color reference, just not for inline tags. */
.dim-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 3px;
font-family: var(--font-ui);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.02em;
background: var(--slate-100);
color: var(--slate-700);
}
/* Legacy inline insight callout. New work should prefer the article
pattern `.callout.insight` (article-patterns.css); this alias is kept
because the website kit's primitive still emits `.insight`. */
.insight {
background: var(--accent-bg);
border: 1px solid #f0cdb8;
border-radius: 6px;
padding: 16px 20px;
margin: 28px 0;
font-size: 16px;
line-height: 1.65;
color: var(--slate-900);
}
.insight-title { color: var(--accent); font-weight: 700; }
.pullquote {
border-left: 3px solid var(--accent);
padding: 4px 0 4px 22px;
margin: 28px 0;
}
.pullquote p { margin: 0; font-size: 1.25rem; font-style: italic; line-height: 1.45; color: var(--slate-700); }
.pullquote cite { display: block; margin-top: 10px; font-family: var(--font-ui); font-size: 12px; font-style: normal; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
/* ============ FORMULA DISPLAY ============ */
/* Journal rules (booktabs) + half-width gold-paper wash.
Adopted from Formula Display Explorations (B3 geometry, B4 color). */
.formula-display {
border-top: 2.5px solid var(--slate-900);
border-bottom: 1px solid var(--slate-900);
background: linear-gradient(90deg, var(--formula-wash-edge) 0%, var(--formula-wash-body) 48%, var(--formula-wash-body) 100%);
padding: 16px 20px 18px;
margin: 24px 0;
}
.formula-label {
font-variant-caps: all-small-caps;
letter-spacing: 0.1em;
font-size: 17px;
color: var(--slate-700);
margin-bottom: 2px;
}
.formula-footnote {
font-size: 0.82rem;
color: var(--slate-500);
line-height: 1.55;
margin: 14px 0 0;
}
.formula-footnote::before {
content: "";
display: block;
width: 88px;
border-top: 1px solid var(--slate-300);
margin-bottom: 7px;
}
/* ============ VALUE TABLE ============ */
/* SI-vs-Planck reference table. For the booktabs article table see
`.table-booktabs` (article-patterns.css); this is the lighter inline
variant used in essays and the apply skill's BUILDING.md examples. */
.value-table { border-collapse: collapse; width: 100%; margin: 28px 0; font-size: 14px; color: var(--slate-900); }
.value-table th { text-align: left; font-family: var(--font-ui); font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; padding: 6px 10px; border-bottom: 2px solid var(--slate-200); }
.value-table td { padding: 10px 10px; border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.value-table td.num { text-align: right; }
.value-table td.mono { font-family: var(--font-mono); font-size: 13px; }
.value-table .unit { color: var(--slate-500); font-size: 12px; margin-left: 3px; }
/* ============ BUTTONS ============ */
.btn {
font-family: var(--font-ui);
font-weight: 600;
font-size: 14px;
padding: 10px 20px;
border-radius: 4px;
border: 1px solid transparent;
cursor: pointer;
transition: background .12s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--slate-900); color: #fff; border-color: var(--slate-900); }
.btn-primary:hover { background: var(--slate-700); border-color: var(--slate-700); }
.btn-secondary { background: #fff; color: var(--slate-900); border-color: var(--slate-200); }
.btn-secondary:hover { border-color: var(--slate-500); }
/* ============ FIGURES & IMAGES ============ */
/* One figure component, four sizes. Decorative / identity illustrations
float so prose wraps; instructional diagrams and plots stay centered
at content width. Captions are roman (ISO 80000-2). */
.figure { margin: 28px auto; text-align: center; }
.figure img { max-width: 100%; height: auto; display: inline-block; }
.figure-caption {
font-family: var(--font-body);
font-style: normal;
font-size: 14px;
line-height: 1.5;
color: var(--slate-500);
margin-top: 10px;
text-align: center;
}
/* Size variants */
.figure--full { max-width: 100%; } /* diagrams, plots, wide tables-as-images */
.figure--medium { max-width: 60%; } /* centered supporting illustration */
/* Float variants — decorative/supporting images that prose wraps around.
Never wider than 40% of the column; first use sits at the top of its
section so the wrap is clean. */
.figure--left, .figure--right { max-width: 40%; margin-top: 6px; margin-bottom: 16px; }
.figure--left { float: left; margin-right: 26px; }
.figure--right { float: right; margin-left: 26px; }
/* Floats collapse to centered medium width on narrow screens. */
@media (max-width: 640px) {
.figure--left, .figure--right { float: none; max-width: 75%; margin: 24px auto; }
.figure--medium { max-width: 85%; }
}
/* Clear wrapped text before a new section head or washed region. */
.section-head, .ds-clear { clear: both; }
/* --- article-patterns.css --- */
/* ================================================================
Illuminating Science — Article content patterns
Adopted from "Textbook Patterns v2" explorations (June 2026).
TINT ALLOCATION RULE — three paper washes, one per voice:
gold paper = the mathematics (key points, formula display)
coral paper = the teacher's hand (worked examples, insight)
cool slate = the data (reference tables)
Prose, equation lists, and the checklist stay white with rules.
Color carries meaning — never decoration.
================================================================ */
/* ----------------------------------------------------------------
SECTION HEAD — coral numeral marks the transition; title stays
slate. Full-coral heads are reserved for the page title only.
---------------------------------------------------------------- */
.section-head {
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.3;
color: var(--slate-900);
border-bottom: 2px solid var(--slate-100);
padding-bottom: 8px;
margin: 40px 0 16px;
}
.section-head .section-num {
font-family: var(--font-ui);
font-weight: 700;
font-size: 1.22rem;
color: var(--accent);
letter-spacing: 0.01em;
margin-right: 12px;
}
/* ----------------------------------------------------------------
KEY POINTS — section abstract. Booktabs rules + gold-paper wash
(same mechanic as the formula display: this is mathematics to
remember). Small-caps coral label runs into the text.
---------------------------------------------------------------- */
.key-points {
border-top: 2.5px solid var(--slate-900);
border-bottom: 1px solid var(--slate-900);
background: linear-gradient(90deg, var(--formula-wash-edge) 0%, var(--formula-wash-body) 48%, var(--formula-wash-body) 100%);
padding: 11px 16px 13px;
margin: 0 0 24px;
font-size: 15px;
line-height: 1.62;
}
.key-points-label {
font-variant-caps: all-small-caps;
letter-spacing: 0.09em;
font-size: 16.5px;
font-weight: 700;
color: var(--accent);
margin-right: 10px;
}
.key-points b { font-weight: 600; }
/* ----------------------------------------------------------------
WORKED EXAMPLE — dotted coral side-rules + coral-paper wash
(the teacher's hand). A coral dot opens the label; a coral dot
closes the example. Typographic glyphs only — no icons.
---------------------------------------------------------------- */
.worked-example {
border-left: 1px dotted var(--accent-light);
border-right: 1px dotted var(--accent-light);
background: linear-gradient(90deg, var(--example-wash-edge) 0%, var(--example-wash-body) 48%, var(--example-wash-body) 100%);
padding: 14px 20px;
margin: 24px 0;
font-size: 15.5px;
line-height: 1.64;
}
.worked-example-label {
display: block;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 10px;
white-space: nowrap;
}
.worked-example-label::before {
content: "";
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
margin-right: 8px;
}
.worked-example p { margin: 0 0 10px; }
.worked-example p:last-child { margin-bottom: 0; }
.worked-example-end { color: var(--accent); font-size: 12px; margin-left: 8px; }
/* ----------------------------------------------------------------
NAMED EQUATION LIST — bold law name, inline relation, mono
equation number set right. White; structure, not callout. When
one relation is the destination of the section, promote it to
.formula-display instead.
---------------------------------------------------------------- */
.equation-list { margin: 16px 0 24px; padding-left: 22px; }
.equation-row {
display: grid;
grid-template-columns: 1fr 72px;
align-items: baseline;
column-gap: 16px;
padding: 5px 0;
}
.equation-row .equation-name { font-weight: 700; }
.equation-row.is-cont { padding-top: 0; }
.equation-row.is-cont .equation-body { padding-left: 84px; }
.equation-num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--slate-500);
text-align: right;
white-space: nowrap;
}
/* ----------------------------------------------------------------
DATA TABLE — booktabs (heavy top rule, light row rules, no
vertical rules) seated on a cool slate panel (the data voice).
Numbered caption above, footnote below.
---------------------------------------------------------------- */
.table-panel {
background: var(--slate-50);
border-radius: var(--radius-md);
padding: 18px 20px 16px;
margin: 24px 0;
}
.table-caption {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.5;
margin: 0 0 10px;
color: var(--slate-900);
}
.table-caption .table-num { font-weight: 700; color: var(--accent); }
table.table-booktabs {
font-family: var(--font-ui);
font-size: 13.5px;
border-collapse: collapse;
width: 100%;
color: var(--slate-900);
}
.table-booktabs thead th {
text-align: left;
font-weight: 700;
font-size: 12.5px;
color: var(--slate-700);
padding: 7px 10px;
border-top: 2px solid var(--slate-700);
border-bottom: 1px solid var(--slate-700);
}
.table-booktabs tbody td {
padding: 7px 10px;
border-bottom: 1px solid var(--slate-200);
vertical-align: baseline;
}
.table-booktabs tbody tr:last-child td { border-bottom: 1px solid var(--slate-700); }
.table-booktabs .num { text-align: right; }
.table-booktabs th.num { text-align: right; }
.table-booktabs .mono { font-family: var(--font-mono); font-size: 12.5px; }
.table-booktabs .unit { color: var(--slate-500); font-size: 11.5px; margin-left: 3px; }
.table-footnote {
font-family: var(--font-ui);
font-size: 12px;
color: var(--slate-500);
line-height: 1.55;
margin: 8px 0 0;
}
/* ----------------------------------------------------------------
INVARIANT-RATIO TABLE — ALTERNATE table treatment, retained from
the original site. Use ONLY when the table itself demonstrates
unit-invariance (the same dimensionless number in every unit
system): the gold = invariant signal. All other reference data
uses .table-panel / .table-booktabs (slate). This is the gold
voice applied to a table, not a fourth tint.
Math formatting (ISO 80000-2): proper-name subscripts (P, Cs, B)
upright; numbers, units, and ×/÷ upright; the footnote paragraph
is roman — never italic.
---------------------------------------------------------------- */
.ratio-table-container {
background: var(--ratio-50);
border: 1.5px solid var(--ratio-300);
border-radius: var(--radius-lg);
margin: 28px 0;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.ratio-table-accent {
height: 4px;
background: linear-gradient(90deg, var(--ratio-600), var(--ratio-300));
}
.ratio-table-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px 10px;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ratio-700);
}
.ratio-table-header .status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ratio-500);
flex-shrink: 0;
}
table.ratio-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-ui);
font-size: 14px;
color: var(--slate-900);
}
.ratio-table thead th {
background: var(--ratio-100);
padding: 8px 16px;
text-align: left;
font-weight: 600;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ratio-900);
border-bottom: 1px solid var(--ratio-200);
}
.ratio-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--ratio-200);
vertical-align: middle;
}
.ratio-table tbody tr:last-child td { border-bottom: none; }
.ratio-table .mono { font-family: var(--font-mono); font-size: 13px; }
.ratio-table .unit { color: var(--slate-500); font-size: 12px; margin-left: 3px; }
.ratio-table .ratio-value {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
color: var(--ratio-700);
white-space: nowrap;
}
.ratio-table-footnote {
font-family: var(--font-body);
font-size: 14px;
font-style: normal; /* roman — whole paragraphs are never italic */
color: var(--slate-700);
line-height: 1.6;
padding: 12px 20px 16px;
margin: 0;
}
/* ----------------------------------------------------------------
CHECKLIST OF KEY EQUATIONS — end-of-article summary. One per
article, at the end. White with rules; coral serif title;
coral arrow cross-reference footer.
---------------------------------------------------------------- */
.eq-checklist-title {
font-family: var(--font-body);
font-size: 25px;
font-weight: 600;
color: var(--accent);
margin: 0 0 14px;
border: 0;
padding: 0;
}
.eq-checklist { border-top: 1px solid var(--slate-200); padding-top: 4px; }
table.eq-checklist-table {
border-collapse: collapse;
width: 100%;
font-size: 15px;
}
.eq-checklist-table thead th {
text-align: left;
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
padding: 10px 12px 8px;
border-bottom: 1px solid var(--slate-200);
}
.eq-checklist-table tbody td {
padding: 9px 12px;
border-bottom: 1px solid var(--slate-100);
vertical-align: baseline;
}
.eq-checklist-table tbody tr:last-child td { border-bottom: 1px solid var(--slate-200); }
.eq-checklist-table .eq-comment {
font-family: var(--font-ui);
font-size: 13px;
color: var(--slate-500);
}
.eq-checklist-foot {
display: flex;
gap: 10px;
align-items: baseline;
font-size: 14.5px;
color: var(--slate-700);
margin-top: 16px;
}
.eq-checklist-foot .eq-arrow { color: var(--accent); font-family: var(--font-ui); font-weight: 700; }
.eq-checklist-foot b { font-weight: 600; color: var(--accent); }
/* ================================================================
RECONCILED COMPONENTS — June 2026 site/kit migration.
Brought in from the deployed stylesheet (see Component Migration
Plan). PORT = adopted as-is, refined to tokens; TRANSLATE/DESIGN
noted per block. Tint rule still holds: coral = teacher's hand,
gold = invariant ratio, slate = data/structure.
---------------------------------------------------------------- */
/* CALLOUT [PORT] — note (slate) / insight (coral). 63 items.
The site's most common component. Glyph-in-circle + uppercase
kicker (matches .worked-example-label); 2px left accent rule
instead of a full border. Math is always MathJax. */
.callout {
display: flex;
gap: 14px;
padding: 15px 18px;
margin: 24px 0;
border-radius: var(--radius-md);
font-size: 15px;
line-height: 1.6;
}
.callout-glyph {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-weight: 700;
font-size: 13px;
color: #fff;
margin-top: 1px;
}
.callout-body { flex: 1; }
.callout-kicker {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 5px;
}
.callout-kicker::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
display: inline-block;
}
.callout.note { background: var(--slate-50); }
.callout.note .callout-glyph { background: var(--slate-500); }
.callout.note .callout-kicker { color: var(--slate-700); }
.callout.note .callout-kicker::before { background: var(--slate-500); }
.callout.insight { background: linear-gradient(90deg, var(--example-wash-edge) 0%, var(--example-wash-body) 55%, var(--example-wash-body) 100%); }
.callout.insight .callout-glyph { background: var(--accent); }
.callout.insight .callout-kicker { color: var(--accent); }
.callout.insight .callout-kicker::before { background: var(--accent); }
/* WELL + ASSEMBLY [PORT, regrounded] — numeric verification ledger.
52 items. The companion to .worked-example (narrative prose): this
is the aligned label|value calculation, set in the kit's booktabs
data idiom (slate panel, heavy rule under the label, light row
rules, heavy rule above the result). No left bar. */
.well {
background: var(--slate-50);
border-radius: var(--radius-md);
padding: 16px 20px 14px;
margin: 24px 0;
}
.well-label {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--slate-500);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 2px solid var(--slate-700);
}
.assembly-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 7px 0;
font-size: 14.5px;
border-bottom: 1px solid var(--slate-200);
flex-wrap: wrap;
}
.assembly-row:last-child { border-bottom: 0; }
.assembly-label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--slate-700);
}
.assembly-val { font-family: var(--font-mono); font-size: 13.5px; color: var(--slate-900); }
.assembly-val.is-ratio { color: var(--ratio-700); font-weight: 500; }
.assembly-row.result {
border-top: 1.5px solid var(--slate-700);
border-bottom: 0;
margin-top: 2px;
padding-top: 9px;
font-weight: 600;
}
.assembly-row.result .assembly-val { color: var(--slate-900); }
/* RATIO SHOWCASE [PORT + RENAME from .photon-card, regrounded] — gold
hero for a single organizing number (N, 2pi/alpha). 9 items. Set in
the kit's booktabs + gold-paper idiom (the .formula-display family),
in the gold invariant voice: heavy gold top rule, small-caps label,
big numeral, identity cells divided by light gold rules. No status
dot, no gradient accent bar. */
.ratio-showcase {
background: linear-gradient(90deg, var(--formula-wash-edge) 0%, var(--formula-wash-body) 55%, var(--formula-wash-body) 100%);
border-top: 2.5px solid var(--ratio-600);
border-bottom: 1px solid var(--ratio-300);
padding: 13px 22px 16px;
margin: 28px 0;
}
.ratio-showcase-label {
font-variant-caps: all-small-caps;
letter-spacing: 0.09em;
font-size: 16px;
font-weight: 700;
color: var(--ratio-700);
text-align: center;
}
.ratio-showcase-value {
font-size: 26px;
text-align: center;
color: var(--slate-900);
padding: 6px 0 14px;
}
.ratio-showcase-cells {
display: flex;
justify-content: center;
border-top: 1px solid var(--ratio-300);
}
.rsc-cell {
flex: 1;
text-align: center;
padding: 12px 8px 2px;
border-right: 1px solid var(--ratio-300);
}
.rsc-cell:last-child { border-right: 0; }
.rsc-formula { font-size: 16px; margin-bottom: 4px; }
.rsc-meaning {
font-family: var(--font-ui);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ratio-700);
}
/* RESULT COMPARE [TRANSLATE from .result-card] — computed vs.
reference. 8 items. Tight booktabs rows + green verified badge. */
.result-compare {
display: inline-flex;
flex-direction: column;
border-top: 2px solid var(--slate-700);
min-width: 280px;
margin: 24px 0 0;
}
.result-compare .rc-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 9px 2px;
border-bottom: 1px solid var(--slate-100);
}
.result-compare .rc-row .k {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-500);
}
.result-compare .rc-row .v { font-family: var(--font-mono); font-size: 15px; color: var(--slate-900); }
.result-compare-foot { display: flex; align-items: center; gap: 8px; margin: 11px 0 24px; }
.verified-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 700;
color: var(--verified-dark);
background: var(--verified-bg);
border: 1px solid var(--verified-bd);
border-radius: 3px;
padding: 4px 11px;
}
.verified-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verified-dark); }
/* CONSTANT PROFILE [DESIGN, was .identity-card] — constant-profile
page header. Symbol in a tinted square, kicker, mono value, name. */
.constant-profile {
display: flex;
align-items: center;
gap: 20px;
background: var(--white);
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
padding: 18px 22px;
box-shadow: var(--shadow-sm);
margin: 24px 0;
}
.constant-profile .cp-symbol {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: var(--radius-md);
background: var(--slate-900);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
}
.constant-profile .cp-body { flex: 1; }
.constant-profile .cp-kicker {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--slate-500);
margin-bottom: 3px;
}
.constant-profile .cp-value { font-family: var(--font-mono); font-size: 19px; color: var(--slate-900); line-height: 1.25; }
.constant-profile .cp-value .u { color: var(--slate-500); font-size: 14px; margin-left: 4px; }
.constant-profile .cp-name { font-family: var(--font-ui); font-size: 12.5px; color: var(--slate-700); margin-top: 4px; }
/* Optional single accent: tint ONLY the symbol square by dimension.
Default is slate; use sparingly. */
.constant-profile.dim-charge .cp-symbol { background: var(--dim-charge-base); }
.constant-profile.dim-length .cp-symbol { background: var(--dim-length-base); }
.constant-profile.dim-mass .cp-symbol { background: var(--dim-mass-base); }
/* SCALE METER [DESIGN] — log-scale magnitude indicator. 5 pages.
Dimension-colored gradient track + ringed self-labelling marker. */
.scale-meter { margin: 24px 0; padding: 4px 2px; }
.scale-meter-label {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-500);
margin-bottom: 12px;
}
.scale-meter-track {
position: relative;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--dim-charge-light), var(--dim-charge-base));
margin: 22px 0 8px;
}
.scale-meter-marker {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--slate-900);
transform: translate(-50%, -50%);
box-shadow: var(--shadow-sm);
}
.scale-meter-marker::after {
content: attr(data-val);
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate-900);
white-space: nowrap;
}
.scale-meter-ends {
display: flex;
justify-content: space-between;
font-family: var(--font-ui);
font-size: 11px;
color: var(--slate-500);
}
/* DERIVATION DISCLOSURE [PORT] + DETAIL-BODY [DEFINE] — collapsible
derivation. Accent marker; the previously-undefined .detail-body
child now has a rule so pages can drop inline styles. */
details.derivation {
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
margin: 24px 0;
overflow: hidden;
}
details.derivation summary {
font-family: var(--font-ui);
font-size: 0.88rem;
font-weight: 600;
color: var(--slate-700);
padding: 12px 18px;
cursor: pointer;
background: var(--slate-50);
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
details.derivation summary::-webkit-details-marker { display: none; }
details.derivation summary::before { content: "\25B8"; color: var(--accent); font-size: 11px; }
details.derivation[open] summary::before { content: "\25BE"; }
.detail-body {
padding: 15px 18px;
font-size: 14.5px;
line-height: 1.66;
color: var(--slate-900);
border-top: 1px solid var(--slate-100);
}
.detail-body p { margin: 0 0 10px; }
.detail-body p:last-child { margin-bottom: 0; }
/* CONTENT BADGE [PORT + RENAME] — small post-header label. The old
`worked-example` variant collided with the .worked-example BOX
component and is renamed to `example`. Three defined variants:
explainer (slate), concept (charge-blue), example (coral). */
.content-badge {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 4px;
margin-bottom: 16px;
}
.content-badge .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.content-badge.explainer { color: var(--slate-500); background: var(--slate-50); }
.content-badge.explainer .status-dot { background: var(--slate-500); }
.content-badge.concept { color: var(--dim-charge-dark); background: var(--dim-charge-light); }
.content-badge.concept .status-dot { background: var(--dim-charge-base); }
.content-badge.example { color: var(--accent); background: var(--accent-bg); }
.content-badge.example .status-dot { background: var(--accent); }
/* ============================================================
SECTION B — BACK-COMPAT SHIM (v1 markup, pre-June-2026 pages)
Each block keeps an un-migrated page styled until its markup is
retrofitted to v2. Delete a block once its pages use v2 names.
Selectors here are v1 names ABSENT from Section A by design.
============================================================ */
/* callout children: v1 .callout-icon/.callout-title -> v2 .callout-glyph/.callout-kicker */
.callout-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 2px; color: #fff; background: var(--slate-500); }
.callout.insight .callout-icon { background: var(--accent); }
.callout.note .callout-icon { background: var(--slate-500); }
.callout-title { font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-100); }
.callout.insight .callout-title { color: var(--accent); }
.callout.note .callout-title { color: var(--slate-700); }
/* decomposition tables: v1 .decomp-table -> v2 .table-booktabs */
.decomp-table-wrap { margin: var(--space-500) 0; border: 1px solid var(--slate-100); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.decomp-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.88rem; }
.decomp-table thead th { background: var(--slate-50); padding: var(--space-100) var(--space-200); text-align: left; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); border-bottom: 2px solid var(--slate-100); }
.decomp-table tbody td { padding: var(--space-150,12px) var(--space-200); border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.decomp-table .factor-name { font-weight: 600; color: var(--slate-700); }
.decomp-table .factor-value { font-family: var(--font-mono); font-size: 0.92rem; white-space: nowrap; }
.decomp-table tr.is-ratio td { background: var(--ratio-50); border-bottom-color: var(--ratio-200); }
.decomp-table tr.is-ratio .factor-value { color: var(--ratio-700); font-weight: 500; }
/* dimension tag color variants (v2 uses a single neutral .dim-tag; keep colors on old pages) */
.dim-tag.length, .dim-length { background: var(--dim-length-light); color: var(--dim-length-dark); }
.dim-tag.time, .dim-time { background: var(--dim-time-light); color: var(--dim-time-dark); }
.dim-tag.mass, .dim-mass { background: var(--dim-mass-light); color: var(--dim-mass-dark); }
.dim-tag.charge, .dim-charge { background: var(--dim-charge-light); color: var(--dim-charge-dark); }
.dim-tag.energy, .dim-energy { background: var(--dim-energy-light); color: var(--dim-energy-dark); }
.dim-tag.velocity, .dim-velocity { background: var(--dim-velocity-light); color: var(--dim-velocity-dark); }
.dim-tag.force, .dim-force { background: var(--dim-force-light); color: var(--dim-force-dark); }
.dim-tag.accel, .dim-accel { background: var(--dim-accel-light); color: var(--dim-accel-dark); }
.dim-tag.power, .dim-power { background: var(--dim-power-light); color: var(--dim-power-dark); }
.dim-tag.area, .dim-area { background: var(--dim-area-light); color: var(--dim-area-dark); }
/* numeric verification well: arrow element dropped in v2 */
.assembly-arrow { color: var(--slate-300); font-size: 0.8rem; }
/* photon card: v1 -> v2 .ratio-showcase */
.photon-card { background: var(--ratio-50); border: 1.5px solid var(--ratio-300); border-radius: var(--radius-lg); margin: var(--space-500) 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.photon-card-accent { height: 4px; background: linear-gradient(90deg, var(--ratio-600,#a07a00), var(--ratio-300)); }
.photon-card-header { display: flex; align-items: center; gap: var(--space-100); padding: var(--space-200) var(--space-300) var(--space-100); }
.photon-card-header .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ratio-500); flex-shrink: 0; }
.photon-card-header .title { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ratio-700); }
.photon-card-body { padding: var(--space-100) var(--space-300) var(--space-300); }
.photon-card-ratio { text-align: center; padding: var(--space-200) 0; font-size: 1.35rem; }
.photon-card-identities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ratio-200); }
.identity-cell { text-align: center; padding: var(--space-200) var(--space-100); }
.identity-cell + .identity-cell { border-left: 1px solid var(--ratio-200); }
.identity-cell .identity-formula { font-size: 1rem; margin-bottom: var(--space-50,4px); }
.identity-cell .identity-meaning { font-family: var(--font-ui); font-size: 0.78rem; color: var(--slate-500); margin-bottom: var(--space-50,4px); }
/* constant-profile header: v1 .identity-card -> v2 .constant-profile (LIVE on Electric Constant) */
.identity-card { display: flex; gap: var(--space-300); align-items: center; background: var(--slate-50); border: 1px solid var(--slate-200,#b3c5d3); border-radius: var(--radius-lg); padding: var(--space-300); margin: var(--space-400) 0; }
.identity-symbol { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 600; color: #fff; background: var(--slate-700); width: 64px; height: 64px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.identity-body { flex: 1; }
.identity-label { font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); margin-bottom: 4px; }
.identity-value { font-family: var(--font-mono); font-size: 1.15rem; color: var(--slate-900); line-height: 1.25; }
.identity-meta { font-family: var(--font-ui); font-size: 0.8rem; color: var(--slate-500); margin-top: 6px; }
/* result card: v1 -> v2 .result-compare + .verified-badge */
.result-card { display: flex; gap: var(--space-400); align-items: center; background: #f5faf5; border: 1.5px solid #b4d8b4; border-radius: var(--radius-lg); padding: var(--space-300); margin: var(--space-400) 0; font-family: var(--font-ui); box-shadow: var(--shadow-sm); }
.result-item { flex: 1; }
.result-item .label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #4a7a4a; margin-bottom: var(--space-50,4px); }
.result-item .value { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 500; }
.result-badge { background: #2a6a2a; color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem; padding: 6px 16px; border-radius: 20px; white-space: nowrap; }
/* content-badge variants dropped/renamed in v2 (worked-example badge -> .example) */
.content-badge.worked-example { background: #eef5ee; color: #2a5a2a; border: 1px solid #c4dcc4; }
.content-badge.worked-example .status-dot { background: #4a8a4a; }
.content-badge.concept { background: #eee8f5; color: #4a3670; border: 1px solid #c8b8e0; }
.content-badge.concept .status-dot { background: #6a50a0; }
/* scale-meter ticks (v2 renamed to .scale-meter-ends) */
.scale-meter-ticks { display: flex; justify-content: space-between; margin-top: var(--space-50,4px); font-size: 0.65rem; color: var(--slate-300); }
/* layout wrappers + showcase-only classes with no v2 equivalent */
.ds-wrap { max-width: 880px; margin: 0 auto; font-family: var(--font-body); color: var(--slate-900); line-height: 1.72; }
.page-container { max-width: 800px; margin: 0 auto; }
.related-links { font-family: var(--font-ui); font-size: 0.9rem; color: var(--slate-500); }
.related-links a { color: var(--accent); }
.ratio-inline { font-family: var(--font-mono); font-size: 0.9em; font-weight: 500; color: var(--ratio-700); background: var(--ratio-100); padding: 1px 6px; border-radius: var(--radius-sm); border-bottom: 2px solid var(--ratio-400,#d4a830); white-space: nowrap; }
.well-text { font-family: var(--font-ui); color: var(--slate-700); }
.ds-token-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.85rem; margin: var(--space-300) 0; }
.ds-token-table th { text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate-500); padding: var(--space-100) var(--space-200); border-bottom: 2px solid var(--slate-100); }
.ds-token-table td { padding: var(--space-100) var(--space-200); border-bottom: 1px solid var(--slate-100); vertical-align: middle; }
.ds-token-table .tn { font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent); }
.ds-token-table .tv { font-family: var(--font-mono); font-size: 0.8rem; }
.ds-swatch { width: 32px; height: 20px; border-radius: 3px; display: inline-block; vertical-align: middle; border: 1px solid rgba(0,0,0,0.08); }
.swatch-row { display: flex; gap: 6px; align-items: flex-end; margin-bottom: var(--space-200); flex-wrap: wrap; }
.swatch-cell { text-align: center; font-family: var(--font-mono); font-size: 0.62rem; }
.swatch-block { width: 56px; height: 40px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.06); margin-bottom: 4px; }
.swatch-label { color: var(--slate-500); font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
/* ============================================================
APPENDED 2026-06-14 — article-feed / index page pattern.
Source: illuminating-science-apply skill, reference/article-feed.css.
Powers the /articles/ journal-index (page 5564). Live page uses
, so reset link styling on the row.
============================================================ */
.feed-index a.feed-item { text-decoration: none; color: inherit; }
/* ================================================================
Illuminating Science — ARTICLE FEED / INDEX patterns
A pattern built specifically for the articles index: a feed of
links to physics-concept articles, each carrying a version of the
article's illustration as a thumbnail.
THE THUMBNAIL RULE — "specimen panel", never a cover photo.
The site's illustrations are transparent, centered objects (wooden
colour blocks) with wildly varying aspect ratios (square single
blocks → 10:1 equation ribbons) and 30–94% transparent pixels.
They cannot be cropped to a uniform tile. So every thumbnail frames
the illustration CONTAINED and centred, floating with margin on a
neutral slate-50 panel — like a specimen mounted on card. The panel
is always neutral; the block art carries the only saturated colour
(colour-carries-meaning discipline holds). A fixed panel aspect per
layout gives the feed a steady rhythm despite the chaotic sources.
================================================================ */
/* ----------------------------------------------------------------
SPECIMEN PANEL — the shared thumbnail frame. Size it from the
parent (set aspect-ratio / width on `.specimen` per layout).
---------------------------------------------------------------- */
.specimen {
position: relative;
background: var(--slate-50);
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.specimen img {
/* CONTAIN + float with margin. Never cover, never crop. */
max-width: 82%;
max-height: 76%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
/* Faint inner ring — the block sits like a mounted tile, not a sticker. */
.specimen::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(26, 35, 50, 0.035);
pointer-events: none;
}
/* ----------------------------------------------------------------
PHOTO PLATE — the thumbnail frame for PHOTOGRAPHIC article images.
The counterpart to the specimen panel. Where specimens are
transparent diagrams that must float CONTAINED on a neutral tile,
real photographs carry their own background (studio sweep,
chalkboard, panorama) — so they fill the frame edge-to-edge,
object-fit: COVER. Size the plate from the parent like .specimen.
Use object-position per image to protect the subject when cropped
(e.g. a left-biased crop keeps the cue ball of a Newton's cradle).
---------------------------------------------------------------- */
.plate {
position: relative;
background: var(--slate-100);
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
overflow: hidden;
}
.plate img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* CROP PRESETS — pick the side of the photo to protect when the frame
crops it. Set on the .plate (applies to its ![]()
). Covers the
common cases so most images need no hand-tuning:
.plate--left subject on the left (e.g. a Newton's-cradle cue ball)
.plate--right subject on the right
.plate--top subject up top (faces, headers)
.plate--bottom subject low
.plate--center default
HAND-TUNE ESCAPE HATCH: when a preset isn't enough, set an inline
object-position on the ![]()
for pixel control, e.g.
![]()
The inline value wins over the preset. */
.plate--left img { object-position: left center; }
.plate--right img { object-position: right center; }
.plate--top img { object-position: center top; }
.plate--bottom img { object-position: center bottom; }
.plate--center img { object-position: center; }
/* Same hairline inner ring so plates and specimens sit on one rhythm.
A touch deeper here to seat full-bleed photos against the page. */
.plate::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(26, 35, 50, 0.06);
pointer-events: none;
}
/* Titles are / elements — neutralise the global heading
defaults (uppercase h3, ruled h2) so feed titles read as sentence-
case serif. Size/line-height are set per layout below. */
.feed-item-title,
.feed-featured-title {
text-transform: none;
border: 0;
padding: 0;
}
/* ----------------------------------------------------------------
INDEX PAGE HEAD — dedicated articles index: a title + lede, then
straight into the feed (no marketing hero).
---------------------------------------------------------------- */
.feed-head { margin-bottom: 22px; }
.feed-head .feed-kicker {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate-500);
margin-bottom: 12px;
}
.feed-head h1 {
font-family: var(--font-body);
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--slate-900);
border: 0;
padding: 0;
margin: 0 0 14px;
}
.feed-head .lede {
font-family: var(--font-body);
font-size: 1.18rem;
line-height: 1.55;
color: var(--slate-500);
max-width: 600px;
margin: 0;
}
/* ----------------------------------------------------------------
CONCEPT FILTER CHIPS — pill row bounded by hairlines.
---------------------------------------------------------------- */
.feed-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px 0;
border-top: 1px solid var(--slate-100);
border-bottom: 1px solid var(--slate-100);
margin-bottom: 36px;
}
.feed-filters-label {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--slate-500);
margin-right: 6px;
}
.feed-chip {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
color: var(--slate-700);
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--slate-200);
background: #fff;
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.feed-chip:hover { border-color: var(--slate-500); color: var(--slate-900); }
.feed-chip.is-active {
background: var(--slate-900);
border-color: var(--slate-900);
color: #fff;
}
.feed-count {
margin-left: auto;
font-family: var(--font-ui);
font-size: 12px;
color: var(--slate-500);
}
/* ----------------------------------------------------------------
META + TAG primitives shared by every card.
---------------------------------------------------------------- */
.feed-topic {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
.feed-metaline {
font-family: var(--font-ui);
font-size: 12px;
color: var(--slate-500);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.feed-metaline .dot { color: var(--slate-200); }
.feed-readmark {
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
color: var(--accent);
}
/* ----------------------------------------------------------------
FEATURED LEAD — one large article above the feed. Shared by all
three layouts (the lead is layout-agnostic). Wide specimen left,
prose right; a coral "Featured" kicker; closed by a hairline.
---------------------------------------------------------------- */
.feed-featured {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 40px;
align-items: center;
padding-bottom: 40px;
margin-bottom: 8px;
border-bottom: 1px solid var(--slate-100);
cursor: pointer;
}
.feed-featured .specimen,
.feed-featured .plate { aspect-ratio: 16 / 10; }
.feed-featured .specimen img { max-width: 86%; max-height: 84%; }
.feed-featured-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.feed-featured-kicker::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.feed-featured-title {
font-family: var(--font-body);
font-size: 2rem;
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.01em;
color: var(--slate-900);
margin: 0 0 14px;
transition: color .12s;
}
.feed-featured:hover .feed-featured-title { color: var(--accent); }
.feed-featured-dek {
font-family: var(--font-body);
font-size: 1.12rem;
line-height: 1.55;
color: var(--slate-700);
margin: 0 0 18px;
}
.feed-featured-meta { margin-bottom: 0; }
/* ================================================================
LAYOUT A — EDITORIAL LIST
Stacked full-width rows; specimen tile left, prose right.
================================================================ */
.feed-list { display: flex; flex-direction: column; }
.feed-list .feed-item {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 30px;
align-items: center;
padding: 28px 0;
border-bottom: 1px solid var(--slate-100);
cursor: pointer;
}
.feed-list .feed-item:first-child { border-top: 1px solid var(--slate-100); }
.feed-list .specimen,
.feed-list .plate { aspect-ratio: 7 / 5; transition: box-shadow .15s; }
.feed-list .feed-item:hover .specimen,
.feed-list .feed-item:hover .plate { box-shadow: var(--shadow-md); }
.feed-list .feed-item-topic { margin-bottom: 9px; }
.feed-list .feed-item-title {
font-family: var(--font-body);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
color: var(--slate-900);
margin: 0 0 9px;
transition: color .12s;
}
.feed-list .feed-item:hover .feed-item-title { color: var(--accent); }
.feed-list .feed-item-dek {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--slate-700);
margin: 0 0 12px;
max-width: 60ch;
}
/* ================================================================
LAYOUT B — CARD GRID
Two across; specimen panel on top, prose below.
================================================================ */
.feed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.feed-grid .feed-item {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: box-shadow .15s, transform .15s;
}
.feed-grid .feed-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.feed-grid .specimen,
.feed-grid .plate {
aspect-ratio: 16 / 10;
border: 0;
border-bottom: 1px solid var(--slate-100);
border-radius: 0;
}
.feed-grid .feed-card-body { padding: 20px 24px 24px; }
.feed-grid .feed-item-topic { margin-bottom: 10px; display: block; }
.feed-grid .feed-item-title {
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 700;
line-height: 1.22;
color: var(--slate-900);
margin: 0 0 10px;
transition: color .12s;
}
.feed-grid .feed-item:hover .feed-item-title { color: var(--accent); }
.feed-grid .feed-item-dek {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.55;
color: var(--slate-700);
margin: 0 0 14px;
}
/* ================================================================
LAYOUT C — JOURNAL INDEX
Text-forward ruled contents list; coral running number, small
thumbnail mounted to the right — a contained specimen for diagrams
OR a cover-cropped photo plate for photographic images. The
scholarly table-of-contents.
================================================================ */
.feed-index { border-top: 2px solid var(--slate-700); }
.feed-index .feed-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 150px;
gap: 28px;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid var(--slate-100);
cursor: pointer;
}
.feed-index .feed-index-num {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
color: var(--accent);
align-self: start;
padding-top: 4px;
}
.feed-index .feed-item-topic { margin-bottom: 8px; }
.feed-index .feed-item-title {
font-family: var(--font-body);
font-size: 1.45rem;
font-weight: 700;
line-height: 1.2;
color: var(--slate-900);
margin: 0 0 7px;
transition: color .12s;
}
.feed-index .feed-item:hover .feed-item-title { color: var(--accent); }
.feed-index .feed-item-dek {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.5;
color: var(--slate-700);
margin: 0 0 10px;
max-width: 64ch;
}
.feed-index .specimen,
.feed-index .plate { aspect-ratio: 4 / 3; transition: box-shadow .15s; }
.feed-index .feed-item:hover .specimen,
.feed-index .feed-item:hover .plate { box-shadow: var(--shadow-md); }
/* ----------------------------------------------------------------
Hidden by filter.
---------------------------------------------------------------- */
.feed-item.is-hidden { display: none !important; }
/* ----------------------------------------------------------------
RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 760px) {
.feed-featured { grid-template-columns: 1fr; gap: 22px; }
.feed-grid { grid-template-columns: 1fr; }
.feed-list .feed-item { grid-template-columns: 132px minmax(0, 1fr); gap: 20px; }
.feed-index .feed-item { grid-template-columns: 28px minmax(0, 1fr) 104px; gap: 16px; }
.feed-head h1 { font-size: 2rem; }
}
@media (max-width: 460px) {
.feed-list .feed-item { grid-template-columns: 1fr; }
.feed-list .specimen, .feed-list .plate { aspect-ratio: 16 / 9; }
.feed-index .feed-item { grid-template-columns: 28px minmax(0, 1fr); }
.feed-index .specimen, .feed-index .plate { display: none; }
}