/* ========================================================================= Marginalia — structural styles. Colour comes entirely from theme tokens. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* overflow-x on alone does not stop the page scrolling sideways — the document element is the scroll container, so it needs the rule too. Without it the off-canvas hero artwork gave every page a horizontal scrollbar. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--sans); /* A soft shaft of light from top-centre, fading down, over a faint ambient wash. Both recolour per skin via tokens. The peak sits ON the top edge, not above it — pushed off-screen, the only part of the falloff you ever saw was its faintest tail, which read as no glow at all. Wide and slow so it stays ambient and never fights the text. */ background: radial-gradient(72% 58% at 50% 0%, var(--glow), transparent 72%), radial-gradient(120% 90% at 50% -10%, var(--bg-grain), transparent 60%), var(--bg); background-attachment: fixed; color: var(--ink); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; position: relative; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s ease, color .35s ease; overflow-x: clip; } /* Paper grain. Generated noise rather than a photograph: a photo would need one per skin, fight the text it sits under, and cost more bytes than the whole rest of the page. This is ~300 bytes of SVG, tiles seamlessly, and recolours itself because it only modulates whatever is beneath it. Sits above the body background and below every bit of content. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Respect a reader who has asked for less: the grain is decoration. */ @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } } h1, h2, h3 { font-family: var(--display-font); font-weight: var(--display-weight); line-height: 1.15; letter-spacing: -0.01em; } a { color: inherit; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 100; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* ---- Header -------------------------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1rem, 4vw, 2.4rem); max-width: 74rem; width: 100%; margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .brand-mark { display: grid; place-items: center; color: var(--accent); } .brand-mark svg { display: block; } /* fills/strokes set per-element via currentColor */ .brand-name { font-family: var(--display-font); font-weight: 640; font-size: 1.28rem; letter-spacing: -0.02em; color: var(--ink); } .site-nav { display: flex; align-items: center; gap: clamp(.8rem, 2.4vw, 1.6rem); } .site-nav > a { text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500; padding: .35rem 0; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; } .site-nav > a:hover { color: var(--ink); border-color: var(--accent); } /* ---- Theme switch ------------------------------------------------------- */ .theme-switch { display: flex; gap: .25rem; padding: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .theme-chip { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: .82rem; font-weight: 500; padding: .35rem .7rem; border-radius: 999px; transition: background .2s, color .2s; } .theme-chip:hover { color: var(--ink); } .theme-chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .theme-chip-label { display: none; } @media (min-width: 720px) { .theme-chip-label { display: inline; } } .swatch { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); } .swatch-manuscript { background: linear-gradient(135deg, #f6f1e7 45%, #b4562f 45%); } .swatch-nocturne { background: linear-gradient(135deg, #161a22 45%, #8b8cf0 45%); } .swatch-meadow { background: linear-gradient(135deg, #eef0e6 45%, #3f7d54 45%); } /* ---- Flash + footer ----------------------------------------------------- */ .flash { max-width: var(--maxw); margin: .5rem auto 0; padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .92rem; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--border); } main { flex: 1 0 auto; width: 100%; } .site-footer { max-width: var(--maxw); margin: 3rem auto 2rem; padding: 1.4rem clamp(1rem, 4vw, 2rem) 0; border-top: 1px solid var(--border-soft); color: var(--ink-faint); font-size: .82rem; text-align: center; } .site-footer .disclaimer { margin-bottom: .5rem; line-height: 1.5; } .site-footer .colophon { font-size: .76rem; opacity: .85; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; cursor: pointer; padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s, background .2s, opacity .2s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn-primary:hover { box-shadow: 0 6px 18px var(--ring); } .btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--border); } .btn-ghost:hover { color: var(--ink); border-color: var(--ink-faint); } /* ---- Static content pages (about / ethics) ------------------------------ */ .prose { max-width: var(--maxw); margin: 2.5rem auto; padding: 0 clamp(1rem, 4vw, 2rem); } .prose h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin-bottom: 1rem; } .prose h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; } .prose p { color: var(--ink-soft); margin-bottom: 1rem; font-size: 1.04rem; } .prose .lead { font-size: 1.2rem; color: var(--ink); font-family: var(--serif); line-height: 1.5; } .promise-list { list-style: none; display: grid; gap: .9rem; margin: 1.4rem 0; } .promise-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); } .promise-list strong { color: var(--ink); display: block; margin-bottom: .2rem; } .promise-list span { color: var(--ink-soft); font-size: .96rem; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto; } } /* ---- Phone header ------------------------------------------------------- This block lives at the end of the file on purpose. It was previously above `.site-header { display: flex }`, and since both rules have the same specificity the later one won — so the stacked layout never applied and the header stayed a cramped single row with the theme switch running off the right edge. Position is load-bearing here; don't move it back up. */ @media (max-width: 560px) { .site-header { display: grid; grid-template-columns: 1fr; justify-items: center; gap: .7rem; padding: .9rem 1rem .6rem; } .brand { gap: .5rem; } .brand-name { font-size: 1.2rem; white-space: nowrap; } .site-nav { width: 100%; justify-content: center; gap: clamp(.6rem, 4vw, 1.2rem); flex-wrap: wrap; } /* 44px of thumb, without making the text bigger. */ .site-nav > a { font-size: .9rem; padding: .6rem .2rem; } .theme-switch { flex-shrink: 0; } .theme-chip { padding: .55rem .6rem; } .swatch { width: 17px; height: 17px; } }