body.experiments-page {
--obsidian: #0B0B0F;
--charcoal: #2B2B32;
--red: #E63946;
--pink: #FF4F81;
--cyan: #19D3E6;
--paper: #F4F1EA;

margin: 0;
color: var(--obsidian);
background: var(--paper);
font-family: "Space Grotesk", sans-serif;
}

.experiments-page *,
.experiments-page *::before,
.experiments-page *::after {
box-sizing: border-box;
}

.experiments-page .grid-shell {
width: 90%;
max-width: 1440px;
margin-inline: auto;
}

.experiments-page a {
color: inherit;
}

.experiments-page h1,
.experiments-page h2,
.experiments-page h3,
.experiments-page p {
overflow-wrap: anywhere;
}

/* =====================================================
HEADER — CENTERED NAVIGATION
===================================================== */

.experiments-page .site-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 20px;
min-height: 76px;
border-bottom: 1px solid rgba(11, 11, 15, 0.35);
}

.experiments-page .wordmark {
grid-column: 1;
justify-self: start;
width: fit-content;
white-space: nowrap;
color: var(--obsidian);
font-family: "Orbitron", sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -1.2px;
text-decoration: none;
}

.experiments-page .wordmark span {
color: var(--red);
}

.experiments-page .wordmark sup {
margin-left: 0.1em;
color: inherit;
font-family: "Orbitron", sans-serif;
font-size: 9px;
vertical-align: super;
}

.experiments-page .site-nav {
grid-column: 2;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
max-width: 100%;
flex-wrap: wrap;
gap: clamp(16px, 2.8vw, 42px);
}

.experiments-page .site-nav a {
position: relative;
padding: 10px 0;
color: var(--charcoal);
font-family: "DM Mono", monospace;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.04em;
transition: color 200ms ease;
}

.experiments-page .site-nav a::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
width: 100%;
height: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: left;
transition: transform 200ms ease;
}

.experiments-page .site-nav a:hover,
.experiments-page .site-nav a:focus-visible,
.experiments-page .site-nav a[aria-current="page"] {
color: var(--red);
}

.experiments-page .site-nav a:hover::after,
.experiments-page .site-nav a:focus-visible::after,
.experiments-page .site-nav a[aria-current="page"]::after {
transform: scaleX(1);
}

.experiments-page .header-index {
grid-column: 3;
justify-self: end;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 10px;
}

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

.experiments-page .experiment-hero {
position: relative;
display: grid;
width: min(100%, 1440px);
max-width: 1440px;
margin-inline: auto;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
padding: 78px max(5%, calc((100% - 1440px) / 2)) 26px;
overflow: hidden;
background-image:
linear-gradient(
90deg,
var(--paper) 0%,
rgba(244, 241, 234, 1) 38%,
rgba(244, 241, 234, 0.96) 54%,
rgba(244, 241, 234, 0.72) 68%,
rgba(244, 241, 234, 0.28) 82%,
rgba(244, 241, 234, 0.12) 100%
),
url("../home/images/hero-art.jpg");
background-position: center, right center;
background-size: cover;
background-repeat: no-repeat;
}

.experiments-page .experiment-hero-copy {
position: relative;
z-index: 2;
grid-column: 1 / span 10;
}

.experiments-page .eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 10px;
letter-spacing: 0.12em;
line-height: 1.6;
}

.experiments-page .eyebrow-dot {
width: 9px;
height: 9px;
flex: 0 0 9px;
background: var(--red);
}

.experiments-page .experiment-hero h1 {
margin: 0;
font-size: clamp(1.7rem, 6vw, 6rem);
font-weight: 700;
letter-spacing: -0.07em;
line-height: 1.02;
}


.experiments-page .outlined-word {
display: block;
margin-top: 0.12em;
color: transparent;
-webkit-text-stroke: 1.5px var(--red);
}

.experiments-page .hero-description {
max-width: 460px;
margin: 24px 0;
color: var(--charcoal);
font-size: 14px;
line-height: 1.8;
}

.experiments-page .explore-link {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 13px 16px;
color: var(--paper);
background: var(--obsidian);
font-family: "Orbitron", sans-serif;
font-size: 10px;
letter-spacing: 0.07em;
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}

