/*
 * Cineros: silver screen by day, projection booth by night. Every kind of film detail has its
 * own colour (themes amber, places teal, periods violet, moods rose, people slate...), used on
 * chips, dots and section rules so the eye learns what links films together. Display: Big
 * Shoulders Display (tall, condensed); text: Instrument Sans. Logical properties (RTL-safe).
 */
@font-face { font-family: "Big Shoulders Display"; font-weight: 100 900; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; font-weight: 100 900; font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-weight: 400 700; font-display: swap;
  src: url("/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --cn-theme: #b45309; --cn-place: #0f6e6e; --cn-period: #5b4bb7; --cn-mood: #b23a6b;
  --cn-genre: #4b5563; --cn-person: #3b5b84; --cn-award: #a16207; --cn-based: #6b5a3a;
  --cn-franchise: #9f1239; --cn-keyword: #57606a; --cn-year: #374151; --cn-origin: #1d4ed8;
  --cn-line: color-mix(in oklab, var(--ui-ink) 13%, transparent);
  --cn-line-soft: color-mix(in oklab, var(--ui-ink) 7%, transparent);
  --cn-muted: color-mix(in oklab, var(--ui-ink) 62%, transparent);
  --cn-panel: color-mix(in oklab, var(--ui-surface) 70%, var(--ui-bg));
  --cn-screen: #0b0d10;
  --cn-glow: #ffb454;
  --cn-r-poster: 6px; --cn-r-panel: 14px;
  --ui-font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --ui-font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}
:root[data-theme="dark"] {
  --cn-theme: #ffb454; --cn-place: #3fc1b5; --cn-period: #a99bff; --cn-mood: #ff7aa8;
  --cn-genre: #a4adba; --cn-person: #8fb3e0; --cn-award: #f0c75e; --cn-based: #c9b48a;
  --cn-franchise: #ff6b8b; --cn-keyword: #9aa4b0; --cn-year: #c9ced6; --cn-origin: #7aa5ff;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --cn-theme: #ffb454; --cn-place: #3fc1b5; --cn-period: #a99bff; --cn-mood: #ff7aa8;
    --cn-genre: #a4adba; --cn-person: #8fb3e0; --cn-award: #f0c75e; --cn-based: #c9b48a;
    --cn-franchise: #ff6b8b; --cn-keyword: #9aa4b0; --cn-year: #c9ced6; --cn-origin: #7aa5ff;
  }
}

/* kind colour on any element: .k-theme, .k-place ... sets --k */
.k-theme { --k: var(--cn-theme); } .k-place { --k: var(--cn-place); } .k-period { --k: var(--cn-period); }
.k-mood { --k: var(--cn-mood); } .k-genre { --k: var(--cn-genre); } .k-person { --k: var(--cn-person); }
.k-award { --k: var(--cn-award); } .k-based-on { --k: var(--cn-based); } .k-franchise { --k: var(--cn-franchise); }
.k-keyword, .k-studio { --k: var(--cn-keyword); } .k-year { --k: var(--cn-year); } .k-origin { --k: var(--cn-origin); }
.k-text { --k: var(--cn-muted); }

body { font-family: var(--ui-font-body); font-size: 1rem; line-height: 1.55; font-feature-settings: "tnum" 0; }
.cn-main { padding-block: clamp(1rem, 3vw, 2.5rem) 5rem; min-block-size: 60vh; }
.cn-banner { padding: .5rem 1rem; text-align: center; font-weight: 600; background: var(--cn-glow); color: #1a1205; }

/* type scale (1.25 minor third, condensed display set tight) */
.cn-display { font-family: var(--ui-font-display); font-weight: 800; font-size: clamp(2.8rem, 1.6rem + 5.2vw, 6.25rem);
  line-height: .9; letter-spacing: -.005em; margin: 0 0 1rem; text-wrap: balance; max-inline-size: 16ch; }
.cn-display-sm { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.25rem); max-inline-size: 22ch; }
.cn-h2 { font-family: var(--ui-font-display); font-weight: 750; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1; margin: 0; letter-spacing: .005em; }
.cn-h3 { font-family: var(--ui-font-display); font-weight: 700; font-size: 1.55rem; line-height: 1.05; margin: 0 0 .5rem; }
.cn-h4 { font-weight: 650; font-size: 1.05rem; margin: .4rem 0 .2rem; }
.cn-lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--cn-muted); max-inline-size: 60ch; margin: 0 0 1.4rem; }
.cn-hint { color: var(--cn-muted); margin: .3rem 0 1rem; font-size: .95rem; }
.cn-count { color: var(--cn-muted); font-size: .95rem; margin: 0; font-variant-numeric: tabular-nums; }
.cn-prose { max-inline-size: 46rem; } .cn-prose p { max-inline-size: 68ch; }

