/* WTWN 0.43.25 */
/* Recommendation pages ("Shows like X"). Self-contained dark palette so the cards look the same on any theme. */
.wtwn-rp, .wtwn-seo { --ink: #0f0e14; --panel: #1a1822; --line: #2f2c3b; --text: #f2ede3; --muted: #a9a4b5; --accent: #f5b544; --accent-ink: #1b1305; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.wtwn-rp { color: var(--text); }
.wtwn-rp-hero { position: relative; background: var(--ink) center / cover no-repeat; border-bottom: 1px solid var(--line); isolation: isolate; }
.wtwn-rp-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(15 14 20 / .55), rgb(15 14 20 / .92) 70%, var(--ink)), linear-gradient(90deg, rgb(15 14 20 / .85), transparent); }
.wtwn-rp-in { max-width: 72rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem clamp(1.5rem, 4vw, 2.5rem); }
.wtwn-rp-crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 1.25rem; }
.wtwn-rp-crumbs a { text-decoration: none; }
.wtwn-rp-crumbs a:hover { text-decoration: underline; }
.wtwn-rp h1 { font: 600 clamp(2rem, 6vw, 3.4rem)/1.08 var(--serif); margin: 0 0 1rem; max-width: 20ch; text-wrap: balance; }
.wtwn-rp-intro { max-width: 46rem; font-size: 1.1rem; line-height: 1.6; color: color-mix(in srgb, var(--text) 90%, transparent); }
.wtwn-rp-intro p { margin: 0 0 .8rem; }
.wtwn-rp-act { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1.25rem 0 0; }
.wtwn-rp-act small { color: var(--muted); }
.wtwn-rp-body { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 1rem; }

.wtwn-seo { color: var(--text); margin: 1.5rem 0; }
.wtwn-seo-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .wtwn-seo-grid { grid-template-columns: repeat(2, 1fr); } }
.wtwn-c2 { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .9rem; background: var(--panel); border: 1px solid var(--line); border-radius: .8rem; }
.wtwn-c2-poster { display: block; }
.wtwn-c2 img, .wtwn-c2-nopic { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .45rem; background: var(--line); }
.wtwn-c2-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.wtwn-c2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.wtwn-c2 h2 { margin: 0; font: 600 1.15rem/1.25 var(--serif); color: var(--text); }
.wtwn-c2 h2 small { display: block; margin-top: .15rem; font: 400 .8rem/1.3 system-ui, sans-serif; color: var(--muted); }
.wtwn-c2-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; font-size: .85rem; color: var(--muted); }
.wtwn-c2-rate { color: var(--accent); font-weight: 600; }
.wtwn-c2-why { margin: .1rem 0; font-size: .95rem; line-height: 1.5; color: color-mix(in srgb, var(--text) 88%, transparent); }
.wtwn-c2-prov { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: .2rem 0 0; padding: 0; }
.wtwn-c2-prov li { padding: .1rem .55rem; border-radius: 2rem; font-size: .75rem; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
.wtwn-c2-more { margin-top: auto; padding-top: .3rem; font-size: .85rem; color: var(--accent); text-decoration: none; }
.wtwn-c2-more:hover { text-decoration: underline; }
.wtwn-ring2 { --p: 0; position: relative; flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--text) 14%, transparent) 0); }
.wtwn-ring2::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--panel); }
.wtwn-ring2 b { position: relative; font-size: .8rem; font-weight: 700; }

.wtwn-seo-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.75rem; padding: 1.25rem 1.4rem; border-radius: .9rem; border: 1px solid var(--line); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel)); }
.wtwn-seo-cta div { display: flex; flex-direction: column; gap: .2rem; max-width: 34rem; }
.wtwn-seo-cta span { color: var(--muted); font-size: .95rem; }
.wtwn-seo-btn { display: inline-block; padding: .75rem 1.3rem; border-radius: 2rem; font-weight: 700; text-decoration: none; background: var(--accent); color: var(--accent-ink); }
.wtwn-seo-btn:hover { filter: brightness(1.08); }
.wtwn-seo-also { margin-top: 2rem; }
.wtwn-seo-also h2 { font: 600 1.15rem/1.2 var(--serif); margin: 0 0 .75rem; }
.wtwn-seo-also ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.wtwn-seo-also a { display: inline-block; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 2rem; font-size: .9rem; text-decoration: none; color: var(--text); background: var(--panel); }
.wtwn-seo-also a:hover { border-color: var(--accent); }
.wtwn-seo-credit { font-size: .8rem; color: var(--muted); margin-top: 1.75rem; }
@media (max-width: 30rem) { .wtwn-c2 { grid-template-columns: 5rem 1fr; } }

