@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;600;700&family=Libre+Baskerville:ital@0;1&display=swap');
:root{--black:#090909;--silver:#d7d7d2;--paper:#f4f3ee;--coral:#ff5c49}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:"Archivo Narrow",sans-serif;font-size:18px;line-height:1.48}
img{display:block;max-width:100%}
a{color:inherit}
.frame{width:min(1280px,calc(100% - 56px));margin:auto}
.top{height:74px;border-bottom:1px solid #3c3c3c;display:grid;grid-template-columns:1fr auto;align-items:center}
.logo{display:flex;gap:12px;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.focus{width:25px;height:25px;border:2px solid var(--coral);position:relative}
.focus:after{content:"";width:5px;height:5px;background:var(--coral);position:absolute;inset:0;margin:auto}
.top nav{display:flex;gap:30px;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.top nav a{text-decoration:none}
.hero{display:grid;grid-template-columns:.42fr .58fr;min-height:740px;border-bottom:1px solid #333}
.hero-copy{padding:100px 6vw 70px max(28px,calc((100vw - 1280px)/2));display:flex;flex-direction:column;justify-content:space-between}
.kicker,.code{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#aaa}
.hero h1{font-size:clamp(68px,8vw,126px);line-height:.82;text-transform:uppercase;margin:30px 0;font-weight:600;letter-spacing:-.055em}
.hero h1 i{font-family:"Libre Baskerville",serif;font-size:.48em;text-transform:none;color:var(--coral);font-weight:400}
.hero-copy p{font-family:"Libre Baskerville",serif;font-size:17px;max-width:480px}
.hero-media{position:relative;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05)}
.cross{position:absolute;inset:35px;border:1px solid rgba(255,255,255,.55)}
.cross:before,.cross:after{content:"";position:absolute;background:var(--coral)}
.cross:before{width:34px;height:2px;left:-17px;top:50%}
.cross:after{width:2px;height:34px;left:0;top:calc(50% - 17px)}
.diagnostic{padding:120px 0;background:var(--paper);color:var(--black)}
.section-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw;margin-bottom:70px}
.section-head h2{font-size:clamp(52px,7vw,94px);line-height:.86;text-transform:uppercase;letter-spacing:-.045em;margin:0}
.section-head p{font-family:"Libre Baskerville",serif;max-width:580px;margin:10px 0}
.contact-sheet{display:grid;grid-template-columns:1fr 1.25fr .75fr;grid-template-rows:290px 220px;gap:10px}
.shot{position:relative;background:#ddd;overflow:hidden;margin:0;min-width:0}
.shot img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.shot:nth-child(2){grid-row:span 2}
.shot:nth-child(4){grid-column:3}
.shot label{position:absolute;left:12px;bottom:12px;background:var(--coral);padding:6px 9px;text-transform:uppercase;font-size:11px;letter-spacing:.1em}
.missions{padding:130px 0}
.mission-title{font-family:"Libre Baskerville",serif;font-weight:400;font-size:clamp(50px,7vw,92px);max-width:900px;line-height:1.03;margin:0 0 90px}
.exposure{display:grid;grid-template-columns:220px 1fr 1fr;border-top:1px solid #444;min-height:270px}
.exposure:last-child{border-bottom:1px solid #444}
.exposure .name{padding:35px 25px 35px 0;text-transform:uppercase;letter-spacing:.12em;color:var(--coral)}
.exposure img{height:270px;width:100%;object-fit:cover;filter:grayscale(.85)}
.exposure .copy{padding:45px}
.exposure h3{font-size:36px;line-height:.95;text-transform:uppercase;margin:0 0 18px}
.exposure p{max-width:430px;margin:0;color:#c9c9c4}
.darkroom{background:#151515;padding:130px 0}
.dark-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;align-items:center}
.dark-grid img{width:100%;height:610px;object-fit:cover}
.dark-grid h2{font-size:clamp(60px,8vw,108px);text-transform:uppercase;line-height:.84;margin:18px 0}
.dark-grid p{font-family:"Libre Baskerville",serif}
.notice{border-left:4px solid var(--coral);padding-left:22px;margin-top:34px;color:#bbb;font-size:14px}
.settings{padding:130px 0;background:var(--silver);color:var(--black)}
.settings h2{font-family:"Libre Baskerville",serif;font-weight:400;font-size:clamp(52px,7vw,88px);margin:0 0 70px}
.setting{display:grid;grid-template-columns:1fr 1.8fr;border-top:2px solid var(--black);padding:25px 0 55px}
.setting strong{text-transform:uppercase;letter-spacing:.12em}
.setting p{margin:0;max-width:620px}
.boundary{display:grid;grid-template-columns:1fr 1fr}
.boundary article{padding:110px max(28px,calc((100vw - 1280px)/2));padding-right:7vw;min-width:0;overflow-wrap:anywhere}
.boundary article:first-child{background:var(--paper);color:var(--black);padding-left:max(28px,calc((100vw - 1280px)/2))}
.boundary article:last-child{background:var(--coral);color:var(--black);padding-left:7vw}
.boundary h2{font-size:52px;text-transform:uppercase;line-height:.9;margin:0 0 35px}
.boundary ul{list-style:square;padding-left:20px}
.boundary li{margin:12px 0}
.boundary p{font-size:16px}
.contact{padding:130px 0}
.contact h2{font-size:clamp(75px,13vw,180px);text-transform:uppercase;line-height:.75;letter-spacing:-.055em;margin:0 0 100px}
.contact-line{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid #555;padding-top:28px}
.email{color:var(--coral);font-size:22px;overflow-wrap:anywhere}
.foot{background:var(--paper);color:var(--black);padding:28px 0;font-size:14px}
.foot .frame{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px}
.foot a{margin-left:18px}
.legal{background:var(--paper);color:var(--black);min-height:100vh}
.legal .top{border-color:#bbb}
.legal-main{width:min(860px,calc(100% - 42px));margin:auto;padding:90px 0 120px}
.legal-main h1{font-size:clamp(58px,9vw,100px);line-height:.86;text-transform:uppercase}
.legal-main h2{text-transform:uppercase;font-size:24px;margin-top:46px}
.back{display:inline-block;margin-top:35px}

@media(max-width:760px){.frame{width:calc(100% - 28px)}
.top nav{display:none}
.hero{grid-template-columns:1fr;min-height:0}
.hero-copy{padding:70px 14px 55px}
.hero h1{font-size:72px;overflow-wrap:anywhere}
.hero-media{height:420px}
.diagnostic,.missions,.darkroom,.settings,.contact{padding:85px 0}
.section-head,.dark-grid{grid-template-columns:1fr}
.section-head{gap:30px}
.contact-sheet{grid-template-columns:1fr 1fr;grid-template-rows:190px 190px 190px}
.shot:nth-child(2){grid-row:span 1}
.shot:nth-child(4){grid-column:auto}
.shot:last-child{grid-column:span 2}
.mission-title{font-size:51px}
.exposure{grid-template-columns:1fr}
.exposure .name{padding-bottom:15px}
.exposure img{height:250px}
.exposure .copy{padding:30px 0 55px}
.dark-grid{gap:45px}
.dark-grid img{height:430px}
.boundary{grid-template-columns:1fr}
.boundary article,.boundary article:first-child,.boundary article:last-child{padding:80px 22px}
.setting{grid-template-columns:1fr;gap:18px}
.contact h2{font-size:75px;overflow-wrap:anywhere}
.contact-line{grid-template-columns:1fr;gap:28px}
.foot a{margin:0 15px 0 0}
.legal-main h1{font-size:58px;overflow-wrap:anywhere}
}

