/* VCS website v2 draft (11/3/2026): leaner, more dynamic layer on top of site.css + motion.css. Vanilla CSS, no libraries. */
.v2-bar{background:#0b0d10;color:#fff;font-size:.875rem;text-align:center;padding:.4rem 1rem;border-bottom:2px solid var(--slate)}
.v2-bar a{color:#fff;font-weight:700}
/* Hero crossfade */
.v2-hero{min-height:min(86vh,760px)}
.v2-hero .v2-slide{opacity:0;transition:opacity 1.6s ease}
.v2-hero .v2-slide.on{opacity:1}
.v2-hero .lead{max-width:40ch}
.v2-cap{position:absolute;right:1rem;bottom:.8rem;z-index:2;margin:0;font-size:.8rem;color:#d6dde3;max-width:60ch;text-align:right;text-shadow:0 1px 3px #000}
.v2-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:.9rem;z-index:3;display:flex;gap:.45rem;margin:0;padding:0;list-style:none}
.v2-dots button{width:10px;height:10px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}
.v2-dots button[aria-current="true"]{background:#fff}
@media(max-width:699px){.v2-cap{display:none}}
/* Division cards */
.v2-divs{display:grid;gap:1.25rem}
@media(min-width:800px){.v2-divs{grid-template-columns:1fr 1fr}}
.v2-div{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--silver);border-top:6px solid var(--black);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.v2-div.elec{border-top-color:var(--slate)}
.v2-div img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.v2-div .b{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.v2-div h2{margin:0;font-size:1.7rem}
.v2-div ul{margin:.2rem 0 .8rem;padding-left:1.1rem}
.v2-div .btn{align-self:flex-start;margin-top:auto}
@media(hover:hover){.v2-div:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.14)}}
/* Projects strip */
.v2-strip{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;list-style:none;margin:1.25rem 0 0;padding-left:0}
@media(min-width:800px){.v2-strip{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.v2-strip li{scroll-snap-align:start;margin:0}
.v2-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);display:block;border:1px solid var(--silver)}
.v2-strip p{font-size:.92rem;margin:.5rem 0 0;color:#333}
.dark .v2-strip p{color:#d6dde3}
/* Short, scannable layouts */
.v2-steps{list-style:none;counter-reset:s;display:grid;gap:.8rem;margin:1.2rem 0 0;padding:0}
@media(min-width:800px){.v2-steps{grid-template-columns:repeat(var(--n,4),1fr)}}
.v2-steps li{counter-increment:s;background:#fff;border:1px solid var(--silver);border-top:4px solid var(--slate);border-radius:var(--radius);padding:.9rem 1rem;font-weight:700}
.v2-steps li::before{content:counter(s);display:block;font-family:var(--serif);font-size:1.6rem;color:var(--slate-dk);line-height:1}
.v2-steps li span{display:block;font-weight:400;font-size:.95rem;color:#333;margin-top:.25rem}
.v2-cols{display:grid;gap:1.25rem}
@media(min-width:800px){.v2-cols{grid-template-columns:repeat(var(--c,2),1fr)}}
.v2-cols .card ul{margin:.3rem 0 0;padding-left:1.1rem}
.v2-cols .card li{margin:.2rem 0}
.v2-quote{background:#000;color:#fff;text-align:center;border-top:4px solid var(--slate)}
.v2-quote h2{color:#fff;font-size:clamp(1.9rem,4vw,2.8rem);font-family:var(--serif)}
.v2-quote .lead{color:#e3e8ec;margin:0 auto 1.4rem}
.v2-quote .btn{background:#fff;color:#000;border-color:#fff}
.v2-quote .btn:hover{background:var(--slate);border-color:var(--slate);color:#fff}
.v2-quote .btn-ghost{background:transparent;color:#fff}
.v2-quote a.mail{color:#fff}
details.v2-more{border:1px solid var(--silver);border-radius:var(--radius);background:#fff;padding:.8rem 1rem;margin-top:1rem}
details.v2-more summary{cursor:pointer;font-weight:700}
@media(prefers-reduced-motion:reduce){.v2-hero .v2-slide{transition:none}.v2-div{transition:none}.v2-div:hover{transform:none}}

/* 11/3/2026: keep anything scrolled into view (hash links, Read more summaries, scripted scrolls) clear of the sticky header (81px) so it is never covered and stays clickable. */
html{scroll-padding-top:6.5rem}
summary{scroll-margin-top:6.5rem}