@import url("../../../header.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: #181818; background: #f4f1ea; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img, video { display: block; width: 100%; }
a { color: inherit; }
.eyebrow { color: #c46851; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
h2, h3, h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }

.hero { min-height: 84vh; padding: 132px 5vw 72px; display: flex; flex-direction: column; justify-content: flex-end; }
.back-link { align-self: flex-start; margin-bottom: auto; color: #666; font-size: .82rem; text-decoration: none; }
.back-link:hover { color: #c46851; }
.hero h2 { margin: 18px 0 36px; max-width: 1100px; font-size: clamp(4.3rem, 11vw, 11rem); line-height: .8; }
.hero-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: end; border-top: 1px solid #aaa49b; padding-top: 24px; }
.hero-subtitle { font: 1.25rem/1.5 Georgia, serif; }
.hero-intro { max-width: 600px; color: #59554f; line-height: 1.75; }

.project-film { color: #fff; background: #111; }
.project-film video { max-height: 92vh; object-fit: contain; }
.film-caption { display: flex; justify-content: space-between; padding: 14px 5vw 16px; color: #aaa; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.facts { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 5vw; border-bottom: 1px solid #c9c2b8; }
.facts div { padding: 24px 20px 28px 0; }
.facts div + div { padding-left: 20px; border-left: 1px solid #c9c2b8; }
.facts span { display: block; margin-bottom: 7px; color: #8a8279; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.facts strong { font: 500 .95rem/1.4 Georgia, serif; }

.overview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; padding: 120px 7vw; }
.section-title h3, .image-story-copy h3, .closing h3 { margin-top: 14px; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1.04; }
.body-copy p, .image-story-copy > p:last-child { color: #58534e; line-height: 1.85; }
.body-copy p + p { margin-top: 1.5em; }
.wide-image { margin: 0 5vw 110px; }
.wide-image img { aspect-ratio: 16/9; object-fit: cover; }
figcaption { margin-top: 10px; color: #77716b; font-size: .7rem; letter-spacing: .035em; }

.strategy { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 7vw 120px; border-block: 1px solid #c9c2b8; }
.strategy article { min-height: 270px; padding: 30px 3vw 40px 0; }
.strategy article + article { padding-left: 3vw; border-left: 1px solid #c9c2b8; }
.strategy span { color: #c46851; font: italic 1rem Georgia, serif; }
.strategy h4 { margin: 48px 0 14px; font-size: 1.5rem; }
.strategy p { color: #655f59; font-size: .92rem; line-height: 1.75; }

.image-story { display: grid; grid-template-columns: repeat(2,1fr); background: #191817; color: #f3eee8; }
.image-story figure, .image-story-copy { min-height: 50vw; }
.image-story img { height: 100%; object-fit: cover; }
.image-story-copy { display: flex; flex-direction: column; justify-content: center; padding: 7vw; }
.image-story-copy > p:last-child { margin-top: 28px; color: #c4bdb5; }
.image-story-copy.second { background: #262320; }
.image-story figcaption { display: none; }
.characters { padding: 100px 10vw; background: #000; }
.characters img { max-width: 1200px; margin: auto; }
.characters figcaption { max-width: 1200px; margin: 10px auto 0; color: #8d8883; }

.closing { padding: 130px 7vw 140px; text-align: center; }
.closing h3 { max-width: 1000px; margin-inline: auto; }
.closing > p:not(.eyebrow) { max-width: 650px; margin: 30px auto 38px; color: #615c56; line-height: 1.8; }
.closing a { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid; font-size: .82rem; font-weight: 700; text-decoration: none; }
footer { display: flex; justify-content: space-between; padding: 36px 5vw; color: #777; border-top: 1px solid #c9c2b8; font-size: .75rem; }
footer a { text-decoration: none; }

@media (max-width: 800px) {
    .hero { min-height: 72vh; }
    .hero-bottom, .overview { grid-template-columns: 1fr; }
    .facts { grid-template-columns: repeat(2,1fr); }
    .strategy { grid-template-columns: 1fr; }
    .strategy article { min-height: auto; }
    .strategy article + article { padding-left: 0; border-top: 1px solid #c9c2b8; border-left: 0; }
    .strategy h4 { margin-top: 24px; }
}

@media (max-width: 560px) {
    .hero { min-height: 78vh; padding: 106px 22px 52px; }
    .hero h2 { font-size: clamp(3.6rem, 20vw, 5.5rem); }
    .hero-subtitle { font-size: 1.05rem; }
    .facts { grid-template-columns: 1fr; margin-inline: 22px; }
    .facts div, .facts div + div { padding: 16px 0; border-top: 1px solid #c9c2b8; border-left: 0; }
    .overview { padding: 78px 22px; }
    .wide-image { margin: 0 22px 72px; }
    .strategy { margin: 0 22px 78px; }
    .image-story { grid-template-columns: 1fr; }
    .image-story figure { min-height: auto; }
    .image-story img { aspect-ratio: 16/11; }
    .image-story-copy { min-height: auto; padding: 72px 22px; }
    .image-story-copy.second { order: 4; }
    .characters { padding: 64px 22px; }
    .closing { padding: 90px 22px 100px; }
    footer { padding-inline: 22px; }
}

::selection { color: #fff; background: #c46851; }