/* Hub (index.html) only. Sits on top of theme.css + review.css. Newsprint theme, no new colours. */
.hub-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;padding:44px 0 0}
@media(max-width:860px){ .hub-hero{grid-template-columns:1fr;gap:26px;padding-top:28px} }
.hub-hero .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hub-hero .k img{height:13px;width:auto;opacity:.85;display:block}
.hub-hero h1{margin:0 0 12px;line-height:1.02}
.hub-hero .sub{max-width:46ch;margin:0}
.hub-hero .cta{margin-top:22px;gap:14px}
.hub-hero .next{margin:22px 0 0;padding:12px 14px;border-left:2px solid var(--line);font-size:13px;color:var(--text-soft);line-height:1.5;max-width:46ch}
.hub-hero .next b{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;display:block;margin-bottom:4px}
.film-card{display:block;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#F6F5F2;box-shadow:0 18px 40px -28px rgba(20,19,18,.35);text-decoration:none;color:inherit}
.film-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#F6F5F2}
.film-card .cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft);background:linear-gradient(to top,rgba(241,239,233,.96),rgba(241,239,233,0))}
.film-card .cap span:last-child{text-decoration:underline;text-underline-offset:3px;color:var(--text)}
.film-card:hover{border-color:var(--accent-line)}

/* Where we are */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:40px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:720px){ .strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
.strip > div{padding:18px 18px 18px 0;border-right:1px solid var(--line-soft)}
.strip > div:last-child{border-right:0}
@media(max-width:720px){ .strip > div:nth-child(2){border-right:0} .strip > div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)} .strip > div{padding:14px 14px 14px 0} }
.strip .n{font-family:var(--f-display);font-size:34px;font-weight:600;line-height:1;color:var(--text)}
.strip .n small{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
.strip .l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.strip .l em{font-style:normal;color:var(--green)}
.updated{font-family:var(--f-mono);font-size:10.5px;color:var(--faint);margin:12px 0 0}

/* Section cards, image-led */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:34px 0 0}
@media(max-width:720px){ .cards{grid-template-columns:1fr;gap:18px} }
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:0 22px 40px -30px rgba(20,19,18,.45)}
.card .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--card-2);border-bottom:1px solid var(--line-soft)}
.card .media img{display:block;object-fit:cover}
.card .badge{position:absolute;left:12px;top:12px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:rgba(241,239,233,.94);border:1px solid var(--line);border-radius:3px;padding:4px 8px}
.card .body{padding:18px 22px 20px}
.card .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.card h4{font-family:var(--f-display);font-size:24px;font-weight:600;margin:0 0 6px;color:var(--text)}
.card p{font-size:13.5px;margin:0;color:var(--muted)}
.card .foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.card .st{font-family:var(--f-mono);font-size:10.5px;color:var(--text-soft)}
.card .go{font-size:12.5px;font-weight:500;color:var(--text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* Review: one still, full bleed */
.media.one img{width:100%;height:100%;object-position:50% 30%}
/* Delivery: ten posters, five across, two rows */
.media.posters{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:3px;box-sizing:border-box}
.media.posters img{width:100%;height:100%}
/* Carousels: slide ones fanned like prints */
.media.fan{background:var(--card-2)}
.media.fan img{position:absolute;width:31%;aspect-ratio:4/5;left:calc(50% + var(--x));top:52%;border:1px solid rgba(20,19,18,.12);border-radius:3px;box-shadow:0 12px 26px -14px rgba(20,19,18,.5);
  transform:translate(-50%,-50%) rotate(var(--r));transition:transform .35s cubic-bezier(.16,1,.3,1),left .35s cubic-bezier(.16,1,.3,1)}
.card:hover .media.fan img{left:calc(50% + var(--x)*1.06);transform:translate(-50%,-50%) rotate(calc(var(--r)*1.2))}
/* Strategy: the fifteen covers, Instagram order */
.media.feed{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:2px;box-sizing:border-box}
.media.feed img{width:100%;height:100%}
@media(max-width:600px){ .film-card .cap span:first-child{display:none} .film-card .cap{justify-content:flex-end} }