/* Simple responsive styles for photographer site */
:root{
  --bg:#6d6d6d;
  --card:#6d6d6d;
  --accent:#ffffff;
  --muted:#e5e5e5;
  --text:#ffffff;
}
*{box-sizing:border-box}
html, body {
  min-height: 100%;
}
body{
  margin:0;
  font-family:"Optima", "Optima Nova", "Gill Sans", "Segoe UI", sans-serif;
  color:var(--text);
  background-color:var(--bg);
  --bg-a:url("../media/web/bg-1.jpg");
  --bg-b:none;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
}
/* Fixed backdrop as two stacked pseudo-elements that cross-fade (background-image itself
   can't animate). Also sidesteps iOS Safari's lack of background-attachment:fixed. */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(rgba(17,17,17,0.45), rgba(17,17,17,0.45)), var(--bg-a);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transition:opacity 2s ease-in-out;
}
body::after{
  background-image:linear-gradient(rgba(17,17,17,0.45), rgba(17,17,17,0.45)), var(--bg-b);
  opacity:0;
}
body.bg-b::after{opacity:1}
.container{max-width:980px;margin:0 auto;padding:2rem 1.25rem}
.site-header{padding:4rem 0 2rem;text-align:center}
.site-header .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.site-title,
.site-sub,
.section h2,
.site-footer {
  line-height:2;
}
.site-title{
  font-size:clamp(1.5rem, 7vw, 2.25rem);
  margin:0;
  font-weight:400;
  letter-spacing:0.26em;
  white-space:nowrap;
}.profile-image{
  display:block;
  width:156px;
  height:156px;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  margin:0.5rem auto 0.35rem;
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 0 0 2px rgba(255,255,255,0.06);
}.site-sub{color:var(--muted);margin:0.25rem 0 0;text-align:center; line-height:1.5}
.site-nav{margin-top:0.75rem; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0.5rem; text-align:center; list-style:none; padding:0; margin-left:0; margin-right:0}
.site-nav a{color:#f3f0ea;margin:0;text-decoration:none;padding:0.25rem 0.5rem;border-radius:6px}
.site-nav a:hover{background:rgba(255,255,255,0.08)}
.contact-links{list-style:none; margin:0; padding:0}
.contact-links li{margin:0.25rem 0; overflow-wrap:anywhere}
.section{background:rgba(120,120,120,0.2);padding:1.5rem;border-radius:10px;margin:1.25rem 0; border:1px solid rgba(255,255,255,0.06)}
.section h2{margin-top:0; font-weight:400; letter-spacing:0.04em;}
.portfolio a,.section a{color:#f3f0ea; opacity:0.9}
.portfolio{background:transparent; border-color:rgba(255,255,255,0.04);}
.video-wrap{margin:1rem 0; border-radius:10px; overflow:hidden; background:rgba(0,0,0,0)}
.video-wrap video{display:block;width:100%;height:auto;max-height:420px; object-fit:cover; background:#000}
.site-footer{padding:2rem 0;text-align:center;color:var(--muted);font-size:0.9rem}

@media(min-width:700px){
  .container{padding:2rem}
  .site-title{font-size:3rem}
}