/* header and brand */
.cn-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ui-ink); }
.cn-mark { inline-size: 1.9rem; block-size: 1.9rem; }
.cn-mark-a { fill: var(--cn-theme); } .cn-mark-b { fill: var(--cn-place); } .cn-mark-c { fill: var(--cn-period); }
.cn-wordmark { font-family: var(--ui-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: .01em; line-height: 1; }
.cn-avatar { --h: 200; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%;
  font-weight: 700; font-size: .9rem; color: #fff; background: hsl(var(--h) 45% 38%); flex: none; }
.cn-avatar-link { text-decoration: none; }

/* mobile tab bar */
.cn-tabbar { display: none; }
@media (max-width: 47.99rem) {
  .cn-tabbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--ui-surface) 92%, transparent);
    border-block-start: 1px solid var(--cn-line); backdrop-filter: blur(14px); }
  .cn-tabbar a { display: grid; justify-items: center; gap: .1rem; padding: .35rem 0; font-size: .7rem; font-weight: 600; color: var(--cn-muted); text-decoration: none; border-radius: 10px; }
  .cn-tabbar a[aria-current="page"] { color: var(--ui-ink); background: var(--cn-line-soft); }
  .cn-tabbar .ui-i { inline-size: 1.3rem; block-size: 1.3rem; }
  body { padding-block-end: 4.5rem; }
  .ui-header .header-action[href="/search"] { display: none; }
}

/* footer */
.cn-footer { margin-block-start: 3rem; border-block-start: 1px solid var(--cn-line); }
.cn-footer-inner { display: grid; gap: 1.2rem; padding-block: 2rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .cn-footer-inner { grid-template-columns: 1.2fr 2fr auto; align-items: start; } }
.cn-footer-brand p { color: var(--cn-muted); margin: .4rem 0 0; }
.cn-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.cn-footer-links a { color: inherit; text-decoration: none; font-weight: 550; }
.cn-footer-links a:hover { text-decoration: underline; }
.cn-footer-prefs { display: flex; gap: .6rem; align-items: center; }
.cn-credit { grid-column: 1 / -1; margin: 0; }

/* the search slate: the one bold element */
.cn-slate { position: relative; display: flex; align-items: stretch; max-inline-size: 46rem; margin-block: 0 1rem;
  border: 2px solid var(--ui-ink); border-radius: var(--cn-r-panel); background: var(--ui-surface); }
.cn-slate:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--ui-primary) 35%, transparent); }
.cn-slate-input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--ui-ink); font: inherit;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); padding: .9rem 1.1rem; outline: none; }
.cn-slate-input::placeholder { color: var(--cn-muted); }
.cn-slate-input::-webkit-search-cancel-button { display: none; }
.cn-slate-go { border: 0; margin: .35rem; padding-inline: 1.1rem; border-radius: 10px; background: var(--ui-ink); color: var(--ui-bg); cursor: pointer; }
.cn-slate-go .ui-i { inline-size: 1.3rem; block-size: 1.3rem; }
.cn-suggest { position: absolute; inset-inline: -2px; inset-block-start: calc(100% + .35rem); z-index: 40; margin: 0; padding: .35rem; list-style: none;
  background: var(--ui-surface); border: 1px solid var(--cn-line); border-radius: var(--cn-r-panel); box-shadow: 0 18px 40px rgb(0 0 0 / .18); }
.cn-suggest li a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; color: inherit; text-decoration: none; }
.cn-suggest li a small { margin-inline-start: auto; color: var(--cn-muted); font-variant-numeric: tabular-nums; }
.cn-suggest li[aria-selected="true"] a, .cn-suggest li a:hover { background: var(--cn-line-soft); }

