/* ============================================================
Mati Sandbox — brand stylesheet
----------------------------------------------------------------
Loaded once, used everywhere on matisandbox.com.
Sections, in order:
1. @font-face — Sharp Earth (sans) + Season Serif (display)
2. Design tokens — colors, spacing, type scale (CSS variables)
3. Base typography — body, headings, paragraphs, links
4. Page layout — Tufte-style main column + right margin for sidenotes
5. Sidenotes — marginalia system (checkbox-toggle on narrow screens)
6. Article components — figures, math blocks, callouts, tool embeds
7. Page header — title + subtitle + brand mark
============================================================ */
/* ─── 1. Fonts ──────────────────────────────────────────────── */
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-Light.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-Italic.woff2") format("woff2");
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-Medium.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-Bold.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Sharp Earth";
src: url("fonts/SharpEarth-BoldItalic.woff2") format("woff2");
font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
font-family: "Season Serif";
src: url("fonts/SeasonSerif-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
/* Sharp Earth Devanagari — used for the byline. A companion cut to
Sharp Earth designed to harmonize with the Devanagari script;
distinct from the regular Sharp Earth in its Latin glyphs as well. */
@font-face {
font-family: "Sharp Earth Devanagari";
src: url("fonts/SharpEarthDevanagari-Light.woff2") format("woff2");
font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Sharp Earth Devanagari";
src: url("fonts/SharpEarthDevanagari-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
/* ─── 2. Design tokens ──────────────────────────────────────── */
:root {
/* ── Mati primary palette (Brand Guidelines, 2025-10-07, p.14) ──
Six grayscale stops on a warm/blush axis. The "Light Background"
slide (p.17) specifies which stops play which roles when the
page background is Mati 100. */
--mati-100: #f3e7e1; /* light-background paper */
--mati-200: #dacdc7; /* highlight boxes, hover states */
--mati-300: #a99894; /* line dividers, hairlines */
--mati-500: #907d7a; /* footers, captions (NOT for body) */
--mati-800: #3b3331; /* page titles, headings */
--mati-900: #1e1a18; /* body text */
/* Semantic tokens for the writeup, mapped to the palette per the
Light Background spec. --text was already Mati 900; --mati-dark
was Mati 900 and is now Mati 800 so headings sit one notch
lighter than body, as the brand guide prescribes. */
--bg: var(--mati-100);
--bg-card: var(--mati-100); /* embeds blend into page */
--bg-alt: var(--mati-200); /* blockquotes, code, pre */
--text: var(--mati-900); /* body */
--text-muted: #5f5e5a; /* sidenote / byline darker neutral */
--text-subtle: var(--mati-500); /* footer-style captions */
/* Heading color (h1–h4). Brand guide: Mati 800, not Mati 900. */
--mati-dark: var(--mati-800);
/* Brand accents */
--mati-blue: #579bda;
--mati-blue-dark: #2d6fa8;
--mati-teal: #0f6e56;
--mati-orange: #f57200;
--mati-orange-dark: #d85a30;
/* Muted accents from the asymptotic tool's palette */
--mati-m700: #574c49;
--mati-m500: var(--mati-500);
--mati-m300: #c6b2ae;
/* Hairlines and borders */
--border: rgba(0, 0, 0, 0.08);
--border-strong: rgba(0, 0, 0, 0.18);
/* Type scale (rems). Calibrated against the Illustrator mockup:
title ≈ 7–9× body cap-height; subtitle ≈ 3× body cap-height.
clamp() lets the display sizes shrink on narrow screens
while pinning a generous size on wide ones. */
--fs-display: clamp(3.75rem, 8.3vw, 6.9rem); /* 60–110px — "Mati sandbox"
(scaled +15% from the prior
3.25–6rem cap so the title
continues to fill the body
column after the column
itself was widened 15%) */
--fs-subtitle: clamp(2rem, 4vw, 3rem); /* 32–48px — article subtitle */
--fs-h2: 1.875rem; /* 30px — section heads */
--fs-h3: 1.375rem; /* 22px — subsection heads */
--fs-body: 1.0625rem; /* 17px — reading prose */
--fs-small: 0.9375rem; /* 15px — byline, captions */
--fs-sidenote: 0.875rem; /* 14px — marginalia */
--fs-caption: 0.9375rem; /* 15px — figure captions */
/* Spacing — used to keep section rhythm consistent */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* Layout — fixed right rail, flexing body
The body column is whatever the viewport gives it minus the rail;
the rail (sidenotes / references) stays a constant width so the
marginalia keep a consistent reading rhythm.
The vertical divider is positioned asymmetrically inside the
gap: 5rem of breathing room on the body side (so the reading
column isn't crowded by the line), and a tight 2rem on the
rail side (so the marginalia hug the divider).
--col-body caps the width of body text so the reading measure
never exceeds the "Mati sandbox" title block. On wider viewports
the extra space appears between the body's right edge and the
rail. */
--col-body: 38rem; /* ~608px reading measure */
--col-margin: 15rem; /* ~240px right rail */
--col-gap: 7rem; /* total whitespace between body and rail */
--col-gap-rail: 2rem; /* whitespace from divider to rail content */
--rail: calc(var(--col-margin) + var(--col-gap));
--page-padding: 1.75rem;
/* --page-max chosen so the body column and the title column come
out the same width, wide enough for "Mati sandbox" at full size
to render on a single line without wrapping. On viewports wider
than this the entire page block right-aligns (see .page rule)
and the extra space appears as whitespace on the LEFT.
Width math:
body = page-max − padding(both sides) − rail
40.8rem = 66.3rem − 3.5rem − 22rem ✓
The body / heading column is +15% wider than the prior 35.5rem
measure (per Jake, 2026-05-13). The rail width is unchanged —
only the reading column grew. The title font cap (--fs-display)
was scaled by the same 1.15 factor so "Mati sandbox" still
visually fills the column. Body font sizes are untouched. */
--page-max: 66.3rem; /* ~1061px page cap; right-aligns on wider viewports */
--radius: 8px;
--radius-lg: 12px;
}
/* ─── 3. Base typography ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: "Sharp Earth", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: var(--fs-body);
line-height: 1.6;
font-feature-settings: "kern" 1, "liga" 1;
/* Note: deliberately NOT using -webkit-font-smoothing: antialiased.
Default subpixel rendering on macOS gives slightly heavier strokes
that better match the Illustrator mockup. */
}
p { margin: 0 0 1em; }
p + p { margin-top: 0; }
/* Inline emphasis */
strong, b { font-weight: 700; }
em, i { font-style: italic; }
/* Inline links — body prose. Style mirrors the writeup PDF:
blue, lightly underlined, hover darkens. */
a {
color: var(--mati-blue);
text-decoration: underline;
text-decoration-thickness: 0.06em;
text-underline-offset: 0.15em;
text-decoration-color: rgba(87, 155, 218, 0.45);
transition: color 0.12s, text-decoration-color 0.12s;
}
a:hover {
color: var(--mati-blue-dark);
text-decoration-color: var(--mati-blue-dark);
}
/* Headings — Season Serif for the display tier (h1),
Sharp Earth for section / subsection (h2 / h3) */
h1 {
font-family: "Season Serif", Georgia, serif;
font-weight: 400;
font-size: var(--fs-display);
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--mati-dark);
margin: 0 0 var(--space-3);
white-space: nowrap; /* "Mati sandbox" must never split across lines,
at any viewport width. The clamp() on
--fs-display shrinks the title on narrow
screens; nowrap keeps it as one line. */
}
h2 {
font-family: "Sharp Earth", sans-serif;
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--mati-dark);
margin: var(--space-8) 0 var(--space-4);
}
/* First h2 in the body follows the front-matter rule directly,
so it doesn't need the generous top margin that separates one
section from another. Halves the gap. */
.article-body > h2:first-of-type {
margin-top: var(--space-5);
}
/* Section divider — a "Technical notes"-style title sandwiched
between two full-width hairlines. Season Serif, sized between
the page title and a section h2, no big top/bottom margin
because the rules above and below carry the visual separation.
The block sits in the body column (rail-side stays empty) so
it mirrors the page header's title-row rhythm. */
h2.section-divider {
font-family: "Season Serif", Georgia, serif;
font-weight: 400;
font-size: clamp(2rem, 4vw, 2.75rem); /* shrunk from
clamp(2.5rem, 5vw, 4rem) per
Jake — Season Serif retained,
just less imposing so it
doesn't compete with the
"Mati sandbox" display title */
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--mati-dark);
margin: var(--space-2) 0;
}
/* Long-title variant of the section divider — same Season-Serif
face and weight, sized down from the default 2.75rem cap so a
39-character heading like "What brought us here in the first
place" still fits on a single line inside the body column.
Bumped up from 1.75rem to 2rem per Jake — gives the heading more
weight while staying under the column width at full page-max
when paired with the tightened letter-spacing on .section-divider. */
h2.section-divider--long {
font-size: clamp(1.5rem, 3vw, 2rem);
white-space: nowrap;
}
/* Reduce the top margin on whatever section heading follows the
technical-notes divider so we don't double-stack space. */
h2.section-divider + hr.rule + h2,
h2.section-divider + hr.rule + h3 {
margin-top: var(--space-4);
}
h3 {
font-family: "Sharp Earth", sans-serif;
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.3;
color: var(--mati-dark);
margin: var(--space-6) 0 var(--space-3);
}
/* Horizontal rule. Spans the full page width including across the
rail (top-level child of .page or .article-header). Same hairline
weight as the vertical divider so they form crisp crosses at the
intersections. Tight vertical margin so the title block reads as
a single, compact header rather than three loose stripes. */
hr.rule {
border: 0;
border-top: 0.5px solid var(--border-strong);
margin: var(--space-2) 0;
}
/* Inside .article-body, the body has padding-right reserving the
rail. By default, every hr.rule extends past that padding into
the rail area — same termination as the header rules. The
`.article-body > *` reset earlier in this file pins max-width
to 100%, so we explicitly free it here to let the rule extend.
The .rule--bleed class is kept as a no-op alias for backward
compatibility with existing markup. */
.article-body > hr.rule,
.article-body > .rule--bleed {
max-width: none;
width: calc(100% + var(--rail));
margin-right: calc(-1 * var(--rail));
}
@media (max-width: 880px) {
.article-body > hr.rule,
.article-body > .rule--bleed {
width: 100%;
margin-right: 0;
}
}
/* "Section break" variant — used on the topmost rule of a
major-section divider (e.g. above "Technical notes"). Adds
generous breathing room above to separate the new section
from the article it follows, and a smaller gap below to
group it visually with the next two rules. */
hr.rule.section-break {
margin-top: var(--space-8);
margin-bottom: var(--space-6);
}
/* Numbered lists / bullet lists */
ol, ul { margin: 0 0 1em; padding-left: 1.25em; }
li { margin: 0.25em 0; }
ol.ordered-decimal { padding-left: 1.4em; }
/* ─── 4. Page layout ────────────────────────────────────────── */
/* Tufte-style with a flexing body column and a fixed-width right
rail. The rail (sidenotes, marginal references, small figures)
stays a constant width; the body column expands and contracts
with the viewport. A vertical hairline divides the two; the
header rule and footer rule span the full page width across both.
On narrow screens (≤ 880px) the rail collapses and sidenotes
become inline tap-to-expand blocks. */
.page {
max-width: var(--page-max);
/* Horizontally centered (margin: 0 auto). On viewports wider
than --page-max the entire page block sits in the middle of
the window, with equal whitespace on the left and right.
Title, body, rail, and divider keep their exact relative
positions; only the surrounding gutters split symmetrically
instead of accumulating all on one side. */
margin: 0 auto;
padding: var(--space-7) var(--page-padding) var(--space-8);
position: relative; /* anchor for the vertical divider */
}
/* The vertical divider — a single hairline sitting asymmetrically
in the gap (close to the rail, far from the body text). Starts
flush with the top of the brand mark and runs to the bottom of
the page. Pseudo-element so it lives in CSS, not HTML. */
.page::before {
content: "";
position: absolute;
top: calc(var(--space-7) + 0.5em);
bottom: 0;
right: calc(var(--page-padding) + var(--col-margin) + var(--col-gap-rail));
width: 0.5px;
background: var(--border-strong);
pointer-events: none;
}
/* Article body: padding-right reserves the rail's width. Any child
(paragraph, heading, figure, embedded tool) lives in the body
column and fills it. Sidenotes float right with a negative right
margin so they spill into the reserved rail area. */
.article-body {
padding-right: var(--rail);
position: relative; /* anchor for floated sidenotes */
}
.article-body > * {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* ─── 5. Marginalia: sidenotes & citations ──────────────────── */
/* Two flavors of right-margin note, both Tufte-style:
1. Sidenote — a discursive aside. Marker in the prose is a
small superscript number; note body sits in the right rail.
text
The aside.
2. Citation — a bibliographic reference. Marker in the prose
is a bracketed inline number [N]; full citation sits in
the right rail prefixed with [N]. This is the pattern Tufte
uses in 'The Visual Display of Quantitative Information.'
text
Author, Title…
Both share a single CSS counter so numbering runs through both
flavors in document order. Authors only write labels and notes
— never numbers; the counter does the bookkeeping. */
.article-body { counter-reset: sidenote-counter; }
/* In-prose marker — small superscript number, mati-blue. Used for
BOTH discursive sidenotes (.sidenote-number) and citations
(.citation-number). The two class names exist so the HTML stays
semantically clear about what kind of marginalia each marker
carries, even though visually they're identical. */
label.sidenote-number,
label.citation-number {
counter-increment: sidenote-counter;
display: inline-block;
vertical-align: super;
font-size: 0.7em;
cursor: pointer;
color: var(--mati-blue);
font-weight: 500;
margin-left: 0.05em;
}
label.sidenote-number::after,
label.citation-number::after {
content: counter(sidenote-counter);
}
/* The note itself — floats into the right rail on wide screens.
The negative right margin equals the rail width, so the note
spills past the body's padding-right into the reserved space. */
span.sidenote, span.marginnote {
float: right;
clear: right;
width: var(--col-margin);
margin-right: calc(-1 * var(--rail));
margin-top: 0.2em;
margin-bottom: 1em;
font-size: var(--fs-sidenote);
line-height: 1.45;
color: var(--text-muted);
vertical-align: baseline;
position: relative;
}
/* Rail-side note prefix — small superscript number matching the
in-text marker. The label has already incremented the counter,
so the span just reads the current value (no increment here).
Applies uniformly to sidenotes and citations. */
span.sidenote::before {
content: counter(sidenote-counter) " ";
font-weight: 500;
color: var(--mati-blue);
margin-right: 0.35em;
font-size: 0.85em;
vertical-align: super;
}
/* Unnumbered marginalia (a caption-style note in the rail) */
span.marginnote::before { content: none; }
/* The toggle checkbox is hidden on wide screens — sidenote is
always visible in the margin. On narrow screens the checkbox
toggles the sidenote's visibility inline. */
input.margin-toggle { display: none; }
/* Narrow screens: collapse the right rail entirely, hide the
vertical divider, and turn sidenotes into inline tap-to-expand
blocks. Reading column now fills the page width. */
@media (max-width: 880px) {
.page::before { display: none; }
.article-body { padding-right: 0; }
span.sidenote, span.marginnote {
display: none;
}
input.margin-toggle:checked + span.sidenote,
input.margin-toggle:checked + span.marginnote {
display: block;
float: left;
clear: both;
width: 95%;
margin: 1em 2.5%;
padding: 0.75em 1em;
background: var(--bg-alt);
border-left: 2px solid var(--mati-blue);
border-radius: 0 var(--radius) var(--radius) 0;
}
label.sidenote-number {
display: inline-block;
background: var(--bg-alt);
padding: 0 0.35em;
border-radius: 3px;
}
}
/* ─── 6. Article components ─────────────────────────────────── */
/* Figures — caption styled as marginalia would be */
figure {
margin: var(--space-6) 0;
}
figure img, figure svg, figure iframe, figure canvas {
display: block;
max-width: 100%;
height: auto;
}
figcaption {
font-size: var(--fs-caption);
color: var(--text-muted);
line-height: 1.45;
margin-top: var(--space-3);
font-style: italic;
}
figcaption strong, figcaption b { font-style: normal; }
/* Tool embed — hardcoded heights at two breakpoints. The auto-resize
trick (iframe.style.height = contentDocument.scrollHeight) is
brittle under window resize: a transient scrollHeight of 0
during reflow can collapse the iframe and leave the embedded
tool unrenderable. Fixed heights avoid that whole class of bug.
Wide layout: tool shows two plots side by side, ~520px tall total.
Narrow layout: tool stacks plots vertically, ~950px tall.
The 880px viewport breakpoint matches our rail-collapse point. */
.tool-embed {
display: block;
width: 100%;
height: 510px; /* bumped from 460 to clear scrollbar */
/* No border / background — the embedded tools render onto the
blush page bg directly so the figures don't read as white
"cards" floating on the page (Jake feedback, 2026-05-13). */
border: 0;
background: transparent;
overflow: hidden;
}
/* The asymptotic widget's internal breakpoint is at 560px, so the
iframe only needs to grow tall (single column) on really narrow
viewports. At medium widths the widget stays two-column. */
@media (max-width: 600px) {
.tool-embed { height: 800px; }
}
/* Compact two-column variant — plot and sidebar side by side
(used by the Bayesian posterior widget). Capped width so the
figure doesn't sprawl the full body column. */
.tool-embed--tall {
max-width: 44rem; /* ~704px */
margin: 0 auto;
height: 560px; /* bumped from 500 to clear scrollbar */
}
@media (max-width: 620px) {
.tool-embed--tall { height: 820px; }
}
/* "Link to the tool" callout — used where the writeup says
"Link: Enhanced Rock Weathering false-positive explorer tool" */
.tool-link {
display: inline-block;
font-weight: 700;
font-size: 1rem;
color: var(--mati-dark);
text-decoration: none;
padding: 0.5em 0;
border-bottom: 1.5px solid var(--mati-blue);
}
.tool-link:hover {
color: var(--mati-blue-dark);
border-bottom-color: var(--mati-blue-dark);
}
/* Display math — HTML + Unicode, set in the same Sharp Earth body
font so equations match the inline math (e.g. r, ΔI)
used throughout the prose and the widget labels. Variables get
(italic); subscripts and superscripts use the native
and ; Greek letters are Unicode (τ, Δ); fractions use the
.frac helper below. */
.math-display {
margin: var(--space-5) 0;
text-align: center;
font-size: 1.0625em;
font-feature-settings: "kern" 1;
}
.math-display i {
padding: 0 0.04em; /* small breathing room around italic letters */
}
.math-display sub, .math-display sup {
font-style: normal; /* subscripts/superscripts upright, not italic */
}
/* Inline fraction with a horizontal bar. Uses inline-block + middle
alignment so the bar sits at the vertical centre of the
surrounding equation rather than dropping below the baseline. */
.frac {
display: inline-block;
vertical-align: middle;
text-align: center;
font-size: 0.9em;
margin: 0 0.2em;
line-height: 1.15;
}
.frac .num,
.frac .den {
display: block;
padding: 0 0.55em;
}
.frac .num {
padding-bottom: 0.12em;
border-bottom: 0.6px solid currentColor;
}
.frac .den {
padding-top: 0.18em;
}
/* Boxed equation — single hairline border around the canonical
result, matching the look of \boxed{} in a textbook. */
.eq-box {
display: inline-block;
padding: 0.5em 1.1em;
border: 0.5px solid currentColor;
border-radius: 2px;
}
/* Publication date stamp at the top of the article. Small, muted,
italic — sits as a caption-tier element above the lead paragraph
so it doesn't compete with the title block or the body prose. */
.article-date {
font-size: var(--fs-small);
font-style: italic;
color: var(--text-muted);
margin: 0 0 var(--space-5);
}
/* Half-heading lead — a sentence that opens a section and reads
between a paragraph and a true subhead. Sharp Earth Medium,
slightly larger than body, a touch of breathing room. */
.section-lead {
font-family: "Sharp Earth", sans-serif;
font-weight: 500;
font-size: 1.2em;
line-height: 1.35;
color: var(--mati-dark);
margin-top: var(--space-2);
margin-bottom: var(--space-4);
}
/* Code blocks (rare here but ready if needed) */
code, pre {
font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
}
pre {
background: var(--bg-alt);
border-radius: var(--radius);
padding: var(--space-4);
overflow-x: auto;
}
code { color: var(--mati-teal); }
pre code { color: inherit; }
/* ─── 7. Page header ────────────────────────────────────────── */
/* Header layout. The page header has three rows separated by rules:
title-row (h1 | brand mark)
── rule ──
subtitle-row (subtitle | byline)
── rule ──
Both rows use the same body+rail grid as the article body, so
the right-rail column lines up consistently and the vertical
divider passes cleanly between them at every row. */
.article-header {
/* Roomier bottom margin since the tool-link callout (and the rule
that followed it) used to sit here; body prose now picks up
directly after the second header rule. */
margin-bottom: var(--space-6);
}
/* Sticky title row at every viewport size. Only the title row
(logo + "Mati sandbox") pins to the top of the viewport as the
reader scrolls; the first horizontal rule beneath it acts as the
visual boundary — the rule, subtitle row, byline, and body prose
all scroll normally underneath. Opaque background (var(--bg) =
Mati 100) prevents body content from bleeding through. */
.title-row {
position: sticky;
top: 0;
background: var(--bg);
z-index: 10;
padding-top: var(--space-3);
/* Negative margin compensates for the added top padding so the
pre-scroll layout matches what we had before; the padding only
"shows" once the row sticks to the viewport's top edge. */
margin-top: calc(-1 * var(--space-3));
}
.title-row,
.subtitle-row {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--col-margin);
column-gap: var(--col-gap);
}
.title-row { align-items: start; }
.subtitle-row { align-items: stretch; } /* byline cell fills subtitle height */
/* The anchor wrapping the logo sits in the rail column of the
title grid. justify-self pushes it to the right edge so the
logo is flush with the right end of the horizontal rule. */
.title-row > a {
justify-self: end;
line-height: 0; /* removes anchor's inline gap below the img */
}
.title-row .brand-mark {
display: block;
width: 120px;
height: auto;
margin-top: 0.5em;
}
/* The title-row contains both the full lockup (default) and a
symbol-only mark used at phone widths. The symbol is hidden
above 600px; the 600px media query below flips the visibility. */
.title-row .brand-mark--symbol {
display: none;
}
.article-title {
/* h1 inherits Season-Serif / size from base styles */
margin: 0;
}
.article-subtitle {
font-family: "Sharp Earth", sans-serif;
font-weight: 300; /* Light — matches the Illustrator */
font-size: var(--fs-subtitle);
line-height: 1.12;
color: var(--text);
margin: 0;
padding: var(--space-2) 0;
position: relative; /* anchor for .subtitle-link */
}
.article-byline {
/* Flex column with space-between so the names sit at the top of
the cell and the emails settle at the bottom — both right-
aligned with the subtitle column's right edge. */
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: "Sharp Earth Devanagari", "Sharp Earth", sans-serif;
font-weight: 400;
font-size: 0.75rem; /* ~12px ≈ 9pt — matches Illustrator */
line-height: 1.45;
color: var(--text);
text-align: right;
margin: 0;
padding: var(--space-2) 0 var(--space-1);
}
.article-byline .byline-names {
display: block;
}
/* Author email block — appears as the second flex item inside
.article-byline, pushed to the bottom of the cell by
justify-content: space-between. */
.article-emails {
display: block;
font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 0.65rem;
line-height: 1.6;
letter-spacing: -0.02em;
color: var(--mati-blue);
}
.article-emails a {
color: inherit;
text-decoration: none;
}
.article-emails a:hover {
color: var(--mati-blue-dark);
text-decoration: underline;
}
/* "[link]" badge — floats out of the subtitle's text flow and sits
in the empty space at the right of the column, vertically
balanced between the two subtitle lines. Position-absolute
inside the .article-subtitle box (which is relative-positioned). */
.subtitle-link {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 0.95rem; /* ~15px — body size */
font-weight: 500;
color: var(--mati-blue);
text-decoration: none;
letter-spacing: -0.02em;
white-space: nowrap;
}
.subtitle-link:hover { color: var(--mati-blue-dark); }
/* Same monospace-blue typography as .subtitle-link, but for use
inline anywhere in the body. No absolute positioning. */
.body-link {
font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-size: 0.95rem;
font-weight: 500;
color: var(--mati-blue);
text-decoration: none;
letter-spacing: -0.02em;
white-space: nowrap;
}
.body-link:hover { color: var(--mati-blue-dark); }
/* Standalone tool-link paragraph — wraps a .body-link with
generous vertical breathing room so it reads as a distinct
call-to-action separated from the surrounding prose. */
.tool-link-row {
margin: var(--space-5) 0;
}
/* Preamble-end double rule — two horizontal hairlines used as a
visual full stop between the front matter and the first real
section. Spacing mirrors the Technical-notes section break
(top rule pushed off preceding prose; gap between rules wide
enough to read as a deliberate pair; bottom rule lifts the
next h2). */
hr.rule.preamble-end-top {
margin-top: var(--space-8);
margin-bottom: var(--space-6);
}
hr.rule.preamble-end-bottom {
margin-top: var(--space-2);
margin-bottom: var(--space-7);
}
@media (max-width: 880px) {
/* Keep the title row as a two-column grid so the brand mark
stays top-aligned with the title even on narrow viewports.
Only the subtitle row collapses; the byline drops below
the subtitle and goes left-aligned. */
.title-row {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-4);
align-items: start;
}
.title-row .brand-mark {
width: 70px;
margin-top: 0;
}
.subtitle-row {
grid-template-columns: 1fr;
}
.article-byline {
text-align: left;
padding-top: var(--space-2);
}
}
@media (max-width: 600px) {
/* Phone-sized viewports: swap the full Mati lockup for the
symbol-only mark (mati-symbol-blue.svg), sized small and
top-justified next to the title. The full lockup is too wide
to share a row with the title at phone widths; the symbol
alone keeps the brand identity without competing for space. */
.title-row {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--space-3);
align-items: start;
}
.title-row .brand-mark--full {
display: none;
}
.title-row .brand-mark--symbol {
display: block;
width: 32px;
margin-top: 0.35em; /* nudges the icon down to roughly
cap-height of the Season-Serif title */
}
.article-title {
/* Lower floor + viewport-tracking so "Mati sandbox" fits at
iPhone-narrow widths (~320px) without horizontal overflow.
Wide viewports still use the original clamp from the base
h1 rule. */
font-size: clamp(2.5rem, 13vw, 3.75rem);
}
}
/* ─── small print ───────────────────────────────────────────── */
.footnote-divider {
border: 0;
border-top: 0.5px solid var(--border);
margin: var(--space-8) 0 var(--space-5);
}
.site-footer {
font-size: var(--fs-small);
color: var(--text-subtle);
padding-top: var(--space-5);
}