:root { --ink: #f6f4ee; --padding: 50px; --radius: 28px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #111; }
body { margin: 0; background: #111; color: var(--ink); font-family: Manrope, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; padding: 24px var(--padding); mix-blend-mode: difference; color: white; font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.35; letter-spacing: .04em; }
.wordmark { font-family: Manrope, sans-serif; font-size: 23px; font-weight: 800; line-height: 1; letter-spacing: -.1em; }.wordmark span { font-family: "DM Mono", monospace; font-size: 7px; vertical-align: top; margin-left: 3px; letter-spacing: 0; }.contact i, .project__content i, .outro__content i { font-style: normal; font-size: 1.15em; margin-left: 5px; }
main { padding: var(--padding); }
.panel { height: calc(100svh - (var(--padding) * 2)); min-height: 540px; position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: var(--padding); isolation: isolate; }
.panel__image { position: absolute; z-index: -2; inset: -22%; background-size: cover; background-position: center; will-change: transform; transform: translate3d(0, 0, 0) scale(1.06); image-rendering: pixelated; image-rendering: -moz-crisp-edges; }.panel__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(0,0,0,.63) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.15) 100%); }
.hero__content, .project__content, .outro__content { height: 100%; padding: 48px; display: flex; flex-direction: column; justify-content: center; }.eyebrow, .project__meta, .hero__bottom, .outro__footer { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .055em; text-transform: uppercase; }.hero__content .eyebrow { position: absolute; top: 48px; left: 48px; }.hero h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.075em; line-height: .91; font-size: clamp(3.5rem, 8.6vw, 9rem); }.hero h1 em, h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.09em; }.hero__bottom { position: absolute; display: flex; align-items: center; justify-content: space-between; bottom: 40px; left: 48px; right: 48px; }.scroll-mark { font-size: 18px; animation: float 2s ease-in-out infinite; }
.project__meta { position: absolute; left: 48px; right: 48px; top: 45px; display: flex; justify-content: space-between; }.project__content { align-items: flex-start; }.project__content .eyebrow { margin: 0 0 15px; }.project__content a, .outro__content a { margin-top: 35px; border-bottom: 1px solid currentColor; padding-bottom: 7px; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.project__content a:hover, .outro__content a:hover { opacity: .65; }.light-type .panel__shade { background: linear-gradient(110deg, rgba(0,0,0,.76), rgba(0,0,0,.15)); }
.outro__content { align-items: center; text-align: center; }.outro__content .eyebrow { margin: 0 0 16px; }.outro__footer { position: absolute; bottom: 40px; left: 48px; right: 48px; display: flex; justify-content: space-between; }
.case-study { padding: 90px 0; border-bottom: 1px solid rgba(246,244,238,.12); }
.case-study__inner { max-width: 760px; margin: 0 auto; padding: 0 48px; }
.case-study__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.case-study__head span:first-child { font-family: Manrope, sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.03em; text-transform: none; opacity: 1; }
.case-study__blurb { font-size: 17px; line-height: 1.6; opacity: .85; max-width: 620px; }
.case-study__spots { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case-study__spots li { border-top: 1px solid rgba(246,244,238,.2); padding-top: 16px; }
.case-study__spots h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.case-study__spots p { margin: 0 0 14px; font-size: 14px; opacity: .75; line-height: 1.4; }
.case-study__spots a, .case-study__extra { font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.case-study__spots a:hover, .case-study__extra:hover { opacity: .65; }
.case-study__extra { display: inline-block; margin-top: 32px; }
.case-study__gallery { display: flex; gap: 16px; margin-top: 40px; }
.case-study__gallery img { width: 100%; border-radius: 14px; object-fit: cover; max-height: 320px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; }
@media (max-width: 700px) {
  .case-study { padding: 60px 0; }
  .case-study__inner { padding: 0 28px; }
  .case-study__spots { grid-template-columns: 1fr; gap: 24px; }
  .case-study__gallery { flex-direction: column; }
}

@keyframes float { 50% { transform: translateY(6px); } }
@media (max-width: 700px) { :root { --padding: 16px; --radius: 20px; }.site-header { padding: 20px 25px; }.panel { min-height: 480px; margin-bottom: 16px; }.hero__content, .project__content, .outro__content { padding: 28px; }.hero__content .eyebrow, .project__meta { top: 28px; left: 28px; right: 28px; }.hero__bottom, .outro__footer { bottom: 25px; left: 28px; right: 28px; }.hero__bottom span:last-child { display: none; }.project h2, .outro h2 { font-size: clamp(3rem, 14vw, 5rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.panel__image, .scroll-mark { animation: none !important; transform: none !important; } }