/* Phase 2 · all-reviews page. Controls, results and the five layouts, all in AU's look (au.css). */

body.pop main.archive { align-content: start; }
.archive > * { grid-column: 1 / -1; }

/* Page head: a short yellow block */
.ah { background: var(--c1); padding-block: clamp(1.8rem, 4vw, 3rem); }
.ah h1 { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.9; letter-spacing: -0.04em; margin: 0.4rem 0 0.6rem; }
.ah__sub { font-size: 1.15rem; max-width: 50ch; }

/* ---------- controls */
.ctl { display: flex; flex-direction: column; gap: 1.2rem; }
.ctl label, .ctl legend { display: block; font-family: var(--type); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.45rem; padding: 0; }
.ctl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ctl__search input { width: 100%; border: 3px solid var(--ink); border-radius: 999px; padding: 0.65rem 1.1rem; background: #fff; font-size: 1rem; }
.ctl__search input:focus, .ctl select:focus { outline: 3px solid var(--c2); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip { flex: none; white-space: nowrap; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.3rem 0.75rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; }
.chip small { font-family: var(--type); font-weight: 400; font-size: 0.7rem; opacity: 0.7; }
.chip:hover { background: var(--c1); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--c1); }
.chip:focus-visible, .pill:focus-visible, .pager button:focus-visible, .more-btn:focus-visible { outline: 3px solid var(--c2); outline-offset: 2px; }
.ctl select { width: 100%; border: 3px solid var(--ink); border-radius: 999px; padding: 0.55rem 2.4rem 0.55rem 1rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 1rem center; appearance: none; font-weight: 600; cursor: pointer; }
.ctl__clear { align-self: flex-start; border: 0; background: none; font-family: var(--type); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; padding: 0; }
.ctl__clear:hover { color: var(--c3); }

/* ---------- results block */
.ar { background: var(--c2); min-height: 60vh; scroll-margin-top: calc(var(--stick, 88px) + 8px); }
.ar__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.4rem; color: #fff; }
.ar__count { font-family: var(--type); font-size: 0.9rem; }
.ar__count strong { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: 1.6rem; margin-right: 0.2rem; }
.ar__count span { opacity: 0.75; }
.ar__active { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill { border: 2px solid var(--ink); background: var(--c1); color: var(--ink); border-radius: 999px; padding: 0.25rem 0.7rem; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.pill:hover { background: #fff; }
.views { margin-left: auto; display: flex; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff; }
.views button { border: 0; background: none; padding: 0.4rem 1rem; font-weight: 700; cursor: pointer; color: var(--ink); }
.views button[aria-pressed="true"] { background: var(--ink); color: var(--c1); }

/* shared bits of a review */
.rv-film { font-family: "Archivo", sans-serif; font-weight: 900; font-style: italic; letter-spacing: -0.03em; line-height: 1.05; }
.rv-film .yr { font-family: var(--type); font-style: normal; font-weight: 400; font-size: 0.75rem; letter-spacing: 0; color: #555; }
.rv-head { font-weight: 700; line-height: 1.25; }
.rv-dek { font-size: 0.9rem; color: #333; }
.rv-dir, .rv-date { font-family: var(--type); font-size: 0.75rem; color: #555; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-family: var(--type); font-size: 0.72rem; color: #555; }
.rv-meta span:first-child { background: var(--ink); color: var(--c5); border-radius: 999px; padding: 0.05rem 0.5rem; }
a:focus-visible { outline: 3px solid var(--c1); outline-offset: 3px; }

/* ---------- cards (AV, AZ grid view, AX shelves) */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.2rem; }
.rc a { display: flex; flex-direction: column; height: 100%; color: var(--ink); background: #fff; border: 4px solid var(--ink); border-radius: var(--r); overflow: hidden; transition: transform 0.25s, box-shadow 0.25s, background 0.25s; }
.rc a:hover { transform: translateY(-4px); box-shadow: 0 6px 0 var(--ink); background: var(--c1); }
.rc figure { aspect-ratio: 16 / 10; overflow: hidden; margin: 0.6rem 0.6rem 0; border-radius: calc(var(--r) - 10px); }
.rc img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc a:hover img { transform: scale(1.12); }
.rc__b { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 1rem 1.1rem; flex: 1; }
.rc .rv-film { font-size: 1.35rem; }
.rc .rv-dir { margin-top: auto; padding-top: 0.3rem; }

/* ---------- pager / load more / empty */
.ar__more { margin-top: 1.8rem; display: flex; justify-content: center; }
.pager { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.pager button { min-width: 2.6rem; border: 3px solid var(--ink); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.4rem 0.8rem; font-weight: 800; cursor: pointer; }
.pager button[aria-current="page"] { background: var(--c1); }
.pager button:disabled { opacity: 0.4; cursor: default; }
.pager button:not(:disabled):hover { background: var(--c1); }
.more-btn { border: 4px solid var(--ink); background: var(--c1); color: var(--ink); border-radius: 999px; padding: 0.8rem 1.6rem; font-family: "Archivo Black", sans-serif; font-size: 1.05rem; cursor: pointer; box-shadow: 0 5px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.more-btn small { font-family: var(--type); font-size: 0.75rem; }
.more-btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.all-shown { font-family: var(--type); color: inherit; }
.empty { background: #fff; border: 4px solid var(--ink); border-radius: var(--r); padding: 2.5rem; text-align: center; }
.empty__big { font-family: "Archivo Black", sans-serif; font-size: 2rem; margin-bottom: 0.4rem; }
.empty button { border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* ======================================================= AV · filter rail */
.rail-wrap { display: grid; grid-template-columns: minmax(15rem, 3fr) minmax(0, 9fr); gap: var(--gap); }
.rail { background: var(--c5); padding: clamp(1.2rem, 2.4vw, 2rem); }
.rail .ctl { position: sticky; top: calc(var(--bar, 88px) + 1.5rem); }
.rail-wrap .ar { grid-column: auto; }

/* ======================================================= toolbar (AW, AX, AY, AZ) */
.bar-wrap { background: var(--c5); padding-block: 0.9rem; position: sticky; top: var(--bar, 88px); z-index: 20; border-bottom: 6px solid var(--ink); }
.ctl--bar, .ctl--index { display: grid; grid-template-columns: minmax(14rem, 1.3fr) repeat(3, auto) minmax(11rem, 0.8fr) auto; gap: 0.6rem 1.4rem; align-items: end; }
.ctl--bar .chips, .ctl--index .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ctl--bar .chips::-webkit-scrollbar, .ctl--index .chips::-webkit-scrollbar { display: none; }
.ctl--bar .ctl__group, .ctl--index .ctl__group { min-width: 0; }
.ctl--bar .ctl__clear, .ctl--index .ctl__clear { align-self: center; margin-top: 1.2rem; }
.ctl--bar { grid-template-columns: minmax(11rem, 0.9fr) minmax(0, 1.5fr) minmax(0, 1.1fr) auto minmax(9.5rem, 0.6fr) auto; }
.ctl--bar .ctl__search input, .ctl--bar select, .ctl--index select { padding-block: 0.4rem; }
.ctl--bar label, .ctl--bar legend, .ctl--index label, .ctl--index legend { margin-bottom: 0.3rem; }
.ctl--index { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr) auto minmax(10rem, 0.7fr) auto; }

/* ======================================================= AW · rows */
.archive .ar:has(.ar--rows) { background: var(--c4); }
.archive .ar:has(.ar--rows) .ar__bar { color: var(--ink); }
.grid-rows { display: flex; flex-direction: column; gap: 0.8rem; }
.rr a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 13rem; gap: 1.2rem; align-items: center; padding: 0.7rem; border: 4px solid var(--ink); border-radius: var(--r); background: #fff; transition: background 0.2s, transform 0.2s; }
.rr a:hover { background: var(--c1); transform: translateX(4px); }
.rr figure { aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--r) - 10px); }
.rr img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.rr a:hover img { transform: scale(1.1); }
.rr__main { display: flex; flex-direction: column; gap: 0.3rem; }
.rr .rv-film { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.rr__side { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; border-left: 2px dashed var(--ink); padding-left: 1.1rem; }
.rr .stars { font-size: 1.25rem; }

/* ======================================================= AX · genre shelves */
.archive .ar:has(.ar--shelves) { background: var(--ink); padding: 0; }
.archive .ar:has(.ar--shelves) .ar__bar { padding: 1.2rem clamp(1rem, 4vw, 3.5rem) 0; }
.archive .ar:has(.ar--shelves) .ar__more:empty { display: none; }
.ar--shelves { display: flex; flex-direction: column; gap: var(--gap); }
.shelf { padding: 1.8rem 0 1.6rem; }
.shelf h2 { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.03em; padding: 0 clamp(1rem, 4vw, 3.5rem); margin-bottom: 1rem; }
.shelf h2 small { font-family: var(--type); font-size: 0.9rem; vertical-align: middle; border: 2px solid currentColor; border-radius: 999px; padding: 0 0.5rem; }
.shelf--0 { background: var(--c2); color: #fff; }
.shelf--1 { background: var(--c3); color: #fff; }
.shelf--2 { background: var(--c1); }
.shelf--3 { background: var(--c5); }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 16rem; gap: 1rem; overflow-x: auto; padding: 0.4rem clamp(1rem, 4vw, 3.5rem) 1rem; scroll-snap-type: x proximity; scroll-padding: 0 clamp(1rem, 4vw, 3.5rem); }
.track li { scroll-snap-align: start; }
/* on the yellow shelf a yellow hover would vanish, so cards there turn blue (text goes white to stay readable) */
.shelf--2 .rc a:hover, .shelf--2 .rc a:focus-visible { background: var(--c2); color: #fff; --star-on: var(--c1); --star-off: rgba(255, 255, 255, 0.3); }
.shelf--2 .rc a:hover :is(.rv-dek, .rv-dir, .rv-meta, .yr), .shelf--2 .rc a:focus-visible :is(.rv-dek, .rv-dir, .rv-meta, .yr) { color: #e8ecff; }

/* Shelf scrollbars in the site's style: a chunky pill, like the buttons.
   White handle with a black outline on blue/red shelves, black handle on yellow/cream ones. */
.shelf { --sb-track: rgba(17, 17, 17, 0.12); --sb-thumb: var(--ink); --sb-hover: var(--c3); }
.shelf--0, .shelf--1 { --sb-track: rgba(255, 255, 255, 0.28); --sb-thumb: #fff; --sb-hover: var(--c1); }
/* yellow shelf: white handle that turns blue on hover, like the cards there */
.shelf--2 { --sb-thumb: #fff; --sb-hover: var(--c2); }
.track::-webkit-scrollbar { height: 16px; }
.track::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 999px; margin-inline: clamp(1rem, 4vw, 3.5rem); }
.track::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 3px solid var(--ink); border-radius: 999px; }
.track::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); }
@supports not selector(::-webkit-scrollbar) {
  .track { scrollbar-color: var(--sb-thumb) var(--sb-track); }
}
@media (max-width: 44em) {
  .track::-webkit-scrollbar { height: 12px; }
  .track::-webkit-scrollbar-thumb { border-width: 2px; }
}
/* with shelf-scroll.js: hide the browser's scrollbar and draw the site's own, which fades on hover */
.track.has-sbar { scrollbar-width: none; }
.track.has-sbar::-webkit-scrollbar { display: none; }
.sbar { position: relative; height: 16px; margin: 0 clamp(1rem, 4vw, 3.5rem); border-radius: 999px; background: var(--sb-track); cursor: pointer; touch-action: none; }
.sbar__thumb { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: var(--sb-thumb); border: 3px solid var(--ink); box-sizing: border-box; cursor: grab; transition: background-color 0.25s; }
.sbar__thumb:hover, .sbar.is-drag .sbar__thumb { background: var(--sb-hover); }
.sbar.is-drag .sbar__thumb { cursor: grabbing; }
.related .sbar { margin-inline: 0; }
@media (max-width: 44em) {
  .sbar { height: 12px; }
  .sbar__thumb { border-width: 2px; }
}

/* ======================================================= AY · by decade */
.archive .ar:has(.ar--decades) { background: var(--c5); }
.archive .ar:has(.ar--decades) .ar__bar { color: var(--ink); }
.dec + .dec { margin-top: 2.4rem; }
.dec__h { position: sticky; top: var(--stick, 88px); z-index: 5; display: flex; align-items: baseline; gap: 1rem; background: var(--c5); padding: 0.5rem 0; margin-bottom: 1rem; border-bottom: 4px solid var(--ink); }
.dec__h span { font-family: "Archivo Black", sans-serif; font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.9; letter-spacing: -0.04em; }
.dec__h small { font-family: var(--type); font-size: 0.85rem; }
.dec__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1.4rem 1rem; }
.rt a { display: flex; flex-direction: column; gap: 0.3rem; }
.rt figure { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--r); border: 4px solid var(--ink); margin-bottom: 0.3rem; }
.rt img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.rt__over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; padding: 0.9rem; background: linear-gradient(0deg, rgba(17, 17, 17, 0.95) 10%, rgba(17, 17, 17, 0.6) 60%, transparent); color: #fff; opacity: 0; transition: opacity 0.3s; }
.rt__over .rv-dek { color: #ddd; font-size: 0.8rem; }
.rt a:hover .rt__over, .rt a:focus-visible .rt__over { opacity: 1; }
.rt a:hover img { transform: scale(1.08); }
.rt .rv-film { font-size: 1.1rem; }

/* ======================================================= AZ · search + index */
.ah:has([data-search-slot]) { background: var(--c2); color: #fff; }
.ah__search { margin-top: 1.2rem; max-width: 46rem; }
.ah__search label { color: #fff; font-family: var(--type); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 0.4rem; }
.ah__search input { font-size: clamp(1.1rem, 2.4vw, 1.5rem); padding: 0.9rem 1.4rem; border: 4px solid var(--ink); border-radius: 999px; width: 100%; background: #fff; }
.ah__search input:focus { outline: 4px solid var(--c1); outline-offset: 2px; }
.archive .ar:has(.ar--table) { background: #fff; }
.archive .ar:has(.ar--table) .ar__bar { color: var(--ink); }
.tbl-wrap { border: 4px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th { text-align: left; font-family: var(--type); font-weight: 400; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--ink); color: var(--c5); padding: 0.7rem 0.8rem; }
.tbl td { padding: 0.6rem 0.8rem; border-top: 2px solid #e6e1d6; vertical-align: middle; }
.tbl tbody tr { transition: background 0.15s; }
.tbl tbody tr:hover { background: #fff6cc; }
.t-pic { width: 5.2rem; }
.t-pic figure { width: 4.4rem; aspect-ratio: 1; border-radius: 14px; overflow: hidden; border: 3px solid var(--ink); }
.t-pic img { width: 100%; height: 100%; object-fit: cover; }
.t-film a { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 1.1rem; letter-spacing: -0.02em; }
.t-film a:hover { text-decoration: underline; }
.t-film .yr { font-family: var(--type); font-size: 0.75rem; color: #555; }
.t-dir { display: block; font-family: var(--type); font-size: 0.72rem; color: #555; }
.t-head strong { display: block; }
.t-head span { display: block; color: #555; font-size: 0.82rem; }
.t-genre { font-family: var(--type); font-size: 0.8rem; white-space: nowrap; }
.t-stars, .t-date { white-space: nowrap; }
.t-date { font-family: var(--type); font-size: 0.8rem; }

/* ---------- responsive */
@media (max-width: 70em) {
  .ctl--bar, .ctl--index { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ctl--bar .ctl__search, .ctl--index .ctl__search { grid-column: 1 / -1; }
}
@media (max-width: 64em) {
  .rail-wrap { grid-template-columns: minmax(0, 1fr); }
  .rail .ctl { position: static; }
  .bar-wrap { position: static; }
  .rr a { grid-template-columns: 7rem minmax(0, 1fr); }
  .rr__side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; border-left: 0; border-top: 2px dashed var(--ink); padding: 0.6rem 0 0; gap: 0.4rem 1rem; }
  .t-genre, .tbl th:nth-child(4), .t-date, .tbl th:nth-child(6) { display: none; }
}
@media (max-width: 44em) {
  .ctl--bar, .ctl--index { grid-template-columns: minmax(0, 1fr); }
  .rr a { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.8rem; }
  .rr .rv-dek { display: none; }
  .t-head span, .t-pic, .tbl th:first-child { display: none; }
  .tbl td, .tbl th { padding: 0.5rem; }
  .views { margin-left: 0; }
  .dec__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track { grid-auto-columns: 78%; }
}

/* Phones: filters fold away behind a "Filters" button so the reviews come first */
.ctl__toggle { display: none; }
@media (max-width: 44em) {
  .ctl__toggle { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; align-self: flex-start; border: 3px solid var(--ink); background: #fff; border-radius: 999px; padding: 0.45rem 1rem; font-weight: 800; cursor: pointer; }
  .ctl__toggle small { background: var(--ink); color: var(--c1); border-radius: 999px; padding: 0 0.45rem; font-size: 0.75rem; }
  .ctl:not(.is-open) .ctl__group, .ctl:not(.is-open) .ctl__sort, .ctl:not(.is-open) .ctl__clear { display: none; }
  .ctl--bar .chips, .ctl--index .chips { flex-wrap: wrap; }
}

/* Toolbar chip rows scroll sideways on desktop; fade the right edge so it's clear there's more */
@media (min-width: 44.01em) {
  .ctl--bar .chips, .ctl--index .chips { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 1.5rem; }
}