/* 0.21: clickable cards open the details panel */
.wtwn-c2[data-wtwn-open] { cursor: pointer; transition: border-color .15s, background .15s; }
.wtwn-c2[data-wtwn-open]:hover { border-color: var(--accent); background: color-mix(in srgb, var(--panel) 92%, var(--accent)); }
.wtwn-c2-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: auto; padding-top: .3rem; }
.wtwn-rp .wtwn-c2-list, .wtwn-seo .wtwn-c2-list { font-size: .8rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.wtwn-rp .wtwn-c2-list:hover, .wtwn-seo .wtwn-c2-list:hover { color: var(--text); }
/* amber buttons stay readable whatever the theme does to links */
.wtwn-rp .wtwn-seo-btn, .wtwn-seo .wtwn-seo-btn, .wtwn-seo-btn:link, .wtwn-seo-btn:visited, .wtwn-seo-btn:hover { color: var(--accent-ink); }
.wtwn-rp a.wtwn-c2-more, .wtwn-seo a.wtwn-c2-more { color: var(--accent); }

.wtwn-c2[data-wtwn-open]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wtwn-idx { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.wtwn-idx a { display: block; text-decoration: none; color: inherit; }
.wtwn-idx img, .wtwn-idx-nopic { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .5rem; background: rgba(128,128,128,.2); }
.wtwn-idx-t { display: block; margin-top: .5rem; font-weight: 600; line-height: 1.25; }
.wtwn-idx small { display: block; opacity: .7; }
.wtwn-idx a:hover .wtwn-idx-t { text-decoration: underline; }

.wtwn-rp-back { margin: 0 0 .5rem; font-size: .95rem; }
.wtwn-rp-back a, .wtwn-rp-all a { text-decoration: none; font-weight: 600; }
.wtwn-rp-all { margin: 2rem 0 0; text-align: center; }

.wtwn-idx-find { margin: 1.25rem 0 .75rem; }
.wtwn-idx-find input { width: min(26rem, 100%); padding: .65rem 1rem; border-radius: 999px; border: 1px solid rgba(128,128,128,.4); background: rgba(128,128,128,.12); color: inherit; font-size: 1rem; }
.wtwn-idx-find span { margin-left: .75rem; opacity: .7; font-size: .9rem; }
.wtwn-idx li[hidden] { display: none; }
.wtwn-idx-no { margin: 1rem 0; }
.wtwn-seo-btn-quiet { background: transparent !important; color: inherit !important; border: 1px solid rgba(128,128,128,.5); }
.wtwn-seo-all a { font-weight: 600; }

.wtwn-rp-soon { margin: .25rem 0 .75rem; }
.wtwn-rp-soon span { display: inline-block; font-size: .85rem; font-weight: 600; padding: .2rem .7rem; border-radius: 999px; background: #f6b53c; color: #1b1405; }
.wtwn-soon-cta { opacity: 1 !important; font-weight: 600; }
.wtwn-rp-body h2 { margin: 1.5rem 0 .75rem; }

.wtwn-rp-answer { margin: .25rem 0 .9rem; max-width: 46rem; font-size: 1.15rem; line-height: 1.45; font-weight: 600; }

/* 0.41.1: the same gentle lift on the list-page cards */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wtwn-c2 { transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
	.wtwn-c2:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
	.wtwn-c2 img { transition: transform .35s ease-out; }
	.wtwn-c2:hover img { transform: scale(1.03); }
}
.wtwn-c2-poster { overflow: hidden; border-radius: .45rem; }

/* 0.42.0: Coming soon cards open the details panel; a title with no poster is a dark tile with its name. */
.wtwn-idx li[data-wtwn-open] { cursor: pointer; }
.wtwn-idx .wtwn-soon-cta { display: block; margin-top: .15rem; font-size: .85rem; }
.wtwn-idx-nopic { position: relative; display: flex; align-items: center; justify-content: center; padding: .75rem; box-sizing: border-box; text-align: center; background: linear-gradient(160deg, #26233a, #14121c); border: 1px solid rgba(245,181,68,.35); }
.wtwn-idx-nopic b { color: #f2ede3; font: 700 1rem/1.25 system-ui, sans-serif; text-wrap: balance; overflow-wrap: anywhere; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wtwn-idx li[data-wtwn-open] > a.wtwn-open { transition: transform .18s ease; }
	.wtwn-idx li[data-wtwn-open]:hover > a.wtwn-open { transform: translateY(-3px); }
}