/* ---------------------------------------------------------------------------
 * Reel Templates — shared styles for /reel-templates/ and the detail pages.
 * Same visual language as showcase.php (dark glass + indigo/violet orbs).
 * ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
	background: #06060a;
	color: rgba(255,255,255,0.92);
	line-height: 1.55;
	min-height: 100vh;
	overflow-x: hidden;
}
img, video { max-width: 100%; }

/* Ambient backdrop */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-orbs::before, .bg-orbs::after {
	content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%;
	filter: blur(120px); opacity: 0.5;
}
.bg-orbs::before { background: radial-gradient(circle, #6366F1 0%, transparent 70%); top: -240px; left: -220px; }
.bg-orbs::after  { background: radial-gradient(circle, #a855f7 0%, transparent 70%); bottom: -260px; right: -220px; }
.bg-grain {
	position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
	background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
	background-size: 3px 3px;
}
main { position: relative; z-index: 1; }

/* Nav */
.nav {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: saturate(160%) blur(20px);
	-webkit-backdrop-filter: saturate(160%) blur(20px);
	background: rgba(10,10,15,0.55);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; font-weight: 600; letter-spacing: -0.01em; flex: 0 0 auto; }
.brand-logo { width: 26px; height: 26px; display: inline-block; filter: drop-shadow(0 5px 16px rgba(99,102,241,0.4)); }
.nav-links { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; white-space: nowrap; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: white; }

/* Breadcrumbs */
.crumbs { max-width: 1180px; margin: 0 auto; padding: 22px 28px 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; color: rgba(255,255,255,0.45); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,0.25); }
.crumbs a { color: rgba(255,255,255,0.6); text-decoration: none; }
.crumbs a:hover { color: #fff; }

/* Hero */
.hero { max-width: 1180px; margin: 0 auto; padding: 44px 28px 30px; text-align: center; }
.eyebrow {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
	font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 22px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; }
h1 {
	font-size: clamp(34px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 18px; font-weight: 700;
	background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: clamp(15px, 1.4vw, 19px); color: rgba(255,255,255,0.7); max-width: 720px; margin: 0 auto; }

.rt-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin: 28px auto 0; }
.rt-stat { display: flex; align-items: baseline; gap: 6px; padding: 2px 20px; border-right: 1px solid rgba(255,255,255,0.12); }
.rt-stat:last-child { border-right: 0; }
.rt-stat strong { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.rt-stat span { font-size: 12px; color: rgba(255,255,255,0.5); }
@media (max-width: 600px) { .rt-stat { border-right: 0; padding: 2px 12px; } }
/* Phone hero: shorter lede, three stats instead of five, less air. The hidden
   copy stays in the DOM — this is a display decision, not a content one. */
@media (max-width: 720px) {
	.hero { padding: 26px 18px 20px; }
	.eyebrow { margin-bottom: 16px; padding: 6px 12px; font-size: 11px; }
	h1 { font-size: clamp(27px, 8vw, 38px); margin-bottom: 12px; }
	.lede { font-size: 15px; }
	.rt-lede-more { display: none; }
	.rt-stats { margin-top: 18px; gap: 0; }
	.rt-stat-2nd { display: none; }
	.rt-stat { padding: 2px 10px; }
	.rt-stat strong { font-size: 16px; }
	.crumbs { padding: 14px 18px 0; }
}

/* Glass surface */
.glass {
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.08); border-radius: 18px;
}

/* ------------------------------------------------------------- filter rail */
/* Filters sit in a left rail; the results grid takes the rest of the row. */
.rt-layout {
	max-width: 1180px; margin: 0 auto; padding: 8px 28px 0;
	display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 30px; align-items: start;
}
.rt-rail { position: sticky; top: 74px; }
.rt-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rt-rail-head h2 {
	margin: 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.45); font-weight: 600;
}
.rt-filters { display: flex; flex-direction: column; gap: 16px; }
.rt-group h3 {
	margin: 0 0 7px; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
	color: rgba(255,255,255,0.42); font-weight: 500;
}
.rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "More filters" is a phone-only control — on the rail every filter is
   already visible, so the button has nothing to do. */
.rt-more-toggle { display: none; }

/* The rail holds down to tablet width — a 236px column plus two cards still
   fits. Below that it becomes a normal block above the grid; a sticky sidebar
   on a phone is just lost screen. */
@media (max-width: 1040px) { .rt-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 24px; } }
@media (max-width: 720px) {
	/* minmax(0,1fr), not 1fr: a grid track defaults to min-width:auto, so the
	   no-wrap chip row would otherwise stretch the column past the
	   viewport and push the search field off-screen. */
	.rt-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 4px 18px 0; }
	.rt-rail { position: static; min-width: 0; }
	.rt-filters, .rt-group, .rt-group-cat { min-width: 0; }
	.rt-filters { display: flex; flex-direction: column; gap: 12px; }
	/* Drop the "Filter" label but keep Clear reachable — it's `hidden` until
	   something is actually filtered, so this row costs nothing when clean. */
	.rt-rail-head h2 { display: none; }
	.rt-rail-head { justify-content: flex-end; margin: 0; }
	.rt-search input[type="search"] { font-size: 16px; padding: 10px 13px 10px 38px; }

	.rt-more-toggle {
		display: flex; align-items: center; justify-content: center; gap: 8px;
		font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
		width: 100%; padding: 10px 14px; border-radius: 10px; color: rgba(255,255,255,0.8);
		background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
	}
	.rt-more-toggle::after {
		content: ""; width: 10px; height: 7px; background: currentColor;
		-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
		mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
		transition: transform .2s;
	}
	.rt-more-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
	.rt-more-badge {
		min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
		display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
		color: #0a0a0f; background: #b3a6ff;
	}
	/* An explicit `display` beats the `hidden` attribute, so restore it. */
	.rt-more-badge[hidden] { display: none; }
	/* Only collapses once JS has set the attribute, so a no-JS phone still
	   gets every filter. */
	.rt-more[data-collapsed="1"] { display: none; }
	.rt-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px 12px; }

	.rt-results-head { margin-bottom: 12px; }
	.rt-subline { display: none; }            /* the count already says it */
	.rt-count { margin-left: auto; }
}