.experiments-page .explore-link span {
color: var(--red);
font-size: 18px;
}

.experiments-page .explore-link:hover {
color: var(--obsidian);
background: var(--cyan);
}

.experiments-page .explore-link:hover span {
color: var(--obsidian);
}

.experiments-page .hero-bottom-line {
position: relative;
z-index: 1;
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 58px;
padding-top: 14px;
border-top: 1px solid rgba(11, 11, 15, 0.3);
color: var(--charcoal);
font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: 0.07em;
}

/* =====================================================
INTRODUCTION
===================================================== */

.experiments-page .experiment-intro {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 24px;
padding-top: 66px;
padding-bottom: 70px;
border-top: 1px solid rgb(43 43 50 / 20%);
}

.experiments-page .section-index {
grid-column: 1 / span 3;
margin: 8px 0;
color: var(--red);
font-family: "DM Mono", monospace;
font-size: 10px;
}

.experiments-page .intro-main {
grid-column: 4 / span 6;
}

.experiments-page .intro-main h2 {
margin: 0 0 18px;
font-size: clamp(32px, 4vw, 54px);
letter-spacing: -0.07em;
line-height: 1.08;
}

.experiments-page .intro-main h2 span {
color: var(--red);
}

.experiments-page .intro-main > p {
max-width: 550px;
color: var(--charcoal);
font-size: 14px;
line-height: 1.8;
}

.experiments-page .intro-side {
grid-column: 11 / span 2;
align-self: end;
min-width: 0;
padding-left: clamp(0.25rem, 0.97vw, 0.875rem);
border-left: 2px solid var(--cyan);
}

.experiments-page .side-symbol {
color: var(--pink);
font-size: 36px;
}

.experiments-page .intro-side p {
font-family: "DM Mono", monospace;
font-size: 10px;
line-height: 1.8;
overflow-wrap: anywhere;
}

/* =====================================================
GALLERY HEADING
===================================================== */

.experiments-page .experiment-gallery {
padding-top: 24px;
padding-bottom: 75px;
border-top: 1px solid rgba(11, 11, 15, 0.3);
}

.experiments-page .gallery-heading {
display: flex;
justify-content: space-between;
align-items: end;
gap: 24px;
margin-bottom: 28px;
}

.experiments-page .gallery-heading .eyebrow {
margin-bottom: 10px;
}

.experiments-page .gallery-heading h2 {
margin: 0;
font-size: clamp(34px, 4.5vw, 60px);
letter-spacing: -0.075em;
line-height: 1;
}

.experiments-page .gallery-heading h2 span {
color: var(--red);
}

.experiments-page .gallery-note {
margin: 0;
color: var(--charcoal);
font-family: "DM Mono", monospace;
font-size: 10px;
line-height: 1.8;
text-align: right;
}

/* =====================================================
VIDEO GALLERY — TWO ON TOP, TWO ON BOTTOM
===================================================== */

.experiments-page .experiment-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(0.75rem, 1.53vw, 1.375rem) clamp(0.75rem, 1.67vw, 1.5rem);
align-items: stretch;
}

.experiments-page .experiment-card {
grid-column: span 6;
display: grid;
grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
grid-template-rows: auto 1fr;
min-width: 0;
overflow: hidden;
background: var(--paper);
border: 1px solid rgba(11, 11, 15, 0.5);
transition: transform 250ms ease, box-shadow 250ms ease;
}

.experiments-page .experiment-card:hover {
transform: translateY(-4px);
box-shadow: 6px 6px 0 var(--charcoal);
}

/* Category strip across each card */

.experiments-page .card-topline {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 36px;
padding: 8px 14px;
border-top: 5px solid var(--pink);
border-bottom: 1px solid rgba(11, 11, 15, 0.22);
}

.experiments-page .repetition-card .card-topline {
border-top-color: var(--charcoal);
}

.experiments-page .color-card .card-topline {
border-top-color: var(--cyan);
}

.experiments-page .depth-card .card-topline {
border-top-color: var(--red);
}

.experiments-page .card-number {
color: var(--red);
font-family: "Orbitron", sans-serif;
font-size: 12px;
}

.experiments-page .repetition-card .card-number {
color: var(--charcoal);
}

