/* Fonts: Orbitron, Space Grotesk, Exo 2 */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* ---------- DESIGN SYSTEM ---------- */

:root {
--obsidian: #0B0B0F;
--charcoal: #2B2B32;
--red: #E63946;
--pink: #FF4F81;
--cyan: #19D3E6;
--cream: #F4F1EA;
--white: #FFFFFF;

--display-font: 'Orbitron', sans-serif;
--interface-font: 'Space Grotesk', sans-serif;
--body-font: 'Exo 2', sans-serif;

--content-width: 1440px;
--page-padding: 5.5%;
}


/* ---------- RESET ---------- */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body.about-page {
margin: 0;
background: var(--cream);
color: var(--obsidian);
font-family: var(--body-font);
font-size: 16px;
line-height: 1.55;
}

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

.about-page a {
color: inherit;
text-decoration: none;
}

.about-page figure,
.about-page h1,
.about-page h2,
.about-page p {
margin-top: 0;
}

.about-page h1,
.about-page h2 {
font-family: var(--display-font);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.045em;
}

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

.about-page h1 span,
.about-page h2 span {
color: var(--pink);
}

.about-page .eyebrow {
margin-bottom: 14px;
color: var(--cyan);
font-family: var(--interface-font);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.about-page .pink-label {
color: var(--pink);
}


/* ---------- NAVIGATION ---------- */

.about-page {
--header-line: rgba(11, 11, 15, 0.35);
}

.about-page .site-header {
background: var(--cream);
}

.logo {
width: fit-content;
font-family: var(--interface-font);
font-size: 21px;
font-weight: 700;
letter-spacing: -0.05em;
white-space: nowrap;
}

.logo span {
color: var(--pink);
}

/* ---------- HERO ---------- */

.about-hero {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
min-height: clamp(26rem, 32vw, 28.75rem);
padding: 60px max(var(--page-padding), calc((100% - var(--content-width)) / 2));
column-gap: clamp(1rem, 3.125vw, 2.8125rem);
overflow: hidden;
border-bottom: 1px solid rgba(11, 11, 15, 0.35);
}

.hero-copy {
position: relative;
z-index: 2;
grid-column: 1 / span 6;
max-width: 650px;
}

.about-hero h1 {
margin-bottom: 18px;
font-size: clamp(1rem, 4vw, 3.875rem);
}

.hero-description {
max-width: 480px;
margin-bottom: 22px;
font-size: 16px;
line-height: 1.55;
}

.color-line {
width: 72%;
max-width: 360px;
height: 5px;
background: linear-gradient(
to right,
var(--red) 0%,
var(--pink) 55%,
var(--cyan) 100%
);
}

.hero-art {
position: relative;
grid-column: 7 / span 6;
min-width: 0;
height: clamp(16.25rem, 23.6vw, 21.25rem);
}

.hero-art img {
position: absolute;
inset: 0;
object-fit: cover;
object-position: center;
mix-blend-mode: multiply;
}

.art-label {
position: absolute;
right: -4%;
bottom: 24px;
width: 115px;
color: var(--obsidian);
font-family: var(--interface-font);
font-size: 9px;
letter-spacing: 0.15em;
line-height: 2;
}

.hero-index {
position: absolute;
top: 25px;
right: var(--page-padding);
color: rgba(11, 11, 15, 0.55);
font-family: var(--interface-font);
font-size: 10px;
letter-spacing: 0.15em;
}


/* ---------- NUMBERED SECTIONS ---------- */

.section-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
column-gap: clamp(1rem, 3.125vw, 2.8125rem);
padding: 44px max(var(--page-padding), calc((100% - var(--content-width)) / 2));
}

.section-copy {
grid-column: 1 / span 5;
}

.concept-art {
grid-column: 6 / span 7;
}

.section-number {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
color: var(--pink);
font-family: var(--interface-font);
font-size: 21px;
font-weight: 700;
}

.number-rule {
flex: 1;
height: 1px;
background: rgba(11, 11, 15, 0.48);
}

.section-copy h2,
.design-intro h2,
.purpose-copy h2,
.closing-copy h2 {
margin-bottom: 20px;
font-size: clamp(1rem, 3vw, 2.8125rem);
}

.section-copy > p:not(.eyebrow):not(.small-note),
.design-intro > p:not(.eyebrow),
.purpose-copy > p:not(.eyebrow) {
max-width: 470px;
font-size: 15px;
line-height: 1.55;
}

.small-note {
margin-top: 22px;
color: var(--charcoal);
font-family: var(--interface-font);
font-size: 9px;
letter-spacing: 0.14em;
}


/* ---------- ARTWORK FRAMES ---------- */

.image-frame {
min-width: 0;
margin: 0;
}

.image-frame img {
height: 100%;
min-height: 260px;
max-height: 390px;
background: var(--charcoal);
}

.image-frame figcaption {
margin-top: 10px;
color: var(--charcoal);
font-family: var(--interface-font);
font-size: 9px;
letter-spacing: 0.12em;
}

.concept-art {
height: auto;
}

.concept-art img {
height: auto;
min-height: 0;
max-height: none;
object-position: center;
}


/* ---------- DESIGN / FOUR CARDS ---------- */

.design-section {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
column-gap: clamp(1rem, 3.125vw, 2.8125rem);
padding: 48px max(var(--page-padding), calc((100% - var(--content-width)) / 2));
background: #EAE6DE;
border-top: 1px solid rgba(11, 11, 15, 0.08);
border-bottom: 1px solid rgba(11, 11, 15, 0.12);
}

