@font-face {
  font-family: "Suisse Intl";
  src: url("./suisse-intl-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apparel";
  src: url("./assets/apparel-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root { color: #000; background: #fff; font-family: "Suisse Intl", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p, h1 { margin: 0; }

.page-shell { position: relative; width: 1440px; height: 1925px; margin: 0 auto; overflow: hidden; background: #fff; }
.hero { position: relative; z-index: 1; width: 1440px; height: 981px; overflow: hidden; }
.grid { position: absolute; z-index: 0; pointer-events: none; }
.grid-desktop { left: 41px; top: 0; }
.grid-mobile { display: none; }

.site-header { position: absolute; z-index: 2; left: 40px; top: 35px; width: 1360px; height: 24px; font: 16px/1 "Apparel", serif; letter-spacing: -.48px; }
.header-main { width: 100%; height: 24px; display: flex; justify-content: space-between; align-items: center; }
.local-time { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.highlight { background: #fff51d; }
.header-link { white-space: pre; }
.talk-link { padding: 4px; white-space: nowrap; }
.header-rule, .mobile-nav { display: none; }

.name-wrap { position: absolute; left: 483px; top: 180px; width: 840px; height: 296px; }
.name { position: relative; z-index: 1; display: flex; flex-direction: column; width: 840px; font: 400 160px/1 "Suisse Intl", sans-serif; letter-spacing: -3.2px; white-space: nowrap; }
.name span:first-child { margin-bottom: -24px; }
.name-shadows { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.blur-mark { position: absolute; width: 117.347px; height: 126.067px; display: flex; align-items: center; justify-content: center; }
.blur-mark-inner { position: relative; width: 77.231px; height: 100.994px; transform: rotate(29.96deg); flex: none; }
.blur-lens { position: absolute; left: -8.6px; top: -8.6px; width: 94.4307px; height: 118.194px; mask-image: radial-gradient(ellipse 38.6153px 50.497px at 50% 50%, #000 55%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 38.6153px 50.497px at 50% 50%, #000 55%, transparent 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: rgba(255,255,255,.01); }
.blur-mark-inner::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.01); filter: blur(4.3px); pointer-events: none; }
.blur-mark img { position: absolute; left: -11.14%; top: -8.52%; display: block; }
.top-blur { position: absolute; left: 269px; top: 157px; width: 268px; height: 23px; background: rgba(255,255,255,.01); backdrop-filter: blur(3px); filter: blur(4.3px); pointer-events: none; }

.role { position: absolute; font: 400 16px/1 "Suisse Intl", sans-serif; letter-spacing: -.48px; }
.role-desktop { top: 447px; right: 1301px; width: 98px; text-align: right; }
.role-mobile { display: none; }
.contact { position: absolute; left: 156px; top: 235px; width: 198px; font: 400 16px/1 "Suisse Intl", sans-serif; letter-spacing: -.48px; }
.telegram { display: flex; align-items: center; gap: 8px; height: 16px; }
.telegram img { display: block; }
.email { display: block; width: 198px; height: 17px; border-bottom: 1px solid #000; white-space: nowrap; }

.project-rail { position: absolute; left: 40px; top: 627px; display: flex; gap: 16px; width: max-content; }
.project-card { display: flex; flex: none; flex-direction: column; gap: 16px; width: 213px; }
.project-image { position: relative; width: 213px; height: 150px; overflow: hidden; background: #d9d9d9; }
.project-image .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-overlay-first { position: absolute; top: 4px; left: 0; width: 213px; height: 142px; display: flex; align-items: center; justify-content: center; }
.project-overlay-first > div { position: relative; flex: none; width: 142px; height: 213px; transform: rotate(-90deg); }
.project-overlay-first img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-image-tall { position: absolute; left: 0; top: -1.83%; width: 100%; height: 191.65%; }
.project-label { height: 16px; font: 400 16px/1 "Suisse Intl", sans-serif; letter-spacing: -.48px; white-space: nowrap; }
.label-mobile, .mobile-card-layer { display: none; }

.about-block { position: relative; z-index: 1; width: 1440px; height: 944px; }
.about-photo { position: absolute; left: 1px; top: 133px; width: 728px; height: 811px; overflow: hidden; }
.about-photo img { position: absolute; display: block; width: 100%; max-width: none; }
.about-photo-base { left: .05%; top: .01%; height: 119.69%; }
.about-photo-top { left: 0; top: 0; height: 119.96%; }
.about-headline { position: absolute; z-index: 1; left: 40px; top: 0; width: 1360px; height: 216px; font: 400 0/0 "Suisse Intl", sans-serif; letter-spacing: -1.44px; overflow-wrap: break-word; }
.about-headline span { font-size: 72px; line-height: 69.25px; }
.about-headline .serif { font-family: "Apparel", serif; }
.about-summary { position: absolute; left: 843px; top: 467px; width: 442px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.summary-text { width: 100%; font: 400 20px/1.2 "Suisse Intl", sans-serif; letter-spacing: -.6px; text-align: center; overflow-wrap: break-word; }
.summary-mobile { display: none; }
.about-talk { display: flex; align-items: center; justify-content: center; width: 74px; height: 28px; padding: 4px; background: #fff51d; font: 400 20px/1 "Apparel", serif; letter-spacing: -.6px; white-space: nowrap; }

@media (max-width: 767px) {
  .page-shell { width: 390px; height: 1537px; margin: 0; }
  .hero { width: 390px; height: 666px; }
  .grid-desktop { display: none; }
  .grid-mobile { display: block; left: 16px; top: -2px; }

  .site-header { left: 16px; top: 48px; width: 358px; height: 72px; }
  .header-main { height: 24px; }
  .desktop-link { display: none; }
  .header-rule { display: block; position: absolute; left: 0; top: 40px; }
  .mobile-nav { display: flex; position: absolute; left: 0; top: 56px; width: 358px; justify-content: space-between; }

  .name-wrap { left: 16px; top: 173px; width: 358px; height: 126px; }
  .name { width: 358px; font-size: 68px; letter-spacing: -1.36px; }
  .name span:first-child { margin-bottom: -10.229px; }
  .blur-mark { width: 49.698px; height: 54.101px; }
  .blur-mark-inner { width: 32px; height: 44px; }
  .blur-lens { left: -3.6654px; top: -3.6654px; width: 39.3308px; height: 51.3308px; mask-image: radial-gradient(ellipse 16px 22px at 50% 50%, #000 55%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 16px 22px at 50% 50%, #000 55%, transparent 100%); backdrop-filter: blur(1.28px); -webkit-backdrop-filter: blur(1.28px); }
  .blur-mark-inner::after { filter: blur(1.83271px); }
  .blur-mark img { left: -11.45%; top: -8.33%; }
  .top-blur { display: none; }

  .role-desktop { display: none; }
  .role-mobile { display: block; left: 16px; top: 323px; width: 198px; opacity: .5; }
  .contact { left: 16px; top: 347px; }
  .telegram { margin-bottom: 8px; }

  .project-rail { left: 16px; top: 420px; }
  .project-overlay-first, .desktop-card-layer, .label-desktop { display: none; }
  .mobile-card-layer, .label-mobile { display: block; }

  .about-block { width: 390px; height: 871px; }
  .about-photo { left: 0; top: 92px; width: 390px; height: 435px; }
  .about-headline { left: 16px; top: 0; width: 358px; height: 160px; letter-spacing: -.64px; }
  .about-headline span { font-size: 32px; line-height: 30.75px; }
  .about-summary { left: 16.5px; top: 567px; width: 357px; gap: 27px; }
  .summary-desktop { display: none; }
  .summary-mobile { display: block; }
  .summary-text { font-size: 18px; letter-spacing: -.54px; }
  .about-talk { width: 357px; height: 48px; }
}