:root { --bg: #F3F1EC; --bg-2: #EDEAE3; --bg-3: #E5E1D8; --fg: #171714; --fg-2: #2A2A26; --muted: #6E6B63; --rule: #1C1C18; --rule-soft: #D8D4C8; --rule-strong: #11110E; --paper: #F6F4EE; --ink: #1A1A17; --accent: #6B5D46; --accent-soft: #BFB096; --ok: #3B5A3B; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.64, 0, 0.78, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.2, 0.9, 0.2, 1.0); --dur-fast: 180ms; --dur: 380ms; --dur-slow: 720ms; --dur-xl: 1100ms; --sans: 'Geist', 'Geist VF', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --sans-vf: 'Geist VF', 'Geist', system-ui, sans-serif; --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', Georgia, serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --display-pixel: 'Geist Mono', 'Geist', 'Geist VF', system-ui, sans-serif; --s-meta: 10.5px; --s-meta-lh: 1.4; --letter-wide: 0.14em; --letter-xwide: 0.26em; --pad-outer-x: 22px; --pad-outer-y: 14px; --maxw: 1180px; --gutter: clamp(18px, 3.2vw, 42px); --row-gap: clamp(72px, 14vw, 180px); } @media (min-width: 768px) { :root { --pad-outer-x: 38px; --pad-outer-y: 20px; } } @media (min-width: 1024px) { :root { --pad-outer-x: clamp(56px, 7.2vw, 120px); } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: var(--sans); font-feature-settings: "ss01", "cv11"; /* Important: do NOT set overflow on both and at the same time. Setting overflow on implicitly transfers the viewport scroll container to itself. If also has overflow: hidden auto on top, Chromium (Windows) will route precision wheel/trackpad events through the wrong scrollbar and silently drop deltas. We keep overflow-x only on and leave body defaults alone. */ } html { overflow-x: hidden; overscroll-behavior-y: auto; overscroll-behavior-x: none; touch-action: manipulation; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100vh; font-size: 16px; line-height: 1.55; letter-spacing: 0.005em; background-color: var(--bg); background-image: linear-gradient(to right, rgba(28,28,24,0.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(28,28,24,0.014) 1px, transparent 1px); background-size: 48px 48px, 48px 48px; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(1200px 600px at 12% -10%, rgba(107,93,70,0.04), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(23,23,20,0.03), transparent 60%); z-index: 0; } main, nav, footer, .page-progress, .dtop-modal { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } input, textarea { font-family: inherit; color: inherit; background: transparent; border: 0; outline: none; -webkit-appearance: none; appearance: none; } ::selection { background: rgba(23, 23, 20, 0.12); color: var(--ink); } .serif { font-family: var(--serif); font-weight: 400; } .serif.italic, .italic { font-style: italic; } .mono { font-family: var(--mono); font-weight: 400; } .s-meta { font-size: var(--s-meta); line-height: var(--s-meta-lh); letter-spacing: var(--letter-wide); text-transform: uppercase; } .muted { color: var(--muted); } .italic { font-style: italic; } hr, .rule { border: 0; border-top: 1px solid var(--rule-soft); margin: 0; } img, svg { display: block; max-width: 100%; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* Focus ring */ :focus-visible { outline: 1px solid var(--rule-strong); outline-offset: 2px; }