@font-face {
  font-family: NYCreatis;
  src: url('../fonts/nycreatis.woff2') format('woff2'), url('../fonts/nycreatis.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #212121;
  --accent: #fffade;
  --ledge: #ffd948;
  --modal: #ffd42d;
  --foreground: #212121;
  --gradient: linear-gradient(to bottom, #ff8c00, #ffd52d);
  --ease: cubic-bezier(.52, .01, .16, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
html { scrollbar-gutter: stable; }
html.is-transitioning { scroll-behavior: auto; }
body { margin: 0; min-height: 100%; font-family: NYCreatis, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center; color: var(--foreground); background: #fff; }
body[data-state='who'] { --accent: #96ffca; --ledge: #214fc6; --modal: #1544c0; --foreground: #fff; --gradient: linear-gradient(to bottom, #082a80, #1543c0); }
body[data-state='what'] { --accent: #fff55a; --ledge: rgba(255, 255, 255, .08); --modal: #f86449; --foreground: #fff; --gradient: linear-gradient(to bottom, #c92e12, #f86349); }
body[data-state='work'] { --accent: #fbe10f; --ledge: #5817b3; --modal: #5210ac; --foreground: #fff; --gradient: linear-gradient(to bottom, #3e0c85, #6d1fdb); }
body.overlay-open { overflow: hidden; }
body.is-navigating { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex='-1']:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
button { border: 0; background: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1 { font-size: 6.5vw; line-height: .9; letter-spacing: -.03em; }
h2 { font-size: 42px; line-height: 1.2; letter-spacing: -.04em; margin-bottom: .5em; }
h3 { position: relative; font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .12em; padding-bottom: 2.2em; margin-bottom: 3.6em; }
h3::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 24px; height: 7px; margin-left: -12px; transform: skewY(-16deg); background: var(--accent); }
h4 { font-size: 24px; line-height: 1.25; letter-spacing: -.03em; margin-bottom: .5em; }
p { font-size: 17px; line-height: 1.7; letter-spacing: -.02em; }
p + p { margin-top: 1.1em; }
p a { display: inline; border-bottom: 1px solid currentColor; }
::selection { color: #212121; background: var(--accent); }
.page-bg { position: fixed; inset: 0; z-index: -2; background: var(--gradient); }
.page-bg { overflow: hidden; }
.page-bg-panel { position: absolute; inset: 0; transition: transform 1.25s var(--ease) .3s; }
.page-bg-panel[data-panel-state='intro'] { background: linear-gradient(to bottom, #ff8c00, #ffd52d); }
.page-bg-panel[data-panel-state='who'] { background: linear-gradient(to bottom, #082a80, #1543c0); }
.page-bg-panel[data-panel-state='what'] { background: linear-gradient(to bottom, #c92e12, #f86349); }
.page-bg-panel[data-panel-state='work'] { background: linear-gradient(to bottom, #3e0c85, #6d1fdb); }
.page-bg-panel.is-current { transform: translateX(0); }
.page-bg-panel.is-before { transform: translateX(-100%); }
.page-bg-panel.is-after { transform: translateX(100%); }
.page-content { position: relative; z-index: 1; overflow: clip; }
.page-content { opacity: 1; transform: translateY(0); transition: opacity .4s linear, transform .65s var(--ease); }
.page-content.is-leaving, .page-content.is-entering { opacity: 0; transform: translateY(12px); pointer-events: none; }
.masterhead { position: relative; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; }
.masterhead h1 { color: var(--accent); font-size: 22vw; letter-spacing: -.03em; }
.masterhead .intro-title { position: absolute; top: 50%; left: 50%; width: 776px; height: 357px; margin: -210px 0 0 -388px; transform: scale(.73); background: url('../img/intro-h1.svg') no-repeat center / 90%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 12px 18px; background: #fff; color: #212121; z-index: 500; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
body:not([data-state='intro']) .scene { z-index: 2; }
.scene.is-away { opacity: 0; transform: scale(.95); }
.figure-anchor { position: absolute; top: 50%; left: 50%; perspective: 1000px; }
.figure-mover { position: absolute; top: 0; left: 0; perspective: 500px; transform-origin: center; transition: transform 1.85s var(--ease), opacity .01s 1s; }
.figure-mover.is-current { transform: translateX(0) rotateY(0) scale(1) translateY(0); opacity: 1; transition: transform 1.85s var(--ease), opacity .01s; }
.figure-mover.is-before { transform: translateX(-140vw) rotateY(40deg) scale(1.3) translateY(30%); opacity: 0; }
.figure-mover.is-after { transform: translateX(140vw) rotateY(-40deg) scale(1.3) translateY(30%); opacity: 0; }
.transition-mark { position: fixed; top: 50%; left: 50%; width: 60px; height: 44px; margin: -22px 0 0 -30px; background: url('../img/logo-w.svg') no-repeat center / contain; z-index: 150; pointer-events: none; opacity: 0; transition: opacity .2s; }
.is-navigating .transition-mark { opacity: 1; transition-delay: .35s; }
body[data-state='intro'] .transition-mark { background-image: url('../img/logo-bl.svg'); }
.figure { width: 1400px; height: 950px; margin: -475px 0 0 -700px; background: no-repeat; background-position: var(--figure-position, center); background-size: var(--figure-size, contain); transform: translate3d(var(--figure-x, 0px), var(--figure-y, 0px), 0) rotateY(var(--figure-rotate, 0deg)); will-change: transform; backface-visibility: hidden; }
[data-figure-state='intro'] .figure { --figure-size: auto 63.5%; --figure-position: center 53%; background-image: url('../img/figures/yuri-intro.png'); }
[data-figure-state='who'] .figure { --figure-size: auto 64.6%; --figure-position: 58.6% 55.5%; background-image: url('../img/figures/yuri-me.png'); }
[data-figure-state='what'] .figure { --figure-size: auto 55%; --figure-position: 45% 59%; background-image: url('../img/figures/yuri-now.png'); }
[data-figure-state='work'] .figure { --figure-size: auto 55%; --figure-position: 46.5% 69.5%; background-image: url('../img/figures/yuri-links.png'); }
.scroll-cue { position: absolute; bottom: 3%; left: 50%; width: 50px; height: 44px; margin-left: -25px; display: grid; place-items: center; z-index: 2; pointer-events: auto; }
.chevron { display: block; width: 13px; height: 13px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.scroll-cue .chevron { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } }
.text-section { position: relative; padding: 1vw 0 20vw; }
.text-section > .content { position: relative; width: 60.5%; margin: 0 auto; }
.first-section { padding-top: 1vw; }
.ledge-section { padding: 8vw 0 14vw; isolation: isolate; }
.ledge-section::before { content: ''; position: absolute; z-index: -1; top: 0; left: 50%; width: 300vw; height: 300vw; margin-left: -150vw; transform-origin: 50% 0; transform: rotate(-16deg); background: var(--ledge); pointer-events: none; }
.intro-ledge::before { transform: rotate(27deg); }
.intro-ledge h2 { color: var(--accent); font-size: 6.5vw; line-height: .95; letter-spacing: -.03em; margin-bottom: .45em; }
.inline-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 32px; margin-top: 36px; }
.inline-links a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 0; border-bottom: 1px solid currentColor; }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vw; text-align: left; margin-top: 5vw; }
.columns h4 { font-size: 20px; letter-spacing: 0; text-transform: uppercase; }
.white-section { background: #e7eeed; color: var(--ink); padding: 16vw 0 14vw; }
.white-section h3 { --accent: var(--modal); }
.profile-section { position: relative; padding: 20vw 0 18vw; }
.profile-section .content { width: 33%; margin: 0 0 0 15%; text-align: left; }
.profile-section h2 { font-size: 6.5vw; line-height: .95; color: #1544c0; margin-bottom: .5em; }
.profile-parts { background: url('../img/figures/yuri-intro.png') no-repeat center / contain; position: absolute; right: 6%; top: 50%; width: 42vw; height: 42vw; margin-top: -21vw; }
.meet-section { padding-top: 8vw; padding-bottom: 20vw; }
.meet-section h2 { color: var(--accent); font-size: 6.5vw; }
.link-list { margin: 4vw auto 0; text-align: left; max-width: 700px; }
.link-list a { position: relative; display: block; padding: 30px 50px 30px 0; border-bottom: 1px solid rgba(33, 33, 33, .15); }
.link-list a::after { content: '↗'; position: absolute; right: 0; top: 30px; font-size: 26px; transition: transform .3s var(--ease); }
.link-list a:hover::after { transform: translate(4px, -4px); }
.link-list span { display: block; font-size: 28px; letter-spacing: -.03em; margin-bottom: 6px; }
.link-list small { font-size: 15px; line-height: 1.5; }
.site-footer { position: relative; height: 500px; overflow: hidden; background: #000; color: #212121; }
.site-footer::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 175px; height: 450px; margin-left: -90px; background: url('../img/figures/tinified/footer-rock.png') no-repeat center / 100%; }
.footer-wordmark { position: absolute; top: 50%; left: 50%; width: 660px; height: 330px; margin: -200px 0 0 -330px; background: url('../img/intro-h1.svg') no-repeat center / 80%; }
.footer-line { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 2; background: #fff; padding: 16px 7%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.footer-line a { display: inline-block; padding: 6px 0; }
.footer-line ul { display: flex; gap: 22px; }
.page-404 { min-height: 80vh; padding: 25vh 8vw 12vh; }
.page-404 h1 { color: var(--ink); margin-bottom: 24px; }
.privacy-copy { text-align: left; }
.privacy-copy h2 { margin: 2em 0 .5em; font-size: 26px; }
.utility-spacer { height: 140px; }

@media (min-width: 1400px) { .masterhead h1 { font-size: 17em; } }
@media (min-width: 1600px) { h1, .intro-ledge h2, .profile-section h2, .meet-section h2 { font-size: 6em; } }
@media (max-width: 1400px) { .figure { width: 100vw; height: 67.85714vw; margin: -33.92857vw 0 0 -50vw; } }
@media (max-width: 1200px) { h2 { font-size: 40px; } .masterhead .intro-title { transform: scale(.62); } }
@media (max-width: 1000px) { .masterhead .intro-title { transform: scale(.45); } }
@media (max-width: 800px) {
  h2 { font-size: 24px; }
  h3 { font-size: 12px; }
  h4 { font-size: 20px; }
  p { font-size: 15px; }
  .text-section { padding-bottom: 30vw; }
  .text-section > .content { width: 85%; }
  .ledge-section { padding-top: 12vw; }
  .intro-ledge h2, .meet-section h2 { font-size: 14vw; }
  .white-section { padding-top: 22vw; padding-bottom: 22vw; }
  .columns { gap: 32px; margin-top: 12vw; }
  .profile-section { padding: 24vw 0 310px; }
  .profile-section .content { width: 80%; margin: 0 auto; text-align: center; }
  .profile-section h2 { font-size: 18vw; }
  .profile-parts { top: auto; bottom: 0; left: 0; width: 100%; height: 300px; margin: 0; background: url('../img/figures/yuri-intro.png') no-repeat bottom center / contain; }
  .site-footer { height: auto; min-height: 90px; background: #fff; }
  .site-footer::after, .footer-wordmark { display: none; }
  .footer-line { position: relative; padding: 24px 7.5%; }
  .link-list a { padding: 25px 36px 25px 0; }
  .link-list a::after { top: 25px; }
  .link-list span { font-size: 24px; overflow-wrap: anywhere; }
}

@media (max-width: 700px) { .figure { width: 150vw; height: 101.78571vw; margin: -50.89286vw 0 0 -75vw; } }
@media (max-width: 600px) { .masterhead .intro-title { transform: scale(.35); } .columns { grid-template-columns: 1fr; text-align: center; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .figure { transform: none; }
}