/* ===== ZineSmith Base Styles ===== */

:root{
  --bg:#fff;
  --ink:#111;
  --muted:#666;
  --line:#e5e7eb;
  --accent:#111;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font:16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

.container{
  max-width:960px;
  margin:auto;
  padding:16px;
}

/* ===== Header / Footer ===== */

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:10px 16px;
  position:sticky;
  top:0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px);
  z-index:10;
}

.site-footer{
  border-top:1px solid var(--line);
  padding:10px 16px;
  text-align:center;
  font-size:0.85rem;
  color:var(--muted);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1rem;
}

.logo{
  width:40px;
  height:40px;
  object-fit:contain;
}

/* Primary nav */

.site-nav{
  display:flex;
  gap:12px;
  font-size:0.95rem;
}

.site-nav a{
  padding:4px 6px;
  border-radius:6px;
}

.site-nav a[aria-current="page"]{
  background:#111;
  color:#fff;
  text-decoration:none;
}

/* ===== Homepage Hero ===== */

.hero{
  text-align:center;
  padding:72px 16px 56px;
}

.hero-logo{
  width:220px;
  height:220px;
  object-fit:contain;
  margin:0 auto 24px;
}

.hero h1{
  font-size:2rem;
  margin-bottom:12px;
}

.tagline{
  max-width:600px;
  margin:0 auto 24px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
}

.button{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  font-weight:500;
}

/* ===== Page Hero (Gallery / Create / About / Series) ===== */

.page-hero{
  padding:32px 16px 16px;
  text-align:left;
}

.page-hero h1{
  margin:0 0 4px;
  font-size:1.7rem;
}

.page-sub{
  margin:0;
  color:var(--muted);
  font-size:0.98rem;
}

/* ===== Prose Layout (Create / About / Zine pages) ===== */

.prose{
  max-width:820px;
  margin:0 auto;
  padding:24px 16px 32px;
  line-height:1.7;
  font-size:1rem;
}

.prose h2{
  margin-top:1.75rem;
  margin-bottom:0.5rem;
  font-size:1.25rem;
}

.prose p{
  margin:0.4rem 0 0.7rem;
}

.prose ul,
.prose ol{
  padding-left:1.1rem;
}

/* ===== Grid & Cards (Gallery / Series) ===== */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:16px;
  margin:16px 16px 32px;
}

/* Card shell */

.card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

/* Media region: image + optional video overlay */

.card-media{
  position:relative;
  width:100%;
  aspect-ratio:16/9;          /* good default for non-square videos */
  background:#fff;            /* so letterboxing looks intentional */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

/* Base image (logo / cover) */
.card-media img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;         /* never crop logo */
  transition:opacity .2s ease;
}

/* Video sits on top and fades in on hover */
.card-media video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;         /* show full frame, no cropping */
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  background:#fff;
}

/* When "playing", show video and fade out image */
.card-media--playing video{
  opacity:1;
}
.card-media--playing img{
  opacity:0;
}

/* Card body */

.card .p{
  padding:12px 12px 14px;
}

.card .p h3{
  margin:10px 0 4px;
  font-size:1.02rem;
}

.badge{
  display:inline-block;
  font-size:0.72rem;
  color:#fff;
  background:var(--ink);
  padding:2px 8px;
  border-radius:999px;
}

.meta{
  color:var(--muted);
  font-size:0.88rem;
  margin-top:4px;
}

/* Links on zine cards */

.links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.linkbtn{
  display:inline-block;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:8px;
  font-size:0.9rem;
}

/* ===== Responsive tweaks ===== */

@media (max-width: 640px){
  .site-header{
    padding:8px 12px;
  }
  .logo{
    width:32px;
    height:32px;
  }
  .site-nav{
    gap:8px;
    font-size:0.9rem;
  }

  .hero{
    padding:48px 16px 32px;
  }
  .hero-logo{
    width:160px;
    height:160px;
  }

  .grid{
    margin-inline:12px;
  }
}

/* Slightly wider layout on big screens */

@media (min-width: 1200px){
  .container{
    max-width:1100px;
  }
}