.cn-examples { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.cn-examples a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1px dashed var(--cn-line); color: inherit; text-decoration: none; font-size: .95rem; }
.cn-examples a:hover { border-style: solid; background: var(--cn-line-soft); }

/* hero */
.cn-hero { padding-block: clamp(1.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.cn-hero .cn-display { max-inline-size: 13ch; }

/* chips */
.cn-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.cn-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem .3rem .6rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--k, var(--cn-keyword)) 38%, transparent); background: color-mix(in oklab, var(--k, var(--cn-keyword)) 8%, var(--ui-surface));
  color: var(--ui-ink); text-decoration: none; font-size: .9rem; font-weight: 560; line-height: 1.2; white-space: nowrap; max-inline-size: 100%; }
.cn-chip > span:not(.cn-dot) { overflow: hidden; text-overflow: ellipsis; }
.cn-chip small { color: var(--cn-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cn-chip:hover { background: color-mix(in oklab, var(--k) 16%, var(--ui-surface)); border-color: var(--k); }
.cn-dot { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--k, var(--cn-keyword)); flex: none; }
.cn-chips-lg .cn-chip { font-size: 1rem; padding: .45rem .95rem .45rem .75rem; }
.cn-chip.is-active { background: color-mix(in oklab, var(--k) 18%, var(--ui-surface)); border-color: var(--k); padding-inline-end: .3rem; }
.cn-chip.is-active a { color: inherit; text-decoration: none; }
.cn-chip .cn-x { display: inline-grid; place-items: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; color: inherit; text-decoration: none; font-size: 1.05rem; line-height: 1; }
.cn-chip .cn-x:hover { background: color-mix(in oklab, var(--k) 25%, transparent); }
.cn-chip.is-add { border-style: dashed; background: transparent; }

/* section heads and rails */
.cn-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block: 2.6rem 1rem; }
.cn-more { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--cn-line); white-space: nowrap; }
.cn-more:hover { text-decoration-color: currentColor; }
.cn-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(9rem, 26vw, 11.5rem); gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-block-end: .75rem; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.cn-rail-track > * { scroll-snap-align: start; }
.cn-rail-track:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; border-radius: 6px; }
.cn-shortcuts { margin-block-start: 1rem; }
.cn-shortcuts .cn-h3 { font-size: 1.25rem; }

/* cards */
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 44%), 1fr)); gap: 1.6rem 1rem; }
.cn-card { display: grid; gap: .55rem; align-content: start; min-inline-size: 0; }
.cn-poster { --h: 210; display: block; aspect-ratio: 2 / 3; border-radius: var(--cn-r-poster); overflow: hidden;
  background: hsl(var(--h) 40% 18%); outline-offset: 3px; }
