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

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { color: #171717; background: #f4f1ea; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
img { display: block; width: 100%; }
a { color: inherit; }
.section-label, .eyebrow { color: #b94a31; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }

.hero { display: grid; grid-template-columns: minmax(330px,.85fr) minmax(520px,1.15fr); gap: 6vw; align-items: end; min-height: 92vh; padding: 130px 5vw 64px; }
.back-link { display: inline-block; margin-bottom: 12vh; color: #666; font-size: .82rem; text-decoration: none; }
.back-link:hover { color: #b94a31; }
.hero h2, h3, h4 { font-family: Georgia, "Songti SC", "SimSun", serif; font-weight: 500; letter-spacing: -.045em; }
.hero h2 { margin: 14px 0 30px; font-size: clamp(3.5rem,7.7vw,8.2rem); line-height: .86; }
.hero-lead { max-width: 590px; color: #494949; font: 1.18rem/1.85 Georgia, "Songti SC", serif; }
.hero-visual { transform: rotate(1.2deg); }
.hero-visual img { box-shadow: 0 24px 60px rgba(27,18,15,.2); }
figcaption { margin-top: 10px; color: #756f68; font-size: .7rem; letter-spacing: .04em; }

.page-nav { position: sticky; top: 65px; z-index: 20; display: flex; gap: 24px; align-items: center; padding: 11px 5vw; border-block: 1px solid #ccc6bc; background: rgba(244,241,234,.94); backdrop-filter: blur(12px); }
.page-nav > span { color: #847e76; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.page-nav div { display: flex; gap: 6px; }
.page-nav a { padding: 8px 13px; border: 1px solid transparent; border-radius: 999px; font-size: .78rem; font-weight: 650; text-decoration: none; }
.page-nav a:hover { color: #fff; background: #b94a31; }

.intro { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; padding: 120px 7vw 72px; }
.section-heading h3, .photo-heading h3, .car-copy h3, .outcomes h3 { margin-top: 14px; font-size: clamp(2.5rem,5vw,5.4rem); line-height: 1.02; }
.intro-copy { max-width: 710px; }
.intro-copy p { color: #56524d; font-size: 1rem; line-height: 1.9; }
.intro-copy .lead { margin-bottom: 28px; color: #2f2c29; font: 1.34rem/1.75 Georgia, "Songti SC", serif; }
.learning-grid { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 7vw 120px; border-block: 1px solid #c8c1b6; }
.learning-grid article { min-height: 260px; padding: 34px 3vw 42px 0; }
.learning-grid article + article { padding-left: 3vw; border-left: 1px solid #c8c1b6; }
.learning-grid span { color: #b94a31; font: italic 1rem Georgia, serif; }
.learning-grid h4 { margin: 48px 0 14px; font-size: 1.5rem; }
.learning-grid p { max-width: 330px; color: #625d57; font-size: .92rem; line-height: 1.75; }

.featured-project { padding: 112px 5vw 124px; color: #f5eee5; background: #171316; scroll-margin-top: 110px; }
.project-title { display: grid; grid-template-columns: .8fr 1.2fr; align-items: end; }
.project-title .section-label { grid-column: 1 / -1; }
.project-title h3 { margin-top: 18px; font-size: clamp(4.2rem,10vw,10rem); line-height: .84; }
.project-subtitle { align-self: end; padding-bottom: 10px; color: #b9aea8; font-size: .78rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.project-summary { max-width: 710px; margin: 58px 0 70px auto; color: #cec5bf; font: 1.25rem/1.85 Georgia, "Songti SC", serif; }
.project-wide { max-width: 1500px; margin: auto; }
.project-wide img { box-shadow: 0 20px 70px rgba(0,0,0,.32); }
.featured-project figcaption { color: #8f8782; }
.mechanics { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: center; max-width: 1420px; margin: 120px auto; }
.mechanics-copy h4 { margin: 16px 0 28px; font-size: clamp(2.2rem,4vw,4.6rem); line-height: 1.03; }
.mechanics-copy > p:last-child { color: #bdb4af; line-height: 1.85; }
.project-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1500px; margin: 0 auto 90px; }
.project-gallery img { aspect-ratio: 16/9; object-fit: cover; }
.project-meta { display: grid; grid-template-columns: repeat(3,1fr); max-width: 1500px; margin: auto; border-block: 1px solid #4d4548; }
.project-meta div { padding: 26px 24px 28px 0; }
.project-meta div + div { padding-left: 24px; border-left: 1px solid #4d4548; }
.project-meta span { display: block; margin-bottom: 7px; color: #8f8782; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-meta strong { font: 500 1rem Georgia, "Songti SC", serif; }
.deck-link { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 44px auto 0; padding: 24px 0; border-block: 1px solid #6c6164; text-decoration: none; transition: color .2s, padding .2s; }
.deck-link:hover { padding-inline: 16px; color: #e56f51; }
.deck-link span { font: 1.35rem Georgia, "Songti SC", serif; }
.deck-link small { display: block; margin-bottom: 6px; color: #8f8782; font: 700 .65rem -apple-system,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.deck-link b { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }

.photo-section { padding: 120px 0 130px; overflow: hidden; background: #ece7de; scroll-margin-top: 110px; }
.photo-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 0 7vw 62px; }
.photo-heading > p { max-width: 470px; color: #69635d; font-size: .92rem; line-height: 1.75; }
.marquee { display: grid; gap: 18px; }
.marquee-track { display: flex; width: max-content; gap: 18px; animation: drift 55s linear infinite; }
.marquee-track.row-two { transform: translateX(-50%); animation-name: drift-reverse; animation-duration: 62s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img { width: clamp(260px,25vw,430px); height: clamp(180px,17vw,290px); flex: 0 0 auto; object-fit: cover; }
@keyframes drift { to { transform: translateX(calc(-50% - 9px)); } }
@keyframes drift-reverse { to { transform: translateX(0); } }

.car-section { display: grid; grid-template-columns: .34fr .66fr; gap: 6vw; padding: 120px 5vw; background: #fff; scroll-margin-top: 110px; }
.car-copy { position: sticky; top: 140px; align-self: start; }
.car-copy p:last-child { margin-top: 28px; max-width: 430px; color: #666; line-height: 1.85; }
.car-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.car-grid img { aspect-ratio: 4/3; object-fit: cover; }
.car-grid img:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 2/1; }

.outcomes { padding: 130px 7vw 140px; text-align: center; }
.outcomes h3 { max-width: 1000px; margin: 16px auto 28px; }
.outcomes > p:not(.section-label) { max-width: 590px; margin: 0 auto 36px; color: #666; line-height: 1.8; }
.outcomes a { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid #1a1a1a; 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 #cbc4b9; font-size: .75rem; }
footer a { text-decoration: none; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .back-link { margin-bottom: 60px; }
    .intro, .car-section { grid-template-columns: 1fr; }
    .learning-grid { grid-template-columns: 1fr; }
    .learning-grid article { min-height: auto; }
    .learning-grid article + article { padding-left: 0; border-top: 1px solid #c8c1b6; border-left: 0; }
    .learning-grid h4 { margin-top: 22px; }
    .mechanics { grid-template-columns: 1fr; }
    .project-title { grid-template-columns: 1fr; }
    .project-subtitle { margin-top: 22px; }
    .project-gallery { grid-template-columns: 1fr; }
    .project-meta { grid-template-columns: 1fr; }
    .project-meta div + div { padding-left: 0; border-top: 1px solid #4d4548; border-left: 0; }
    .photo-heading { display: block; }
    .photo-heading > p { margin-top: 24px; }
    .car-copy { position: static; }
}

@media (max-width: 580px) {
    .hero, .intro, .featured-project, .car-section { padding-inline: 22px; }
    .page-nav { top: 54px; padding-inline: 22px; overflow-x: auto; }
    .page-nav > span { display: none; }
    .page-nav div { min-width: max-content; }
    .project-summary { margin-top: 40px; }
    .project-meta { grid-template-columns: 1fr; }
    .deck-link { gap: 20px; align-items: flex-end; }
    .deck-link span { font-size: 1.05rem; }
    .deck-link b { text-align: right; }
    .car-grid { grid-template-columns: 1fr; }
    .car-grid img:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4/3; }
    footer { padding-inline: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee { overflow-x: auto; }
    .marquee-track { animation: none; }
    .marquee-track.row-two { transform: none; }
}

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