*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-page);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font:var(--text-body-font);background:var(--surface-page);color:var(--text-primary)}
::selection{background:var(--vt-champagne);color:var(--vt-black)}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--text-accent)}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--focus-ring);outline-offset:4px}

/* Type helpers */
.vt-display{font-family:var(--font-display);font-weight:var(--weight-light);line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:0;text-wrap:balance}
.vt-display em{font-style:italic}
.vt-body{font:var(--text-body-font);color:var(--text-primary);max-width:var(--measure);text-wrap:pretty}
.vt-label{font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-secondary)}
.vt-caption{font-family:var(--font-body);font-weight:var(--weight-light);font-size:var(--type-caption);color:var(--text-secondary)}

/* Film grain — apply .vt-grain to a page wrapper; photos sit above via z-index:2 */
@keyframes vt-grain-shift{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}}
.vt-grain{position:relative;isolation:isolate}
.vt-grain::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:vt-grain-shift 14s steps(8) infinite}
.vt-grain::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--vignette)}
.vt-grain > *{position:relative;z-index:1}
.vt-photo-layer{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.vt-grain::before{animation:none}}

/* Hairline-draw link */
.vt-link{position:relative;color:inherit;text-decoration:none;padding-bottom:3px}
.vt-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-soft)}
.vt-link:hover::after,.vt-link[aria-current="page"]::after{transform:scaleX(1)}

/* Reveal helpers */
@keyframes vt-rise{from{opacity:0;transform:translateY(var(--rise-distance))}to{opacity:1;transform:none}}
@keyframes vt-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-unzoom{from{transform:scale(var(--zoom-reveal-from))}to{transform:scale(1)}}
@keyframes vt-fade{from{opacity:0}to{opacity:1}}