.site-header {
    height:76px;
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(36px,calc((100vw - 1180px)/2));
    border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
    background:color-mix(in srgb,var(--bg) 78%,transparent);
    backdrop-filter:blur(12px)
}
.progress-track {
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:2px
}
.progress-track span {
    display:block;
    width:0;
    height:100%;
    background:var(--primary);
    box-shadow:0 0 12px var(--glow)
}
.logo {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font:16px var(--display);
    letter-spacing:.08em
}
.clover {
    width:28px;
    color:var(--primary-text)
}
.nav-links {
    display:flex;
    gap:34px
}
.nav-links a,.theme-toggle {
    color:var(--text-muted);
    font:11px var(--mono);
    transition:color .2s
}
.nav-links a:hover {
    color:var(--primary-text)
}
.theme-toggle {
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:99px;
    background:var(--surface);
    cursor:pointer
}
.theme-icon {
    color:var(--gold,var(--primary));
    font-size:16px
}
.menu-toggle {
    display:none
}
.hero {
    min-height:calc(100svh - 76px);
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--hero-gradient)
}
.hero-copy {
    position:relative;
    z-index:2;
    width:min(650px,65%);
    padding:100px 0 125px
}
.hero h1 {
    margin:28px 0 0;
    font:clamp(4.8rem,12vw,10rem)/.78 var(--display);
    letter-spacing:-.01em;
    text-transform:uppercase
}
.hero-period {
    color:var(--primary)
}
.hero-role {
    margin:22px 0 0;
    color:var(--primary-text);
    font:500 clamp(13px,1.6vw,18px) var(--mono);
    text-transform:uppercase;
    letter-spacing:.12em
}
.hero-pitch {
    max-width:560px;
    margin:18px 0;
    color:var(--text-muted);
    font-size:clamp(16px,2vw,21px)
}
.button-row {
    display:flex;
    gap:12px;
    margin-top:30px
}
.button {
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:0 18px;
    border:1px solid var(--border);
    border-radius:4px;
    font:11px var(--mono);
    transition:transform .25s var(--ease-fast),box-shadow .25s,color .25s
}
.button:hover {
    transform:translateY(-3px);
    box-shadow:var(--shadow)
}
.button-primary {
    border-color:var(--primary);
    background:var(--primary);
    color:#fff
}
.button-quiet {
    color:var(--text)
}
.hero-about {
    max-width:470px;
    margin:35px 0 0;
    color:var(--text-muted);
    font-size:13px
}
.hero-art {
    position:absolute;
    inset:0 0 0 45%;
    display:grid;
    place-items:center;
    pointer-events:none
}
.magic-circle {
    position:absolute;
    width:min(39vw,490px);
    aspect-ratio:1;
    border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);
    border-radius:50%;
    box-shadow:0 0 55px color-mix(in srgb,var(--accent) 17%,transparent),inset 0 0 44px color-mix(in srgb,var(--primary) 10%,transparent)
}
.circle-two {
    width:min(29vw,365px);
    border-style:dashed;
    border-color:color-mix(in srgb,var(--accent) 55%,transparent)
}
.hero-clover {
    font-size:clamp(100px,20vw,260px);
    line-height:1;
    color:var(--primary);
    filter:drop-shadow(0 0 38px var(--glow));
    opacity:.82;
    animation:float 5s ease-in-out infinite
}
.rune {
    position:absolute;
    color:var(--primary-text);
    font:10px/1.5 var(--mono);
    letter-spacing:.22em
}
.rune-one {
    left:12%;
    top:35%
}
.rune-two {
    right:7%;
    bottom:33%;
    text-align:right
}
.scroll-cue {
    position:absolute;
    bottom:35px;
    left:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text-muted);
    font:10px var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase
}
.scroll-line {
    width:32px;
    height:1px;
    background:var(--primary)
}
.ambient-canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    opacity:.55
}
.stack-section {
    padding-bottom:130px
}
.stack-groups {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}
.grimoire-card {
    position:relative;
    min-height:230px;
    padding:25px 22px;
    border:1px solid var(--border);
    background:linear-gradient(145deg,var(--surface),var(--surface-2));
    overflow:hidden;
    transition:transform .35s var(--ease-soft),box-shadow .3s
}
.grimoire-card:hover {
    transform:translateY(-6px);
    box-shadow:var(--shadow)
}
.card-sigil {
    position:absolute;
    right:18px;
    top:11px;
    color:var(--accent);
    font-size:35px;
    opacity:.5
}
.card-index,.visual-index {
    color:var(--text-muted);
    font:9px var(--mono);
    letter-spacing:.12em
}
.grimoire-card h3 {
    margin:38px 0 16px;
    font:28px var(--display);
    text-transform:uppercase;
    letter-spacing:.07em
}
.tag-list {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0;
    padding:0;
    list-style:none
}
.tag-list li {
    padding:5px 8px;
    border:1px solid var(--border);
    color:var(--primary-text);
    font:9px var(--mono)
}
.projects-section {
    padding-bottom:120px
}
.visual-index {
    position:absolute;
    left:16px;
    bottom:14px;
    padding:7px 10px;
    background:var(--bg)
}
.project-story {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:24px
}
.project-story h4 {
    margin:0 0 6px;
    color:var(--primary-text);
    font:10px var(--mono);
    text-transform:uppercase
}
.project-story p {
    margin:0;
    color:var(--text-muted);
    font-size:12px;
    line-height:1.7
}
.project-links {
    display:flex;
    gap:22px;
    margin-top:24px
}
.project-links a {
    font:10px var(--mono)
}
.contact-section {
    padding-top:100px
}
.contact-heading h2 {
    font-size:clamp(4rem,9vw,8rem)
}
.footer-clover {
    margin-top:40px;
    color:var(--primary);
    font-size:72px;
    opacity:.7
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 0;
    border-top:1px solid var(--border);
    color:var(--text-muted);
    font:9px var(--mono)
}
.reveal {
    opacity:1;
    transform:none
}
.js-ready .reveal {
    opacity:0;
    transform:translateY(25px);
    transition:opacity .7s var(--ease-soft),transform .7s var(--ease-soft)
}
.js-ready .reveal.is-visible {
    opacity:1;
    transform:translateY(0)
}
@keyframes float {
    50% {
    transform:translateY(-12px) rotate(4deg)
}

}