:root {
--bg: #ffffff;
--bg-alt: #f5f6f8;
--text: #1a1d23;
--text-muted: #5a6270;
--accent: #3457d5;
--accent-contrast: #ffffff;
--border: #e3e5ea;
--max-width: 780px;
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #14161a;
--bg-alt: #1c1f25;
--text: #edeef0;
--text-muted: #a2a8b4;
--accent: #7c9bff;
--accent-contrast: #0e1116;
--border: #2a2e36;
}
}

:root[data-theme="dark"] {
--bg: #14161a;
--bg-alt: #1c1f25;
--text: #edeef0;
--text-muted: #a2a8b4;
--accent: #7c9bff;
--accent-contrast: #0e1116;
--border: #2a2e36;
}

* { box-sizing: border-box; }

html, body {
height: 100%;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
}

.wrap {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
position: sticky;
top: 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
z-index: 10;
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
padding-bottom: 14px;
}

.logo {
font-weight: 700;
font-size: 1.1rem;
color: var(--text);
}
.logo:hover { text-decoration: none; }

.logo-group {
display: flex;
align-items: center;
gap: 10px;
}

.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 999px;
width: 30px;
height: 30px;
padding: 0;
font-family: inherit;
color: var(--text);
cursor: pointer;
line-height: 1;
}
.theme-toggle:hover { background: var(--bg-alt); }
.theme-toggle svg { display: block; }

nav a {
color: var(--text-muted);
margin-left: 20px;
font-size: 0.95rem;
}
nav a:hover { color: var(--text); text-decoration: none; }

main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}

.hero {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
text-align: center;
}

.eyebrow {
color: var(--text-muted);
margin: 0 0 4px;
font-size: 1rem;
}

.hero h1 {
font-size: 2.6rem;
margin: 0 0 8px;
}

.tagline {
color: var(--accent);
font-weight: 600;
margin: 0;
}

.hero-blurb {
color: var(--text-muted);
max-width: 520px;
margin: 0 auto 32px;
}

.cta-row {
display: flex;
gap: 12px;
justify-content: center;
}

.btn {
display: inline-block;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.95rem;
}
.btn:hover { text-decoration: none; }

.btn-primary {
background: var(--accent);
color: var(--accent-contrast);
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-alt); }

.page-main {
padding: 48px 0 64px;
}

.page-main h2 {
font-size: 1.5rem;
margin: 0 0 20px;
}

.projects-page {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
padding: 24px 0;
}

.projects-page .wrap {
flex: 0 1 auto;
display: flex;
flex-direction: column;
width: 100%;
}

.projects-page h2 {
text-align: center;
margin-bottom: 8px;
}

.project-wheel {
position: relative;
display: flex;
flex-direction: column;
height: min(560px, calc(100dvh - 240px));
min-height: 420px;
outline: none;
}

.project-wheel:focus-visible {
border-radius: 16px;
box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.project-wheel-stage {
position: relative;
flex: 1 1 auto;
height: 100%;
min-height: 360px;
transform-style: preserve-3d;
perspective: 980px;
overflow: hidden;
user-select: none;
cursor: grab;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
touch-action: none;
}

.project-wheel-stage:active {
cursor: grabbing;
}

.project-wheel .card {
position: absolute;
left: 50%;
top: 50%;
width: min(420px, calc(100% - 32px));
min-height: 196px;
margin: 0;
--wheel-y: 0px;
--wheel-z: 0px;
--wheel-rx: 0deg;
--wheel-scale: 1;
transform: translate(-50%, -50%) translate3d(0, var(--wheel-y), var(--wheel-z)) rotateX(var(--wheel-rx)) scale(var(--wheel-scale));
transform-origin: center center;
box-shadow: 0 16px 40px rgba(20, 22, 26, 0.08);
will-change: transform, filter, opacity;
backface-visibility: hidden;
cursor: pointer;
pointer-events: none;
}

.project-wheel .card:nth-child(1) { z-index: 5; }
.project-wheel .card:nth-child(2) { --wheel-y: 108px; --wheel-z: -180px; --wheel-rx: -28deg; --wheel-scale: 0.9; filter: blur(3.5px); opacity: 0.72; z-index: 3; }
.project-wheel .card:nth-child(3) { --wheel-y: 210px; --wheel-z: -340px; --wheel-rx: -48deg; --wheel-scale: 0.82; filter: blur(6px); opacity: 0.35; z-index: 1; }
.project-wheel .card:nth-child(4) { --wheel-y: -108px; --wheel-z: -180px; --wheel-rx: 28deg; --wheel-scale: 0.9; filter: blur(3.5px); opacity: 0.72; z-index: 3; }

.project-wheel .card.is-active,
.project-wheel-stage:not(:has(.is-active)) .card:nth-child(1) {
box-shadow: 0 22px 54px rgba(20, 22, 26, 0.16);
cursor: default;
pointer-events: auto;
}

.project-wheel-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 8px;
flex-shrink: 0;
}

