:root { --bg: #292a2a; --bg: oklch(0.18 0.012 85); --ink: #e5e5e4; --ink: oklch(0.94 0.018 90); --muted: #9b9a99; --muted: oklch(0.64 0.018 85); --accent: #cbb685; --accent: oklch(0.76 0.09 80); --bg-2: #343535; --bg-2: oklch(0.24 0.012 85); --hair: rgba(229, 229, 228, 0.1); --line: rgba(203, 182, 133, 0.2); --font-display: 'DM Serif Display', serif; --font-body: 'Inter', system-ui, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: normal; } img { display: block; max-width: 100%; height: auto; } b { color: var(--accent); font-weight: normal; } .reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } .hero { position: relative; height: 100svh; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6rem; } .hero__media { position: absolute; inset: 0; will-change: transform; z-index: 0; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, var(--line) 0%, transparent 60%); z-index: 1; } .hero__overlay { position: relative; z-index: 2; text-align: center; max-width: 800px; padding: 0 2rem; } .hero__eyebrow { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1.5rem; } .hero__title { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; color: var(--ink); } .thesis { padding: 8rem 2rem; display: flex; justify-content: center; } .thesis__inner { max-width: 900px; text-align: center; } .thesis__title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; margin-bottom: 2rem; color: var(--ink); } .thesis__lede { font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.5; color: var(--muted); max-width: 600px; margin: 0 auto; } .feature { padding: 6rem 2rem; display: flex; justify-content: center; } .feature__inner { max-width: 1100px; width: 100%; display: grid; grid-template-columns: 1fr 0.82fr; gap: 6rem; align-items: center; } .feature--mirrored .feature__inner { grid-template-columns: 0.82fr 1fr; } .feature__index { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.5rem; display: block; margin-bottom: 1.5rem; } .feature__text h2 { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: 1.5rem; line-height: 1.2; } .feature__text p { font-size: 1.125rem; line-height: 1.6; color: var(--muted); } .feature__visual { position: relative; } .feature__visual img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--bg-2); } .caption { margin-top: 1rem; font-size: 0.875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .gallery { padding: 6rem 0; overflow: hidden; } .gallery__strip { display: grid; grid-template-columns: 0.72fr 1.1fr 0.72fr; gap: 1rem; width: 100vw; height: 60vh; min-height: 400px; } .gallery__cell img { width: 100%; height: 100%; object-fit: cover; background: var(--bg-2); } .gallery__caption { text-align: center; margin-top: 2rem; } .rows { padding: 8rem 2rem; display: flex; justify-content: center; } .rows__inner { max-width: 900px; width: 100%; } .row { display: grid; grid-template-columns: 3rem 1fr 2fr; gap: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--hair); align-items: baseline; } .row__num { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 1.25rem; } .row__title { font-size: 1.5rem; color: var(--ink); } .row__desc { font-size: 1.125rem; color: var(--muted); line-height: 1.5; } .cta { padding: 8rem 2rem 12rem; display: flex; justify-content: center; text-align: center; } .cta__inner { max-width: 800px; } .cta__title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; margin-bottom: 3rem; } .btn { display: inline-block; background: var(--accent); color: var(--bg); padding: 1.25rem 3rem; text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: 0.02em; transition: background 0.3s ease; border: none; cursor: pointer; } .btn:hover { background: var(--ink); color: var(--bg); } .footer { padding: 4rem 2rem 2rem; border-top: 1px solid var(--hair); text-align: center; color: var(--muted); font-size: 0.875rem; } .footer__meta { margin-bottom: 4rem; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; } .footer__copy { margin-top: 2rem; } @media (max-width: 860px) { .feature__inner, .feature--mirrored .feature__inner { grid-template-columns: 1fr; gap: 3rem; } .feature--mirrored .feature__visual { order: -1; } .gallery__strip { grid-template-columns: 1fr; height: auto; } .gallery__cell { height: 40vh; } .row { grid-template-columns: 1fr; gap: 0.5rem; padding: 2rem 0; } .row__num { margin-bottom: 0.5rem; display: block; } }