/* Light is the base palette. Dark redefines only the colour tokens, never the rules that use them, so the two themes cannot drift apart. Three states to cover: an explicit choice stamps data-theme on ; the default "system" setting stamps nothing and is decided by prefers-color-scheme. Both dark branches are needed so the toggle wins in either direction. (Same convention as dvc-decision-tool/index.html — different accent, same hand.) */ :root{ color-scheme:light; --ink:#26303D; --ink-soft:#5F6B7A; --on-ink:#FFFFFF; --ink-hover:#40495A; --paper:#F7F7F5; --surface:#FFFFFF; --line:#E1E4E9; --line-soft:#EDEEF1; --accent:#33509A; --accent-hover:#25397A; --accent-tint:#EAEEFA; --on-accent:#FFFFFF; --amber:#9F6917; --amber-tint:#FEFCF3; --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ink:#E6EAF0; --ink-soft:#9AA6B8; --on-ink:#0F141B; --ink-hover:#C9D3E0; --paper:#11161D; --surface:#1A212B; --line:#2C3644; --line-soft:#232C38; --accent:#8DA5E8; --accent-hover:#AABEF0; --accent-tint:#1B2440; --on-accent:#0F141B; --amber:#E8B54B; --amber-tint:#302713; --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); } } :root[data-theme="dark"]{ color-scheme:dark; --ink:#E6EAF0; --ink-soft:#9AA6B8; --on-ink:#0F141B; --ink-hover:#C9D3E0; --paper:#11161D; --surface:#1A212B; --line:#2C3644; --line-soft:#232C38; --accent:#8DA5E8; --accent-hover:#AABEF0; --accent-tint:#1B2440; --on-accent:#0F141B; --amber:#E8B54B; --amber-tint:#302713; --shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:"DM Sans",system-ui,sans-serif;font-size:16px;line-height:1.6; } .wrap{max-width:880px;margin:0 auto;padding:0 22px 80px} a{color:var(--accent)} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* The display serif is the one bold move. On a writeup it is the title; on the home page the project names share it, so the work carries the weight rather than the byline. */ .mast{padding:56px 0 40px} .mast h1{font-family:"DM Serif Display",Georgia,serif;font-weight:400; font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 16px} .mast .lede{margin:0;color:var(--ink-soft);font-size:1.08rem;line-height:1.6;max-width:58ch} .mast .meta{margin:14px 0 0;font-size:.86rem;color:var(--ink-soft)} .linkrow{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px} .linkrow a{font-size:.95rem;font-weight:500;text-decoration:none;color:var(--accent); border-bottom:1px solid var(--accent-tint);padding-bottom:1px;transition:border-color .15s} .linkrow a:hover{border-bottom-color:var(--accent)} /* Home masthead: name is quieter than on a writeup, and the elsewhere-links sit on its baseline so the lede is the first full-width line. */ .mast.home{padding-bottom:12px} .mast-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px} .mast.home h1{font-size:clamp(1.7rem,4vw,2.2rem);margin:0} .mast.home .linkrow{margin-top:0} .mast.home .lede{margin-top:14px} .status{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px; border-radius:6px;background:var(--amber-tint);color:var(--amber);white-space:nowrap} .status.public{background:var(--accent-tint);color:var(--accent)} /* Project list: one full-width entry per project, separated by rules. Each name is set in the display serif at close to writeup-title size. */ .projects{list-style:none;margin:0;padding:0} .project{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 40px; align-items:baseline;padding:34px 0;border-top:1px solid var(--line)} .project h2{margin:0;font-family:"DM Serif Display",Georgia,serif;font-weight:400; font-size:clamp(1.8rem,4.2vw,2.5rem);line-height:1.1;letter-spacing:-.012em;overflow-wrap:anywhere} .project h2 a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px; text-decoration-color:var(--line);text-underline-offset:.16em;transition:color .15s,text-decoration-color .15s} .project h2 a:hover{color:var(--accent);text-decoration-color:var(--accent)} .project h2 a:focus-visible{outline-offset:4px} .project .desc{margin:0;font-size:1.02rem;line-height:1.55;max-width:52ch} .project .stack{margin:10px 0 0;font-size:.84rem;color:var(--ink-soft)} @media (max-width:640px){ .project{grid-template-columns:1fr;gap:10px;padding:28px 0} } /* Writeup prose. */ .article section{padding:36px 0;border-top:1px solid var(--line)} .article section:first-of-type{border-top:0;padding-top:8px} .article h2{font-family:"DM Sans",sans-serif;font-weight:700;font-size:1.28rem;margin:0 0 14px;letter-spacing:-.005em} .article p{margin:0 0 16px;max-width:66ch;line-height:1.7} .article p:last-child{margin-bottom:0} .back-link{display:inline-block;margin-top:8px;font-size:.9rem;color:var(--accent);text-decoration:none; border-bottom:1px solid var(--accent-tint)} .back-link:hover{border-bottom-color:var(--accent)} footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px} footer p{margin:0;font-size:.82rem;color:var(--ink-soft)} .theme-toggle{font:inherit;font-size:.82rem;padding:7px 14px;border-radius:20px;cursor:pointer; border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);transition:all .15s} .theme-toggle:hover{border-color:var(--accent);color:var(--accent)} @media (prefers-reduced-motion:reduce){*{transition:none!important}}