.rt-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

.rt-search { position: relative; display: flex; align-items: center; gap: 10px; }
.rt-search input[type="search"] {
	flex: 1 1 auto; width: 100%; font: inherit; font-size: 15px; color: #fff;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
	border-radius: 11px; padding: 11px 14px 11px 40px; outline: none;
	transition: border-color .18s, background .18s;
	-webkit-appearance: none; appearance: none;
}
.rt-search input[type="search"]::placeholder { color: rgba(255,255,255,0.38); }
.rt-search input[type="search"]:focus { border-color: rgba(139,124,255,0.65); background: rgba(255,255,255,0.07); }
.rt-search::before {
	content: ""; position: absolute; left: 14px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
	background: currentColor; color: rgba(255,255,255,0.4); pointer-events: none;
	-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
	mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* Category chips — real links, so they work with JS off and crawlers follow
   them to the server-rendered category pages. Stacked in the rail. */
.rt-chips { display: flex; flex-direction: column; gap: 2px; }
.rt-chips a {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	font: inherit; font-size: 14px; font-weight: 500;
	padding: 7px 10px; border-radius: 8px; cursor: pointer; text-decoration: none;
	background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.62);
	transition: color .15s, background .15s, border-color .15s;
}
.rt-chips a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.rt-chips .active { color: #fff; background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.14); }
.rt-chips .count { color: rgba(255,255,255,0.38); font-size: 12px; font-variant-numeric: tabular-nums; }
/* A category that the other active filters have emptied out — dimmed, but
   still clickable, so it never becomes a dead end the user can't back out of. */
.rt-chips a.is-empty:not(.active) { opacity: 0.42; }

/* Phone: one sideways-scrolling line of chips instead of eight stacked rows.
   Must come after the base rules above — same specificity, later wins. */
@media (max-width: 720px) {
	.rt-group-cat h3 { display: none; }
	.rt-chips {
		flex-direction: row; flex-wrap: nowrap; gap: 6px;
		overflow-x: auto; scrollbar-width: none;
		margin: 0 -18px; padding: 2px 18px;   /* bleed to the screen edge */
		-webkit-overflow-scrolling: touch;
	}
	.rt-chips::-webkit-scrollbar { display: none; }
	.rt-chips a { flex: 0 0 auto; padding: 7px 12px; gap: 6px; }
	/* Fade the trailing edge so the row reads as scrollable rather than cut. */
	.rt-chips {
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
	}
}


.rt-field { display: block; }
.rt-field select {
	font: inherit; font-size: 13.5px; color: #fff; cursor: pointer; width: 100%;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
	border-radius: 9px; padding: 8px 30px 8px 11px; outline: none;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23ffffff88' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 11px center; background-size: 10px;
}
.rt-field select:focus { border-color: rgba(139,124,255,0.65); }
.rt-field select option { background: #12121a; color: #fff; }
.rt-clear {
	font: inherit; font-size: 12.5px; cursor: pointer; color: rgba(255,255,255,0.6);
	background: transparent; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; padding: 4px 10px;
}
.rt-clear:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.rt-count { margin: 0; font-size: 13px; color: rgba(255,255,255,0.45); white-space: nowrap; }

/* ------------------------------------------------------------------- grid */
section.body { max-width: 1180px; margin: 0 auto; padding: 26px 28px 8px; }
.rt-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 34px 0 16px; }
.rt-section-head h2 { font-size: 22px; letter-spacing: -0.02em; margin: 0; font-weight: 650; }
.rt-section-head a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; white-space: nowrap; }
.rt-section-head a:hover { color: #fff; }
.rt-subline { font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 20px; }

/* Three across when the rail leaves room for it, two otherwise, one on a
   phone. The rail costs ~260px, so the step down happens earlier than it
   would on a full-width grid. */
.rt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1180px) { .rt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .rt-grid { grid-template-columns: 1fr; } }

