/* =========================================================
RESET
========================================================= */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: rgb(0, 0, 0);
color: #ffffff;
font-family: 'DM Sans', Arial, sans-serif;
overflow-x: hidden;
}

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

button,
input {
font: inherit;
}

/* =========================================================
NAVIGATION
========================================================= */

.nav {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
padding: 24px 28px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
text-transform: uppercase;
}

.logo {
font-weight: 500;
letter-spacing: -0.04em;
}

.header-buttons {
display: flex;
align-items: center;
gap: 16px;
}

.header-button {
position: relative;
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font-size: 11px;
line-height: 1;
text-transform: uppercase;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header underline */

.header-button::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-button:hover::after {
transform: scaleX(1);
transform-origin: left;
}

/* =========================================================
GENERAL
========================================================= */

.eyebrow {
margin: 0;
font-size: 12px;
line-height: 1.3;
text-transform: uppercase;
}

/* =========================================================
HERO
========================================================= */

.hero {
position: relative;
height: 100vh;
min-height: 100svh;
padding: 150px 28px 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
background: rgb(0, 0, 0);
color: #ffffff;
}

.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
pointer-events: none;
}

.hero > *:not(.hero-video):not(.hero-overlay) {
position: relative;
z-index: 2;
}

.hero-title {
position: relative;
z-index: 2;
flex-shrink: 1;
min-height: 0;
}

.hero-title h1 {
margin: 0;
font-size: clamp(82px, min(16.5vw, 24vh), 260px);
line-height: 0.79;
letter-spacing: -0.085em;
font-weight: 400;
}

.hero-bottom {
position: relative;
z-index: 3;
flex-shrink: 0;
}

.intro p {
margin: 0;
}

/* =========================================================
STATEMENT
========================================================= */

.statement {
min-height: 80vh;
padding: 100px 28px 30px;
display: grid;
grid-template-columns: 1fr 2fr auto;
gap: 30px;
border-top: 1px solid currentColor;
}

.section-number {
font-size: 12px;
color: #ffffff;
opacity: 0.3;
width: 100%;
}

.statement-copy {
grid-column: 2;
width: 100%;
max-width: none;
}

.statement-copy p {
margin: 0;
font-size: clamp(38px, 4.2vw, 78px);
line-height: 0.94;
letter-spacing: -0.055em;
}

/* =========================================================
MARQUEE
========================================================= */

.marquee {
overflow: hidden;
padding: 20px 0;
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
will-change: transform;
}

.marquee-track {
display: inline-flex;
align-items: center;
width: max-content;
font-size: clamp(60px, 9vw, 150px);
line-height: 0.9;
letter-spacing: -0.07em;
animation: marquee 25s linear infinite;
}

.marquee-track span {
display: inline-block;
margin-right: 0.7em;
}

@keyframes marquee {
from {
transform: translateX(0);
}

to {
transform: translateX(-50%);
}
}

/* =========================================================
FOOTER
========================================================= */

.footer {
padding: 28px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
font-size: 12px;
text-transform: uppercase;
}

.footer-logo {
font-size: 15px;
font-weight: 500;
}

.footer-links {
display: flex;
flex-direction: column;
gap: 8px;
}

.footer-links a {
width: fit-content;
}

/* =========================================================
EXTERNAL LINKS
========================================================= */

.external-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
}

.external-link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -5px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.external-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}

.external-link .arrow {
display: inline-block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.external-link:hover .arrow {
transform: translate(4px, -4px);
}

/* =========================================================
CUSTOM CURSOR
========================================================= */

@media (hover: hover) and (pointer: fine) {

body {
cursor: none;
}

a,
button,
input {
cursor: none;
}

.cursor {
position: fixed;
z-index: 9999;
width: 18px;
height: 18px;
top: 0;
left: 0;
pointer-events: none;
transform: translate3d(0, 0, 0) translate(-50%, -50%);
background: #f2f0eb;
border-radius: 50%;
mix-blend-mode: difference;
transition:
width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cursor-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: transparent;
transform: scale(1);
transition:
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

body.cursor-hover .cursor {
width: 18px;
height: 18px;
}

body.cursor-hover .cursor-inner {
transform: scale(1);
}

body.cursor-down .cursor-inner {
transform: scale(0.65);
}
}

/* =========================================================
SERVICES / RELEASES
========================================================= */

.services {
padding: 60px 28px 140px;
background: rgb(0, 0, 0);
}


/* Header */

.services-header {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 30px;
margin-bottom: 80px;
}

.services-label {
font-size: 12px;
line-height: 1.2;
color: #ffffff;
opacity: 0.3;
}

.services-title h2 {
margin: 0;
font-size: clamp(58px, 8vw, 130px);
line-height: 0.86;
letter-spacing: -0.07em;
font-weight: 400;
background: rgb(0, 0, 0);
}

/* List */

.services-list {
position: relative;
border-top: 1px solid rgba(191, 193, 190, 0.35);
}

/* Individual release */

.service {
position: relative;
padding: 28px 0;
padding-right: 450px;
display: grid;
grid-template-columns: 1fr 2fr auto;
gap: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
transition:
padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
cursor: none;
}

/* Year */

.service-number {
font-size: 12px;
line-height: 1.2;
opacity: 0.3;
}

/* Content */

.service-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 30px;
}

.service-name {
position: relative;
display: inline-block;
width: fit-content;
font-size: 20px;
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;

opacity: 0.3;

transition:
opacity 0.35s ease,
color 0.3s ease;
}

.service-content p {
max-width: 420px;
margin: 0;
font-size: 14px;
line-height: 1.3;

opacity: 0.3;

transition: opacity 0.35s ease;
}

/* PODCASTS */

.podcasts {
  padding: 60px 28px 140px;
  background: rgb(0, 0, 0);
}

.podcasts-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  margin-bottom: 80px;
}

.podcasts-label {
  font-size: 12px;
  line-height: 1.2;
  color: #ffffff;
  opacity: 0.3;
}

.podcasts-player {
  width: 100%;
}

.podcasts-player iframe {
  display: block;
  width: 100%;
  border: 0;
}

.soundcloud-credit {
  margin-top: 8px;
  font-size: 10px;
  color: #cccccc;
  line-break: anywhere;
  word-break: normal;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: Interstate, Lucida Grande, Lucida Sans Unicode,
    Lucida Sans, Garuda, Verdana, Tahoma, sans-serif;
  font-weight: 100;
}

.soundcloud-credit a {
  color: #cccccc;
  text-decoration: none;
}

/* =========================================================
DESKTOP — ACTIVE RELEASE NUMBER
========================================================= */

@media (min-width: 701px) {

.service:hover .service-content p {
opacity: 1;
}

.service:hover .service-name {
opacity: 1;
}

}

/* Release title underline */

.service-name::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service:hover .service-name::after {
transform: scaleX(1);
transform-origin: left;
}

/* Desktop release image */

.service-image {
position: fixed;
top: 50%;
right: 28px;
width: 360px;
height: 360px;
transform: translateY(-50%);
pointer-events: none;
z-index: 20;
opacity: 0;
visibility: hidden;
transition:
opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.service:hover .service-image {
opacity: 1;
visibility: visible;
}

@media (max-width: 700px) {

/* =======================================================
MOBILE — REMOVE RELEASE TITLE UNDERLINE
======================================================= */

.service-name::after {
display: none;
}

/* =======================================================
NAVIGATION
======================================================= */

.nav {
padding: 18px;
}

.header-buttons {
gap: 12px;
}

.header-button {
font-size: 10px;
}


/* =======================================================
HERO
======================================================= */

.hero {
padding: 120px 18px 24px;
}

.hero-title h1 {
font-size: clamp(70px, min(16.5vw, 24vh), 150px);
}

.hero-bottom {
grid-template-columns: 1fr;
gap: 40px;
}


/* =======================================================
STATEMENT
======================================================= */

.statement {
min-height: 70vh;
padding: 70px 18px 45px;

display: grid;
grid-template-columns: 1fr;
gap: 60px;
}

.statement-copy {
grid-column: auto;
}

.statement-copy p {
font-size: clamp(36px, 10vw, 42px);
line-height: 0.94;
letter-spacing: -0.05em;
}


/* =======================================================
RELEASES
======================================================= */

.services {
padding: 80px 18px 90px;
}

.services-header {
grid-template-columns: 1fr;
gap: 50px;
margin-bottom: 20px;
}

.services-title h2 {
font-size: clamp(54px, 15vw, 80px);
}

/* =======================================================
PODCASTS
======================================================= */

.podcasts {
padding: 80px 18px 90px;
}

.podcasts-header {
grid-template-columns: 1fr;
gap: 50px;
margin-bottom: 20px;
}

.podcasts-player iframe {
height: 450px;
}

/* =======================================================
RELEASE LIST
======================================================= */

.services-list {
position: relative;
overflow: visible;
}


/* =======================================================
INDIVIDUAL RELEASE
======================================================= */

.service {
display: grid;
grid-template-columns: 1fr;

gap: 18px;

padding: 18px 0;
padding-right: 0;

position: relative;

isolation: isolate;
}


/* Hide years on mobile */

.service-number {
display: none;
}


/* =======================================================
RELEASE CONTENT — ONE COLUMN
======================================================= */

.service-content {
display: flex;
flex-direction: column;

/* Important: override desktop grid */
grid-template-columns: none;

width: 100%;

gap: 16px;

position: relative;
z-index: 20;
}


/* SIDEB005 / SIDEB004 / etc. */

.service-content p {
order: -1;

width: 100%;
max-width: none;

margin: 0;

font-size: 11px;
line-height: 1;

color: #ffffff;
opacity: 0.3;

transition:
color 0.3s ease,
opacity 0.3s ease;
}


/* Release title */

.service-name {
display: inline-block;

width: fit-content;
align-self: flex-start;

font-size: 20px;
line-height: 1.1;
letter-spacing: -0.03em;

transition:
color 0.3s ease;
}


/* No arrow on mobile */

.service-arrow {
display: none;
}


/* No desktop hover movement */

.service:hover {
padding-left: 0;
padding-right: 0;
}

.service:hover .service-image {
opacity: 1;
visibility: visible;
}

/* =========================================================
DESKTOP RELEASE — SIDEB NUMBER HOVER
========================================================= */

@media (min-width: 701px) {

.service:hover .service-content p {
opacity: 1;
}

}

/* =======================================================
MOBILE RELEASE IMAGE
SCALE IN / SCALE OUT
======================================================= */

/*
The image floats above the rows.
It does not take up layout space.
The image itself scales from 0% to 100%.
*/

.service-image {
position: absolute;

left: 50%;
top: 50%;

width: 220px;
height: 220px;

transform: translate(-50%, -50%);

overflow: hidden;
pointer-events: none;
z-index: 10;

/* Container is always present */
opacity: 1;
visibility: visible;

clip-path: none;

transition: none;
}


/* =======================================================
IMAGE
======================================================= */

.service-image img {
display: block;

width: 100%;
height: 100%;

object-fit: cover;

/* Start completely closed */
transform: scale(0);
transform-origin: center center;

transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* =======================================================
ACTIVE RELEASE IMAGE
======================================================= */

.service.is-active .service-image img {
transform: scale(1);
}



/* =======================================================
ACTIVE TEXT ABOVE IMAGE
======================================================= */

/*
Only the active release's own text sits above
its image.
*/

.service.is-active .service-content {
position: relative;
z-index: 20;
mix-blend-mode: difference;
}


/*
Inverted color effect on the active release.
*/

.service.is-active .service-name,
.service.is-active .service-content p {
color: #ffffff;
mix-blend-mode: difference;
}


/* Active SIDEB number */

.service.is-active .service-content p {
opacity: 1;
}

.service.is-active .service-name {
opacity: 1;
}

/* Inactive SIDEB numbers */

.service-content p {
opacity: 0.3;
}


/* =======================================================
FOOTER
======================================================= */

.footer {
padding: 24px 18px;

grid-template-columns: 1fr 1fr;
}

.copyright {
justify-self: start;
grid-column: 1 / -1;
}

}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.marquee-track {
animation: none;
}

}