/* chrome.css: brings the older pages (resume, plugverse, privacy, terms, band, etc.)
   onto the v3 system. Loaded AFTER shell.css. The old faces are aliased to the
   brand faces, so every legacy rule renders in Druk Wide / Nimbus Sans. */

@font-face { font-family: "Anton"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Spectral"; src: url("/fonts/NimbusSans-Regular.woff2") format("woff2"); font-weight: 100 500; font-style: normal; }
@font-face { font-family: "Spectral"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; }
@font-face { font-family: "Fraunces"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Geist"; src: url("/fonts/NimbusSans-Regular.woff2") format("woff2"); font-weight: 100 500; font-style: normal; }
@font-face { font-family: "Geist"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 100 900; font-style: normal; }
@font-face { font-family: "Druk Wide"; src: url("/fonts/DrukWideBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Nimbus Sans"; src: url("/fonts/NimbusSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Nimbus Sans"; src: url("/fonts/NimbusSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; }

:root {
  --bg: #16130F; --bg-2: #1F1B16; --ink: #F4F1EA; --ink-2: #D9D5CD; --muted: #A8A29E;
  --rust: #F4F1EA; --crimson: #F4F1EA; --stage: #A8A29E; --sage: #A8A29E;
  --pastel-pink: #A8A29E; --pastel-cyan: #A8A29E; --pastel-lavender: #A8A29E; --cream: #F4F1EA;
  --v2-ease: cubic-bezier(.22, 1, .44, 1);
  --v2-gutter: clamp(16px, 2.2vw, 36px);
}
html.v2, html.v2 body { background: #16130F; }
html.v2 * { font-style: normal !important; font-variation-settings: normal !important; }
html.v2 body, html.v2 a, html.v2 button { cursor: auto !important; }
html.v2 a, html.v2 button, html.v2 [role="button"] { cursor: pointer !important; }
html.v2 .cursor, html.v2 .loader, html.v2 .transition-veil, html.v2 .nav-progress-track, html.v2 .mob-menu-btn, html.v2 .mob-nav-overlay, html.v2 .scene-canvas { display: none !important; }
html.v2 .accent { color: inherit !important; }
html.v2 ::selection { background: #F4F1EA; color: #16130F; }
html.v2 .poster, html.v2 .section-poster { letter-spacing: -.02em; text-transform: uppercase; }
html.v2 h1, html.v2 h1 *, html.v2 .poster, html.v2 .poster * {
  font-family: "Druk Wide", "Nimbus Sans", sans-serif !important; font-weight: 700 !important; text-transform: uppercase;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: #F4F1EA; text-shadow: none !important;
}
html.v2 h1, html.v2 .poster { font-size: clamp(30px, 5.4vw, 92px) !important; line-height: .9 !important; letter-spacing: -.02em !important; }
html.v2 h2 *, html.v2 .section-poster * { font-weight: inherit !important; font-family: inherit !important; }
html.v2 .eyebrow { letter-spacing: .06em !important; color: #A8A29E; }
html.v2 h1, html.v2 h2 { text-wrap: balance; }

/* shared v3 header */
.v2nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 18px var(--v2-gutter); color: #F4F1EA; pointer-events: none;
  font-family: "Nimbus Sans", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.v2nav::before { content: ""; position: absolute; inset: 0 0 -28px; background: linear-gradient(to bottom, rgba(10,10,10,.72), rgba(10,10,10,0)); z-index: -1; }
.v2nav > * { pointer-events: auto; }
.v2nav a { color: inherit; text-decoration: none; }
.v2nav .mark { font-family: "Druk Wide", sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1; }
.v2nav .where { color: #A8A29E; text-align: center; }
.v2nav .links { display: flex; gap: 22px; justify-content: flex-end; }
.v2nav .roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.v2nav .roll > span { display: block; transition: transform .7s var(--v2-ease); }
.v2nav .roll > span + span { position: absolute; left: 0; top: 100%; }
.v2nav a:hover .roll > span { transform: translateY(-100%); }
@media (max-width: 700px) { .v2nav { grid-template-columns: 1fr auto; } .v2nav .where { display: none; } .v2nav .links { gap: 16px; } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 1.05s cubic-bezier(.22, 1, .44, 1) both v2-out; }
::view-transition-new(root) { animation: 1.05s cubic-bezier(.22, 1, .44, 1) both v2-in; }
@keyframes v2-out { to { transform: translateY(-9vh) scale(.97); } }
@keyframes v2-in { from { clip-path: inset(100% 0 0 0); transform: translateY(14vh); } to { clip-path: inset(0 0 0 0); transform: none; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .v2nav .roll > span { transition: none; } }

/* one static grain texture only: the old per-page and per-photo noise layers are off */
html.v2 .grain::before, html.v2 .photo-grain, html.v2 .card-grain { display: none !important; }
html.v2 body::after { content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background: url("/assets/grain.png") repeat; background-size: 256px 256px; }