/* ============================================================ TFP SPA — Base / Reset ============================================================ */ /* ---- Fonts ---- Dev stand-ins (Playfair Display + Inter) load via Google Fonts in . When licensed, drop the real woff2 into /assets/fonts and uncomment below — the tokens.css variables already list "PP Editorial New" / "Pragmatica" first, so these @font-face declarations are all that's needed to go live. No other change. @font-face { font-family: "PP Editorial New"; src: url("../fonts/PPEditorialNew-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pragmatica"; src: url("../fonts/Pragmatica-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; /* Lenis handles smooth scroll */ } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ul, ol { list-style: none; } /* ---- Headings ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: var(--lh-head); letter-spacing: var(--ls-tight); color: var(--ink); } h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-h1); } h3 { font-size: var(--fs-h2); } h4 { font-size: var(--fs-h3); } p { max-width: 62ch; } /* ---- Reusable type utilities ---- */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--ink-soft); font-weight: 400; } .caps { text-transform: uppercase; letter-spacing: var(--ls-caps); } .lede { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); } .serif { font-family: var(--font-display); font-weight: 300; } /* ---- Layout primitives ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); padding-inline: clamp(1rem, 2vw, 1.75rem); } .container--full { max-width: none; padding-inline: 0; } .section { padding-block: var(--section-y); } .grid { display: grid; gap: var(--sp-6); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } /* ---- Buttons / CTA (editorial, square, hairline) ---- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-sans); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-nav); padding: 1.05em 2.2em; border: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { background: var(--ink); color: var(--c-cream); } .btn--solid { background: var(--accent); border-color: var(--accent); color: var(--c-cream); } .btn--solid:hover { background: var(--c-black); border-color: var(--c-black); } /* link underline (Aesop-style understated) */ .link-underline { position: relative; text-transform: uppercase; letter-spacing: var(--ls-nav); font-size: var(--fs-sm); } .link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease-out); } .link-underline:hover::after { transform: scaleX(1); transform-origin: left; } /* ---- Accessibility ---- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }