/*
Theme Name: DOPAMINE
Theme URI: https://example.com/
Author: DOPAMINE
Description: Minimal cinematic photography portfolio with looping video project tiles.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: dopamine
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap');

:root {
  --black:#0b0b0b; --white:#f5f5f5; --gray:#888;
  --gap:5px; --side:30px;
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:'Montserrat',Arial,sans-serif;font-weight:300;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
.site-header{height:178px;padding:0 var(--side);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-left{display:flex;gap:28px;align-items:center}
.nav-left a{font-size:20px;color:var(--gray);transition:color .25s ease}
.nav-left a:hover,.nav-left a.active{color:var(--white)}
.brand{font-size:38px;font-weight:500;letter-spacing:-.045em;white-space:nowrap}
.instagram{justify-self:end;width:22px;height:22px}
.instagram svg{width:100%;height:100%;fill:none;stroke:#ddd;stroke-width:1.8}
.instagram .dot{fill:#ddd;stroke:none}
.portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;gap:5px;width:100vw;margin-left:calc(50% - 50vw);padding:0 var(--side) 40px}
.project{position:relative;overflow:hidden;aspect-ratio:16/9;background:#151515;cursor:pointer}
.project video,.project .poster{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .65s cubic-bezier(.2,.65,.2,1),filter .5s ease}
.project::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .35s ease;pointer-events:none}
.project-title{position:absolute;z-index:2;left:50%;top:50%;width:92%;transform:translate(-50%,-50%);text-align:center;font-size:24px;font-weight:300;opacity:0;transition:opacity .35s ease;pointer-events:none}
.project:hover video,.project:hover .poster{transform:scale(1.035);filter:brightness(.70)}
.project:hover::after{background:rgba(0,0,0,.10)}
.project:hover .project-title{opacity:1}
.project-link{position:absolute;inset:0;z-index:3}
.no-projects{padding:80px 32px;text-align:center;color:#777;font-size:18px}
.about{padding:85px var(--side) 70px}
.about-copy{width:min(820px,80%);margin:0 auto 90px}
.about-copy h1{text-align:center;font-size:32px;font-weight:400;margin:0 0 45px}
.about-copy p{color:#999;font-size:21px;line-height:1.5;margin:0 0 32px}
.email{font-size:18px;transition:opacity .25s ease}.email:hover{opacity:.55}
.about-photo{margin:0}.about-photo img{width:100%;max-height:78vh;object-fit:cover;display:block}
.details{width:min(820px,80%);margin:70px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:35px}
.details div{display:flex;flex-direction:column;gap:13px}.details span{font-size:12px;color:#777;letter-spacing:.08em}
.details strong,.details a{font-size:15px;color:#ddd;font-weight:400;line-height:1.5}
.project-page{padding:45px var(--side) 80px}
.project-heading{display:flex;align-items:baseline;justify-content:space-between;margin:0 auto 35px;max-width:1200px}
.project-heading h1{font-size:30px;font-weight:400;margin:0}.project-heading a{font-size:14px;color:#999}
.project-media{max-width:1200px;margin:0 auto}.project-media video{width:100%;max-height:78vh;display:block;object-fit:contain;background:#050505}
.project-description{max-width:720px;color:#999;font-size:17px;line-height:1.6;margin:35px auto 0}
.back-top{position:fixed;right:30px;bottom:25px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(220,220,220,.16);color:#eee;font-size:28px;cursor:pointer;opacity:0;transform:translateY(10px);pointer-events:none;transition:.3s ease;z-index:10}
.back-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
@media(max-width:800px){
:root{--side:8px}.site-header{height:130px;padding-top:16px;padding-bottom:18px;grid-template-columns:1fr auto;grid-template-rows:auto auto}
.brand{grid-column:1/-1;grid-row:1;justify-self:center;font-size:29px}.nav-left{grid-column:1;grid-row:2;gap:18px}.nav-left a{font-size:13px}
.instagram{grid-column:2;grid-row:2;width:19px;height:19px}.portfolio{grid-template-columns:1fr;gap:4px}.project{aspect-ratio:1.45/1}
.project-title{font-size:17px;opacity:1;text-shadow:0 1px 12px rgba(0,0,0,.7)}.project::after{background:rgba(0,0,0,.08)}
.about{padding-top:45px}.about-copy{width:100%;margin-bottom:55px}.about-copy h1{font-size:26px;margin-bottom:30px}.about-copy p{font-size:17px}
.details{width:100%;grid-template-columns:1fr;gap:25px}
}