/* ============================================================ RichardRios.ai — stylesheet One system, two modes: [data-mode="browse"] dark, architectural — navigating [data-mode="read"] warm paper, editorial — reading Built with @layer so cascade order is explicit and stable. No build step required. Custom properties only; every component reads tokens, so both modes share one component layer. ============================================================ */ @layer reset, tokens, base, layout, components, article, utilities; /* ------------------------------------------------------------ RESET ------------------------------------------------------------ */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--bg); } } /* ------------------------------------------------------------ TOKENS ------------------------------------------------------------ */ @layer tokens { :root { /* Type families — see fonts loaded in . Generous fallbacks so the site stays legible even if the font CDN is unreachable. */ --font-serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-read: "Source Serif 4", "Iowan Old Style", Georgia, Cambria, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fluid type scale (major-third-ish, clamped for small screens) */ --step--1: clamp(0.83rem, 0.80rem + 0.12vw, 0.89rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem); --step-1: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); --step-2: clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem); --step-3: clamp(1.73rem, 1.53rem + 1.00vw, 2.37rem); --step-4: clamp(2.07rem, 1.75rem + 1.60vw, 3.20rem); --step-5: clamp(2.49rem, 1.98rem + 2.55vw, 4.30rem); /* Spacing scale */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: 5.5rem; --space-3xl: 8rem; /* Layout */ --wrap: 1200px; /* chrome / listings max width */ --measure: 40rem; /* reading column ~ 68 chars */ --gutter: clamp(1.25rem, 5vw, 3rem); --radius: 3px; --border-w: 1px; --transition: 220ms cubic-bezier(0.2, 0, 0, 1); color-scheme: dark; } /* ---- BROWSE (dark, architectural) — default & explicit ---- Token values matched to Rios Applied AI DESIGN_SPEC v2 (§2) so the two properties read as one studio. Firm token names noted in comments. */ :root, [data-mode="browse"] { --bg: #121416; /* RAAI --midnight (page canvas) */ --bg-sunken: #0d0f10; --surface: #17191b; /* RAAI --panel (card/panel surface) */ --surface-2: #1c2024; /* RAAI --graphite */ --border: #343a3f; /* RAAI --dark-steel */ --border-subtle: #232a2e; /* RAAI --editorial-hairline */ --ink: #f5f1eb; /* RAAI --soft-ivory (primary text on dark) */ --ink-muted: #c8c2b6; /* RAAI --editorial-body (long-form on dark) */ --ink-dim: #8a847a; /* RAAI --editorial-faint (captions/meta) */ --accent: #c77842; /* RAAI --copper */ --accent-hover: #d98f5d; /* lightened for link hover on dark */ --accent-quiet: rgba(199, 120, 66, 0.14); --steel: #627c91; /* RAAI --steel-blue (secondary accent) */ color-scheme: dark; } /* ---- READ (warm paper, editorial) ---- Light-mode values from RAAI v2 tokens (warm-bone canvas, AA-safe copper). The paper reading surface is this site's deliberate divergence: the firm reads long-form on dark; here, paper = reading. */ [data-mode="read"] { --bg: #f2eee5; /* RAAI --warm-bone (light-section bg) */ --bg-sunken: #e9e3d6; --surface: #f7f4ee; /* RAAI --light-surface */ --surface-2: #ece7dd; --border: #ddd5c4; /* RAAI --light-border */ --border-subtle: #e7e1d4; --ink: #17191b; /* RAAI --ink-black (text on light) */ --ink-muted: #55504a; /* between --ink-secondary and --ink-muted */ --ink-dim: #6b6357; /* RAAI --ink-muted (AA muted on warm bone) */ --accent: #8a4e22; /* RAAI --copper-aa (AA-safe on warm bone) */ --accent-hover: #713e1c; --accent-quiet: rgba(138, 78, 34, 0.10); --steel: #4f6779; /* RAAI --steel-blue-hover (AA-safe on light) */ color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } } /* ------------------------------------------------------------ BASE ------------------------------------------------------------ */ @layer base { body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; transition: background var(--transition), color var(--transition); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { text-wrap: pretty; } strong, b { font-weight: 600; color: var(--ink); } em, i { font-style: italic; } a { color: var(--accent); transition: color var(--transition); } a:hover { color: var(--accent-hover); } hr { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--space-xl) 0; } ::placeholder { color: var(--ink-dim); } .skip-link { position: absolute; left: var(--space-s); top: -3rem; background: var(--accent); color: var(--bg); padding: var(--space-2xs) var(--space-s); border-radius: var(--radius); font-family: var(--font-mono); font-size: var(--step--1); z-index: 100; transition: top var(--transition); } .skip-link:focus { top: var(--space-s); color: var(--bg); } } /* ------------------------------------------------------------ LAYOUT ------------------------------------------------------------ */ @layer layout { .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 52rem; } .wrap--read { max-width: 46rem; } .stack > * + * { margin-block-start: var(--flow, var(--space-s)); } .section { padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } .grid { display: grid; gap: var(--space-l); } @media (min-width: 52em) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--sidebar { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-2xl); } .grid--index { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-2xl); } } /* mono side-label used in editorial grids */ .railhead { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); padding-block-start: 0.55rem; } } /* ------------------------------------------------------------ COMPONENTS ------------------------------------------------------------ */ @layer components { /* ---- Kicker / mono eyebrow ---- */ .kicker { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); } .kicker::before { content: ""; width: 1.6em; height: 1px; background: var(--accent); } .kicker--plain::before { display: none; } /* ---- Masthead / header ---- */ .site-header { border-bottom: var(--border-w) solid var(--border); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(120%) blur(6px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); min-height: 5rem; padding-block: var(--space-s); } .brand { display: inline-flex; align-items: baseline; gap: 0.55rem; } .brand__mark { font-family: var(--font-mono); color: var(--accent); font-size: 1.5rem; font-weight: 500; line-height: 1; transform: translateY(0.06em); } .brand__name { font-family: var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.82rem; color: var(--ink); } .brand:hover .brand__name { color: var(--ink); } /* ---- Primary nav ---- */ .nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); } .nav__link { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding-block: 0.35rem; border-bottom: 1px solid transparent; } .nav__link:hover { color: var(--ink); } .nav__link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .nav-toggle { display: none; } @media (max-width: 46em) { .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: var(--border-w) solid var(--border); color: var(--ink); border-radius: var(--radius); padding: 0.5rem 0.8rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; } .nav { position: fixed; inset: 5rem 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--surface); border-block: var(--border-w) solid var(--border); padding: var(--space-2xs) var(--gutter) var(--space-s); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 40; } .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; } .nav__link { padding-block: var(--space-s); border-bottom: var(--border-w) solid var(--border-subtle); font-size: 0.9rem; } .nav__link[aria-current="page"] { border-bottom-color: var(--border-subtle); color: var(--accent); } } /* ---- Buttons / quiet links ---- */ .button { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; padding: 0.7rem 1.15rem; border: var(--border-w) solid var(--accent); color: var(--accent); border-radius: var(--radius); transition: background var(--transition), color var(--transition); } .button:hover { background: var(--accent-quiet); color: var(--accent-hover); } .button--solid { background: var(--accent); color: var(--bg); border-color: var(--accent); } .button--solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); } .textlink { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.2em; } .textlink:hover { text-decoration-color: var(--accent); } .arrowlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--accent); } .arrowlink svg { width: 0.9em; height: 0.9em; transition: transform var(--transition); } .arrowlink:hover svg { transform: translateX(3px); } /* ---- Hero (homepage) ---- */ .hero { padding-block: clamp(3.5rem, 8vw, 7rem) var(--space-2xl); } .hero__lede { font-size: var(--step-1); color: var(--ink-muted); max-width: 34rem; line-height: 1.55; } .hero h1 { max-width: 16ch; margin-block: var(--space-m) var(--space-l); } .hero .accent-word { font-style: italic; color: var(--accent); } /* ---- Entry list (Field Notes index / homepage feed) ---- */ .entries { border-top: var(--border-w) solid var(--border); } .entry { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-l); border-bottom: var(--border-w) solid var(--border); transition: background var(--transition); } .entry:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); } .entry__meta { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); letter-spacing: 0.04em; line-height: 1.5; } .entry__date { color: var(--steel); display: block; } .entry__kind { display: block; margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.12em; } .entry__title { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 500; line-height: 1.14; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .entry__title a { color: var(--ink); transition: color var(--transition); } .entry:hover .entry__title a { color: var(--accent); } .entry__dek { color: var(--ink-muted); max-width: 46rem; } .entry__tags { margin-top: var(--space-s); display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 40em) { .entry { grid-template-columns: 1fr; gap: var(--space-2xs); } } /* ---- Tag / topic chip ---- */ .tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); border: var(--border-w) solid var(--border); border-radius: 100px; padding: 0.25rem 0.7rem; transition: border-color var(--transition), color var(--transition); } a.tag:hover { color: var(--accent); border-color: var(--accent); } /* ---- Featured / lead entry ---- */ .lead-entry { padding-block: var(--space-xl); border-block: var(--border-w) solid var(--border); } .lead-entry .entry__title { font-size: var(--step-4); max-width: 18ch; } .lead-entry .entry__dek { font-size: var(--step-1); } /* ---- Callout card (e.g. Rios Applied AI relationship) ---- */ .plate { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.75rem); } .plate--seam { border-left: 2px solid var(--accent); } /* ---- Cross-site handoff: upstream note → canonical framework on RAAI ---- */ .handoff { margin-block: var(--space-xl); padding: clamp(1.4rem, 4vw, 2rem); border: var(--border-w) solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); } .handoff__label { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-bottom: 0.6rem; } .handoff__title { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .handoff__meta { color: var(--ink-dim); margin-bottom: var(--space-s); } .handoff__link { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.04em; color: var(--accent); } .handoff__link svg { width: 0.9em; height: 0.9em; transition: transform var(--transition); } .handoff__link:hover svg { transform: translateX(3px); } /* ---- Portrait (About) ---- */ .bio-intro { display: grid; gap: var(--space-l); align-items: start; } @media (min-width: 44em) { .bio-intro { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); } } .portrait { width: 100%; max-width: 15rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 18%; border: var(--border-w) solid var(--border); border-radius: var(--radius); background: var(--surface); } .portrait__caption { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ink-dim); margin-top: var(--space-2xs); } /* ---- Definition rows (Experience) ---- */ .roles { border-top: var(--border-w) solid var(--border); } .role { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-m); padding-block: var(--space-l); border-bottom: var(--border-w) solid var(--border); } .role__when { font-family: var(--font-mono); font-size: var(--step--1); color: var(--steel); letter-spacing: 0.04em; } .role__org { font-family: var(--font-serif); font-size: var(--step-2); font-weight: 500; color: var(--ink); margin-bottom: 0.15rem; } .role__title { color: var(--ink-muted); margin-bottom: var(--space-s); font-size: var(--step-0); } .role__body { color: var(--ink-muted); max-width: 44rem; } .role__body ul { margin-top: var(--space-s); padding-left: 1.1rem; display: grid; gap: 0.4rem; } .role__body li { padding-left: 0.2rem; } .role__body li::marker { color: var(--accent); } @media (max-width: 40em) { .role { grid-template-columns: 1fr; gap: var(--space-2xs); } } /* ---- Footer ---- */ .site-footer { border-top: var(--border-w) solid var(--border); margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-l); color: var(--ink-dim); font-size: var(--step--1); } .site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-l); align-items: flex-start; } .site-footer .brand__name { color: var(--ink-muted); } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-m); } .footer-nav a { color: var(--ink-muted); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .footer-nav a:hover { color: var(--accent); } .footer-fine { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; } /* ---- Mode seam: the moment of transition browse → read ---- */ .modeseam { display: flex; align-items: center; gap: var(--space-s); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); } .modeseam::before, .modeseam::after { content: ""; height: 1px; background: var(--border); flex: 1; } /* ---- Placeholder marker (representative content) ---- */ [data-placeholder] { position: relative; } .placeholder-note { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 100px; padding: 0.15rem 0.6rem; vertical-align: middle; } } /* ------------------------------------------------------------ ARTICLE — reading typography (used on paper "read" pages, but tokenized so it also renders correctly in browse mode) ------------------------------------------------------------ */ @layer article { .article-header { padding-block: clamp(3rem, 7vw, 5.5rem) var(--space-xl); border-bottom: var(--border-w) solid var(--border-subtle); } .article-header h1 { font-size: var(--step-4); max-width: 20ch; margin-block: var(--space-m) var(--space-m); } .article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); letter-spacing: 0.03em; } .article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-dim); } .prose { max-width: var(--measure); font-family: var(--font-read); font-size: var(--step-1); line-height: 1.72; color: var(--ink); font-feature-settings: "kern", "liga", "onum", "pnum"; } .prose > * + * { margin-top: 1.35em; } .prose .lede { font-size: var(--step-2); line-height: 1.5; color: var(--ink-muted); font-family: var(--font-read); } .prose h2 { font-family: var(--font-serif); font-size: var(--step-2); margin-top: 2.2em; margin-bottom: 0.1em; letter-spacing: -0.01em; } .prose h3 { font-family: var(--font-serif); font-size: var(--step-1); margin-top: 1.8em; } .prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 0.18em; } .prose a:hover { text-decoration-color: var(--accent); } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-top: 0.5em; padding-left: 0.25rem; } .prose li::marker { color: var(--accent); } .prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-m); font-style: italic; color: var(--ink-muted); } .prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border-subtle); padding: 0.1em 0.4em; border-radius: var(--radius); } .prose pre { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.45; background: var(--surface); color: var(--ink-muted); border: 1px solid var(--border-subtle); border-radius: var(--radius); padding: var(--space-m); overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; } .prose figure.diagram { margin-block: var(--space-l); max-width: none; } .prose table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--step-0); margin-block: var(--space-l); } .prose th, .prose td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } .prose thead th, .prose tbody th { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; color: var(--ink); background: var(--surface); } .prose td { color: var(--ink-muted); } .prose figure { margin-block: var(--space-l); } .prose figcaption { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); margin-top: var(--space-2xs); letter-spacing: 0.02em; } .prose .pull { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.32; color: var(--ink); margin-block: var(--space-l); padding-block: var(--space-2xs); max-width: 24ch; } /* small-caps mono aside inside prose — "showing the working" */ .prose .note { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-dim); line-height: 1.6; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding-block: var(--space-s); } .article-footer { max-width: var(--measure); margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: var(--border-w) solid var(--border); } .byline { display: flex; gap: var(--space-m); align-items: flex-start; color: var(--ink-muted); font-size: var(--step-0); font-family: var(--font-sans); } .byline__name { font-weight: 600; color: var(--ink); } .article-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-xl); } /* Reading progress rail — the quiet cue that you've entered reading mode. Purposeful, not decorative: it only appears on long-form pages. */ .reading-rail { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; background: transparent; z-index: 60; } .reading-rail span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 90ms linear; } /* Header backlink used in reading mode instead of full nav */ .backlink { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-muted); } .backlink svg { width: 0.95em; height: 0.95em; } .backlink:hover { color: var(--accent); } /* Diagram placeholder — clearly marks where real artwork goes */ .diagram-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); text-align: center; min-height: 14rem; padding: var(--space-l); border: 1px dashed var(--border); border-radius: var(--radius); background: repeating-linear-gradient(135deg, transparent 0 11px, var(--border-subtle) 11px 12px); color: var(--ink-dim); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; } } /* ------------------------------------------------------------ UTILITIES ------------------------------------------------------------ */ @layer utilities { .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .u-muted { color: var(--ink-muted); } .u-dim { color: var(--ink-dim); } .u-serif { font-family: var(--font-serif); } .u-mono { font-family: var(--font-mono); } .u-measure { max-width: var(--measure); } .u-center { text-align: center; } .flow-l > * + * { margin-top: var(--space-l); } .flow-m > * + * { margin-top: var(--space-m); } .flow-s > * + * { margin-top: var(--space-s); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } }