:root{
  --accent:#111;              /* tab underline */
  --accent-line:#ccc;         /* thin grey line under header */
  --header-bg:#0066cc;        /* darker modern blue header */
  --header-fg:#fff;           /* white header text */

  --text:#111;
  --muted:#666;
  --bg:#fff;
  --line:#e8e8e8;
  --radius:6px;

  --header-h:56px;            /* header height */
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%; height:auto; display:block}

/* Header: sticky blue with safe-area and shadow */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:var(--header-bg);
  color:var(--header-fg);
  padding:0 20px;
  padding-top:calc(env(safe-area-inset-top) + 0px); /* iOS notch fix */
  box-shadow:0 3px 8px rgba(0,0,0,0.18);
}
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--accent-line);
}
.film-title{margin:0; font-size:24px; letter-spacing:.2px}

/* Tabs bar (sticks below header) */
.tabs-bar{
  position:sticky;
  top:var(--header-h);
  z-index:999;
  background:#fff;
  border-bottom:1px solid var(--line);
  margin-bottom:0;
}
.tabs{
  padding:8px 20px;
  display:flex; flex-wrap:wrap; gap:18px; align-items:center;
}
.tabs a{
  position:relative; text-decoration:none; color:var(--muted); padding:10px 2px
}
.tabs a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:transparent; border-radius:2px
}
.tabs a:hover{color:var(--text)}
.tabs a.active{color:var(--text); font-weight:600}
.tabs a.active::after{background:var(--accent)}
/* Prevent visited color on tabs */
.tabs a:visited{color:var(--muted)}
.tabs a.active:visited{color:var(--text)}

/* Content */
.content{
  width:100%;
  max-width:none;
  padding:12px 20px 60px; /* tighter top padding */
}

/* Links */
.content a{
  color:#0066cc;
  text-decoration:underline;
}
.content a:hover{ color:#004c99 }
.content a:visited{
  color:#3399ff;
  text-decoration:underline;
}

/* Sections */
.block{ margin:24px 0 32px }
.content .block:first-child{ margin-top:8px }
.block h2{ margin:22px 0 12px; font-size:1.25rem; font-weight:600 }
.muted{ color:var(--muted) }

/* Title stack on front page */
.block h1.film-title-main{
  font-size:2.25rem; font-weight:700; line-height:1.2;
  text-align:center; margin:0 0 .35rem;
}
.byline{
  font-size:1.2rem; font-weight:500; letter-spacing:.5px;
  color:#444; text-align:center; margin:0 0 .4rem;
}
.tagline{
  font-size:1rem; font-style:italic; color:var(--muted);
  text-align:center; margin:0 0 .6rem;
}
.block > hr{
  border:0; height:1px; background:var(--line); margin:.6rem 0 1rem;
}

/* Buttons */
.btn{
  display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--text); transition:border-color .15s ease
}
.btn:hover{border-color:var(--text)}

/* Poster and stills */
.poster img{
  max-width:640px;
  width:100%;
  margin-bottom:12px;
  border-radius:6px;
}
.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.full-bleed .video-16x9 {
  position: relative;
  aspect-ratio: 16 / 9; /* fixed box like YouTube */
  background: #000;
}

.full-bleed .video-16x9 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or 'contain' if you prefer full video visible */
  display: block;
  border: 0;
}

/* Stills grid */
.stills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
  gap:12px;
}
.still{
  aspect-ratio:16/9;
  border-radius:6px; overflow:hidden;
}
.still img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Tables */
.table{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--line); border-radius:8px; overflow:hidden
}
.table th,.table td{
  padding:12px 14px; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top
}
.table th{
  font-weight:600; color:var(--text); background:#fafafa
}
.table tr:last-child td{border-bottom:none}

/* Video */
.block video{ display:block; width:100%; border-radius:6px }

/* Contact grids */
.grid-2{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:center;
  text-align:center;
  font-size:.9rem;
  line-height:1.4;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.grid-2 img,
.grid-3 img{ max-width:100%; height:auto; display:block }

/* Responsive */
@media (max-width:1100px){
  .stills-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{ grid-template-columns:1fr }
}
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .film-title{font-size:24px}
  .tabs{gap:14px; padding-left:16px; padding-right:16px}
  .poster img{max-width:100%}
  .stills-grid{grid-template-columns:1fr}
  .content{padding-left:16px; padding-right:16px}
  .site-header{padding-left:16px; padding-right:16px}
  .block h1.film-title-main{font-size:1.9rem}
  .grid-3{ grid-template-columns:1fr }
}