:root { color-scheme: light; --bg: #f5f4ef; --text: #292d29; --muted: #676d64; --panel: #eeeee7; --line: #d9dcd2; --accent: #526347; --smoke: #d9e2e4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1b201e; --text: #e2e5dc; --muted: #a0aaa0; --panel: #222a25; --line: #343d36; --accent: #b2c39c; --smoke: #e3eaeb; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #1b201e; --text: #e2e5dc; --muted: #a0aaa0; --panel: #222a25; --line: #343d36; --accent: #b2c39c; --smoke: #e3eaeb; }
* { box-sizing: border-box; }
body { display: flow-root; margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.landing { width: min(420px, calc(100% - 40px)); margin: 80px auto 48px; }
.main-family-photo { display: block; width: min(350px, 100%); height: auto; margin: 0 auto 32px; border-radius: 12px; box-shadow: 0 4px 24px #0001; }
.main-nav { display: flex; justify-content: center; gap: 16px; }
.main-nav a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 14px; font-weight: 550; white-space: nowrap; }
.main-nav a:hover { border-color: var(--accent); }
.portrait { position: relative; display: block; width: 34px; height: 34px; flex: none; }
.portrait-art { position: absolute; inset: 0; transform-origin: 85% 100%; pointer-events: none; transition: transform 220ms ease; }
.portrait-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.speed-puff { position: absolute; left: 18%; top: 82%; width: 30%; height: 22%; opacity: 0; background: radial-gradient(ellipse at 28% 66%, var(--smoke) 0 29%, transparent 33%), radial-gradient(ellipse at 52% 42%, var(--smoke) 0 38%, transparent 42%), radial-gradient(ellipse at 76% 64%, var(--smoke) 0 31%, transparent 35%); }
.theme-toggle { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle:hover { border-color: var(--line); background: var(--panel); color: var(--text); }
.theme-toggle svg { display: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="system"] .theme-system, :root[data-theme="light"] .theme-light, :root[data-theme="dark"] .theme-dark { display: block; }
@keyframes speed-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.45); } 18% { opacity: .85; } 100% { opacity: 0; transform: translate(-340%, -35%) scale(1.7); } }
@keyframes coffee-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 7px 2px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .portrait:hover { z-index: 2; }
  .portrait:hover .portrait-art { transform: scale(2.5); transition: transform 420ms cubic-bezier(.2,.8,.2,1) 280ms; }
  .portrait-kelly:hover .speed-puff { animation: speed-smoke 950ms ease-out 650ms infinite; }
  .portrait-kelly:hover .speed-puff:nth-of-type(2) { animation-delay: 950ms; }
  .portrait-kelly:hover .speed-puff:nth-of-type(3) { animation-delay: 1250ms; }
  .portrait-paul:hover img { animation: coffee-flash 850ms ease-out 600ms; }
}
@media (prefers-reduced-motion: no-preference) {
  .main-nav a:focus-visible .portrait { z-index: 2; }
  .main-nav a:focus-visible .portrait-art { transform: scale(2.5); transition-delay: 280ms; }
  .main-nav a:focus-visible .portrait-kelly .speed-puff { animation: speed-smoke 950ms ease-out 650ms infinite; }
  .main-nav a:focus-visible .portrait-kelly .speed-puff:nth-of-type(2) { animation-delay: 950ms; }
  .main-nav a:focus-visible .portrait-kelly .speed-puff:nth-of-type(3) { animation-delay: 1250ms; }
  .main-nav a:focus-visible .portrait-paul img { animation: coffee-flash 850ms ease-out 600ms; }
}
@media (max-width: 380px) { .main-nav { gap: 10px; } .main-nav a { padding: 10px; gap: 8px; } }