/* NorthBurnGoods — the brand's own palette and type, carried over from the site it replaces. Eyedropped 18 Sep 2026: ground #0E0C0A, burnt amber #C8853A, warm paper #F5EFE0. Playfair Display for anything that wants to look engraved, Lora for everything you read. */ :root { --ink: #0E0C0A; /* the ground the whole site sits on */ --ink-2: #15120F; /* raised surface */ --ink-3: #1E1A15; /* card */ --amber: #C8853A; /* the burn colour: CTAs, rules, accents */ --amber-2: #E0A45C; /* hover, and text on dark where amber is too dim */ --paper: #F5EFE0; /* warm off-white */ --paper-2: #E8DDD0; /* body copy on dark */ --muted: #9C9186; --line: rgba(245, 239, 224, .14); --line-2: rgba(245, 239, 224, .08); --ok: #7FA45C; --warn: #C9553D; --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif; --f-body: Lora, Georgia, serif; --f-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --t-xs: .78rem; --t-sm: .88rem; --t-base: 1rem; --t-lg: 1.14rem; --t-xl: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); --t-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); --t-3xl: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem); --wrap: 1200px; --r: 14px; --r-sm: 9px; --r-lg: 22px; --pad: clamp(1.1rem, 4vw, 2rem); --sec: clamp(3.4rem, 8vw, 6.5rem); --shadow: 0 18px 50px rgba(0, 0, 0, .45); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* The header is sticky, so anything an anchor or a focus jump scrolls to has to stop short of it, or the thing you navigated to lands underneath it. */ :target, h2[id], .field, .wood, [id] { scroll-margin-top: 110px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } html { overflow-x: clip; } body { margin: 0; background: var(--ink); color: var(--paper-2); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--amber-2); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--paper); } ::selection { background: var(--amber); color: var(--ink); } :focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; border-radius: 3px; } h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.1; color: var(--paper); margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } p { margin: 0 0 1.1em; } .wrap { width: min(var(--wrap), 100% - var(--pad) * 2); margin-inline: auto; } .section { padding-block: var(--sec); } .section--paper { background: var(--paper); color: #37302a; } .section--paper h1, .section--paper h2, .section--paper h3 { color: var(--ink); } .section--raised { background: var(--ink-2); } .eyebrow { display: inline-block; font-family: var(--f-ui); font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin-bottom: .9rem; font-weight: 600; } .section--paper .eyebrow { color: #A9682A; } .lede { font-size: var(--t-lg); color: var(--muted); max-width: 60ch; } .section--paper .lede { color: #6B6057; } .muted { color: var(--muted); } .small { font-size: var(--t-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .95rem 1.7rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; /* An is transparent by default and a