/* ============================================================ RestartME, Base typography & elements Fonts are loaded via in the HTML head: Fraunces (display, optical sizing) + Inter (body) ============================================================ */ /* The warm-bone ground sits on ; stays transparent so the fixed ambient silk layer (.silk) glows through every open section. */ html { background: var(--bone); } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-body); color: var(--text); background: transparent; font-feature-settings: "kern", "liga", "calt"; transition: color var(--dur-base) var(--ease-out); } /* ---- Display / headings (Fraunces) ----------------------- */ h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 380; /* Fraunces light-medium reads luxe */ line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text); font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); } h4 { font-size: var(--text-xl); line-height: var(--leading-snug); } h5, h6 { font-family: var(--font-body); font-weight: 600; line-height: var(--leading-snug); letter-spacing: 0; } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } /* Editorial hero size + an italic "couture" variant */ .display-hero { font-size: var(--text-5xl); font-weight: 340; } .display-italic { font-style: italic; font-variation-settings: "SOFT" 40, "opsz" 144; } /* ---- Body copy ------------------------------------------- */ p { font-size: var(--text-base); color: var(--text-muted); max-width: 68ch; } p.lead { font-size: var(--text-lg); line-height: 1.6; color: var(--text); max-width: 60ch; } strong, b { font-weight: 600; color: var(--text); } em, i { font-style: italic; } a { color: var(--accent); transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast); } a:hover { color: var(--accent-bright); } small { font-size: var(--text-sm); } blockquote { font-family: var(--font-display); font-weight: 360; font-style: italic; font-size: var(--text-xl); line-height: 1.45; color: var(--text); } hr { border: none; border-top: 1px solid var(--divider); } /* ---- Reusable type utilities ----------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } /* The signature mark: a little leafy branch (echoes the leaf in the logo), used in place of the old gradient dash before every eyebrow label. */ .eyebrow::before { content: ""; width: 42px; height: 17px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath d='M2 9 H33' fill='none' stroke='%232E86C0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M31 9 C35 6 39.5 6 42.5 9 C39.5 12 35 12 31 9 Z' fill='%232E86C0'/%3E%3Cpath d='M13 9 C13 4.3 16 1.8 20.5 2.4 C20 7 16.8 9.6 13 9 Z' fill='%235AAEDD'/%3E%3Cpath d='M20 9 C20 13.7 23 16.2 27.5 15.6 C27 11 23.8 8.4 20 9 Z' fill='%232E86C0'/%3E%3Ccircle cx='8' cy='9' r='1.5' fill='%231E5F86'/%3E%3C/svg%3E") no-repeat center / contain; } /* Centered eyebrows: drop the branch and actually centre the label itself. The base .eyebrow is inline-flex (shrink-wrapped), so the centred variant must be forced to a full-width block flex — otherwise it stays glued to the left even with justify-content:center. width:100% + text-align belt-and-suspenders. */ .eyebrow--center { display: block; width: 100%; text-align: center; } .eyebrow--center::before { display: none; } .text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); } .text-accent { color: var(--accent); } .measure { max-width: var(--container-text); } .balance { text-wrap: balance; } .serif { font-family: var(--font-display); } /* Skip link (a11y) */ .skip-link { position: absolute; left: -999px; top: 0; z-index: var(--z-toast); background: var(--ink); color: var(--bone); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* Inline icon sizing */ .ico { display: inline-flex; } .ico svg { width: 1.25em; height: 1.25em; }