.design-intro {
grid-column: 1 / span 5;
min-width: 0;
}

.design-intro h2 {
font-size: clamp(28px, 2.8vw, 42px);
}

.visual-cards {
grid-column: 6 / span 7;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.25rem, 1.1vw, 1rem);
align-items: start;
}

.visual-card {
min-width: 0;
}

.card-image {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--obsidian);
}

.card-image img {
transition: transform 350ms ease, filter 350ms ease;
}

.visual-card:hover .card-image img {
transform: scale(1.06);
filter: saturate(1.18);
}

.about-page .visual-card .card-label {
margin: 20px 0 8px;
color: var(--pink);
font-family: var(--interface-font);
font-size: clamp(0.5rem, 0.76vw, 0.6875rem);
font-weight: 700;
letter-spacing: 0.07em;
overflow-wrap: anywhere;
}

.visual-card:nth-child(even) .card-label {
color: #009DAC;
}

.about-page .visual-card .card-description {
margin-top: 8px;
margin-bottom: 0;
font-size: clamp(0.5rem, 0.83vw, 0.75rem);
line-height: 1.5;
overflow-wrap: anywhere;
}


/* ---------- PURPOSE ---------- */

.purpose-section {
grid-template-columns: repeat(12, minmax(0, 1fr));
padding-top: 48px;
padding-bottom: 48px;
}

.purpose-art {
grid-column: 1 / span 7;
height: clamp(14rem, 20.84vw, 18.75rem);
}

.purpose-art img {
object-position: center;
}

.purpose-copy {
grid-column: 8 / span 5;
min-width: 0;
}

.text-link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-bottom: 5px;
border-bottom: 2px solid var(--cyan);
font-family: var(--interface-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}

.text-link span {
color: var(--pink);
font-size: 17px;
transition: transform 180ms ease;
}

.text-link:hover span {
transform: translate(3px, -3px);
}


/* ---------- CLOSING ---------- */

.closing-section {
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
min-height: clamp(20rem, 26.4vw, 23.75rem);
padding: 48px max(var(--page-padding), calc((100% - var(--content-width)) / 2));
column-gap: clamp(1rem, 3.125vw, 2.8125rem);
overflow: hidden;
border-top: 1px solid rgba(11, 11, 15, 0.3);
background: var(--cream) url("../home/images/about-hero-bg.jpg") center / cover no-repeat;
}

.closing-copy {
position: relative;
z-index: 2;
grid-column: 1 / span 6;
max-width: 560px;
}

.closing-copy h2 {
font-size: clamp(1.25rem, 4vw, 3.625rem);
}

.closing-line {
width: 80px;
height: 4px;
margin-bottom: 18px;
background: var(--pink);
}

.closing-copy > p:not(.eyebrow) {
max-width: 440px;
margin-bottom: 22px;
font-size: 15px;
}

.home-button {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: var(--obsidian);
color: var(--cream) !important;
font-family: var(--interface-font);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
transition: background 180ms ease, color 180ms ease;
}

.home-button span {
color: var(--cyan);
font-size: 19px;
}

.home-button:hover {
background: var(--pink);
color: var(--obsidian) !important;
}

.home-button:hover span {
color: var(--obsidian);
}

.closing-art {
position: relative;
grid-column: 7 / span 6;
min-height: 280px;
overflow: hidden;
}

.closing-ring {
position: absolute;
top: 50%;
left: 50%;
width: min(100%, 20.625rem);
height: auto;
aspect-ratio: 1;
border: 1px solid var(--pink);
border-radius: 50%;
transform: translate(-50%, -50%);
}

.ring-two {
width: 82%;
border-color: var(--cyan);
}

.ring-three {
width: 64%;
border-color: var(--red);
}

.closing-cross {
position: absolute;
top: 10%;
left: 12%;
color: var(--obsidian);
font-size: 30px;
}

.closing-caption {
position: absolute;
right: 0;
bottom: 12px;
color: var(--charcoal);
font-family: var(--interface-font);
font-size: 9px;
letter-spacing: 0.14em;
}


/* ---------- FOOTER ---------- */

.site-footer {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: center;
column-gap: clamp(0.75rem, 2vw, 1.75rem);
width: min(90%, 1440px);
min-height: 6rem;
margin-inline: auto;
padding: 1.5rem 0;
border-top: 1px solid rgb(43 43 50 / 20%);
background: var(--cream);
}

.site-footer .footer-wordmark {
grid-column: 1 / span 3;
width: fit-content;
color: var(--charcoal);
font-family: "Orbitron", sans-serif;
font-size: 0.95rem;
font-weight: 700;
}

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

.site-footer .footer-copy,
.site-footer .footer-back {
margin: 0;
font-family: "Space Grotesk", sans-serif;
font-size: 0.85rem;
font-weight: 400;
}

.site-footer .footer-copy {
grid-column: 4 / span 6;
color: rgb(43 43 50 / 70%);
text-align: center;
}

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

/* ---------- MOTION ACCESSIBILITY ---------- */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

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

/* Consistent section-label typography */

.about-page .eyebrow,
.about-page .art-label,
.about-page .hero-index,
.about-page .section-number {
font-family: "Orbitron", sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.about-page .eyebrow {
font-size: clamp(0.62rem, 0.7vw, 0.7rem);
line-height: 1.6;
}

.about-page .page-identifier {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.25rem;
color: var(--charcoal);
}

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

.about-page .page-identifier .identifier-separator {
color: var(--cyan);
}