/* Google Fonts - Playfair Display only */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600&display=swap');

/* Base */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Playfair Display',serif;font-weight:300;background:#000;color:#fff;line-height:1.8;letter-spacing:0.3px;overflow-x:hidden}

/* Navbar (exactly as your index) */
.navbar{position:fixed;top:0;width:100%;background:rgba(0,0,0,0.95);backdrop-filter:blur(20px);z-index:1000;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,0.08);transition:all .3s}
.nav-container{max-width:1600px;margin:0 auto;padding:0 4rem;display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.8rem;font-weight:400;letter-spacing:1px}
.logo-subtitle{font-size:.7rem;font-weight:300;text-transform:uppercase;letter-spacing:2px;opacity:.7;margin-top:-2px}
.nav-links{display:flex;list-style:none;gap:3rem}
.nav-links a{color:#fff;text-decoration:none;font-weight:300;font-size:.85rem;text-transform:uppercase;letter-spacing:1.5px;position:relative;transition:color .3s}
.nav-links a:hover{color:#ccc}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:#fff;transition:width .3s}
.nav-links a:hover::after{width:100%}

/* Utility (pages after index will need top padding because of fixed nav) */
.page-wrap{padding-top:90px}

/* Optional: active link helper */
.nav-links a.is-active{color:#ddd}
.nav-links a.is-active::after{width:100%}

/* ==== Footer (unified across pages) ==== */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:4rem 0;
  text-align:center;
  margin-top:6rem;
  background:rgba(255,255,255,.01);
  width:100%;
  display:block;
  position:relative;   /* stack normally */
  clear:both;          /* defensive */
  z-index:0;
}
.footer *{ margin-left:auto; margin-right:auto; }

/* ==== Prev/Next bar used ONLY on project pages ==== */
.nextprev{
  position:static !important;   /* make sure it isn't fixed */
  bottom:auto; left:auto; right:auto;
  max-width:1200px;
  margin:3rem auto 0;
  padding:0 4rem;
}
.nextprev a{
  display:inline-block;
  color:#fff; text-decoration:none;
  font-size:.85rem; text-transform:uppercase; letter-spacing:1px;
  opacity:.7; border-bottom:1px solid rgba(255,255,255,.2);
  transition:opacity .3s;
}
.nextprev a:hover{ opacity:1; }

/* Fixed nav offset + give content some height so footer never crowds */
.page-wrap{ padding-top:90px; min-height:calc(100vh - 160px); }

/* Images render cleanly in galleries */
img{max-width:100%; height:auto; display:block;}

/* ==== Hero video support ==== */
  .video-note {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.75rem;
  letter-spacing: 0.3px;
  font-weight: 300;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
}

/* ==== Embedded site preview ==== */
.site-preview { max-width:1400px; margin:0 auto; padding:0 4rem 5rem; }
.site-card { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); border-radius:6px; overflow:hidden; }
.site-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.site-toolbar h3 { font-weight:400; font-size:1.1rem; }
.site-toolbar .actions { display:flex; gap:.75rem; }
.site-toolbar a, .site-toolbar button {
  color:#fff; background:transparent; border:1px solid rgba(255,255,255,.2);
  padding:.4rem .7rem; border-radius:999px; font-size:.8rem; letter-spacing:.3px; cursor:pointer;
  text-decoration:none; opacity:.85; transition:opacity .2s, background .2s;
}
.site-toolbar a:hover, .site-toolbar button:hover { opacity:1; background:rgba(255,255,255,.05); }

.site-frame-wrap { position:relative; width:100%; aspect-ratio: 16/9; }
.site-frame-wrap.full { aspect-ratio:auto; height:80vh; } /* toggled “fullscreen-in-page” */
.site-frame {
  position:absolute; inset:0; width:100%; height:100%; border:0;
  background:#0e0e0e;
  /* Allow your embedded site to run scripts and forms when local */
  /* If you embed a cross-origin URL and it refuses, move files locally. */
}
.site-note {
  text-align:center; font-size:.9rem; color:rgba(255,255,255,.6); margin-top:.75rem; letter-spacing:.3px; font-weight:300;
}

@media (max-width:900px){
  .site-preview { padding-left:2rem; padding-right:2rem; }
  .site-frame-wrap.full { height:60vh; }
}