:root { --bg:#050505; --ink:#f4f4f2; --muted:#929292; --line:#252525; --accent:#e4e3df; }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--ink); scroll-behavior:smooth; }
body { margin:0; font-family:Poppins,Arial,sans-serif; background:var(--bg); }
a { color:inherit; text-decoration:none; }
.nav { position:fixed; inset:0 0 auto; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:25px 24px; mix-blend-mode:difference; color:#fff; }
.nav__links, .nav__right { display:flex; gap:22px; font:500 12px/1 Poppins,Arial,sans-serif; letter-spacing:-.04em; }
.nav__right { justify-content:flex-end; }
.mark { width:54px; height:54px; display:grid; place-items:center; }
.mark img { display:block; width:100%; height:100%; object-fit:contain; }
.hero { min-height:100svh; padding:20vh 3.5vw 5vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.hero h1 { margin:0; font-family:"Fjalla One",Impact,sans-serif; font-size:clamp(12vw,15.7vw,280px); font-weight:400; line-height:.77; letter-spacing:-.02em; white-space:nowrap; }
.hero p { max-width:1200px; margin:36px auto 0; color:#a6a5a3; text-align:center; font-size:clamp(11px,1.25vw,17px); line-height:1.35; letter-spacing:-.055em; }
.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border-top:1px solid var(--line); }
.work { position:relative; min-height:58vw; overflow:hidden; background:#111; display:flex; align-items:flex-end; padding:24px; }
.work::before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04) 34%,rgba(0,0,0,.78) 100%); transition:background .45s ease; }
.work:hover::before { background:linear-gradient(180deg,rgba(0,0,0,.02) 28%,rgba(0,0,0,.52) 100%); }
.work__media { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.work:hover .work__media { transform:scale(1.045); }
.work__meta { position:relative; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:flex-end; font:500 12px/1 Poppins,Arial,sans-serif; }
.work__title { font:400 clamp(20px,3vw,46px)/.95 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.works-intro,.page-hero { padding:180px 5vw 70px; }
.kicker { color:var(--muted); font:500 12px/1 Poppins,Arial,sans-serif; text-transform:uppercase; }
.page-hero__title { max-width:1080px; margin:20px 0 0; font:400 clamp(56px,10vw,170px)/.83 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.filters { padding:0 5vw 50px; display:flex; flex-wrap:wrap; gap:12px 30px; font:500 12px/1 Poppins,Arial,sans-serif; }
.filters a[aria-current="page"] { color:var(--muted); }
.editorial { padding:180px 8vw 80px; max-width:1250px; }
.editorial h1 { margin:15px 0 24px; font:400 clamp(44px,7.4vw,120px)/.88 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.editorial .lede { max-width:720px; font-size:clamp(17px,2vw,29px); line-height:1.25; letter-spacing:-.055em; color:#d5d4d0; }
.journal-list { margin:0 5vw 110px; }
.journal-card { border-top:1px solid var(--line); display:grid; grid-template-columns:1.1fr 1fr; min-height:410px; }
.journal-card:last-child { border-bottom:1px solid var(--line); }
.journal-card__art { min-height:340px; background:#242424; overflow:hidden; }
.journal-card__art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.journal-card:hover .journal-card__art img { transform:scale(1.035); }
.journal-card__body { padding:35px; display:flex; flex-direction:column; justify-content:flex-end; }
.journal-card h2 { max-width:650px; margin:14px 0; font:400 clamp(30px,4vw,64px)/.95 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.journal-card p { color:var(--muted); max-width:560px; }
.journal-card__read { margin-top:28px; font:500 11px/1 Poppins,Arial,sans-serif; letter-spacing:.04em; }
.article { padding:180px 8vw 100px; }
.article__header { max-width:1120px; }
.article__header h1 { max-width:1120px; margin:18px 0 28px; font:400 clamp(48px,7.4vw,120px)/.88 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.article__header .lede { max-width:720px; font-size:clamp(18px,2vw,29px); line-height:1.25; letter-spacing:-.045em; color:#d5d4d0; }
.article__image { margin:90px 0 0; }
.article__image img { display:block; width:100%; max-height:76svh; object-fit:cover; background:#202020; }
.article__image figcaption { margin-top:12px; color:var(--muted); font:500 10px/1.3 Poppins,Arial,sans-serif; text-transform:uppercase; }
.article__body { max-width:760px; margin:100px auto 0; font:400 18px/1.65 Poppins,Arial,sans-serif; }
.article__body h2 { margin:80px 0 22px; font:400 clamp(31px,4vw,58px)/.94 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.article__body p { margin:0 0 24px; color:#deddd9; }
.article__body ul { margin:12px 0 38px; padding-left:20px; color:#deddd9; }
.article__body li { margin:10px 0; padding-left:5px; }
.article__sources { max-width:760px; margin:90px auto 0; padding:32px 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.55; }
.article__sources h2 { margin:25px 0 12px; color:var(--text); font:400 31px/1 "Fjalla One",Impact,sans-serif; }
.article__sources ol { padding-left:19px; }
.article__sources li { margin:9px 0; }
.project { padding:180px 5vw 80px; }
.project h1 { margin:16px 0 0; font:400 clamp(64px,14vw,230px)/.78 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.project__type { margin-top:28px; color:var(--muted); font:500 12px/1 Poppins,Arial,sans-serif; }
.project__visual { display:block; width:100%; min-height:65svh; margin-top:80px; background:#141414; object-fit:cover; }
.project__credits { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; margin-top:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--line); }
.project__credits div { min-height:138px; padding:22px 18px; background:var(--bg); display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.project__credits span { color:var(--muted); font:500 11px/1 Poppins,Arial,sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.project__credits strong { font:400 clamp(17px,1.65vw,27px)/1 "Fjalla One",Impact,sans-serif; letter-spacing:-.015em; text-transform:uppercase; }
.project__narrative { max-width:1040px; margin:0 auto; padding:118px 0 82px; }
.project__narrative article { display:grid; grid-template-columns:minmax(170px,.42fr) minmax(0,1fr); gap:54px; padding:34px 0 46px; border-top:1px solid var(--line); }
.project__narrative article:last-child { border-bottom:1px solid var(--line); }
.project__narrative h2 { margin:0; color:var(--muted); font:500 12px/1.05 Poppins,Arial,sans-serif; letter-spacing:.02em; text-transform:uppercase; }
.project__narrative p { max-width:680px; margin:0; color:#d2d1ce; font-size:clamp(18px,1.65vw,25px); line-height:1.36; letter-spacing:-.045em; }
.project__body { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1000px; padding:55px 0; }
.project__body p { margin:0; font-size:18px; line-height:1.45; color:#c9c8c5; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:15px 0 70px; }
.case-gallery img { display:block; width:100%; min-height:30vw; object-fit:cover; background:#151515; }
.case-gallery img:nth-child(3n) { grid-column:span 2; min-height:46vw; }
.contact { min-height:80svh; padding:28svh 5vw 80px; }
.contact h1 { margin:0 0 45px; font:400 clamp(48px,9vw,150px)/.85 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; }
.contact a { display:block; margin:12px 0; width:max-content; max-width:100%; overflow-wrap:anywhere; font-size:clamp(19px,3.4vw,52px); letter-spacing:-.065em; border-bottom:1px solid var(--ink); }
.about { padding:180px 5vw 80px; }
.about__statement { max-width:1300px; font:400 clamp(46px,7.5vw,120px)/.85 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.about__body { max-width:700px; margin:110px 0; color:#b8b7b5; font-size:clamp(18px,2vw,28px); line-height:1.35; letter-spacing:-.05em; }
.team { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.team div { padding:28px; min-height:230px; background:var(--bg); display:flex; flex-direction:column; justify-content:flex-end; }
.team strong { font:400 23px "Fjalla One",Impact,sans-serif; letter-spacing:-.01em; } .team span { color:var(--muted); margin-top:6px; font:12px Poppins,Arial,sans-serif; }
.footer { padding:110px 5vw 35px; border-top:1px solid var(--line); }
.footer__claim { max-width:1200px; font:400 clamp(48px,8vw,135px)/.8 "Fjalla One",Impact,sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.footer__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:110px; }
.footer__cols h3 { color:var(--muted); font:500 12px Poppins,Arial,sans-serif; } .footer__cols a { display:block; margin-top:10px; font-size:15px; }
.copyright { color:var(--muted); margin-top:100px; font:11px Poppins,Arial,sans-serif; }
@media (max-width:700px) { .nav { padding:19px 16px; } .nav__links { gap:12px; } .nav__links a:nth-child(2) { display:none; } .mark { width:38px; height:38px; } .nav__right { font-size:0; } .nav__right a { font-size:10px; } .hero { padding:27vh 16px 9vh; } .hero h1 { font-size:15vw; } .hero p { margin-top:25px; } .work-grid { grid-template-columns:1fr; } .work { min-height:92vw; padding:17px; } .works-intro,.page-hero,.project,.about { padding-left:16px; padding-right:16px; } .journal-list { margin:0 16px 70px; } .journal-card { grid-template-columns:1fr; } .journal-card__art { min-height:66vw; } .journal-card__body { padding:24px 0 34px; } .editorial,.article { padding:150px 16px 60px; } .article__image { margin-top:55px; } .article__body { margin-top:62px; font-size:17px; } .article__body h2 { margin-top:58px; } .article__sources { margin-top:62px; } .project__visual { margin-top:46px; min-height:48svh; } .project__credits { grid-template-columns:repeat(2,minmax(0,1fr)); } .project__credits div { min-height:116px; padding:16px; } .project__credits div:last-child { grid-column:span 2; } .project__narrative { padding:68px 0 45px; } .project__narrative article { grid-template-columns:1fr; gap:17px; padding:25px 0 31px; } .project__body { grid-template-columns:1fr; } .case-gallery { grid-template-columns:1fr; padding-bottom:35px; } .case-gallery img,.case-gallery img:nth-child(3n) { grid-column:span 1; min-height:72vw; } .contact { padding:24svh 16px 60px; } .team { grid-template-columns:1fr; } .team div { min-height:150px; } .footer { padding:70px 16px 25px; } .footer__cols { grid-template-columns:1fr; margin-top:70px; } }