/* Shared chrome for the plain content pages (about / how-we-rank / privacy / 404). Deliberately separate from index.html's inline CSS: those styles are welded to the 3D stage and the scroll choreography, and none of that belongs on a text page that should paint instantly with no JS at all. Same tokens as the landing page - if the brand moves, move both. */ :root { --paper: #f6f1e7; --paper-deep: #ece4d3; --surface: #fdfaf3; --ink: #1c1a17; --ink-soft: #57524a; --hair: 28,26,23; /* hairlines — flips near-white on dark */ --accent: #d9482b; --accent-strong: #b93a20; /* the ember with more contrast against the page */ --accent-rgb: 217,72,43; --slab: #17150f; /* the footer */ --slab-ink: #f6f1e7; --slab-ink-soft: #cfc7b6; --slab-fine: #a89f8d; --slab-link: #ece4d3; --slab-hair: 246,241,231; /* slab edges are light in BOTH themes */ --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Same charcoal ramp as index.html and the two apps — see the comment on the landing page's token block for why these exact values. Set on by the inline snippet in each page's , wired by theme.js. */ :root[data-theme="dark"] { --paper: #0a0a0b; --paper-deep: #161618; --surface: #111113; --ink: #ededee; --ink-soft: #a1a1a6; --hair: 244,244,245; --accent: #d9482b; --accent-strong: #e05a3a; --accent-rgb: 224,90,58; --slab: #161618; --slab-ink: #ededee; --slab-ink-soft: #a1a1a6; --slab-fine: #85858c; --slab-link: #e4e4e7; --slab-hair: 244,244,245; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } a { color: var(--accent-strong); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .skiplink { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 0 0 8px 0; } .skiplink:focus { left: 0; } /* ---------- header ---------- */ .site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(20px, 5vw, 56px); border-bottom: 1px solid rgba(var(--hair),.09); } .site-head .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .site-head .brand svg { width: 23px; height: 23px; } .site-head .brand b { font-family: var(--serif); font-size: 19px; font-weight: 560; letter-spacing: .01em; } .site-head nav { display: flex; gap: 4px; flex-wrap: wrap; } .site-head nav a { text-decoration: none; color: var(--ink-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; border-radius: 7px; } .site-head nav a:hover { color: var(--ink); background: rgba(var(--hair),.05); } .site-head nav a[aria-current="page"] { color: var(--accent-strong); background: rgba(var(--accent-rgb),.08); } /* ---------- theme toggle ---------- Finished like a nav item so the header stays one cluster. Lives inside .site-head nav so it wraps with the links on narrow screens instead of being stranded on its own row. */ .themetoggle { width: 30px; height: 30px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(var(--hair),.13); border-radius: 7px; color: var(--ink-soft); cursor: pointer; transition: color .18s, background .18s, border-color .18s; } .themetoggle:hover { color: var(--ink); background: rgba(var(--hair),.05); border-color: rgba(var(--hair),.24); } .themetoggle svg { width: 15px; height: 15px; display: block; } /* show the icon for the theme you would switch TO */ .themetoggle .i-sun { display: none; } :root[data-theme="dark"] .themetoggle .i-moon { display: none; } :root[data-theme="dark"] .themetoggle .i-sun { display: block; } /* ---------- page body ---------- */ main { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vw, 80px) clamp(20px, 5vw, 24px) 90px; } .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; } .rule { width: 46px; height: 3px; background: var(--accent); border-radius: 2px; margin-bottom: 22px; } h1 { font-family: var(--serif); font-weight: 560; font-size: clamp(34px, 6vw, 50px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 18px; text-wrap: balance; } h2 { font-family: var(--serif); font-weight: 560; font-size: clamp(22px, 3.4vw, 27px); line-height: 1.22; letter-spacing: -.01em; margin: 48px 0 12px; text-wrap: balance; } h3 { font-size: 16px; font-weight: 700; margin: 30px 0 6px; letter-spacing: .002em; } .lede { font-size: clamp(18px, 2.3vw, 21px); line-height: 1.55; color: var(--ink-soft); margin: 0 0 6px; } p { margin: 0 0 16px; } ul, ol { margin: 0 0 16px; padding-left: 22px; } li { margin-bottom: 8px; } li::marker { color: var(--accent); } strong { font-weight: 650; } .updated { font-size: 13px; color: var(--ink-soft); padding-top: 14px; margin-top: 6px; border-top: 1px solid rgba(var(--hair),.1); } /* a boxed aside for the disclosures that people actually scan for */ .callout { background: var(--paper-deep); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 26px 0; } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .callout h3 { margin-top: 0; } table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; } th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(var(--hair),.1); vertical-align: top; } th { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; } .wrap-x { overflow-x: auto; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: rgba(var(--hair),.06); padding: 1px 5px; border-radius: 4px; } /* ---------- footer ---------- */ .site-foot { background: var(--slab); color: var(--slab-ink-soft); border-top: 1px solid rgba(var(--slab-hair),.07); padding: 44px clamp(20px, 5vw, 56px) 40px; font-size: 14px; line-height: 1.6; } .site-foot a { color: var(--slab-link); text-decoration: none; } .site-foot a:hover { text-decoration: underline; } .site-foot :focus-visible { outline-color: var(--slab-ink); } .site-foot .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; } .site-foot .brandline { font-family: var(--serif); color: var(--slab-ink); font-size: 17px; margin-bottom: 8px; } .site-foot nav { display: flex; flex-direction: column; gap: 6px; } .site-foot .fine { max-width: 340px; color: var(--slab-fine); font-size: 13px; } @media (max-width: 560px) { body { font-size: 16px; } /* Five links at desktop sizing wrapped to three rows here — 141px of chrome before a word of the page. Brand takes row one, the nav sits under it on two tight rows. */ .site-head { padding: 13px 5vw 9px; flex-wrap: wrap; gap: 6px; } .site-head .brand { flex: 1 0 100%; } .site-head nav { gap: 2px; margin-left: -7px; } .site-head nav a { padding: 5px 7px; font-size: 9.5px; letter-spacing: .07em; } }