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

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { color: #181818; background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img, video { display: block; width: 100%; }
a { color: inherit; }

.page-hero { padding: 132px 5vw 72px; max-width: 1440px; }
.back-link { display: inline-block; margin-bottom: 52px; color: #666; font-size: .82rem; text-decoration: none; }
.back-link:hover { color: #c46851; }
.eyebrow, .project-kicker, .section-label { color: #c46851; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.page-hero h2, .project h3, .story-copy h4 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.045em; }
.page-hero h2 { margin: 12px 0 24px; font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: .9; }
.hero-lead { max-width: 760px; color: #4e4e4e; font: 1.28rem/1.7 Georgia, serif; }

.project-nav { position: sticky; top: 65px; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 12px 5vw; border-block: 1px solid #ddd; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.project-nav > span { color: #777; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-nav div { display: flex; gap: 8px; }
.project-nav a { padding: 9px 14px; border: 1px solid #bbb; border-radius: 99px; font-size: .78rem; font-weight: 650; text-decoration: none; }
.project-nav a:hover { color: #fff; border-color: #c46851; background: #c46851; }

.project { padding: 96px 5vw 112px; scroll-margin-top: 125px; }
.project-heading { display: grid; grid-template-columns: 70px minmax(260px, 1.1fr) minmax(280px, .9fr); gap: 30px; align-items: end; margin-bottom: 52px; }
.project-number { color: #c46851; font: italic 1.1rem Georgia, serif; }
.project h3 { margin-top: 10px; max-width: 790px; font-size: clamp(2.5rem, 5.4vw, 5.5rem); line-height: .98; }
.project-summary { max-width: 540px; color: #555; font-size: 1rem; line-height: 1.75; }
.video-shell { position: relative; max-width: 1600px; background: #111; }
.video-shell video { aspect-ratio: 16/9; object-fit: cover; }
.media-note { position: absolute; right: 14px; bottom: 12px; padding: 6px 9px; color: #fff; background: rgba(0,0,0,.65); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }

.project-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 100px; border-bottom: 1px solid #ddd; }
.project-facts div { padding: 22px 18px 24px 0; border-right: 1px solid #ddd; }
.project-facts div + div { padding-left: 22px; }
.project-facts span, .team-line span { display: block; margin-bottom: 6px; color: #888; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.project-facts strong { font: 500 .94rem/1.4 Georgia, serif; }

.story-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; align-items: center; margin: 0 auto 88px; max-width: 1400px; }
.story-section.reverse { grid-template-columns: .85fr 1.15fr; }
.story-copy h4 { margin: 12px 0 24px; font-size: clamp(2rem, 3.5vw, 3.6rem); line-height: 1.08; }
.story-copy > p:last-child { color: #555; line-height: 1.75; }
figure img { background: #eee; }
figcaption { margin-top: 10px; color: #777; font-size: .72rem; letter-spacing: .03em; }
.image-grid { display: grid; gap: 22px; max-width: 1500px; margin: 0 auto 88px; }
.image-grid.two { grid-template-columns: repeat(2, 1fr); }
.image-grid.three { grid-template-columns: repeat(3, 1fr); }
.image-grid img { aspect-ratio: 16/9; object-fit: cover; }
.team-line { display: flex; gap: 28px; padding: 26px 0; margin: -30px 0 60px; border-block: 1px solid #333; }
.team-line p { font: 1rem Georgia, serif; }

.document-link { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: auto; padding: 24px 0; border-block: 1px solid #bbb; text-decoration: none; transition: color .2s, padding .2s; }
.document-link:hover { padding-inline: 16px; color: #c46851; }
.document-link span { font: 1.35rem Georgia, serif; }
.document-link small { display: block; margin-bottom: 5px; color: #888; font: 700 .66rem -apple-system, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.document-link b { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

.dark-project { color: #f5f1eb; background: #181716; }
.dark-project .project-summary, .dark-project .story-copy > p:last-child { color: #c9c4bd; }
.dark-project .project-facts, .dark-project .project-facts div { border-color: #494642; }
.dark-project .project-facts span, .dark-project figcaption, .dark-project .team-line span, .dark-project .document-link small { color: #99948e; }
.dark-project .document-link { border-color: #67625c; }

footer { display: flex; justify-content: space-between; padding: 36px 5vw; color: #777; border-top: 1px solid #ddd; font-size: .75rem; }
footer a { text-decoration: none; }

@media (max-width: 820px) {
    .page-hero { padding-top: 105px; }
    .project-nav { top: 54px; overflow-x: auto; }
    .project-nav > span { display: none; }
    .project-nav div { min-width: max-content; }
    .project { padding-top: 64px; }
    .project-heading { grid-template-columns: 35px 1fr; }
    .project-summary { grid-column: 2; }
    .project-facts { grid-template-columns: repeat(2, 1fr); margin-bottom: 64px; }
    .project-facts div:nth-child(2) { border-right: 0; }
    .story-section, .story-section.reverse { grid-template-columns: 1fr; gap: 36px; }
    .image-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .page-hero, .project { padding-inline: 22px; }
    .project-nav { padding-inline: 22px; }
    .back-link { margin-bottom: 34px; }
    .hero-lead { font-size: 1.05rem; }
    .project-heading { display: block; }
    .project-number { margin-bottom: 20px; }
    .project-summary { margin-top: 24px; }
    .project-facts { grid-template-columns: 1fr; }
    .project-facts div, .project-facts div + div { padding: 16px 0; border-right: 0; border-top: 1px solid #ddd; }
    .image-grid.two { grid-template-columns: 1fr; }
    .document-link { align-items: flex-end; gap: 20px; }
    .document-link span { font-size: 1.05rem; }
    .document-link b { text-align: right; }
    .team-line { display: block; }
    footer { padding-inline: 22px; }
}