/* Round 6 shared base: AM (agreed) with the round-5 feedback built in:
   rounded corners (amount set per design with --r), review pictures zoom on hover, no red square on the landing,
   a shorter landing, release years on reviews, pictures in the list, film titles in italics, the forecast line, a sticky top bar. */
:root {
  --ink: #111;
  --c1: #ffcf26;
  --c2: #1f4fd6;
  --c3: #e63a2e;
  --c4: #fff;
  --c5: #f3efe6;
  --r: 18px;
  --gap: 6px;
  --sans: "Archivo", system-ui, sans-serif;
  --star-on: var(--ink);
}
body { background: var(--ink); }
.blk h1, .blk h2, .cards h3, .big .t, .ess h3, .mark { font-family: "Archivo Black", sans-serif; font-weight: 400; letter-spacing: -0.03em; }
i, .film-t { font-style: italic; }
/* Archivo Black has no italic, so italic film titles use Archivo's heaviest real italic instead of a fake slant. */
.cards h3, .big .t, .feature-film { font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; letter-spacing: -0.035em; }

/* Sticky top bar */
.top { position: sticky; top: 0; z-index: 50; background: var(--c5); border-bottom: 6px solid var(--ink); }
.nav a, .search input, .tags a, .btn { border-radius: 999px; }

/* Grid of rounded blocks */
body.pop main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); background: var(--ink); padding: var(--gap); }
.blk { border: 0; border-radius: var(--r); }
.blk--1 { grid-column: 1 / -1; }
.blk--2 { grid-column: 1 / -1; }
.blk--3 { grid-column: 1 / span 7; background: var(--c3); color: #fff; }
.blk--4 { grid-column: 8 / -1; background: var(--c1); }
.blk--5 { grid-column: 1 / -1; background: var(--c4); }
.blk h2 { font-size: clamp(2.2rem, 5.5vw, 4.6rem); }
.foot { background: var(--c5); }

/* Shorter landing */
.blk--1 { padding-block: clamp(2rem, 4vw, 3.2rem); align-items: center; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.blk--1 h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); line-height: 0.88; }
.blk--1 .dek { font-size: 1.15rem; max-width: 46ch; }
.cut { grid-row: 2 / span 2; aspect-ratio: 1; max-height: 24rem; justify-self: end; width: 100%; border-radius: var(--r); border-width: 5px; }

/* Forecast line (from C) */
.forecast { font-family: var(--type); font-size: 0.9rem; }
.forecast b { font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; }

/* Reviews: rounded cards, year shown, picture zooms on hover */
.cards a { border-radius: var(--r); border-width: 4px; box-shadow: none; transition: transform 0.25s, box-shadow 0.25s, background 0.25s; }
.cards a:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); background: var(--c1); }
.cards figure { border-radius: calc(var(--r) - 8px); overflow: hidden; }
.cards img { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cards a:hover img, .cards a:focus-visible img { transform: scale(1.12); }
.cards .yr { font-family: var(--type); font-size: 0.8rem; font-style: normal; font-weight: 400; color: #555; margin-left: 0.3rem; letter-spacing: 0; }

/* List with pictures (layout set per design) */
.blk--3 .btn { background: #fff; color: var(--c3); }
.big .y { font-family: var(--type); font-size: 0.85rem; font-style: normal; }
.big figure { overflow: hidden; border-radius: calc(var(--r) - 6px); border: 3px solid var(--ink); flex: none; }
.big img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.big a:hover img { transform: scale(1.1); }

/* Long reads */
.blk--4 .ess { grid-template-columns: minmax(0, 1fr); }
.blk--4 .ess a { border-radius: var(--r); border-width: 4px; }
.blk--4 .ess a:hover { background: var(--c2); color: #fff; }

@media (max-width: 52em) {
  .blk--3, .blk--4 { grid-column: 1 / -1; }
  .cut { grid-row: auto; justify-self: start; max-width: 16rem; }
}