@charset "UTF-8";
/* VISKEM project composition. VISNAV and design tokens stay shared. */
.page-projects main { padding: 0; }
.viskem-home { width: min(100% - var(--gap-xl) * 2, 88rem); margin-inline: auto; color: var(--text-primary); }
.viskem-home a { color: inherit; text-decoration: none; }
.viskem-home a:focus-visible, .viskem-home button:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 6px; }
.viskem-home-skip { position: absolute; top: -10rem; }
.viskem-home-skip:focus { top: var(--gap-md); z-index: 5; background: var(--bg-base); }
.viskem-home-hero { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; min-height: min(36rem, 70svh); padding-top: var(--gap-xl); }
.viskem-home-intro { position: relative; z-index: 1; padding-block: var(--gap-xl); }
.viskem-home-kicker { margin: 0 0 var(--gap-xl); color: var(--text-secondary); font-size: .6875rem; letter-spacing: .12em; }
.viskem-home h1 { margin: 0; font-size: clamp(3.6rem, 6.9vw, 7rem); font-weight: 500; letter-spacing: -.075em; line-height: 1.06; }
.viskem-home h1 > span { display: block; }
.viskem-home-period { color: var(--accent-cyan); }
.viskem-home-statement { max-width: 29rem; color: var(--text-secondary); font-size: .875rem; line-height: 1.9; margin: var(--gap-xl) 0; }
.viskem-home-browse { display: inline-flex; gap: var(--gap-xl); align-items: center; padding-block: var(--gap-sm); font-size: .8125rem; }
.viskem-home-browse span { transition: transform .25s; }
.viskem-home-browse:hover span { transform: translateY(.3rem); }
.viskem-home-art { position: relative; width: min(100%, 28rem); justify-self: end; aspect-ratio: 1; color: var(--text-muted); }
.viskem-home-art canvas, .viskem-home-art-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.viskem-home-art.has-canvas .viskem-home-art-fallback { visibility: hidden; }
.viskem-home-art-mark { position: absolute; font-size: .5625rem; letter-spacing: .13em; color: var(--text-secondary); }
.viskem-home-art-mark--top { top: 8%; left: 8%; }
.viskem-home-art-mark--bottom { bottom: 8%; right: 8%; }
.viskem-home-hero-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--gap-md); align-self: end; padding-block: var(--gap-lg); color: var(--text-secondary); font-size: .625rem; letter-spacing: .06em; }
.viskem-home-motion { appearance: none; background: none; color: var(--text-secondary); border: 0; font: inherit; cursor: pointer; padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md); min-height: 2.75rem; }
.viskem-home-motion:hover { color: var(--text-primary); }
.viskem-home-motion-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--gap-sm); }
.viskem-home-motion::before { content: '[ '; }
.viskem-home-motion::after { content: ' ]'; }
.viskem-home-projects { scroll-margin-top: 6rem; }
.viskem-home-section-head { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-strong); padding-block: var(--gap-lg); font-size: .6875rem; color: var(--text-secondary); }
.viskem-home-section-head h2 { font: inherit; color: var(--text-primary); margin: 0; letter-spacing: .1em; }
.viskem-home-list { list-style: none; padding: 0; margin: 0; }
.viskem-project { display: grid; grid-template-columns: 3rem 1.1fr 1fr 2rem; align-items: center; gap: var(--gap-lg); position: relative; padding: var(--gap-xl) var(--gap-md); border-top: 1px solid var(--border-subtle); transition: background-color .25s; }
.viskem-project::after { content: ''; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--text-secondary); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.viskem-project:hover, .viskem-project:focus-visible { background: var(--bg-surface); }
.viskem-project:hover::after, .viskem-project:focus-visible::after { transform: scaleX(1); }
.viskem-project-number { color: var(--text-secondary); align-self: start; padding-top: var(--gap-sm); font-size: .6875rem; }
.viskem-project-name h3 { margin: 0 0 var(--gap-sm); font-size: clamp(1.5rem, 3vw, 3rem); line-height: 1.2; letter-spacing: -.055em; font-weight: 500; transition: transform .3s; }
.viskem-project:hover h3 { transform: translateX(.35rem); }
.viskem-project-name > span { color: var(--text-secondary); font-size: .6875rem; }
.viskem-project-details p { margin: 0 0 var(--gap-md); font-size: .8125rem; line-height: 1.8; color: var(--text-emphasis); max-width: 28rem; }
.viskem-project-domain { color: var(--text-secondary); font-size: .625rem; }
.viskem-project-arrow { font-size: 1.5rem; color: var(--text-secondary); transition: transform .3s, color .3s; }
.viskem-project:hover .viskem-project-arrow, .viskem-project:focus-visible .viskem-project-arrow { transform: translate(.2rem,-.2rem); color: var(--accent-cyan); }
.viskem-home-lab { display: grid; grid-template-columns: 5rem 1fr auto; gap: var(--gap-xl); align-items: center; border-top: 1px solid var(--border-strong); margin-top: var(--gap-xl); padding-block: calc(var(--gap-xl) * 2); }
.viskem-home-lab-screen { border: 1px solid var(--border-strong); aspect-ratio: 1.2; display: grid; place-content: center; color: var(--text-emphasis); font-size: 1.5rem; }
.viskem-home-lab .viskem-home-kicker { margin-bottom: var(--gap-md); font-size: .625rem; }
.viskem-home-lab h2 { font-size: 1.125rem; font-weight: 400; margin: 0 0 var(--gap-sm); }
.viskem-home-lab p:last-child { color: var(--text-secondary); font-size: .75rem; margin: 0; line-height: 1.8; }
.viskem-home-lab-link { font-size: .75rem; padding-block: var(--gap-md); }
.viskem-home-lab-link span { margin-left: var(--gap-lg); }
.viskem-home.is-motion-paused *, .viskem-home.is-motion-paused *::after { transition: none !important; }
@media (min-width: 100rem) { .viskem-home-hero { min-height: 38rem; } }
@media (max-width: 48rem) {
    .viskem-home { width: calc(100% - var(--gap-lg) * 2); }
    .viskem-home-hero { min-height: 0; grid-template-columns: 1fr; padding-top: var(--gap-lg); }
    .viskem-home-intro { padding-block: var(--gap-xl) var(--gap-lg); }
    .viskem-home h1 { font-size: clamp(3rem, 11vw, 5.25rem); }
    .viskem-home-kicker { font-size: .5625rem; margin-bottom: var(--gap-lg); }
    .viskem-home-statement { max-width: 26rem; font-size: .8125rem; margin-block: var(--gap-lg); }
    .viskem-home-art { position: absolute; width: 48%; right: -2%; top: 7%; opacity: .3; pointer-events: none; }
    .viskem-home-art-mark { display: none; }
    .viskem-home-hero-foot { flex-wrap: wrap; font-size: .5625rem; padding-block: var(--gap-md); }
    .viskem-project { grid-template-columns: 1.4rem 1fr 1.5rem; gap: var(--gap-md); padding: var(--gap-lg) 0; }
    .viskem-project-name h3 { font-size: clamp(1.5rem, 6vw, 2.5rem); }
    .viskem-project-details { grid-column: 2; }
    .viskem-project-details p { font-size: .75rem; }
    .viskem-project-arrow { grid-column: 3; grid-row: 1; }
    .viskem-home-lab { grid-template-columns: 1fr; gap: var(--gap-lg); padding-block: var(--gap-xl); }
    .viskem-home-lab-screen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .viskem-home *, .viskem-home *::after { transition: none !important; scroll-behavior: auto !important; }
}