:root{
  --bg:#0b1220;
  --vignette: radial-gradient(ellipse at center, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 12%, rgba(255,255,255,0.02) 28%, transparent 60%);
  --accent:#ffd166;
  --muted:rgba(255,255,255,0.78);
  --text:#f8fbff;
  --card:#0f1724;
  --max:980px;
  --radius:12px;
  --gap:20px;
  --shadow: 0 12px 36px rgba(2,6,23,0.6);
  --ui-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --headline-font: "Playfair Display", Georgia, "Times New Roman", serif;
  font-family: var(--ui-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Reset and base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{display:flex;flex-direction:column;min-height:100vh}

/* centered soft light vignette */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:var(--vignette);
  mix-blend-mode:screen;opacity:0.95;z-index:0;
}

/* header */
.top{padding:28px 16px;text-align:center;z-index:2;position:relative}
.brand{
  font-family:var(--headline-font);
  font-weight:800;
  font-size:1.6rem; /* larger title */
  letter-spacing:0.8px;
  color:var(--text);
  margin-top:6px;
  display:inline-block;
  padding:6px 12px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 8px 24px rgba(2,6,23,0.35);
}

/* main stage */
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:36px 16px;z-index:1}
.hero{width:100%;max-width:var(--max);display:grid;grid-template-columns:1fr 360px;gap:var(--gap);align-items:center;margin-top:8vh}
.hero-left{padding:6px}
.headline{
  font-family:var(--headline-font);
  font-size:1.75rem; /* a touch bigger for emphasis */
  margin:0 0 6px 0;
  color:var(--text);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-0.6px;
}
.subhead{margin:8px 0 0;color:var(--muted);font-size:0.95rem}

/* poster */
.poster{
  width:100%;
  max-width:360px;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:0 18px 48px rgba(2,6,23,0.55);
  transform:translateY(-4px);
}
.poster img{display:block;width:100%;height:100%;object-fit:cover}

/* summary and form */
.summary{width:100%;max-width:var(--max);text-align:center;margin-top:44px;padding:0 12px}
.summary-text{max-width:900px;margin:0 auto;color:var(--muted);line-height:1.5;padding:0 6px}
.email-form{margin-top:18px}
.form-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.email-form input[type="email"]{
  padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);
  background:transparent;color:var(--text);min-width:260px;font-size:1rem;
}
.btn{
  background:var(--accent);color:#0b1220;padding:12px 18px;border-radius:10px;border:none;font-weight:700;cursor:pointer;
}
.form-note{margin-top:8px;color:var(--muted);font-size:0.9rem}
.form-msg{margin-top:8px;color:var(--muted);font-size:0.95rem}

/* feed */
.feed{width:100%;max-width:var(--max);margin:56px 0;padding:0 12px;text-align:center}
.feed-title{margin:0 0 12px;font-weight:700}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;justify-items:center}
.feed-grid img{width:100%;height:110px;object-fit:cover;border-radius:10px;box-shadow:0 8px 20px rgba(2,6,23,0.45)}
.tile.ph{width:100%;height:110px;border-radius:10px;background:linear-gradient(90deg,#0d1626 0%, #0b1220 50%, #0d1626 100%);opacity:0.06}

/* footer */
.foot{padding:18px;text-align:center;color:var(--muted);font-size:0.9rem}

/* accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* responsive */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;gap:18px}
  .poster{max-width:100%}
  .headline{font-size:1.35rem}
  .brand{font-size:1.25rem;padding:6px 10px}
  .stage{padding:28px 12px}
  .summary{margin-top:28px}
  .feed{margin:36px 0}
}