/* ========================================================================= Stele Network — colors & type tokens Reference: source/BRAND.md -------------------------------------------------------------------------- Pentelic marble cool palette. The dominant pairing is marble.cream + basalt.charcoal + lapis.blue accent. Sandstone ochre is reserved for ceremonial moments / milestone markers. Founding bronze is reserved for Founding-tier chrome. ========================================================================= */ /* ---------- Fonts ---------- */ /* Substitutions (Google Fonts) — flagged for review: • Display capitals → Cormorant Garamond (proxy for GT Sectra Display / a contemporary inscriptional capital. Trajan-flavoured, sober, holds small caps + tracking.) • Text serif → EB Garamond (named candidate in BRAND.md; ships on Google Fonts, supports academic/editorial setting.) • UI sans → Inter (named candidate in BRAND.md; permissible for chrome only.) Replace with brand-licensed faces when available: - Display: ATF Trajan Pro 3 (small caps + tracking only) or Optimo Genath / Hermes / GT Sectra Display / Newzald. - Text: Brill (preferred — academic / classical publishing), or Adobe Caslon Pro, Pradell. - Sans: Söhne or Untitled Sans. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap'); :root { /* ==================================================================== COLOR — base palette Cool Pentelic marble. Cream is warm-cast (faint warm undertone, never cold white) so the cool palette doesn't read funerary. ==================================================================== */ --marble-cream: #E8E1D2; /* dominant background */ --paper-warm: #F2EFE7; /* squeeze-paper white, editorial only */ --basalt-charcoal: #2A2622; /* type, high-contrast, mark execution */ --lapis-blue: #2C4A7B; /* primary accent — links, nav, CTAs */ --sandstone-ochre: #B4634A; /* ceremonial — milestone markers, tier */ --founding-bronze: #6F8268; /* Founding tier badge & chrome only */ /* Tonal extensions — derived, not invented. Use sparingly for hover states, dividers, and disabled chrome. Anchored in oklch off the base tokens above. */ --marble-cream-2: #DCD3BF; /* slightly deeper cream — card edge */ --marble-cream-3: #CFC4AC; /* divider on cream */ --basalt-700: #3F3933; /* secondary type / borders */ --basalt-500: #6A625A; /* tertiary type / metadata */ --basalt-300: #968C82; /* quiet metadata / placeholder */ --lapis-700: #1F365C; /* link hover / pressed */ --lapis-300: #6E89B5; /* link disabled / inactive */ --ochre-700: #8E4D39; /* ochre press / accent dark */ --bronze-700: #57674F; /* bronze press */ /* ==================================================================== COLOR — semantic ==================================================================== */ --bg: var(--marble-cream); --bg-elevated: var(--paper-warm); --bg-inverse: var(--basalt-charcoal); --fg: var(--basalt-charcoal); --fg-muted: var(--basalt-500); --fg-quiet: var(--basalt-300); --fg-on-inverse: var(--marble-cream); --border: var(--marble-cream-3); --border-strong: var(--basalt-700); --link: var(--lapis-blue); --link-hover: var(--lapis-700); --accent-ceremonial: var(--sandstone-ochre); --accent-founding: var(--founding-bronze); /* ==================================================================== TYPE — families ==================================================================== */ --font-display: 'Cormorant Garamond', 'GT Sectra Display', 'Trajan Pro 3', 'EB Garamond', Georgia, serif; --font-serif: 'EB Garamond', 'Brill', 'Adobe Caslon Pro', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', 'Söhne', 'Untitled Sans', system-ui, -apple-system, sans-serif; /* ==================================================================== TYPE — scale (px-anchored, restrained) The brand's gravity lives in the serif system; sans is subordinate. ==================================================================== */ --fs-display-1: 72px; /* hero, ceremonial moments only */ --fs-display-2: 56px; --fs-display-3: 40px; --fs-h1: 32px; --fs-h2: 24px; --fs-h3: 20px; --fs-body: 17px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-micro: 11px; /* operational/UI sans only */ --lh-display: 1.05; --lh-heading: 1.2; --lh-body: 1.55; --lh-tight: 1.3; /* Tracking — Roman lapidary practice: generous on display capitals. */ --tr-display: 0.08em; /* all-caps display headlines */ --tr-display-tight: 0.04em; --tr-smallcaps: 0.12em; /* small-caps display, looser still */ --tr-body: 0; --tr-ui: 0.01em; /* ==================================================================== SPACING — quiet, architectural rhythm ==================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ==================================================================== RADII — restrained. The brand silhouette is rectangular & low-pediment. Avoid pillowy modern radii. ==================================================================== */ --r-0: 0px; --r-1: 1px; /* hairline edge softening only */ --r-2: 2px; /* default for chrome */ --r-3: 4px; /* maximum for inputs / chips */ /* ==================================================================== SHADOWS — minimal. The brand reads as carved stone, not floating glass. Used for ceremonial elevation only. Default chrome is flat with rules. ==================================================================== */ --sh-rule: inset 0 -1px 0 var(--border); --sh-card: 0 1px 0 var(--marble-cream-3); --sh-elevated: 0 8px 24px -12px rgba(42, 38, 34, 0.18), 0 1px 0 var(--marble-cream-3); --sh-inset: inset 0 1px 2px rgba(42, 38, 34, 0.08); /* ==================================================================== MOTION — restrained. The brand is enduring; nothing bounces. ==================================================================== */ --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ==================================================================== LAYOUT — content widths follow editorial / archaeological journals ==================================================================== */ --col-narrow: 560px; /* essay column — Hesperia-grade reading width */ --col-text: 720px; --col-wide: 960px; --col-page: 1200px; } /* ========================================================================= Element defaults — so vanilla HTML in the design system inherits the brand's typographic register without further work. ========================================================================= */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); font-feature-settings: "liga" 1, "kern" 1, "onum" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .h1, h2, .h2, h3, .h3 { font-family: var(--font-display); color: var(--fg); font-weight: 500; margin: 0; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-display-tight); } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-display-tight); } h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-display-tight); } /* Display capitals — ceremonial / hero moments. Always all-caps + tracked. */ .display, .display-1, .display-2, .display-3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tr-display); line-height: var(--lh-display); color: var(--fg); } .display-1 { font-size: var(--fs-display-1); } .display-2 { font-size: var(--fs-display-2); } .display-3 { font-size: var(--fs-display-3); } /* Small-caps register — the catalog moment. */ .smallcaps { font-family: var(--font-display); font-feature-settings: "smcp" 1, "c2sc" 1; text-transform: lowercase; /* rendered as small caps via OT feature */ letter-spacing: var(--tr-smallcaps); font-weight: 500; } p { margin: 0 0 1em 0; text-wrap: pretty; } a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); } code, pre, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; } /* Operational register — UI sans. Subordinate; chrome only. */ .ui, .ui-sans, .meta, .label, .tabular { font-family: var(--font-sans); letter-spacing: var(--tr-ui); } .tabular { font-variant-numeric: tabular-nums; } /* The interpunct convention: STELE · NETWORK */ .interpunct::before { content: "·"; margin: 0 0.5em; color: var(--fg-muted); } /* Inscription rule — a 1px hairline used as section delimiter. */ .rule { border: 0; border-top: 1px solid var(--border-strong); margin: var(--sp-6) 0; } .rule-quiet { border-top-color: var(--border); }