/* Simple, responsive styles for the project page */

:root{
  --bg: #f6f7f9;
  --card: #ffffff;
  --accent: #0b5cff;
  --text: #1e293b;
  --muted: #6b7280;
  --radius: 10px;
  --max-width: 960px;
  --gap: 1.25rem;
}

*{box-sizing:border-box}
html,body{
  scroll-behavior:smooth;
  scroll-padding-top: 90px;
}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}

.container{
  width:calc(100% - 2rem);
  max-width:var(--max-width);
  margin:0 auto;
}

.site-header{
  position: fixed; 
  top: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.45); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 0;
}

.header-inner{
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

h1{margin:0;font-size:1.25rem;letter-spacing:0.2px}

.actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.btn{
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: var(--accent);
  color: whitesmoke;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s ease;
}

.btn:hover {
  background: rgba(0, 0, 0, 0.122); 
  color: white
}

.btn-ghost {
  background: transparent;
  color: #ffffff;
}

main {
  padding-top: 3rem;
  background: var(--bg);
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1rem;
  margin-bottom:var(--gap);
  box-shadow: 0 6px 20px rgba(16,24,40,0.04);
}

.card h2{margin-top:0}
ul{margin-top:0}
.media{display:block;margin:1rem 0}
.media img, .media video{
  width:100%;
  height:auto;
  border-radius:8px;
  background:#000;
}
figcaption{font-size:0.85rem;color:var(--muted);margin-top:0.5rem}

.muted{color:var(--muted);font-size:0.92rem}

.site-footer{
  padding:1rem 0;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
  border-top:1px solid rgba(16,24,40,0.04);
  background:transparent;
}

/* Portrait-oriented phone recording sizing: constrain by viewport height */
.portrait-video{
  aspect-ratio: 9/16;         /* portrait orientation */
  width: auto;                /* let width be computed from height / aspect-ratio */
  height: auto;
  max-height: 55vh;           /* never exceed 55% of viewport height */
  max-width: 34vw;            /* horizontal limit on wide screens */
  border-radius: 8px;
  background: #000;
  object-fit: cover;
  display: block;
  margin: 0 auto;             /* centered horizontally */
}

/* Smaller on very narrow screens */
@media (max-width: 420px){
  .portrait-video{
    max-height: 48vh;
    max-width: 56vw;
  }
}

/* Responsive layout tweaks */
@media (min-width: 880px){
  .card{padding:1.25rem 1.5rem}
  .header-inner{gap:2rem}
  .banner-content h1 {
    font-size: 2rem;
  }
  .banner-content p {
    font-size: 1rem;
  }
}