/* ========================================================================== EDHN — "The Meridian Index" design tokens (LOCKED 2026-07-02) Dark warm-charcoal + old gold, a cartographer's coordinate/register system. Vanilla CSS custom properties. Build target: AWS Amplify, no framework. Fonts are SELF-HOSTED as woff2 (see @font-face) — do NOT use the Google Fonts CDN in production (render-blocking; breaks the LCP budget). ========================================================================== */ :root { /* ---- Color (contrast verified on --bg #14140F) ------------------------ */ --bg: #14140F; /* warm charcoal base. NOT #0a0c09 */ --surface: #1C1C15; /* section elevation 1 */ --surface-alt: #24241B; /* section elevation 2 / matte insets */ --ink: #EDE7D6; /* primary text — ~13.5:1 on --bg (AAA) */ --ink-muted: #A39C86; /* secondary text — ~6.2:1 on --bg (AA) */ --accent: #C79433; /* OLD GOLD (locked). ~6.1:1 on --bg. NOT #F4DD96 */ --accent-ink: #14140F; /* text on solid --accent fills (the CTA) */ --accent-2: #4F6B57; /* foothill verdigris — sparing secondary */ --hairline: #3A3A2C; /* rules, borders, dividers */ --hairline-accent: #C79433; /* the drawn "Meridian rule" */ /* ---- Type families (self-hosted) -------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* headings, stat numerals */ --font-body: 'Newsreader', Georgia, serif; /* reading text */ --font-label: 'Saira Semi Condensed', 'Arial Narrow', sans-serif; /* eyebrows, coordinates, folios, labels */ /* ---- Fluid type scale (1.25 major third) ------------------------------ */ --fs-h1: clamp(2.6rem, 5.2vw, 4.6rem); --fs-h2: clamp(1.9rem, 3vw, 2.9rem); --fs-h3: clamp(1.35rem, 2vw, 1.7rem); --fs-lead: clamp(1.15rem, 1.6vw, 1.375rem); --fs-body: 1.1875rem; /* 19px */ --fs-small: 1rem; /* nothing below 16px except the legal footer address */ --fs-label: 0.72rem; /* eyebrows / coordinates / folio — uppercase tracked */ --lh-tight: 1.02; --lh-head: 1.1; --lh-body: 1.62; --tracking-tight: -0.015em; --tracking-label: 0.18em; --measure: 62ch; /* ---- Spacing (4px base) ----------------------------------------------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; --gutter: clamp(1.25rem, 4vw, 4rem); /* page side padding, fluid */ --maxw: 1280px; /* ---- Motif (the Meridian signature) ----------------------------------- */ --rule-w: 0.75px; /* the coordinate hairline weight */ --tick: 8px; /* surveyor's right-angle tick */ --grain-opacity: 0.04; /* fixed film-grain ceiling */ --grid-opacity: 0.03; /* latitude grid behind dark sections */ --grid-step: 88px; /* ---- Motion (transform/opacity only; gate on prefers-reduced-motion) --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-reveal: 640ms; --dur-rule: 900ms; --dur-count: 1100ms; --stagger: 90ms; --radius: 0; /* the system uses square corners + ticks, not radii */ } /* ---- Fonts: self-hosted + subsetted in /css/fonts.css (generated) -------- Link in BEFORE this file. Preload the two latin LCP faces: Fraunces-400_600-normal-latin.woff2 and Newsreader-400_500-normal-latin.woff2 (rel=preload as=font type=font/woff2 crossorigin). 18 woff2 total in /assets/fonts/. */ /* ---- Base -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } /* fixed film-grain, zero image requests */ body::before { content:""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--lh-head); margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h1 em, h2 em { font-style: italic; font-weight: 500; } /* one word italic for warmth */ h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } a { color: var(--ink); text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .eyebrow, .label { font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: var(--fs-label); color: var(--accent); } .stat-num { font-family: var(--font-display); font-weight: 500; font-feature-settings: "tnum" 1, "lnum" 1; } /* tabular for count-up, no CLS */ /* ---- Components (starter contracts; extend in the component spec) ------- */ /* Primary CTA — the single place --accent goes solid-fill */ .btn { display: inline-block; background: var(--accent); color: var(--accent-ink); font-family: var(--font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; padding: 14px 26px; border: 0; cursor: pointer; } .btn:hover { filter: brightness(1.06); } .btn--ghost { background: transparent; color: var(--ink); border: var(--rule-w) solid var(--hairline); } /* The Meridian rule: a coordinate hairline with a right-angle surveyor's tick */ .meridian { position: relative; border-top: var(--rule-w) solid var(--hairline-accent); padding-top: var(--sp-2); display: flex; justify-content: space-between; align-items: flex-start; } .meridian .lbl { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 11.5px; color: var(--accent); } /* The Index Field: proof as an open drafted register (not boxed cards) */ .ledger { display: grid; gap: var(--sp-6) var(--sp-12); } .ledger .stat .label { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-muted); font-size: 11px; } .ledger .stat .label::before { content:""; width: 7px; height: var(--rule-w); background: var(--accent); } .ledger .stat .n { font-family: var(--font-display); font-weight: 500; font-feature-settings:"tnum" 1,"lnum" 1; font-size: clamp(2.2rem,4vw,3.2rem); margin-top: var(--sp-2); } /* section rhythm + hairline dividers */ section { padding-block: var(--sp-24); border-bottom: var(--rule-w) solid var(--hairline); } /* ---- Motion gating (accessibility) ------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- Journal = lighter editorial mode (opt-in on /journal/) ------------- Same fonts + motif, airier and a touch lighter for long-form reading. */ .mode-journal { --measure: 68ch; --fs-body: 1.25rem; }