:root { --bg: #f5f4f0; --bg-card: #fff; --text: #1a1a1a; --text-muted: #6b6b6b; --link: #1a1a1a; --border: #d0cfc9; --img-border: #1a1a1a; --accent: #2255e0; --accent-light: #dde6ff; --on-accent: #fff; --danger: #c5221f; }
html.dark-theme, body.dark-theme { --bg: #0f1115; --bg-card: #181c22; --text: #e6e6e6; --text-muted: #9aa0aa; --link: #e6e6e6; --border: #2e3340; --img-border: #fff; --accent: #7eaaff; --accent-light: #1a2340; --on-accent: #0f1115; --danger: #ff8a80; }
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: Overlock, Georgia, serif; transition: background-color .32s ease, color .32s ease; }
body * { transition: background-color .32s ease, color .32s ease, border-color .32s ease; }
body [style*="color: blue"] { color: var(--accent) !important; }
.tag-red { color: var(--danger); }
.proj-link:hover, .pnav-link.pnav-active { color: var(--on-accent); }
site-navbar, site-footer { display: block; }
site-navbar .navbar { display: flex; width: 100%; height: 9vh; align-items: center; justify-content: space-around; padding-top: 1vh; }
site-navbar .name { display: flex; align-items: center; gap: 1vw; }
site-navbar .name h1 { margin: 0; font-size: clamp(20px, 1.5vw, 30px); line-height: 1.1; }
site-navbar a { color: var(--link); }
site-navbar .name h1 a { display: inline-block; color: var(--text); text-decoration: none; transition: transform .2s ease; }
site-navbar .name h1 a:hover, site-navbar .hub-button:hover, site-navbar .theme-toggle:hover { transform: scale(1.1); }
site-navbar .hub-button, site-navbar .theme-toggle { padding: 8px 14px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--text); cursor: pointer; font: inherit; text-decoration: none; transition: transform .2s ease, background-color .32s ease, border-color .32s ease, color .32s ease; }
site-navbar .menu { display: flex; align-items: center; gap: 2vw; }
site-navbar .mobile-hub { display: none; }
site-navbar .menu > a, site-navbar .nav-submenu-toggle { padding: 0; border: 0; background: transparent; color: var(--link); cursor: pointer; font: inherit; font-size: clamp(13px, 1vw, 20px); text-decoration: none; }
site-navbar .menu > a:hover, site-navbar .nav-submenu-toggle:hover, site-navbar [aria-current="page"] { text-decoration: underline; }
site-navbar .nav-group { position: relative; padding-bottom: .5rem; margin-bottom: -.5rem; }
site-navbar .nav-submenu { position: absolute; top: 100%; left: 50%; display: none; min-width: max-content; padding: .5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: 0 2px 12px rgb(0 0 0 / .15); transform: translateX(-50%); }
site-navbar .nav-group.is-open .nav-submenu { display: grid; gap: .25rem; }
site-navbar .nav-submenu a { padding: .45rem .65rem; border-radius: .35rem; text-decoration: none; }
site-navbar .nav-submenu a:hover { background: var(--accent-light); }
site-navbar .headerRight { display: flex; align-items: center; gap: 1vw; }
site-navbar .location { font-size: clamp(20px, 1.5vw, 30px); font-weight: 700; }
site-navbar .iconTheme { width: clamp(15px, 1.1vw, 22px); height: clamp(15px, 1.1vw, 22px); transition: filter .32s ease; }
html.dark-theme site-navbar .iconTheme { filter: invert(1) brightness(1.15); }
site-navbar .nav-toggle { display: none; }
site-footer { padding: 1.5rem 1rem 1rem; color: var(--text-muted); font-size: .8125rem; text-align: center; }
site-footer[data-fixed] { position: fixed; right: 0; bottom: 0; padding: 10px; opacity: .6; }
@media (max-width: 900px) { site-navbar .navbar { position: sticky; top: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); height: auto; min-height: 72px; padding: .75rem clamp(1rem, 4vw, 1.5rem); background: var(--bg); border-bottom: 1px solid var(--border); } site-navbar .name { grid-column: 1; grid-row: 1; min-width: 0; } site-navbar .hub-button { display: none; } site-navbar .name h1 { font-size: clamp(1rem, 4vw, 1.25rem); } site-navbar .nav-toggle { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg-card); color: var(--text); cursor: pointer; } site-navbar .headerRight { grid-column: 3; grid-row: 1; justify-self: end; margin-left: .4rem; } site-navbar .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; } site-navbar .menu { display: none; grid-column: 1 / -1; grid-row: 2; width: 100%; flex-direction: column; align-items: stretch; gap: .25rem; padding-top: .75rem; } site-navbar .menu.is-open { display: flex; } site-navbar .menu > a, site-navbar .nav-submenu-toggle { display: block; width: 100%; padding: .7rem .25rem; text-align: left; } site-navbar .mobile-hub { display: block; } site-navbar .nav-group { width: 100%; } site-navbar .nav-submenu { position: static; transform: none; box-shadow: none; } site-navbar .location { display: none; } }
@media (min-width: 901px) and (hover: hover) { site-navbar .nav-group:hover .nav-submenu, site-navbar .nav-group:focus-within .nav-submenu { display: grid; gap: .25rem; } }
@media (prefers-reduced-motion: reduce) { body, body *, site-navbar .theme-toggle, site-navbar .iconTheme { transition: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease-in-out; }