.rt-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.rt-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.18); }
.rt-card[hidden] { display: none; }
/* A single 4:5 frame for every card, whatever the template's real ratio, so
 * rows stay even. The thumbnail is fitted whole — never cropped — and a
 * blurred copy of the same (already-cached) image fills the letterbox. */
.rt-card-media {
	position: relative; display: block; overflow: hidden; background: #0c0c14;
	aspect-ratio: 4 / 5; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rt-card-media::before {
	content: ""; position: absolute; inset: -8%;
	background-image: var(--rt-poster); background-size: cover; background-position: center;
	filter: blur(26px) saturate(140%) brightness(0.5); transform: scale(1.1);
}
.rt-card-media img, .rt-card-media video {
	position: relative; width: 100%; height: 100%; object-fit: contain; display: block;
}
.rt-card-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.rt-card-media video.playing { opacity: 1; }
.rt-card-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.25); font-size: 22px; font-weight: 700; }
.rt-chip {
	position: absolute; bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em;
	padding: 4px 9px; border-radius: 7px; color: #fff;
	background: rgba(8,8,14,0.72); border: 1px solid rgba(255,255,255,0.13);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rt-chip-time { left: 10px; }
.rt-chip-ar { right: 10px; }

.rt-card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.rt-card-body h3 { margin: 0; font-size: 16.5px; letter-spacing: -0.015em; font-weight: 650; line-height: 1.3; }
.rt-card-body h3 a { color: #fff; text-decoration: none; }
.rt-card-body h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rt-card-cat { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.rt-card-cat a { color: #b3a6ff; text-decoration: none; }
.rt-card-cat a:hover { color: #d3caff; }
.rt-card-desc {
	margin: 2px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rt-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; }
.rt-badges li {
	font-size: 11.5px; color: rgba(255,255,255,0.62); padding: 3px 8px; border-radius: 6px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.rt-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; }
.rt-btn-sm {
	flex: 1 1 auto; text-align: center; font-size: 13px; font-weight: 500; text-decoration: none;
	padding: 9px 12px; border-radius: 9px; color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
	transition: background .18s, color .18s, border-color .18s;
}
.rt-btn-sm:hover { background: rgba(255,255,255,0.11); color: #fff; }
.rt-open-app { background: rgba(139,124,255,0.16); border-color: rgba(139,124,255,0.35); color: #d9d2ff; }
.rt-open-app:hover { background: rgba(139,124,255,0.26); color: #fff; }

@media (max-width: 560px) {
	/* Two across, not one — ten single-column cards is a very long scroll.
	   The card sheds its description, badges and secondary button to suit the
	   narrower column; the thumbnail, name and category still carry it, and
	   both the image and the title link through to the full page. */
	.rt-grid { gap: 12px; }
	.rt-card-body { padding: 11px 12px 12px; gap: 5px; }
	.rt-card-body h3 { font-size: 14.5px; }
	.rt-card-cat { font-size: 10.5px; letter-spacing: 0.06em; }
	.rt-card-desc, .rt-badges { display: none; }
	.rt-card-actions { padding-top: 9px; }
	.rt-card-actions .rt-btn-sm:not(.rt-open-app) { display: none; }
	.rt-btn-sm { font-size: 12.5px; padding: 8px 10px; }
	.rt-chip { font-size: 10.5px; padding: 3px 7px; bottom: 8px; }
	.rt-chip-time { left: 8px; } .rt-chip-ar { right: 8px; }
}

.rt-empty { display: none; text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.5); }
.rt-empty.show { display: block; }
.rt-empty strong { display: block; color: #fff; font-size: 18px; margin-bottom: 6px; }

/* ------------------------------------------------------------ detail page */
.rt-detail { max-width: 1180px; margin: 0 auto; padding: 18px 28px 8px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 34px; align-items: start; }
@media (max-width: 880px) { .rt-detail { grid-template-columns: 1fr; gap: 26px; } }
.rt-player { position: sticky; top: 84px; border-radius: 18px; overflow: hidden; background: #0c0c14; border: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 880px) { .rt-player { position: static; max-width: 380px; margin: 0 auto; } }
.rt-player video, .rt-player img { width: 100%; height: auto; display: block; }
.rt-detail h1 { font-size: clamp(28px, 3.4vw, 42px); text-align: left; margin-bottom: 14px; }
.rt-detail-lede { font-size: 16px; color: rgba(255,255,255,0.72); margin: 0 0 22px; }
.rt-detail-cat { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #b3a6ff; text-decoration: none; }

.rt-specs { list-style: none; margin: 22px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rt-specs li { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.rt-specs dt, .rt-specs .k { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 3px; }
.rt-specs .v { font-size: 15px; font-weight: 600; color: #fff; }

.rt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 6px; }
.rt-actions .btn { margin: 0; }
.rt-hint { font-size: 12.5px; color: rgba(255,255,255,0.42); margin: 0 0 26px; }

.rt-slots { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rt-slots li { display: flex; gap: 12px; align-items: baseline; padding: 10px 13px; border-radius: 11px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); }
.rt-slots .kind { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #b3a6ff; flex: 0 0 66px; }
.rt-slots .label { font-size: 14px; color: #fff; font-weight: 550; }
.rt-slots .def { font-size: 13px; color: rgba(255,255,255,0.5); margin-left: auto; text-align: right; max-width: 55%; }

/* Phone detail page: a 9:16 preview at full column width is ~560px tall and
   pushes the name and the CTA off the first screen. Cap it by height and let
   the width follow the aspect ratio. */
@media (max-width: 720px) {
	.rt-detail { padding: 12px 18px 0; gap: 20px; }
	.rt-player { background: transparent; border: 0; max-width: none; }
	.rt-player video, .rt-player img {
		max-height: 50vh; width: auto; max-width: 100%; margin: 0 auto;
		border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
	}
	.rt-detail-lede { font-size: 15px; margin-bottom: 18px; }
	.rt-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
	.rt-specs li { padding: 10px 12px; }
	.rt-actions { gap: 8px; }
	.rt-actions .btn { width: 100%; justify-content: center; margin: 0; }
	.rt-slots .def { display: none; }          /* the label already names it */
	/* The chart is wider than a phone, so it scrolls sideways — pin the row
	   labels or you lose track of which lane you're reading. */
	.tl-chart { min-width: 520px; padding: 28px 12px 12px; }
	.tl-row-label {
		position: sticky; left: 0; z-index: 1; flex-basis: 70px; font-size: 11px;
		background: linear-gradient(90deg, #101019 76%, transparent);
		padding-right: 8px;
	}
	.tl-ruler { margin-left: 80px; }
	.tl-summary { font-size: 15px; }
	.tl-h3 { margin-top: 26px; }
	.tl-table { min-width: 480px; }
	.rt-seo { padding: 30px 18px 8px; }
	.rt-seo-grid { gap: 16px; }
	.cta { padding: 40px 18px; margin-top: 36px; }
	footer.f { padding: 24px 18px 44px; }
}

/* --------------------------------------------------------------- SEO copy */
.rt-seo { max-width: 1180px; margin: 0 auto; padding: 40px 28px 10px; }
.rt-seo h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; margin: 0 0 12px; }
.rt-seo h3 { font-size: 16px; margin: 0 0 6px; color: #fff; }
.rt-seo p, .rt-seo li { color: rgba(255,255,255,0.62); font-size: 14.5px; }
.rt-seo a { color: #b3a6ff; text-decoration: none; }
.rt-seo a:hover { color: #d3caff; text-decoration: underline; }
.rt-seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 26px; margin-top: 22px; }
@media (max-width: 900px) { .rt-seo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rt-seo-grid { grid-template-columns: 1fr; } }
.rt-faq { margin-top: 30px; display: grid; gap: 10px; }
.rt-faq details { padding: 14px 17px; border-radius: 13px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
.rt-faq summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 15px; }
.rt-faq p { margin: 9px 0 0; }
.rt-linklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rt-linklist a {
	font-size: 13.5px; padding: 7px 12px; border-radius: 9px; text-decoration: none; color: rgba(255,255,255,0.8);
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.rt-linklist a:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ------------------------------------------------- structure diagrams (tl) */
.tl-summary { font-size: 16px; color: rgba(255,255,255,0.78); max-width: 78ch; }
.tl-note { font-size: 13.5px; color: rgba(255,255,255,0.5); max-width: 78ch; margin-top: -4px; }
.tl-h3 { font-size: 17px; letter-spacing: -0.015em; margin: 32px 0 4px; color: #fff; }
.tl-sub { font-size: 13.5px; color: rgba(255,255,255,0.55); margin: 0 0 14px; max-width: 82ch; }

.tl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.tl-key {
	display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,0.72);
	padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.tl-key i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.tl-key-slot { background: transparent !important; border: 1.5px dashed rgba(255,255,255,0.7); }
.tl-key b { color: #fff; font-weight: 650; }

.tl-chart-scroll { overflow-x: auto; padding-bottom: 6px; }
.tl-chart {
	min-width: 560px; padding: 30px 14px 14px; border-radius: 14px;
	background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.tl-ruler { position: relative; height: 0; margin: 0 0 0 96px; }
.tl-tick { position: absolute; top: -22px; transform: translateX(-50%); text-align: center; }
.tl-tick i { display: block; width: 1px; height: 100%; margin: 0 auto; background: rgba(255,255,255,0.16); }
.tl-tick b { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.4); white-space: nowrap; }

.tl-row { display: flex; align-items: center; gap: 10px; height: 22px; }
.tl-row + .tl-row { margin-top: 4px; }
.tl-row-label {
	flex: 0 0 86px; display: flex; align-items: center; gap: 6px;
	font-size: 11.5px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden;
}
.tl-row-label i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.tl-lane {
	position: relative; flex: 1 1 auto; height: 100%; border-radius: 5px;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 10%);
}
.tl-bar {
	position: absolute; top: 3px; bottom: 3px; min-width: 3px; border-radius: 4px;
	background: var(--tl-c); opacity: 0.85;
}
.tl-bar.is-slot {
	/* An editable slot reads as an outline — the hole you fill, not a fixed part. */
	background: color-mix(in srgb, var(--tl-c) 26%, transparent);
	border: 1.5px dashed var(--tl-c); opacity: 1;
}
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.tl-bar.is-slot { background: transparent; }
}

.tl-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.tl-stack li {
	display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 11px;
	background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
	border-left: 3px solid var(--tl-c);
}
.tl-stack-rank {
	flex: 0 0 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
	font-size: 11.5px; font-weight: 650; color: #0a0a0f; background: var(--tl-c);
}
.tl-stack-type { font-size: 14.5px; font-weight: 600; color: #fff; }
.tl-stack-meta { font-size: 13px; color: rgba(255,255,255,0.55); }
.tl-stack-depth { margin-left: auto; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
@media (max-width: 560px) { .tl-stack-meta { display: none; } }

.tl-table-wrap { margin-top: 30px; padding: 14px 17px; border-radius: 13px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.tl-table-wrap summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 15px; }
.tl-table-wrap .tl-sub { margin-top: 10px; }
.tl-table-scroll { overflow-x: auto; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.tl-caption { text-align: left; font-size: 12px; color: rgba(255,255,255,0.4); padding-bottom: 8px; }
.tl-table th, .tl-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.tl-table thead th { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255,255,255,0.42); font-weight: 500; }
.tl-table tbody th { font-weight: 550; color: #fff; }
.tl-table tbody td { color: rgba(255,255,255,0.66); }
.tl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }

/* --------------------------------------------------------------- CTA/foot */
.cta { max-width: 1180px; margin: 56px auto 0; padding: 52px 28px; text-align: center; border-top: 1px solid rgba(255,255,255,0.07); }
.cta h2 { font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; margin: 0 0 12px; }
.cta p { color: rgba(255,255,255,0.6); margin: 0 0 26px; }
.btn {
	display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px;
	font-weight: 500; font-size: 15px; text-decoration: none; color: #0a0a0f; background: white;
	transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 32px rgba(255,255,255,0.16);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255,255,255,0.22); }
.btn.ghost { background: rgba(255,255,255,0.06); color: white; border: 1px solid rgba(255,255,255,0.15); box-shadow: none; margin-left: 10px; }
.btn.accent { background: linear-gradient(135deg, #7c6bff, #a855f7); color: #fff; box-shadow: 0 10px 32px rgba(124,107,255,0.32); }
@media (max-width: 560px) { .btn.ghost { margin-left: 0; } }

footer.f { max-width: 1180px; margin: 0 auto; padding: 32px 28px 60px; color: rgba(255,255,255,0.4); font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer.f a { color: rgba(255,255,255,0.6); text-decoration: none; margin-left: 16px; }
footer.f a:hover { color: white; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.rt-card, .btn { transition: none; }
}