.experiments-page .color-card .card-number {
color: #087D87;
}

.experiments-page .card-category {
padding: 5px 7px;
color: var(--charcoal);
border: 1px solid rgba(11, 11, 15, 0.3);
font-family: "Space Grotesk", sans-serif;
font-size: 9px;
letter-spacing: 0.06em;
}

/* Text sits to the left of each video */

.experiments-page .card-copy {
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
padding: clamp(0.25rem, 1.1vw, 1rem)
clamp(0.25rem, 0.83vw, 0.75rem)
clamp(0.25rem, 0.97vw, 0.875rem)
clamp(0.25rem, 1.1vw, 1rem);
}

.experiments-page .card-kicker {
margin: 0 0 8px;
color: var(--charcoal);
font-family: "Space Grotesk", sans-serif;
font-size: 9px;
letter-spacing: 0.07em;
}

.experiments-page .card-copy h3 {
margin: 0 0 12px;
color: var(--obsidian);
font-size: clamp(0.625rem, 2vw, 1.8125rem);
letter-spacing: -0.06em;
line-height: 1.08;
}

.experiments-page .card-copy > p:not(.card-kicker) {
margin: 0 0 18px;
color: var(--charcoal);
font-size: clamp(0.5625rem, 0.83vw, 0.75rem);
line-height: 1.65;
}

.experiments-page .card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(11, 11, 15, 0.2);
}

.experiments-page .card-bottom > span:first-child {
min-width: 0;
color: var(--charcoal);
font-family: "Exo 2", sans-serif;
font-size: 8px;
line-height: 1.5;
overflow-wrap: anywhere;
}

.experiments-page .card-arrow {
display: grid;
place-items: center;
flex: 0 0 30px;
width: 30px;
height: 30px;
color: var(--paper);
background: var(--red);
border-radius: 50%;
font-size: 16px;
transition: background 200ms ease, transform 200ms ease;
}

.experiments-page .repetition-card .card-arrow {
background: var(--charcoal);
}

.experiments-page .color-card .card-arrow {
background: #087D87;
}

.experiments-page .experiment-card:hover .card-arrow {
background: var(--obsidian);
transform: rotate(45deg);
}

/* Video fills the entire right side */

.experiments-page .experiment-video {
position: relative;
grid-column: 2;
grid-row: 2;
align-self: start;
min-width: 0;
min-height: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--obsidian);
}

.experiments-page .experiment-video video {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: contain;
background: var(--obsidian);
}

.experiments-page .video-stamp {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 6px 8px;
color: var(--obsidian);
background: var(--paper);
font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: 0.05em;
pointer-events: none;
}

/* =====================================================
CLOSING SECTION
===================================================== */

.experiments-page .experiment-ending {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
gap: 24px;
padding-top: 36px;
padding-bottom: 45px;
color: var(--paper);
background: var(--obsidian);
overflow: hidden;
}

.experiments-page .ending-symbol {
grid-column: 3;
grid-row: 1 / span 3;
color: var(--cyan);
font-size: 44px;
}

.experiments-page .experiment-ending .eyebrow {
grid-column: 1 / span 2;
grid-row: 1;
color: var(--pink);
font-size: 9px;
}

.experiments-page .experiment-ending h2 {
grid-column: 1 / span 5;
grid-row: 2;
margin: 0;
font-size: clamp(30px, 4vw, 54px);
letter-spacing: -0.075em;
line-height: 0.98;
}

.experiments-page .experiment-ending h2 span {
color: var(--red);
}

.experiments-page .experiment-ending > p:not(.eyebrow) {
grid-column: 5 / span 4;
grid-row: 2;
margin: 0;
color: var(--paper);
font-size: 13px;
line-height: 1.8;
}

.experiments-page .ending-button {
grid-column: 9 / span 4;
grid-row: 2;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 18px;
padding: 13px 14px;
color: var(--paper);
background: transparent;
border: 1px solid var(--paper);
font-family: "DM Mono", monospace;
font-size: 9px;
text-decoration: none;
transition: color 200ms ease, background 200ms ease;
}

.experiments-page .ending-button span {
color: var(--red);
font-size: 16px;
}

.experiments-page .ending-button:hover {
color: var(--obsidian);
background: var(--cyan);
border-color: var(--cyan);
}

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