.project-wheel-hint {
margin: 0;
color: var(--text-muted);
font-size: 0.8rem;
transition: opacity 0.35s ease;
}

.project-wheel-hint.is-hidden {
opacity: 0;
}

.project-wheel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}

.project-wheel-dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--border);
cursor: pointer;
}

.project-wheel-dot.is-active {
background: var(--accent);
}

.project-wheel-dot:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}

.section {
padding: 56px 0;
border-top: 1px solid var(--border);
}

.section h2 {
font-size: 1.5rem;
margin: 0 0 20px;
}

.tag-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tag-list li {
background: var(--bg-alt);
border: 1px solid var(--border);
padding: 6px 14px;
border-radius: 999px;
font-size: 0.9rem;
}

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}

.card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
}

.card h3 {
margin: 0 0 8px;
font-size: 1.1rem;
}

.card p {
color: var(--text-muted);
margin: 0 0 14px;
font-size: 0.95rem;
}

.card-links a {
font-size: 0.9rem;
font-weight: 600;
margin-right: 16px;
}

.site-footer {
border-top: 1px solid var(--border);
padding: 16px 0;
color: var(--text-muted);
font-size: 0.85rem;
flex-shrink: 0;
overflow: hidden;
position: relative;
z-index: 5;
}

.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}

.footer-copy {
margin: 0;
}

.footer-links {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
margin: 0;
padding: 0;
}

.footer-links a {
color: var(--text-muted);
}

.footer-links a:hover {
color: var(--text);
text-decoration: none;
}

.footer-email {
cursor: pointer;
pointer-events: auto;
position: relative;
z-index: 1;
}

.footer-email:hover {
text-decoration: underline;
}

.footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
overflow: hidden;
flex-shrink: 0;
}

.footer-icon svg {
width: 20px;
height: 20px;
max-width: 20px;
max-height: 20px;
display: block;
}

@media (max-width: 600px) {
.header-inner { flex-direction: column; gap: 8px; }
nav a { margin: 0 10px; }
.hero { padding: 24px 0; }
.hero h1 { font-size: 2rem; }
.footer-inner { gap: 12px; }
.footer-links { margin-left: auto; }
.project-wheel { height: min(480px, calc(100dvh - 220px)); min-height: 380px; }
.project-wheel .card { width: min(100%, 420px); min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
.project-wheel {
height: auto;
min-height: 0;
}
.project-wheel-stage {
height: auto;
min-height: 0;
overflow: visible;
perspective: none;
mask-image: none;
-webkit-mask-image: none;
touch-action: auto;
cursor: default;
}
.project-wheel .card {
position: relative;
left: auto;
top: auto;
width: auto;
margin: 0 0 20px;
transform: none !important;
filter: none !important;
opacity: 1 !important;
cursor: default;
pointer-events: auto;
}
.project-wheel-controls,
.project-wheel-hint { display: none; }
}