@font-face {
  font-family: "Montserrat Light";
  src: url("font/Montserrat-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat Bold";
  src: url("font/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --ink: #0b0b0b;
  --paper: #f1f0ec;
  --muted: #9d9c98;
  --line: rgba(241, 240, 236, .24);
  --sans: "Space Grotesk", sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
}

a { color: inherit; text-decoration: none; }

.site-shell { min-height: 100vh; overflow: hidden; }

.site-header {
  align-items: center;
  background: var(--ink);
  border-bottom: 1px solid rgba(241, 240, 236, .24);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 26px 4.5vw;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
}

.brand { align-items: center; display: flex; font-family: "Montserrat Bold", var(--sans); font-size: 15px; font-weight: 700; gap: 11px; letter-spacing: .07em; }
.brand img { border-radius: 50%; filter: grayscale(1); height: 35px; object-fit: cover; outline: 1px solid var(--paper); outline-offset: 3px; width: 35px; }
.brand-dot, h1 span { color: #c9c8c4; }
.main-nav { font-family: "Montserrat Bold", var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.explore-menu { position: relative; }
.explore-menu summary { align-items: center; cursor: pointer; display: flex; gap: 12px; list-style: none; padding: 8px 0; }
.explore-menu summary::-webkit-details-marker { display: none; }
.dropdown-icon { filter: invert(1); height: 14px; object-fit: contain; transition: transform .25s ease; width: 22px; }
.explore-menu[open] .dropdown-icon { transform: rotate(180deg); }
.menu-panel { background: var(--paper); color: var(--ink); display: grid; gap: 14px; min-width: 240px; padding: 22px; position: absolute; right: 0; top: 40px; }
.menu-group { display: grid; gap: 9px; grid-template-columns: 1fr; }
.menu-group summary { align-items: center; cursor: pointer; display: flex; font-size: 12px; justify-content: space-between; letter-spacing: .15em; list-style: none; margin: 0 0 4px; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-dropdown-icon { height: 10px; opacity: .75; transform: rotate(-45deg); transition: transform .25s ease; width: 16px; }
.menu-group[open] .menu-dropdown-icon { transform: rotate(135deg); }
.menu-group a { display: block; font-family: "Montserrat Light", var(--sans); font-size: 14px; font-weight: 300; letter-spacing: 0; padding: 5px 7px; transition: background-color .2s ease, color .2s ease; }
.menu-group a:hover { background: rgba(11, 11, 11, .1); color: #55534f; }
.tutorial-coming-soon { font-size: 10px; font-style: italic; }
.menu-group a.menu-social-link { align-items: center; display: flex; gap: 9px; }
.menu-social-icon svg { display: block; height: 16px; width: 16px; }
.tiktok-icon svg { fill: currentColor; }
.instagram-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.instagram-icon .icon-dot { fill: currentColor; stroke: none; }
.contact-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.email-address { font-size: 12px; overflow-wrap: anywhere; }

.hero { align-items: center; display: flex; justify-content: center; min-height: 680px; overflow: hidden; position: relative; }
.hero-wash { background: var(--ink); inset: 0; position: absolute; z-index: 0; }
.hero-wash::after { background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.035) 4px); content: ""; inset: 0; position: absolute; }
.hero-gallery { inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.hero-gallery::after { display: none; }
.hero-circle { border-radius: 50%; height: min(96vw, 980px); overflow: hidden; position: absolute; right: -12%; top: 60%; transform: translateY(-50%); width: min(96vw, 980px); }
.hero-gallery-image { filter: grayscale(1) brightness(.78); height: 100%; inset: 0; object-fit: cover; object-position: center 22%; opacity: 0; position: absolute; transform: scale(1.03); transition: opacity 1.4s ease, transform 6s ease; width: 100%; }
.hero-gallery-image.is-active { opacity: .58; transform: scale(1); }
.hero-content { align-items: center; display: flex; flex-direction: column; padding: 110px 20px 48px; position: relative; text-align: center; z-index: 1; }
.hero-intro { align-items: flex-start; margin-left: 9vw; margin-right: auto; max-width: 460px; text-align: left; }
.intro-title { font-family: "Montserrat Bold", var(--sans); font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: .02em; line-height: 1.1; margin: 0 0 22px; }
.eyebrow, .hero-index, .scroll-cue, .site-footer { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; }
.eyebrow { color: #bab9b5; margin: 0 0 27px; }
.profile-frame { border: 1px solid rgba(241,240,236,.85); border-radius: 50%; padding: 8px; }
.profile-frame img { border-radius: 50%; display: block; filter: grayscale(1) contrast(1.15); height: clamp(190px, 26vw, 285px); object-fit: cover; width: clamp(190px, 26vw, 285px); }
h1 { font-family: "Montserrat Bold", var(--sans); font-size: clamp(52px, 10vw, 130px); font-weight: 700; letter-spacing: -.07em; line-height: .9; margin: 30px 0 20px; }
.hero-copy { color: #d1d0cc; font-family: "Montserrat Light", var(--sans); font-size: 17px; font-weight: 300; line-height: 1.65; margin: 0; }
.discover-button { background: transparent; border: 1px solid rgba(241,240,236,.85); color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; margin-top: 32px; padding: 14px 24px; transition: background-color .2s ease, color .2s ease; }
.discover-button:hover, .discover-button:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.scroll-cue { align-items: center; border-top: 1px solid var(--line); color: #bbb9b5; display: flex; gap: 24px; margin-top: 48px; padding-top: 15px; }
.scroll-cue b { color: var(--paper); font-size: 19px; font-weight: 400; }
.hero-index { bottom: 33px; color: #a6a5a0; position: absolute; right: 4.5vw; z-index: 1; }

.community { display: grid; grid-template-columns: repeat(3, 1fr); }
.social-panel { align-items: center; background: var(--ink); border-top: 1px solid var(--line); color: var(--paper); display: flex; justify-content: space-between; min-height: 210px; padding: 38px 7vw; position: relative; transition: background-color .2s ease, color .2s ease, padding .25s ease; }
.social-panel:hover { background: var(--paper); color: var(--ink); padding-left: calc(7vw + 9px); padding-right: calc(7vw - 9px); }
.social-details { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; padding-right: 42px; }
.social-icon { display: block; }
.social-icon svg { fill: currentColor; height: 27px; stroke: none; width: 27px; }
.social-icon img { display: block; height: 52px; margin: -12.5px; object-fit: contain; width: 52px; }
.social-panel-dark .social-icon svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.social-panel-dark .social-icon .icon-dot { fill: currentColor; stroke: none; }
.social-name, .social-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.social-label { color: var(--muted); }
.social-panel-light .social-label { color: #777671; }
.social-panel:hover .social-label { color: var(--ink); }
.social-panel strong { font-size: clamp(25px, 3vw, 40px); font-weight: 500; letter-spacing: -.05em; }
.arrow { font-size: 25px; }
.sample-works { background: var(--ink); color: var(--paper); overflow: hidden; padding: 54px 4.5vw 12px; }
.sample-works-secondary { padding-top: 18px; }
.sample-works-heading { background: var(--ink); color: var(--paper); margin-bottom: 0; padding: 54px 4.5vw 28px; }
.sample-works-title { margin: 0; width: 100%; }
.sample-works-row { align-items: center; display: flex; flex-wrap: nowrap; gap: clamp(.28em, 1.5vw, .56em); justify-content: center; width: 100%; }
.sample-works-row span { align-items: center; display: flex; font-family: "Montserrat Bold", var(--sans); font-size: clamp(26px, 6vw, 82px); font-weight: 700; justify-content: center; letter-spacing: .08em; line-height: .9; opacity: .9; transition: transform .25s ease, opacity .25s ease, letter-spacing .25s ease; white-space: nowrap; }
.sample-works-row span:hover { letter-spacing: .14em; opacity: 1; transform: translateY(-4px) scale(1.04); }
.sample-works-viewport { overflow: visible; }
.sample-works-track { animation: sample-works-marquee 36s linear infinite; display: flex; width: max-content; }
.sample-works-track-reverse { animation: sample-works-marquee-reverse 36s linear infinite; }
.sample-works-track.is-paused { animation-play-state: paused; }
.sample-work { flex: 0 0 clamp(190px, 25vw, 340px); min-width: 0; padding: 0 4px; position: relative; }
.sample-work video { aspect-ratio: 16 / 9; background: var(--ink); display: block; filter: grayscale(1); height: auto; object-fit: cover; transition: filter .35s ease; width: 100%; }
.sample-work:hover { position: relative; z-index: 2; }
.sample-work:hover video { box-shadow: 0 18px 34px rgba(11, 11, 11, .28); filter: grayscale(1) brightness(.72); }
.sample-work.is-playing video { filter: none; }
.sample-work-play { align-items: center; background: transparent; border: 0; color: var(--paper); cursor: pointer; display: flex; height: 48px; justify-content: center; left: 50%; opacity: 0; padding: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: opacity .2s ease, transform .2s ease; width: 48px; z-index: 3; }
.sample-work-play img { display: block; height: 48px; object-fit: contain; width: 48px; }
.sample-work:hover .sample-work-play { opacity: 1; }
.sample-work-play:hover, .sample-work-play:focus-visible { color: var(--paper); outline: none; transform: translate(-50%, -50%) scale(1.1); }
.sample-work:hover .sample-work-play.is-playing { opacity: 0; pointer-events: none; }
@keyframes sample-works-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sample-works-marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.site-footer { color: #777671; display: flex; justify-content: space-between; padding: 22px 4.5vw; }

@media (max-width: 620px) {
  .site-header { padding: 20px 6vw; }
  .hero { min-height: 620px; }
  .hero-gallery { inset: 0; }
  .hero-circle { height: min(145vw, 680px); right: -38%; top: 60%; width: min(145vw, 680px); }
  .hero-content { padding-top: 100px; }
  .hero-intro { align-items: center; margin: 0 auto; max-width: 480px; text-align: center; }
  .spotify-player { bottom: 18px; height: 352px; right: 6vw; width: calc(100% - 12vw); }
  .hero-index { bottom: 23px; right: 6vw; }
  .community { grid-template-columns: 1fr; }
  .social-panel { min-height: 150px; padding: 30px 8vw; }
  .social-panel:hover { padding-left: 8vw; padding-right: 8vw; }
  .arrow { right: 8vw; }
  .sample-works { padding: 40px 6vw; }
  .sample-works-heading h2 { font-size: 8vw; }
  .sample-work { padding: 0; }
  .site-footer { flex-wrap: wrap; gap: 12px; padding: 20px 6vw; }
  .site-footer span:last-child { width: 100%; }
}