*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --white: #eeeae2; --ink: #181714; --ink2: #555249; --ink3: #7c776e; --hue: #52624a; --gold: #9a7d42; --graphite: #171914; --line: rgba(0, 0, 0, 0.06); --nav-bg: rgba(238, 234, 226, 0.92); --wash-soft: rgba(82, 98, 74, 0.16); --dither-dot: rgba(82, 98, 74, 0.34); --dither-field: rgba(82, 98, 74, 0.2); --quote-font: "Cormorant Garamond", "IBM Plex Serif", Georgia, serif; --serif: "IBM Plex Serif", Georgia, serif; --sans: "IBM Plex Sans", system-ui, sans-serif; --col: 1200px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } html { background: var(--white); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: clip; } body { min-height: 100vh; max-width: 100%; position: relative; isolation: isolate; overflow-x: clip; background: var(--white); } body::before { content: ""; position: fixed; display: none; z-index: 1; inset: -18%; pointer-events: none; background: linear-gradient( color-mix(in srgb, var(--white) 38%, transparent), color-mix(in srgb, var(--white) 54%, transparent) ), radial-gradient(circle at 72% 48%, var(--wash-soft), transparent 28rem); translate: 0 var(--background-shift, 0px); will-change: translate; } a { color: inherit; text-decoration: none; } a[href^="http"]::after { content: "↗"; display: inline-block; margin-left: 0.32em; font-size: 0.78em; line-height: 1; color: var(--ink3); translate: 0 -0.08em; } /* Enable with . html.debug-layout body * { outline: 1px solid color-mix(in srgb, var(--hue) 36%, transparent); outline-offset: -1px; } html.debug-layout body main, html.debug-layout body section, html.debug-layout body .hero, html.debug-layout body .work-content, html.debug-layout body .context-section { outline-color: color-mix(in srgb, var(--gold) 62%, transparent); } */ #topographic-bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.2; mix-blend-mode: multiply; filter: blur(0.45px); transform: scale(1.012); } [data-theme$="silicon"] #topographic-bg, [data-theme="blue-wafer"] #topographic-bg, [data-theme="olive-terminal"] #topographic-bg, [data-theme="charcoal-violet"] #topographic-bg { opacity: 0.52; filter: blur(0.55px); mix-blend-mode: screen; } /* ── NAV full-bleed, borderless ── */ nav { position: sticky; top: 0; z-index: 50; background: transparent; backdrop-filter: none; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; height: 52px; } .nav-name { font-family: var(--serif); font-size: 16px; letter-spacing: -0.01em; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a, .theme-open { font-size: 13px; font-family: inherit; font-weight: 400; letter-spacing: 0.02em; color: var(--ink2); transition: color 0.15s; } .nav-links a:hover, .theme-open:hover { color: var(--hue); } .nav-links a[href^="http"]::after { content: none; } .theme-open { border: 0; background: none; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; } .theme-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; } /* ── THEME PICKER ── */ .theme-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; border: 1px solid var(--line); border-radius: 2px; padding: 0; overflow: auto; background: var(--white); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22); } .theme-dialog::backdrop { background: rgba(5, 8, 6, 0.42); backdrop-filter: blur(5px); } .theme-dialog-head { position: sticky; top: 0; z-index: 2; padding: 20px 20px 16px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); background: var(--nav-bg); backdrop-filter: blur(14px); } .theme-dialog h2 { font: 400 22px var(--serif); } .theme-close { border: 0; background: none; color: var(--ink3); font: inherit; font-size: 12px; cursor: pointer; } .theme-groups { padding: 18px 20px 22px; } .theme-group + .theme-group { margin-top: 22px; } .theme-group-title { margin-bottom: 9px; color: var(--ink3); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .theme-option { display: grid; grid-template-columns: 52px 1fr; gap: 11px; align-items: center; padding: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; } .theme-option:hover, .theme-option[aria-pressed="true"] { border-color: var(--hue); } .theme-option[aria-pressed="true"] { box-shadow: inset 2px 0 var(--gold); } .theme-swatch { height: 34px; border: 1px solid rgba(127, 127, 127, 0.25); background: linear-gradient(135deg, transparent 52%, var(--swatch-accent) 52%), var(--swatch-bg); } .theme-option[data-theme="paper-green"] .theme-swatch { --swatch-bg: #f8f7f3; --swatch-accent: #2e5440; } .theme-option[data-theme="silicon-sage"] .theme-swatch { --swatch-bg: #edf0e9; --swatch-accent: #365d43; } .theme-option[data-theme="warm-mineral"] .theme-swatch { --swatch-bg: #eeeae2; --swatch-accent: #52624a; } .theme-option[data-theme="wafer-grey"] .theme-swatch { --swatch-bg: #e8ebe8; --swatch-accent: #416c59; } .theme-option[data-theme="gold-paper"] .theme-swatch { --swatch-bg: #f0ece1; --swatch-accent: #796b38; } .theme-option[data-theme="lavender-silicon"] .theme-swatch { --swatch-bg: #eceaee; --swatch-accent: #535a73; } .theme-option[data-theme="dark-silicon"] .theme-swatch { --swatch-bg: #0d110e; --swatch-accent: #78a584; } .theme-option[data-theme="graphite-silicon"] .theme-swatch { --swatch-bg: #101311; --swatch-accent: #769a7c; } .theme-option[data-theme="blue-wafer"] .theme-swatch { --swatch-bg: #0d1115; --swatch-accent: #718c91; } .theme-option[data-theme="olive-terminal"] .theme-swatch { --swatch-bg: #12150e; --swatch-accent: #91a36a; } .theme-option[data-theme="charcoal-violet"] .theme-swatch { --swatch-bg: #121116; --swatch-accent: #8b839e; } .theme-option strong { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; } .theme-option small { display: block; color: var(--ink3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0 0; color: var(--ink2); font-size: 12px; line-height: 1.45; } .theme-toggle span { color: var(--ink); font-size: 13px; font-weight: 500; } .theme-toggle input { width: 34px; height: 18px; flex: 0 0 auto; accent-color: var(--hue); cursor: pointer; } /* ── MAIN COLUMN ── */ main { position: relative; z-index: 1; max-width: var(--col); margin: 0 auto; padding: 0 24px; display: block; } .top-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 50px; /* min-height: 50vh; */ align-items: start; margin: 72px 0; } .work-content { min-width: 0; max-width: 500px; justify-self: center; } .context-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; margin-top: 0; align-items: start; } /* ── HERO ── */ .hero { position: relative; max-width: 360px; min-height: auto; margin: 0; display: flex; flex-direction: column; justify-content: center; isolation: isolate; } .hero::before { content: ""; position: absolute; z-index: -1; width: min(44vw, 580px); aspect-ratio: 1; left: -150px; top: 50%; translate: 0 -50%; opacity: 0.62; background: radial-gradient(circle, var(--dither-dot) 0 0.8px, transparent 1px), radial-gradient(circle at 48% 46%, var(--dither-field), transparent 63%); background-size: 7px 7px, 100% 100%; mask-image: radial-gradient(circle, black 5%, transparent 68%); animation: dither-drift 18s ease-in-out infinite alternate; } [data-hero-dither="off"] .hero::before { display: none; } @keyframes dither-drift { to { background-position: 18px 11px, 0 0; transform: rotate(3deg) scale(1.04); } } .hero-name { font-family: var(--quote-font); font-size: 24px; font-weight: 300; color: var(--ink); margin-bottom: 14px; letter-spacing: 0; line-height: 0.98; } .hero-bio { font-family: var(--sans); font-size: 14.5px; line-height: 1.78; color: var(--ink2); max-width: 480px; margin-bottom: 20px; } .hero-contact { display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 12px; color: var(--ink2); } .hero-contact a { transition: color 0.15s; } .hero-contact a:hover { color: var(--hue); } .diffuse-text { filter: blur(var(--diffuse-blur, 0)); } .diffuse-text[data-diffuse-active] { overflow: hidden; } /* ── SECTION ── */ section { margin-bottom: 0; } .sec-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 20px; } .column-subtitle { max-width: 34ch; margin: -12px 0 18px; font-family: var(--serif); font-size: 14px; font-style: italic; line-height: 1.6; color: var(--ink3); } .quote-list { display: flex; flex-direction: column; gap: 10px; margin: 2rem; } .quote-item, .quote-empty { max-width: 34ch; font-family: var(--quote-font); font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--ink2); } .quote-empty { color: var(--ink3); } .quote-source { display: block; margin-top: 6px; font-family: var(--quote-font); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--ink3); } /* ── READING ── */ #reading { padding-top: 2px; } #reading .sec-eyebrow { margin-bottom: 20px; } .time-chunk { display: flex; flex-direction: column; gap: 7px; margin-bottom: 0; } .read-row { display: block; padding: 0; text-decoration: none; line-height: 1.55; } .read-title { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--hue); transition: color 0.12s; display: inline; } .read-row:hover .read-title { color: var(--gold); } .reading-toggle { display: none; } .read-empty { color: var(--ink2); font: italic 14px/1.7 var(--serif); } /* ── WORK ── */ #projects { margin-bottom: 0; } .work-block + .work-block { margin-top: 20px; } #projects .sec-eyebrow { margin-bottom: 13px; } .work-intro { margin-bottom: 18px; } .work-intro .sec-eyebrow { margin-bottom: 13px; } .work-intro .column-subtitle { margin: 0; } .plain-index { display: flex; flex-direction: column; gap: 7px; } .work-row { display: block; padding: 0; font-size: 14px; line-height: 1.55; color: var(--ink2); } .work-name-wrap { display: inline; margin-top: 0; } .work-name { font-family: var(--sans); font-size: inherit; font-style: normal; font-weight: 500; color: var(--ink3); transition: color 0.15s; } .work-name a { color: var(--hue); } .work-row:hover .work-name a { color: var(--gold); } .work-row.is-draft .work-name, .work-row.is-draft:hover .work-name { color: var(--ink3); font-weight: 400; } .work-desc { display: inline; font-family: var(--sans); font-size: inherit; color: var(--ink3); line-height: inherit; } .work-desc::before { content: " - "; color: var(--ink3); } .status-label { display: inline-block; margin-left: 0.42em; font-size: 0.72em; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink3); translate: 0 -0.08em; } /* ── BLOG ── */ #writing { margin: 0 0 7px; } .blog-row { display: block; padding: 0; font-size: 14px; line-height: 1.55; } .blog-title { font-family: var(--sans); font-size: inherit; font-weight: 500; color: var(--hue); line-height: inherit; margin-bottom: 0; transition: color 0.15s; } .blog-row:hover .blog-title { color: var(--gold); } .blog-excerpt { display: inline; font-size: inherit; color: var(--ink3); line-height: inherit; } .blog-excerpt::before { content: " - "; color: var(--ink3); } .blog-date { display: none; } /* ── ENTRANCE ANIMATIONS ── */ @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .rise { opacity: 0; animation: rise 0.7s var(--ease) forwards; } .r1 { animation-delay: 0.05s; } .r2 { animation-delay: 0.12s; } .r3 { animation-delay: 0.19s; } .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── TRANSPARENT RIBBON FOOTER ── */ footer { position: relative; z-index: 1; min-height: 42vh; margin-top: 140px; overflow: hidden; isolation: isolate; content-visibility: auto; contain-intrinsic-size: auto 42vh; background: linear-gradient( to bottom, transparent, color-mix(in srgb, var(--graphite) 28%, transparent) ); color: var(--ink); } #footer-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; } .footer-body { position: relative; z-index: 2; max-width: var(--col); min-height: 42vh; margin: 0 auto; padding: 46px 24px 32px; display: grid; grid-template-columns: 1fr 1fr; align-content: space-between; gap: 32px; pointer-events: none; } .footer-kicker, .footer-meta { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); } .footer-meta { align-self: end; justify-self: end; color: var(--ink3); } @media (max-width: 1180px) { main { max-width: 720px; } .top-section, .context-section { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 620px; margin-right: auto; margin-left: auto; margin: 0; } .context-section { margin-top: 0; } #reading, #quotes { grid-column: auto; } } @media (max-width: 760px) { nav { backdrop-filter: none; } main { max-width: 620px; } .hero { min-height: auto; display: block; margin-top: 34px; max-width: 420px; } .hero::before { width: calc(100vw + 48px); max-width: 520px; left: -48px; animation: none; } .hero-name { font-size: 32px; } .hero-bio { font-size: 14.5px; line-height: 1.76; } .top-section, .context-section { gap: 40px; } #reading:not(.expanded) .mobile-reading-extra { display: none; } .reading-toggle { width: 100%; display: block; padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; color: var(--ink3); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-align: left; text-transform: uppercase; cursor: pointer; } #reading, #projects, #quotes { margin-bottom: 48px; } footer { margin-top: 36px; } .footer-body { grid-template-columns: 1fr; gap: 40px; } .footer-meta { justify-self: start; } .quote-list { margin: 0; } } @media (prefers-reduced-motion: reduce) { body::before { translate: none; will-change: auto; } .hero::before { animation: none; } } @media (max-width: 560px) { nav { padding: 0 20px; } .nav-links { gap: 16px; } .nav-links a:nth-child(-n + 2):not(:only-of-type) { display: none; } .theme-options { grid-template-columns: 1fr; } .blog-row { grid-template-columns: 1fr; } .blog-date { text-align: left; } }