/* ============================================================ VESTIGE — shared stylesheet One source of truth for tokens, layout, nav/footer, texture. ============================================================ */ @font-face{ font-family:'Archivo Expanded'; src:url('fonts/Archivo_Expanded-Black.ttf') format('truetype'); font-weight:900; font-display:swap; } :root{ --canvas:#F2EEE3; --canvas-2:#EAE4D4; --rust:#A8391F; --rust-deep:#7C2A17; --pink:#E3C7B8; --pink-deep:#C9A38F; --ink:#17140F; --brass:#8A7A4F; --line: rgba(23,20,15,0.18); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--canvas);color:var(--ink);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;cursor:none;} .mono{font-family:'JetBrains Mono',monospace;} @view-transition { navigation: auto; } @keyframes vestige-leave { to { opacity:0; transform:translateY(-18px) scale(0.985); filter:blur(7px); } } @keyframes vestige-enter { from { opacity:0; transform:translateY(18px) scale(1.015); filter:blur(7px); } } ::view-transition-old(root){ animation: 520ms cubic-bezier(.16,1,.3,1) both vestige-leave; } ::view-transition-new(root){ animation: 620ms cubic-bezier(.16,1,.3,1) 60ms both vestige-enter; } /* keep the nav steady across navigations instead of cross-fading it too */ nav{ view-transition-name: site-nav; } ::view-transition-group(site-nav){ animation-duration: 320ms; } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation: none !important; } } @keyframes text-settle { from { letter-spacing: -0.12em; filter: blur(12px); opacity: 0; } to { letter-spacing: -0.01em; filter: blur(0); opacity: 1; } } @keyframes fade-settle { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes page-veil-clear { from { backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); } to { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } } .page-veil { position: fixed; inset: 0; z-index: 500; pointer-events: none; animation: page-veil-clear 0.6s cubic-bezier(.16,1,.3,1) both; } nav .wordmark, nav .navlinks a, nav .coord { animation: fade-settle 0.6s ease both; } nav .navlinks a:nth-child(1){animation-delay:.04s} nav .navlinks a:nth-child(2){animation-delay:.08s} nav .navlinks a:nth-child(3){animation-delay:.12s} nav .navlinks a:nth-child(4){animation-delay:.16s} nav .navlinks a:nth-child(5){animation-delay:.2s} nav .coord{animation-delay:.24s} header.pg-head p.eyebrow{animation:fade-settle 0.6s ease .08s both;} header.pg-head p.sub{animation:fade-settle 0.7s ease .32s both;} .intro p.lede{animation:fade-settle 0.7s ease .1s both;} .meta-row{animation:fade-settle 0.7s ease .26s both;} main p.eyebrow{animation:fade-settle 0.6s ease .08s both;} a.mail{animation:fade-settle 0.7s ease .3s both;} .details{animation:fade-settle 0.7s ease .42s both;} .social{animation:fade-settle 0.7s ease .5s both;} /* ---------- texture ---------- Two layered passes: a fine sensor-grain (as before) and a coarser woven-canvas pass, closer to printed-on-fabric material than digital noise. The weave gets more present on solid ink/rust fields, the way a flat-printed poster shows more fibre in a solid colour than a photo. */ .grain{ position:fixed;inset:0;pointer-events:none;z-index:200;opacity:0.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .weave{ position:fixed;inset:0;pointer-events:none;z-index:201;opacity:0.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.045 0.09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); background-size:260px 260px; } /* genuine film-grain (fine fractalNoise, same recipe as the base .grain layer but louder) applied to every flat-colour section — deliberately excludes .hero now that it's a photo, not a solid colour */ header.pg-head::after, .cta::after, footer::after, .cat-rust::after, .cat-pink::after, .cat-canvas::after, .list::after, .intro::after, body.dark::after{ content:"";position:absolute;inset:0;pointer-events:none; opacity:0.28;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)'/%3E%3C/svg%3E"); background-size:180px 180px; } header.pg-head, .cta, footer, .cat-rust, .cat-pink, .cat-canvas, .list, .intro{position:relative;} body.dark::after{position:fixed;} /* custom crosshair cursor — auto-contrasts against anything beneath it, same difference-blend technique the nav already uses, so it can't land on the wrong colour regardless of what's under it */ .crosshair{position:fixed;width:22px;height:22px;pointer-events:none;z-index:600;transform:translate(-50%,-50%);transition:transform .12s ease, opacity .2s ease;mix-blend-mode:difference;} .crosshair::before,.crosshair::after{content:"";position:absolute;background:#fff;} .crosshair::before{width:100%;height:1px;top:50%;left:0;} .crosshair::after{height:100%;width:1px;left:50%;top:0;} .crosshair.on-link{transform:translate(-50%,-50%) scale(1.6);} @media (hover:none), (pointer:coarse){ body{cursor:auto;} .crosshair{display:none;} } /* accessibility: visible focus ring regardless of the custom cursor */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; border-radius:1px; } footer a:focus-visible{outline-color:var(--canvas);} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;} } /* ---------- nav ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:28px 40px;} .wordmark{font-family:'Archivo Expanded',sans-serif;font-weight:400;font-size:15px;letter-spacing:0.06em;color:var(--canvas);text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,0.45);} .wordmark img{height:15px;width:auto;margin-right:11px;vertical-align:-2px;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.45));} .wordmark sup{font-size:9px;opacity:0.7;} .navlinks{display:flex;gap:28px;font-size:12px;letter-spacing:0.08em;color:var(--canvas);text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,0.45);} .navlinks a{color:inherit;text-decoration:none;} .navlinks .active{border-bottom:1px solid var(--canvas);padding-bottom:2px;} .coord{color:var(--canvas);font-size:11px;letter-spacing:0.03em;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease;text-shadow:0 1px 6px rgba(0,0,0,0.45);} .nav-right{display:flex;align-items:center;gap:18px;} .lang-toggle{color:var(--canvas);font-size:11px;letter-spacing:0.03em;text-decoration:none;opacity:0.7;border-bottom:1px solid transparent;transition:opacity .2s ease, border-color .2s ease;text-shadow:0 1px 6px rgba(0,0,0,0.45);} .lang-toggle:hover{opacity:1;border-color:var(--canvas);} .coord:hover{border-color:var(--canvas);} .nav-toggle{display:none;background:none;border:none;color:var(--canvas);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;cursor:none;padding:6px 0;text-shadow:0 1px 6px rgba(0,0,0,0.45);} /* mobile dropdown menu — deliberately a sibling of