.experiments-page .site-footer {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
column-gap: clamp(0.75rem, 2vw, 1.75rem);
min-height: 6rem;
padding-block: 1.5rem;
border-top: 1px solid rgba(11, 11, 15, 0.25);
}

.experiments-page .footer-wordmark {
grid-column: 1 / span 3;
justify-self: start;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
}

.experiments-page .footer-wordmark span {
color: var(--red);
}

.experiments-page .footer-copy {
grid-column: 4 / span 6;
margin: 0;
color: rgb(43 43 50 / 70%);
font-family: "Space Grotesk", sans-serif;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-align: center;
}

.experiments-page .footer-back {
grid-column: 10 / span 3;
justify-self: end;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 0.6rem;
letter-spacing: 0.06em;
text-align: right;
text-transform: uppercase;
text-decoration: none;
}

.experiments-page .site-footer a:hover {
color: var(--red);
}

/* =====================================================
ACCESSIBILITY
===================================================== */

.experiments-page a:focus-visible,
.experiments-page video:focus-visible {
outline: 3px solid var(--cyan);
outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
.experiments-page .site-nav a,
.experiments-page .explore-link,
.experiments-page .experiment-card,
.experiments-page .card-arrow,
.experiments-page .ending-button {
transition: none;
}
}

/* Consistent section-label typography */

.experiments-page .eyebrow,
.experiments-page .section-index,
.experiments-page .card-kicker,
.experiments-page .card-category,
.experiments-page .hero-bottom-line,
.experiments-page .video-stamp {
font-family: "Orbitron", sans-serif;
font-size: clamp(0.62rem, 0.7vw, 0.7rem);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.6;
text-transform: uppercase;
}

.experiments-page .page-identifier {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.25rem;
}

.experiments-page .page-identifier .identifier-number {
color: var(--red);
}

.experiments-page .page-identifier .identifier-separator {
color: var(--cyan);
}
/* TYPOGRAPHY */

.experiments-page .intro-main h2,
.experiments-page .gallery-heading h2,
.experiments-page .experiment-ending h2,
.experiments-page .card-copy h3 {
font-family: "Orbitron", sans-serif;
letter-spacing: -0.045em;
}

.experiments-page .experiment-hero h1 {
font-family: "Orbitron", sans-serif;
}

.experiments-page .site-nav a,
.experiments-page .eyebrow,
.experiments-page .card-category,
.experiments-page .card-kicker,
.experiments-page .header-index,
.experiments-page .hero-bottom-line,
.experiments-page .video-stamp {
font-family: "Orbitron", sans-serif;
letter-spacing: 0.035em;
}

.experiments-page .hero-description,
.experiments-page .intro-main > p,
.experiments-page .intro-side p,
.experiments-page .card-copy > p:not(.card-kicker),
.experiments-page .experiment-ending > p:not(.eyebrow) {
font-family: "Exo 2", sans-serif;
}

/* FIVE-LINK NAVIGATION */

.experiments-page .site-nav {
gap: clamp(10px, 1.7vw, 26px);
}

.experiments-page .site-nav a {
font-size: 10px;
white-space: nowrap;
}

/* HERO — LAYERED GEOMETRIC OPTICAL ART */

.experiments-page .hero-art {
width: 32%;
top: 12%;
right: 2%;
overflow: hidden;
border-radius: 0;
background:
linear-gradient(
135deg,
transparent 49.7%,
rgba(230, 57, 70, 0.5) 50%,
transparent 50.3%
),
linear-gradient(
45deg,
transparent 49.7%,
rgba(25, 211, 230, 0.45) 50%,
transparent 50.3%
);
animation: hero-drift 12s ease-in-out infinite alternate;
}

.experiments-page .hero-art-ring,
.experiments-page .hero-art-cross,
.experiments-page .hero-art-number {
display: none;
}

.experiments-page .hero-art-grid {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent 0 17px,
rgba(43, 43, 50, 0.35) 18px 19px
),
repeating-linear-gradient(
90deg,
transparent 0 17px,
rgba(43, 43, 50, 0.35) 18px 19px
);
transform: rotate(-8deg) scale(1.15);
}

