:root { --ink: #14110f; --oxide: #c42b18; --kraft: #c4a36a; --paper: #f3e6cf; --paper-2: #e8d4b0; --cream: #fff6e6; --pad: clamp(1rem, 4.5vw, 1.6rem); --max: 34rem; --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --display: "Oswald", "Arial Narrow", sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1.125rem; line-height: 1.45; } .sale { position: sticky; top: 0; z-index: 50; margin: 0; padding: .75rem 1rem; background: #111; color: #fff; text-align: center; font-weight: 800; font-size: clamp(1.5rem, 5.2vw, 2.25rem); } .comp-ad { position: fixed; width: 11rem; background: rgba(255, 255, 255, 0.85); border: 1.5px solid #d4d4ce; border-radius: 10px; padding: 0.65rem 0.75rem; } .comp-ad-left { top: 12rem; left: 1rem; } .comp-ad-right { top: 12rem; right: 1rem; } .wrap { width: min(34rem, calc(100% - 2rem)); margin-inline: auto; } .btn { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .85rem 1.1rem; background: var(--oxide); color: #fff6e8; text-decoration: none; font-family: var(--display); font-weight: 700; width: 100%; }