/* Subplotly — theme / angle / browse pages.
   Loaded after store.css, which supplies the palette, the fonts, the plus grid, the HUD
   and the scope cursor. This file is only the document layout those pages need: the
   store's shelves are a horizontal browse, and a page whose job is "here are all 288 of
   them" wants a grid you can scan and a column of prose you can read. */

/* store.css hides the pointer for the scope cursor; keep links reachable in its terms */
a{color:inherit}
.hud a{text-decoration:none}
.hud a:hover{text-decoration:underline}

.page{max-width:1180px;margin:0 auto;padding:0 32px 90px}

/* ---------- breadcrumb + heading ---------- */
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);padding:26px 0 0}
.crumb a{text-decoration:none;border-bottom:1px solid var(--hair)}
.crumb a:hover{color:var(--ink);border-bottom-color:currentColor}
.crumb span{opacity:.5;margin:0 2px}

.page-hd{padding:14px 0 6px}
.page-hd h1{font-family:var(--disp);font-weight:700;font-size:clamp(34px,6vw,68px);
  letter-spacing:-.02em;line-height:1;margin:0;text-transform:lowercase}
.page-sub{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:12px 0 0}

/* ---------- wiki prose ---------- */
/* The entity's own wiki markdown — a theme's definition, a director's signature — from
   the same source the compiler reads. Measure is capped: this is the one part of the page
   meant to be read rather than scanned. */
.prose{max-width:68ch;padding:22px 0 6px}
.prose p{font-size:16.5px;line-height:1.62;margin:0 0 16px}
.prose p:first-child{font-size:19px;line-height:1.55;color:var(--ink)}
.prose h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:30px 0 12px;font-weight:400}
.prose ul{margin:0 0 16px;padding-left:18px}
.prose li{font-size:15.5px;line-height:1.6;margin-bottom:9px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--bg2);
  border:1px solid var(--hair);border-radius:3px;padding:1px 5px}
.prose a{text-decoration:none;border-bottom:1px solid var(--amber);padding-bottom:1px}
.prose a:hover{background:var(--amber);color:#241500;border-bottom-color:transparent}
/* a wikilink to a term with no page of its own — still a real distinction, just not a
   destination. Marked so it doesn't read as a broken link. */
.wikiref{color:var(--ink-soft);border-bottom:1px dotted var(--hair)}

/* ---------- related line ---------- */
/* Cross-shelf navigation, deliberately NOT chips: chips are the filter control, and two
   controls that look identical but behave differently is the confusion this replaces. */
.related-line{max-width:68ch;margin:22px 0 0;font-size:14.5px;line-height:1.65;
  color:var(--ink-soft)}
.related-line a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.related-line a:hover{border-bottom-color:var(--amber)}

/* ---------- filter chips ---------- */
/* One flat row: mood, register and director chips mixed together, because someone
   narrowing a shelf is looking for "melancholic" or "Kore-eda", not for the axis it is
   filed under. */
.filters{margin:0 0 24px}
.rail{padding:26px 0 4px;border-top:1px solid var(--hair);margin-top:32px}
.rail h2{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto}
/* angles read as the editorial shelves they are, next to the theme chips */
.chip-angle{color:var(--ink);border-color:var(--amber)}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:lowercase;
  border:1px solid var(--hair);border-radius:20px;padding:4px 11px;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;background:transparent;cursor:none}
.chip-n{opacity:.5;margin-left:3px}
button.chip:hover,a.chip:hover{background:var(--ink);color:var(--bg);border-color:transparent}
.chip.is-on{background:var(--amber);color:#241500;border-color:transparent}
.chip.is-on .chip-n{opacity:.7}
.chip-clear{text-transform:uppercase;letter-spacing:.1em;font-size:9.5px;padding:3px 10px}

/* ---------- pager ---------- */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;
  margin:38px 0 0}
.pg{min-width:34px;height:34px;padding:0 9px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-soft);background:transparent;border:1px solid var(--hair);
  border-radius:20px;cursor:none}
.pg:hover:not(:disabled){background:var(--ink);color:var(--bg);border-color:transparent}
.pg.is-on{background:var(--amber);color:#241500;border-color:transparent}
.pg:disabled{opacity:.3}
.pg-gap{font-family:var(--mono);font-size:11px;color:var(--ink-soft);padding:0 2px}
.fcard.is-off{display:none}
.fcard{cursor:none}

/* ---------- the full shelf, as a grid ---------- */
.shelf-all{padding:34px 0 0;border-top:1px solid var(--hair);margin-top:32px}
.fgrid{display:grid;gap:26px 18px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.fcard{margin:0}
.fcard-art{position:relative;aspect-ratio:2/3;border-radius:3px;overflow:hidden;background:#2a2622;
  box-shadow:0 12px 22px rgba(0,0,0,.34),inset 3px 0 0 rgba(255,255,255,.08);
  transition:transform .3s cubic-bezier(.2,.85,.2,1),box-shadow .3s}
.fcard-art img{width:100%;height:100%;object-fit:cover;display:block}
.fcard:hover .fcard-art{transform:translateY(calc(-1 * var(--lift) / 2));
  box-shadow:0 26px 34px rgba(0,0,0,.46)}
.fcard-title{font-family:var(--disp);font-weight:600;font-size:14px;line-height:1.25;
  margin:11px 0 3px;letter-spacing:-.005em}
.fcard-meta{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-soft);
  margin:0;text-transform:uppercase}

/* ---------- browse hub ---------- */
.cats{display:grid;gap:28px 24px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* Uneven groups (25 American genre directors, 3 animators) flow into columns instead of
   sitting in a grid whose row height is set by the tallest cell. */
.cats.flow{display:block;columns:230px;column-gap:24px}
.cats.flow .catcol{break-inside:avoid;margin-bottom:26px}
.catcol h3{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px;font-weight:400}
.shelflist{list-style:none;margin:0;padding:0}
.shelflist.wide{columns:220px;column-gap:24px}
.shelflist li{margin-bottom:7px;break-inside:avoid}
.shelflist a{font-size:15.5px;text-decoration:none;border-bottom:1px solid transparent}
.shelflist a:hover{border-bottom-color:var(--amber)}
.shelflist .n{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-left:6px}

.rail-foot{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:26px 0 0}
.rail-foot a{text-decoration:none;border-bottom:1px solid var(--hair)}
.rail-foot a:hover{color:var(--ink);border-bottom-color:currentColor}

@media (max-width:640px){
  .page{padding:0 20px 70px}
  .prose p{font-size:15.5px}
  .prose p:first-child{font-size:17px}
  .related-line{font-size:14px}
  .fgrid{gap:20px 12px;grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
  .fcard-title{font-size:13px}
}