.cn-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.cn-card-body { display: grid; gap: .25rem; min-inline-size: 0; }
.cn-card-title { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.25; }
.cn-card-title a { color: inherit; text-decoration: none; }
.cn-card-title a:hover { text-decoration: underline; }
.cn-card-title small { color: var(--cn-muted); font-weight: 500; }
.cn-card-meta { display: flex; gap: .6rem; margin: 0; color: var(--cn-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.cn-rating { display: inline-flex; align-items: center; gap: .15rem; color: var(--ui-ink); }
.cn-rating .ui-i { color: var(--ui-star); }
.cn-card-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.cn-card-chips .cn-chip { font-size: .75rem; padding: .15rem .5rem .15rem .4rem; gap: .3rem; font-weight: 550; }
.cn-card-chips .cn-dot { inline-size: .45rem; block-size: .45rem; }
.cn-because { margin: 0; font-size: .82rem; color: var(--cn-muted); line-height: 1.35; }
.cn-because a { color: var(--ui-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--k); text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* guides */
.cn-guide-band { --h: 200; display: grid; gap: 1rem; padding: 1.2rem; border-radius: var(--cn-r-panel); margin-block-end: 1rem;
  background: linear-gradient(90deg, hsl(var(--h) 55% 45% / .16), transparent 70%), var(--cn-panel); border: 1px solid var(--cn-line-soft);
  border-inline-start: 5px solid hsl(var(--h) 60% 50%); }
@media (min-width: 52rem) { .cn-guide-band { grid-template-columns: minmax(14rem, 1fr) 2fr; align-items: center; } }
.cn-guide-text { color: inherit; text-decoration: none; display: grid; gap: .3rem; }
.cn-guide-text p { margin: 0; color: var(--cn-muted); }
.cn-guide-text:hover .cn-h3 { text-decoration: underline; }
.cn-guide-posters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cn-guide-posters img { inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 40rem) { .cn-guide-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cn-guide-posters li:nth-child(n+5) { display: none; } }
.cn-guide-head { border-inline-start: 5px solid hsl(var(--h, 200) 60% 50%); padding-inline-start: 1rem; }

/* decades ribbon (a real sequence: decades in order) */
.cn-ribbon { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.4rem, 1fr); gap: .35rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.cn-ribbon a { display: grid; grid-template-rows: 7rem auto auto; align-items: end; gap: .25rem; color: inherit; text-decoration: none; text-align: center; padding-block-end: .3rem; }
.cn-ribbon-bar { display: block; block-size: max(6%, calc(var(--v) * 1%)); border-radius: 4px 4px 0 0; background: color-mix(in oklab, var(--cn-period) 70%, transparent); align-self: end; }
.cn-ribbon a:hover .cn-ribbon-bar { background: var(--cn-period); }
.cn-ribbon b { font-family: var(--ui-font-display); font-size: 1.2rem; font-weight: 750; }
.cn-ribbon small { color: var(--cn-muted); font-size: .75rem; }
.cn-ribbon-lg a { grid-template-rows: 12rem auto auto; }

.cn-places-teaser a { display: block; margin-block-start: 2.6rem; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: var(--cn-r-panel);
  color: #e8ebf0; text-decoration: none; background:
  radial-gradient(circle at 60% 70%, #ffb45455 0 6px, transparent 7px), radial-gradient(circle at 68% 26%, #3fc1b555 0 5px, transparent 6px),
  radial-gradient(circle at 78% 48%, #ffb45488 0 9px, transparent 10px), radial-gradient(circle at 88% 24%, #a99bff66 0 4px, transparent 5px),
  radial-gradient(circle at 93% 70%, #3fc1b566 0 7px, transparent 8px),
  repeating-linear-gradient(90deg, #ffffff0d 0 1px, transparent 1px 8.33%), repeating-linear-gradient(0deg, #ffffff0d 0 1px, transparent 1px 25%), var(--cn-screen); }
.cn-places-teaser p { margin: .5rem 0 0; color: #b9c0ca; max-inline-size: 52ch; }

/* page heads, search */
.cn-page-head { margin-block-end: 1.6rem; }
.cn-search-head { margin-block-end: 1rem; }
.cn-understood { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cn-understood-label { color: var(--cn-muted); font-weight: 550; }
.cn-results-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; margin-block: 1.4rem 1rem;
  padding-block-end: .7rem; border-block-end: 1px solid var(--cn-line-soft); }
.cn-sort { display: flex; flex-wrap: wrap; gap: .2rem; }
.cn-sort a, .cn-decade-filter a { padding: .3rem .7rem; border-radius: 999px; color: inherit; text-decoration: none; font-size: .9rem; font-weight: 560; }
.cn-sort a[aria-current="page"], .cn-decade-filter a[aria-current="page"] { background: var(--ui-ink); color: var(--ui-bg); }
.cn-refine { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-end: 1.4rem; color: var(--cn-muted); font-weight: 550; }
.cn-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 44%), 1fr)); gap: 1.8rem 1rem; margin: 0; padding: 0; list-style: none; }
.cn-hit { display: grid; gap: .3rem; align-content: start; }
.cn-matched, .cn-missing { margin: 0; font-size: .78rem; color: var(--cn-muted); line-height: 1.35; }
.cn-matched a { color: var(--ui-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--k); text-decoration-thickness: 2px; text-underline-offset: .18em; margin-inline-end: .3rem; }
.cn-close { margin-block-start: 3rem; }
.cn-close .cn-h2 { margin-block-end: 1rem; }
.cn-empty, .cn-search-start { padding-block: 2rem; }
.cn-reference p { font-weight: 600; }
.cn-pager { display: flex; justify-content: center; gap: .6rem; margin-block: 2rem; }

/* discover index */
.cn-kind-nav { display: flex; flex-wrap: wrap; gap: .3rem; position: sticky; inset-block-start: calc(var(--ui-header-h, 4rem) + .3rem); z-index: 5; padding-block: .5rem;
  background: color-mix(in oklab, var(--ui-bg) 90%, transparent); backdrop-filter: blur(10px); }
.cn-kind-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid var(--cn-line); }
.cn-kind { padding-block: 1.8rem; border-block-start: 3px solid var(--k); margin-block-start: 1.6rem; scroll-margin-top: 7rem; }
.cn-kind-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin-block-end: 1rem; }
.cn-kind-head p { margin: 0; color: var(--cn-muted); flex: 1 1 18rem; }

/* facet page */
.cn-facet-head { padding-block-end: 1.2rem; margin-block-end: 1.2rem; border-block-end: 3px solid var(--k); }
.cn-trail { display: flex; flex-wrap: wrap; gap: .3rem; margin-block-end: .7rem; font-size: .9rem; }
.cn-trail a { color: var(--cn-muted); text-decoration: none; font-weight: 550; }
.cn-trail a + a::before { content: "/"; margin-inline: .1rem .4rem; color: var(--cn-line); }
.cn-trail a:hover { color: var(--ui-ink); }
.cn-facet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.ui-btn.is-on { background: var(--k, var(--ui-ink)); color: var(--ui-bg); border-color: transparent; }
.cn-subplaces { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block-end: 1rem; color: var(--cn-muted); font-weight: 550; }
.cn-filters { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-block-end: 1.4rem; }
.cn-decade-filter { display: flex; flex-wrap: wrap; gap: .15rem; }
.cn-related { margin-block-start: 3rem; }
.cn-related .cn-h2 { margin-block-end: 1rem; }
.cn-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cn-pairs a { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--cn-line-soft); background: var(--cn-panel);
  color: inherit; text-decoration: none; font-weight: 560; }
.cn-pairs a:hover { border-color: var(--k); }
.cn-pair-a { color: var(--cn-muted); }
.cn-plus { color: var(--cn-muted); }
.cn-pair-b { display: inline-flex; align-items: center; gap: .35rem; }

/* places map: a star chart of the world, no tiles, no third party */
.cn-map { margin: 0 0 2rem; border-radius: var(--cn-r-panel); overflow: hidden; background: var(--cn-screen); }
.cn-map svg { display: block; inline-size: 100%; block-size: auto; }
.cn-graticule line { stroke: #ffffff14; stroke-width: 1; }
.cn-graticule .cn-equator { stroke: #ffffff26; stroke-dasharray: 3 5; }
.cn-pin circle { fill: #ffb454; fill-opacity: .82; stroke: #0b0d10; stroke-width: 1; }
.cn-pin.is-country circle { fill: #3fc1b5; fill-opacity: .35; }
.cn-pin text { fill: #d7dce3; font: 600 11px var(--ui-font-body); paint-order: stroke; stroke: #0b0d10; stroke-width: 3px; }
.cn-pin:hover circle, .cn-pin:focus circle { fill-opacity: 1; stroke: #fff; }
.cn-pin:focus { outline: none; }
.cn-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1.2rem 2rem; }
.cn-country h2 a { color: inherit; text-decoration: none; } .cn-country h2 small { color: var(--cn-muted); font-family: var(--ui-font-body); font-size: .9rem; }
.cn-elsewhere { margin-block-start: 2rem; }

/* film page */
.cn-film-hero { display: grid; gap: clamp(1.2rem, 3vw, 2.6rem); padding-block-end: 1.5rem; }
@media (min-width: 52rem) { .cn-film-hero { grid-template-columns: minmax(14rem, 19rem) 1fr; align-items: start; } }
.cn-film-poster { max-inline-size: 19rem; }
@media (max-width: 51.99rem) { .cn-film-poster { max-inline-size: 13rem; } }
.cn-film-poster img { inline-size: 100%; block-size: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--cn-r-poster); display: block;
  box-shadow: 0 30px 60px -30px hsl(var(--h, 210) 60% 20% / .7); }
.cn-film-title { max-inline-size: 18ch; }
.cn-film-original { margin: -.4rem 0 1rem; color: var(--cn-muted); font-size: 1.05rem; }
.cn-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0 0 1.1rem; }
.cn-facts div { display: grid; gap: .05rem; }
.cn-facts dt { font-size: .78rem; color: var(--cn-muted); font-weight: 550; }
.cn-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.cn-facts a { color: inherit; text-decoration: underline; text-decoration-color: var(--cn-line); text-underline-offset: .2em; }
.cn-logline { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); max-inline-size: 52ch; margin: 0 0 1.4rem; }
.cn-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: 1.1rem; }
.cn-act { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--cn-line);
  background: var(--ui-surface); color: var(--ui-ink); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.cn-act:hover { border-color: var(--ui-ink); }
.cn-act[aria-pressed="true"] { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }
.cn-act[data-list="favorites"][aria-pressed="true"] .ui-i { color: #ff6b8b; }
.cn-act-quiet { border-style: dashed; }
.cn-act-quiet[aria-pressed="true"] { background: var(--cn-line-soft); color: var(--ui-ink); border-style: solid; border-color: var(--cn-line); }
.cn-actions .ui-btn { border-radius: 999px; }
.cn-rating-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.cn-myrating { display: flex; align-items: center; gap: .6rem; }
.cn-film-body > section { margin-block-start: 2.6rem; }
.cn-film-body .cn-h2 { margin-block-end: .4rem; }
.cn-detail-groups { display: grid; gap: .9rem; margin: 0; }
.cn-detail-groups > div { display: grid; gap: .45rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--k); }
@media (min-width: 52rem) { .cn-detail-groups > div { grid-template-columns: 9rem 1fr; align-items: baseline; } }
.cn-detail-groups dt { font-weight: 650; font-size: .92rem; }
.cn-detail-groups dd { margin: 0; }
.cn-spoiler { margin-block-start: 1rem; padding: .7rem .9rem; border-radius: 12px; border: 1px dashed var(--cn-line); }
.cn-spoiler summary { cursor: pointer; font-weight: 600; }
.cn-spoiler[open] summary { margin-block-end: .6rem; }
.cn-place-list { display: grid; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.cn-place-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .7rem .9rem; border-radius: 12px; background: var(--cn-panel);
  border-inline-start: 3px solid var(--cn-place); }
.cn-place-list li.is-filming { border-inline-start-style: dashed; }
.cn-place-kind { font-size: .8rem; color: var(--cn-muted); font-weight: 600; min-inline-size: 5.5rem; }
.cn-place-name { font-family: var(--ui-font-display); font-weight: 750; font-size: 1.5rem; color: inherit; text-decoration: none; line-height: 1; }
.cn-place-name:hover { text-decoration: underline; }
.cn-place-trail { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .9rem; }
.cn-place-trail a { color: var(--cn-muted); text-decoration: none; }
.cn-place-trail a + a::before { content: "/"; margin-inline-end: .3rem; }
.cn-linked-list { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); margin: 1rem 0 0; padding: 0; list-style: none; }
.cn-linked-list li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .9rem; align-items: center; padding: .55rem; border-radius: 12px; border: 1px solid var(--cn-line-soft); }
.cn-linked-poster img { inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; }
.cn-reason { margin: .2rem 0 0; font-size: .88rem; color: var(--cn-muted); line-height: 1.4; }
.cn-reason a { color: var(--ui-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--k); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.cn-synopsis p { max-inline-size: 68ch; }
.cn-review-form { display: grid; gap: .8rem; max-inline-size: 40rem; padding: 1rem; border-radius: var(--cn-r-panel); background: var(--cn-panel); margin-block-end: 1.4rem; }
.cn-review-stars { display: flex; gap: .3rem; border: 0; padding: 0; margin: 0; }
.cn-review-stars legend { font-weight: 600; margin-block-end: .3rem; }
.cn-review-stars label { cursor: pointer; }
.cn-review-stars input { position: absolute; opacity: 0; }
.cn-review-stars span { display: inline-grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%; border: 1px solid var(--cn-line); font-weight: 700; }
.cn-review-stars input:checked + span { background: var(--ui-ink); color: var(--ui-bg); }
.cn-review-stars input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.cn-review-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; max-inline-size: 48rem; }
.cn-review-list li { padding-block-end: 1rem; border-block-end: 1px solid var(--cn-line-soft); }
.cn-review-list header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cn-review-list p { margin: .3rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.cn-verified { font-size: .78rem; padding: .05rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--cn-place) 15%, transparent); }
.cn-sources { margin-block-start: 3rem; padding-block-start: 1rem; border-block-start: 1px solid var(--cn-line-soft); font-size: .85rem; color: var(--cn-muted); display: flex; flex-wrap: wrap; gap: .5rem; }
.cn-sources a { color: inherit; }

