/* ==========================================
FILMMAKING
Zara K. Reed
========================================== */


/* ==========================================
BASE
========================================== */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: #0d0d0d;
color: #e0e6ed;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.8;
}

a {
transition: .25s ease;
}


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

.film-header {
max-width: 1180px;
margin: 0 auto;
padding: 40px 30px 100px;
border-bottom: 1px solid #1a1a1a;
}

.film-header-inner {
max-width: 1050px;
margin: 0 auto;
}

.back-link {
display: inline-block;
color: #ffb703;
text-decoration: none;
font-weight: bold;
margin-bottom: 85px;
}

.back-link:hover {
opacity: .75;
}

.film-hero {
max-width: 900px;
}

.eyebrow,
.section-label {
display: block;
color: #ffb703;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: bold;
}

.film-hero h1 {
margin: 18px 0 12px;
color: #ffffff;
font-size: clamp(3rem, 7vw, 6.5rem);
line-height: .95;
font-weight: 700;
letter-spacing: -3px;
}

.hero-subtitle {
margin: 0 0 30px;
color: #c4ccd6;
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-style: italic;
}

.hero-intro {
max-width: 760px;
margin: 0;
color: #9da8b5;
font-size: 1rem;
line-height: 1.9;
}


/* ==========================================
MAIN
========================================== */

.film-main {
max-width: 1180px;
margin: 0 auto;
padding: 90px 30px 20px;
}


/* ==========================================
INTRO
========================================== */

.film-intro {
max-width: 820px;
margin: 0 auto 85px;
text-align: center;
}

.film-intro h2 {
margin: 18px 0 22px;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3.3rem);
line-height: 1.15;
}

.film-intro p {
margin: 0;
color: #929eac;
line-height: 1.9;
}


/* ==========================================
FEATURED ARTICLE
========================================== */

.featured-article {
position: relative;
display: grid;
grid-template-columns: 150px 1fr;
gap: 45px;
padding: 60px;
border: 1px solid #282828;
background:
linear-gradient(
145deg,
#171717 0%,
#101010 60%,
#17130b 100%
);
overflow: hidden;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}

.featured-article::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
transparent 45%,
rgba(255,183,3,.08) 45%,
rgba(255,183,3,.08) 46%,
transparent 46%
);
pointer-events: none;
}

.featured-article:hover {
transform: translateY(-5px);
border-color: rgba(255,183,3,.55);
box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.featured-number {
position: relative;
z-index: 2;
color: #3b3b3b;
font-size: 6rem;
font-weight: bold;
line-height: 1;
}

.featured-content {
position: relative;
z-index: 2;
max-width: 720px;
}

.article-category {
display: block;
margin-bottom: 15px;
color: #ffb703;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}

.featured-content h2 {
margin: 0 0 12px;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: 1.08;
}

.article-meta {
margin: 0 0 25px;
color: #7f8792;
font-size: .85rem;
text-transform: uppercase;
letter-spacing: 2px;
}

.featured-content > p:not(.article-meta) {
margin: 0 0 30px;
color: #9da8b5;
line-height: 1.9;
}

.article-link {
display: inline-flex;
align-items: center;
gap: 12px;
color: #ffb703;
text-decoration: none;
font-weight: bold;
}

.article-link span {
font-size: 1.2rem;
transition: transform .25s ease;
}

.article-link:hover {
color: #ffffff;
}

.article-link:hover span {
transform: translateX(5px);
}


/* ==========================================
FUTURE SECTION
========================================== */

.future-section {
margin: 110px auto 80px;
padding: 80px 0;
border-top: 1px solid #202020;
}

.future-section > .section-label,
.future-section > h2,
.future-section > p {
max-width: 820px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.future-section h2 {
margin-top: 18px;
margin-bottom: 22px;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.15;
}

.future-section > p {
margin-bottom: 55px;
color: #929eac;
line-height: 1.9;
}

.future-line {
width: 55px;
height: 2px;
margin: 0 auto 35px;
background: #ffb703;
}


/* ==========================================
FUTURE CARDS
========================================== */

.future-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}

.future-card {
padding: 35px;
border: 1px solid #242424;
background: #111111;
transition:
transform .3s ease,
border-color .3s ease;
}

.future-card:hover {
transform: translateY(-4px);
border-color: rgba(255,183,3,.45);
}

.future-card span {
color: #3a3a3a;
font-size: 2.5rem;
font-weight: bold;
}

.future-card h3 {
margin: 15px 0 12px;
color: #ffffff;
font-size: 1.5rem;
}

.future-card p {
margin: 0;
color: #8f9aa8;
line-height: 1.8;
}


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

.film-footer {
max-width: 1180px;
margin: 0 auto;
padding: 45px 30px 35px;
border-top: 1px solid #1a1a1a;
text-align: center;
}

.footer-inner {
max-width: 760px;
margin: 0 auto;
}

.footer-statement {
margin: 0;
color: #6f7885;
font-size: .95rem;
line-height: 1.8;
}

.copyright {
margin: 25px 0 0;
color: #555d68;
font-size: .85rem;
}


/* ==========================================
RESPONSIVE
========================================== */

@media (max-width: 800px) {

.film-header {
padding: 30px 22px 75px;
}

.back-link {
margin-bottom: 60px;
}

.film-main {
padding: 70px 22px 10px;
}

.featured-article {
grid-template-columns: 1fr;
gap: 20px;
padding: 40px 32px;
}

.featured-number {
font-size: 4rem;
}

.future-section {
margin-top: 80px;
padding: 65px 0;
}

.future-grid {
grid-template-columns: 1fr;
}

.film-footer {
padding-left: 22px;
padding-right: 22px;
}

}


@media (max-width: 500px) {

.film-header {
padding-top: 25px;
}

.film-hero h1 {
letter-spacing: -2px;
}

.featured-article {
padding: 32px 28px;
}

.featured-number {
font-size: 3.5rem;
}

.future-card {
padding: 28px;
}

}