:root {
  --color--1: #d7b7d4;
  --color--2: #ef58f2;
  --color--3: #f3a3f1;
  --color--4: #eadfe8;
  --color--5: #e5d8e3;
  --color--6: #f8f4f7;
  --color--7: #261329;
  --color--8: #fbf7fa;
  --color--9: #754777;
  --color--7-rgb: 38, 19, 41;
  --base--background-color: #f8f4f7;
  --base--text-color: #261329;
  --outline-color: #ef58f2;
}

html, body,
main.page-main > .page-content {
  background-color: var(--color--6);
}

::selection {
  color: #160719;
  background: var(--color--3);
}

.portfolio-logo {
  align-items: center;
  color: var(--header-inline-logo-fill);
  display: inline-flex;
  gap: 10px;
  height: 28px;
  text-decoration: none;
  transition: color .5s var(--transition-ease--1);
}

.logo-image {
  display: block;
  flex: 0 0 auto;
  filter: none;
  height: 27px;
  object-fit: contain;
  object-position: center;
  position: relative;
  transition: filter .35s var(--transition-ease--1), transform .35s var(--transition-ease--1);
  width: 27px;
  z-index: 1;
}

.logo-word {
  font-size: 21px;
  letter-spacing: -.03em;
  line-height: 1;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

html.has-scrolled .c-header .portfolio-logo {
  color: var(--color--7) !important;
}

html.has-scrolled .c-header .logo-image {
  filter: invert(1);
}

.header-tools {
  align-items: center;
  border-left: 1px solid rgba(38, 19, 41, .12);
  display: inline-flex;
  gap: 4px;
  padding-left: 8px;
}

.portfolio-control {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(38, 19, 41, .12);
  border-radius: 9px;
  color: #261329;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--family--2);
  font-size: 12px;
  height: 36px;
  justify-content: center;
  min-width: 36px;
  padding: 0 9px;
  text-transform: uppercase;
  transition: background-color .35s var(--transition-ease--1), border-color .35s var(--transition-ease--1), color .35s var(--transition-ease--1), transform .35s var(--transition-ease--1);
}

.theme-control {
  font-family: var(--family--1);
  font-size: 18px;
  padding: 0;
}

.portfolio-control:hover,
.portfolio-control:focus-visible {
  background: var(--color--3);
  border-color: var(--color--3);
  color: #261329;
  transform: translateY(-1px);
}

.popup-tools {
  display: flex;
  gap: 8px;
}

.popup-tools .portfolio-control {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  height: 42px;
  min-width: 48px;
}

.popup-tools .theme-control {
  gap: 8px;
  padding: 0 14px;
}

.popup-tools .control-caption {
  font-family: var(--family--2);
  font-size: 11px;
}

.c-header .header_popup .popup_cta {
  flex-direction: column;
  gap: 20px;
}

.c-header .header_inline .cta {
  --button-background: #261329;
  --button-background-hover: #ef58f2;
  --button-text-color: #fff;
  --button-text-color-hover: #261329;
}

.c-header .header_popup {
  background: #261329;
}

.c-header .header_popup .popup_background {
  filter: hue-rotate(82deg) saturate(1.9) brightness(.72);
}

.c-header .header_popup .cta_btn::after {
  background-color: var(--color--2);
}

.footer-actions-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.c-footer .footer-actions-row .content_btn {
  margin-top: 0;
}

.portfolio-like {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

.heart-btn {
  align-items: center;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  position: relative;
  transition: background-color .35s var(--transition-ease--1), border-color .35s var(--transition-ease--1), transform .35s var(--transition-ease--1);
  width: 48px;
}

.heart-btn::after {
  background: var(--color--2);
  border-radius: inherit;
  content: "";
  inset: 5px;
  opacity: 0;
  position: absolute;
  transform: scale(.45);
  transition: opacity .35s var(--transition-ease--1), transform .5s var(--transition-ease--1);
}

.heart-btn svg {
  position: relative;
  z-index: 1;
}

.heart-btn svg path {
  fill: transparent;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: fill .35s var(--transition-ease--1), stroke .35s var(--transition-ease--1);
}

.heart-btn:hover,
.heart-btn:focus-visible {
  border-color: var(--color--3);
  transform: translateY(-2px) rotate(-3deg);
}

.heart-btn.liked {
  border-color: var(--color--2);
  color: #261329;
}

.heart-btn.liked::after {
  opacity: 1;
  transform: scale(1);
}

.heart-btn.liked svg path {
  fill: currentColor;
  stroke: currentColor;
}

.heart-btn.is-popping {
  animation: heart-pop .48s var(--transition-ease--1);
}

.likes-count {
  color: rgba(255, 255, 255, .72);
  font-family: var(--family--2);
  font-size: 12px;
  min-width: 2ch;
}

@keyframes heart-pop {
  0%, 100% { transform: scale(1); }
  48% { transform: scale(1.18) rotate(-7deg); }
}

body.theme-dark {
  --color--1: #6e526e;
  --color--4: #28172c;
  --color--5: #302034;
  --color--6: #160a19;
  --color--7: #f8f4f7;
  --color--8: #211025;
  --color--9: #d3a6d2;
  --color--7-rgb: 248, 244, 247;
  --base--background-color: #160a19;
  --base--text-color: #f8f4f7;
  --outline-color: #f3a3f1;
}

body,
main.page-main > .page-content,
.c-hgroup,
.c-marquee-text .marquee,
.c-posts-grid {
  transition: background-color .6s var(--transition-ease--1), color .6s var(--transition-ease--1);
}

body.theme-dark,
body.theme-dark main.page-main > .page-content {
  background-color: #160a19;
}

body.theme-dark .c-hgroup {
  --block-color-background: #160a19 !important;
}

body.theme-dark .portfolio-projects {
  --block-color-background: #241329 !important;
}

body.theme-dark .portfolio-projects .featured_item .item_background {
  background-color: #301a35;
}

body.theme-dark .portfolio-projects .featured_item {
  --post-background-color: #301a35;
}

body.theme-dark .portfolio-projects .featured_item .item_btn .btn_icon svg path {
  fill: var(--color--3);
}

body.theme-dark .c-hgroup .label {
  --background-color: rgba(255, 255, 255, .08) !important;
  --color: #f8f4f7 !important;
  border: 1px solid rgba(255, 255, 255, .1);
}

body.theme-dark .c-marquee-text .marquee {
  background-color: #160a19;
}

body.theme-dark .c-marquee-text .marquee_item_text,
body.theme-dark .c-media-wi-multicol,
body.theme-dark .experience-section .item_title {
  color: #f8f4f7;
}

body.theme-dark .muted-heading {
  color: #ca9fca;
}

body.theme-dark .u-btn--1 {
  --button-text-background: #f8f4f7;
  --button-text-background-hover: #f3a3f1;
  --button-text-color: #261329;
  --button-text-color-hover: #261329;
  --button-blob-background: #f3a3f1;
  --button-blob-background-hover: #f8f4f7;
}

body.theme-dark .c-usp-cards .cards_item:nth-child(1),
body.theme-dark .c-usp-cards .cards_item:nth-child(3) {
  --card-color-text: 38, 19, 41;
}

body.theme-dark .c-header .header_inline .item_btn {
  --button-text-color: #261329;
  --button-text-color-hover: #261329;
}

html.has-scrolled body.theme-dark .c-header .portfolio-logo {
  color: #261329 !important;
}

.c-hero-xl .background_canvas::after {
  background: linear-gradient(90deg, rgba(15, 2, 18, .2), rgba(15, 2, 18, 0) 55%, rgba(15, 2, 18, .16));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.c-hero-xl .background_canvas video {
  filter: saturate(1.08) contrast(1.05) brightness(.88);
}

.c-hero-xl .scroller_label::before,
.u-ts--1::before {
  background-color: var(--color--2) !important;
}

.intro-section {
  padding-bottom: clamp(72px, 8vw, 135px) !important;
  padding-top: clamp(80px, 10vw, 160px) !important;
}

.muted-heading {
  color: #b99fb8;
}

.c-usp-cards .cards_item:nth-child(1) .card_icon,
.c-usp-cards .cards_item:nth-child(3) .card_icon {
  filter: hue-rotate(83deg) saturate(1.6);
}

.experience-section .block_inner {
  padding-bottom: clamp(80px, 9vw, 140px);
  padding-top: clamp(88px, 10vw, 150px);
}

.experience-section .block_content {
  row-gap: clamp(48px, 6vw, 84px);
}

.experience-section .accordion_text {
  max-width: 760px;
}

.experience-section .accordion_text strong {
  font-weight: 600;
}

.c-marquee-text .marquee {
  background-color: var(--color--6);
}

.c-marquee-text .marquee_item_text {
  color: var(--color--7);
}

.section-label-only {
  padding-bottom: 55px !important;
  padding-top: 0 !important;
}

.c-media-wi-multicol .image {
  background: #160719;
}

.c-media-wi-multicol .image_el {
  filter: saturate(.74) contrast(1.08);
  object-position: center 35%;
}

.portfolio-projects .featured_item .item_image video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.portfolio-projects .featured_item .item_image::after {
  background: linear-gradient(135deg, rgba(239, 88, 242, .08), rgba(17, 2, 19, .2));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.portfolio-projects .featured_item .item_btn {
  background-image: none !important;
}

.portfolio-projects .featured_item .featured-mask {
  height: 100%;
  pointer-events: none;
  width: 100%;
  z-index: 0;
}

.portfolio-projects .featured_item .featured-mask path {
  fill: var(--post-background-color);
}

.portfolio-projects .featured_item .btn_el {
  z-index: 2;
}

.portfolio-projects .posts_item:nth-child(1) { --post-accent: #f3a3f1; }
.portfolio-projects .posts_item:nth-child(2) { --post-accent: #d7b7d4; }
.portfolio-projects .posts_item:nth-child(3) { --post-accent: #ef58f2; }
.portfolio-projects .posts_item:nth-child(4) { --post-accent: #754777; }

.portfolio-projects .posts_item .item_background {
  background: var(--post-accent, var(--color--3));
}

.portfolio-projects .posts_item {
  --post-background-color: var(--post-accent);
  --button-blob-background: var(--color--3);
  --button-blob-background-hover: var(--color--7);
}

.portfolio-projects .posts_item .item_btn .btn_icon svg path {
  fill: var(--color--3);
}

.portfolio-projects .posts_item .btn_bg path {
  fill: var(--post-accent);
}

.portfolio-projects .posts_item:nth-child(1),
.portfolio-projects .posts_item:nth-child(2),
.portfolio-projects .posts_item:nth-child(3) {
  color: var(--color--7) !important;
}

.portfolio-projects .posts_item:nth-child(4) {
  color: #fff !important;
}

@media (min-width: 1025px) {
  .portfolio-projects .posts_item:nth-child(4) {
    grid-column: 1 / -1;
    min-height: 300px;
  }
}

.c-footer {
  background-color: #120514;
}

.c-footer .footer_background {
  filter: saturate(.85) brightness(.58) contrast(1.14);
  opacity: .72;
}

.c-footer .footer_background::after {
  background: linear-gradient(135deg, rgba(239, 88, 242, .62), rgba(70, 17, 85, .38));
  content: "";
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.footer-wordmark {
  align-items: center;
  color: #fff;
  display: flex !important;
  font-size: clamp(4.4rem, 15.2vw, 14.3rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .8;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .header-tools { display: none; }
  .logo-image { filter: invert(1); height: 25px; width: 25px; }
  .c-header[data-navigation-status="active"] .logo-image { filter: none; }
  .logo-word { font-size: 19px; }
  .experience-section .block_inner { padding-top: 80px; }
  .experience-section .block_list { margin-top: 10px; }
  .footer-wordmark { font-size: clamp(3.4rem, 15vw, 8rem); }
}

@media (max-width: 620px) {
  .c-hero-xl .hero_main .main_heading { max-width: 10ch; }
  .c-hero-xl .hero_scroller .main_item p { font-size: clamp(1.85rem, 8.5vw, 2.65rem); }
  .experience-section .list_item .item_inner { grid-template-columns: 1fr auto 40px; gap: 12px; }
  .experience-section .list_item .item_meta { font-size: 10px; }
  .footer-actions-row { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .c-hero-xl .background_canvas video { transform: none !important; }
}