.experiments-page .hero-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 76%;
aspect-ratio: 1;
border: 1px solid var(--charcoal);
border-radius: 50%;
transform: translate(-50%, -50%) rotate(-20deg);
}

.experiments-page .orbit-two {
width: 56%;
border-color: var(--red);
transform: translate(-50%, -50%) rotate(35deg) scaleX(0.72);
}

.experiments-page .orbit-three {
width: 36%;
border-color: var(--cyan);
transform: translate(-50%, -50%) rotate(-35deg) scaleX(0.72);
}

.experiments-page .hero-cross {
position: absolute;
top: 50%;
left: 8%;
width: 84%;
height: 1px;
background: var(--red);
transform: rotate(-35deg);
}

.experiments-page .cross-two {
background: var(--cyan);
transform: rotate(35deg);
}

.experiments-page .hero-center {
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
background: var(--red);
transform: translate(-50%, -50%) rotate(45deg);
}

.experiments-page .hero-art-label {
position: absolute;
right: 0;
bottom: 0;
padding: 8px 10px;
color: var(--paper);
background: var(--obsidian);
font-family: "Orbitron", sans-serif;
font-size: 9px;
line-height: 1.6;
letter-spacing: 0.1em;
}

@keyframes hero-drift {
from {
transform: rotate(-3deg);
}
to {
transform: rotate(3deg);
}
}

/* INTRO — REMOVE SYMBOL AND CENTER THE MESSAGE */

.experiments-page .intro-side {
display: flex;
align-items: center;
align-self: stretch;
grid-column: 11 / span 2;
padding: 16px 0 16px 16px;
border-left: 2px solid var(--cyan);
}

.experiments-page .intro-side .side-symbol {
display: none;
}

.experiments-page .intro-side p {
margin: 0;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 10px;
line-height: 1.9;
letter-spacing: 0.025em;
}

/* VIDEO CARD SUBTITLES — INDIVIDUAL ACCENTS */

.experiments-page .motion-card .card-kicker,
.experiments-page .motion-card .card-copy h3 {
color: var(--red);
}

.experiments-page .repetition-card .card-kicker,
.experiments-page .repetition-card .card-copy h3 {
color: var(--charcoal);
}

.experiments-page .color-card .card-kicker,
.experiments-page .color-card .card-copy h3 {
color: #087D87;
}

.experiments-page .depth-card .card-kicker,
.experiments-page .depth-card .card-copy h3 {
color: #B82B3A;
}

.experiments-page .motion-card .card-topline {
border-top-color: var(--red);
}

.experiments-page .repetition-card .card-topline {
border-top-color: var(--charcoal);
}

.experiments-page .color-card .card-topline {
border-top-color: var(--cyan);
}

.experiments-page .depth-card .card-topline {
border-top-color: var(--pink);
}

/* CLOSING — CLEAN EDITORIAL FINISH */

.experiments-page .experiment-ending {
background: var(--paper);
color: var(--obsidian);
border-top: 1px solid rgba(11, 11, 15, 0.3);
border-bottom: 1px solid rgba(11, 11, 15, 0.3);
padding-top: 44px;
padding-bottom: 44px;
}

.experiments-page .ending-symbol {
display: none;
}

.experiments-page .experiment-ending .eyebrow {
grid-column: 1 / -1;
grid-row: 1;
margin: 0 0 12px;
color: var(--red);
}

.experiments-page .experiment-ending h2 {
grid-column: 1 / span 6;
grid-row: 2;
color: var(--obsidian);
font-size: clamp(28px, 3.5vw, 48px);
line-height: 1.1;
}

.experiments-page .experiment-ending h2 span {
color: var(--red);
}

.experiments-page .experiment-ending > p:not(.eyebrow) {
grid-column: 7 / span 3;
grid-row: 2;
color: var(--charcoal);
font-size: 14px;
}

.experiments-page .ending-button {
grid-column: 10 / span 3;
grid-row: 2;
align-self: center;
color: var(--obsidian);
border-color: var(--obsidian);
}

.experiments-page .ending-button span {
color: var(--red);
}

.experiments-page .ending-button:hover {
color: var(--obsidian);
background: var(--cyan);
border-color: var(--cyan);
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
.experiments-page .hero-art {
animation: none;
}
}