/* member pages */
.cn-me-menu { display: flex; flex-wrap: wrap; gap: .3rem; margin-block-end: 1.6rem; }
.cn-me-menu a { padding: .4rem .9rem; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; border: 1px solid var(--cn-line); }
.cn-me-menu a[aria-current="page"] { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }
.cn-list-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.cn-list-tiles a { display: grid; gap: .3rem; padding: .8rem; border-radius: var(--cn-r-panel); background: var(--cn-panel); border: 1px solid var(--cn-line-soft); color: inherit; text-decoration: none; }
.cn-list-tiles a:hover { border-color: var(--ui-ink); }
.cn-list-tiles b { font-family: var(--ui-font-display); font-size: 1.5rem; font-weight: 750; line-height: 1; margin-block-start: .4rem; }
.cn-list-tiles small { color: var(--cn-muted); }
.cn-tile-posters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; min-block-size: 4.5rem; border-radius: 8px; background: var(--cn-line-soft); }
.cn-tile-posters img { inline-size: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; }
.sys-favorites { --k: var(--cn-franchise); } .sys-watched { --k: var(--cn-place); } .sys-watchlist { --k: var(--cn-theme); }
.cn-list-tiles li[class^="sys-"] a { border-inline-start: 4px solid var(--k); }
.cn-list-item { display: grid; gap: .3rem; align-content: start; }
.cn-panel { margin-block: 1.6rem; padding: 1.1rem 1.2rem; border-radius: var(--cn-r-panel); background: var(--cn-panel); border: 1px solid var(--cn-line-soft); max-inline-size: 52rem; }
.cn-switches, .cn-profile-form { display: grid; gap: .7rem; justify-items: start; }
.cn-notice { padding: .8rem 1rem; border-radius: 12px; background: color-mix(in oklab, var(--cn-theme) 14%, transparent); font-weight: 600; }
.cn-taste { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); margin-block: 1.6rem; }
.cn-taste-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.cn-taste-entry { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .8rem; padding-block: .35rem; border-block-end: 1px solid var(--cn-line-soft); }
.cn-weight { block-size: .35rem; border-radius: 999px; background: linear-gradient(90deg, var(--k) calc(var(--w) * 1%), var(--cn-line-soft) 0); }
.cn-taste-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem; }
.cn-search-history, .cn-dismissed { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.cn-search-history li, .cn-dismissed li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.cn-search-history a, .cn-dismissed a { color: inherit; font-weight: 550; }
.cn-danger { border-color: color-mix(in oklab, var(--ui-bad) 35%, transparent); }
.cn-inbox { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; max-inline-size: 44rem; }
.cn-inbox a { display: grid; gap: .1rem; padding: .7rem .9rem; border-radius: 12px; color: inherit; text-decoration: none; border: 1px solid var(--cn-line-soft); }
.cn-inbox .is-unread a { border-inline-start: 4px solid var(--cn-glow); }
.cn-inbox span { color: var(--cn-muted); }
.cn-inbox time { font-size: .8rem; color: var(--cn-muted); }

/* account and errors */
.cn-account { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .cn-account { grid-template-columns: 1fr minmax(22rem, 28rem); } }
.cn-account-card { min-inline-size: 0; }
.cn-error { text-align: start; }
.cn-error-code { font-family: var(--ui-font-display); font-size: clamp(5rem, 14vw, 10rem); font-weight: 800; line-height: .8; margin: 0 0 .4rem; color: var(--cn-line); }
.cn-credits { display: grid; gap: .4rem; padding-inline-start: 1.1rem; }

/* focus and motion */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .cn-hero .cn-display { animation: cn-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes cn-rise { from { opacity: 0; transform: translateY(.4em); letter-spacing: .04em; } }
}