@layer reset, base, legacy-content; @layer reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } } @layer base { html { scroll-behavior: smooth; scroll-padding-top: var(--header-height-sticky); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; position: relative; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } /* A barely-there paper-grain texture — reinforces the "ink & paper" concept instead of a flat digital fill. Fixed + behind everything, so it doesn't scroll or interfere with content contrast. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site { position: relative; z-index: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 var(--space-s); font-weight: 600; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); color: var(--color-accent); padding-bottom: var(--space-2xs); border-bottom: 3px solid var(--color-accent-soft); display: inline-block; } h3 { font-size: var(--step-3); color: var(--color-accent-2); } h4 { font-size: var(--step-2); } h5 { font-size: var(--step-1); } h6 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.06em; } p { margin: 0 0 var(--space-s); } a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } ::selection { background: var(--color-accent); color: var(--surface-page); } } /* * Defensive styling for the site's pre-existing content: a decade-old mix * of clean Gutenberg blocks and legacy inline-styled HTML. Inline style="" * attributes always win the cascade over anything here (unavoidable, and * mostly harmless for things like text-align) — these rules specifically * target the patterns that actively break layout: hard-coded pixel image * dimensions and stray legacy floats. */ @layer legacy-content { .entry-content { max-width: var(--prose-max); margin-inline: auto; } .entry-content > * { max-width: 100%; } .entry-content img { max-width: 100% !important; height: auto !important; } /* * !important throughout this block: WordPress's own generated * global-styles-inline-css (derived from theme.json) ships competing * alignment rules — including `display: table` on .aligncenter and * its own !important-flagged margins — at equal CSS specificity to a * plain `.entry-content .alignleft` selector, and it's injected later * in than a theme's own stylesheets, so it would otherwise win. */ .entry-content img, .entry-content figure { margin-bottom: var(--space-m) !important; } /* clear: both means each new floated image always starts on its own line below whatever came before — without it, a tall image (like a portrait headshot) that outlasts its own short caption/quote keeps floating into the next block and collides with an oppositely floated image there (e.g. repeated testimonial photos). */ .entry-content .alignleft { clear: both !important; float: left !important; margin: 0 var(--space-m) var(--space-s) 0 !important; max-width: min(45%, 22rem); } /* * clear: both on the image alone wasn't enough: it moves the *image* * below the previous float, but the accompanying blockquote is a * separate sibling that isn't floated — it still lays out wherever * normal flow puts it, wrapping around whatever float from the * PREVIOUS pair is still active there, leaving quote text narrow and * visually detached from its own (now-lower) photo. Each image+quote * pair needs to be self-contained: overflow:hidden gives the wrapper * its own block formatting context (so the float is fully contained * inside it, not something later siblings have to individually avoid * or clear), and clear:both makes each new pair start below anything * earlier regardless. */ .testimonial-pair { clear: both; overflow: hidden; margin-bottom: var(--space-m); } .entry-content .alignright { clear: both !important; float: right !important; margin: 0 0 var(--space-s) var(--space-m) !important; max-width: min(45%, 22rem); } .entry-content .aligncenter { display: block !important; margin-top: 0 !important; margin-bottom: var(--space-l) !important; margin-inline: auto !important; } .entry-content blockquote { position: relative; border-left: 3px solid var(--color-accent); background: var(--surface-alt); margin: var(--space-m) 0; padding: var(--space-s) var(--space-m) var(--space-s) var(--space-l); font-family: var(--font-display); font-style: italic; overflow: hidden; } .entry-content blockquote p:last-child { margin-bottom: 0; } .entry-content blockquote cite { display: block; margin-top: var(--space-2xs); font-style: normal; font-family: var(--font-body); font-size: var(--step--1); color: color-mix(in srgb, var(--text-body) 70%, transparent); } /* A decorative lotus/mandala motif behind the text, in place of a plain typographic quote mark — the specific image is set per color scheme in schemes.css since it's baked into the SVG's own stroke color. */ .entry-content blockquote::before { content: ""; position: absolute; top: 0.1em; left: 0.3em; width: 3.4rem; height: 3.4rem; background-repeat: no-repeat; background-size: contain; opacity: 0.6; } .entry-content figcaption { font-size: var(--step--1); color: color-mix(in srgb, var(--text-body) 70%, transparent); } .entry-content table { width: 100%; border-collapse: collapse; } .entry-content td, .entry-content th { border: 1px solid var(--border-subtle); padding: var(--space-2xs) var(--space-xs); } }