/* GridTube main stylesheet — dark, mobile-first video tube UI. */

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--gridtube-bg: #101214;
	--gridtube-surface: #1c1e21;
	--gridtube-surface-2: #272c30;
	--gridtube-border: #2e3032;
	--gridtube-text: #f5f6f8;
	/* Secondary text. Kept at ≥4.5:1 against both --gridtube-bg and
	 * --gridtube-surface (WCAG 2.1 AA for normal text); the previous #6d7076
	 * measured 3.4:1 on card surfaces. */
	--gridtube-muted: #8b8e94;
	--gridtube-accent: #ff3344;
	--gridtube-accent-hover: #e6192e;
	--gridtube-on-accent: #ffffff;
	--gridtube-radius: 8px;
	--gridtube-header-h: 64px;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--gridtube-bg);
	color: var(--gridtube-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--gridtube-text);
	text-decoration: none;
}

a:hover {
	color: var(--gridtube-accent);
}

h1,
h2,
h3,
h4 {
	line-height: 1.25;
}

input,
select,
textarea {
	font: inherit;
}

::selection {
	background: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--gridtube-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	background: var(--gridtube-surface-2);
	color: var(--gridtube-text);
	display: block;
	font-size: 0.875rem;
	height: auto;
	left: 8px;
	padding: 12px 16px;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: 6px;
}

[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(50, 50, 55, 0.4);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--gridtube-border);
	transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* Logged-in: keep the sticky header below WP's fixed admin bar. */
.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
	min-height: var(--gridtube-header-h);
}

.site-branding {
	flex: 0 0 auto;
}

.site-title {
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gridtube-accent);
}

.custom-logo {
	max-height: 44px;
	width: auto;
}

.main-navigation {
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.main-navigation::-webkit-scrollbar {
	display: none;
}

.main-navigation .menu {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-navigation a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 0.9rem;
	color: var(--gridtube-muted);
	white-space: nowrap;
}

.main-navigation a:hover {
	color: var(--gridtube-text);
	background: var(--gridtube-surface-2);
}

/* -------------------------------------------------------------------------
 * Category links slider (front page / grid pages)
 *
 * The category links sit inside the grid toolbar on the same line as the
 * filter bar. When there are more categories than fit, arrow buttons let the
 * visitor scroll the hidden ones into view without wrapping to a new row.
 * ---------------------------------------------------------------------- */

.category-links {
	display: flex;
	min-width: 0;
	margin-bottom: 16px;
}

.category-links__list {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.category-links__item {
	flex: 0 0 auto;
}

.category-links__item a {
	display: inline-block;
	padding: 3px 12px;
	border: 1px solid var(--gridtube-border);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--gridtube-muted);
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.category-links__item a:hover {
	color: var(--gridtube-accent);
	border-color: var(--gridtube-accent);
}

/* Scroll arrows for the category slider. Only visible when the list is wider
 * than its container (overflowing). Hidden by default; shown by JS when the
 * slide is overflowing and the slider is enabled.
 *
 * Layout: the whole slider (track + arrows) is a flex row so it stays on the
 * same line as the filter bar in the toolbar.
 */
.category-slider {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

/* Arrows only earn their space when the track actually overflows. `visibility`
 * (not `display`) keeps the slider width stable so the overflow measurement
 * can't flip-flop between runs. */
.category-slider:not(.has-overflow) .category-slider__arrow {
	visibility: hidden;
}

/* The track is the scrolling viewport. `min-width: 0` is what lets it shrink
 * below its content width inside the flex row — without it the browser sizes
 * the track to the full list and the whole toolbar runs off the page instead
 * of scrolling behind the arrows. */
.category-slider__track {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0;
	/* Smooth scroll for the arrow buttons. */
	scroll-behavior: smooth;
}

.category-slider__track::-webkit-scrollbar {
	display: none;
}

.category-slider__arrow {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 1px solid var(--gridtube-border);
	border-radius: 6px;
	background: var(--gridtube-surface-2);
	color: var(--gridtube-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	line-height: 1;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-slider__arrow:hover {
	background: var(--gridtube-surface);
	color: var(--gridtube-accent);
	border-color: var(--gridtube-accent);
}

.category-slider__arrow:focus-visible {
	outline: 2px solid var(--gridtube-accent);
	outline-offset: 2px;
}

/* An arrow with nothing left to scroll to is disabled (JS-managed) rather
 * than hidden, so the slider width never jumps as the visitor moves through
 * the list. */
.category-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* The chevrons are pure-CSS so no icon asset is needed. A zero-size box with
 * coloured side borders and transparent top/bottom borders forms the triangle.
 * `--prev` points left, `--next` points right. */
.category-slider__arrow::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.category-slider__arrow--prev::before {
	border-right: 5px solid currentColor;
	margin-left: -2px;
}

.category-slider__arrow--next::before {
	border-left: 5px solid currentColor;
	margin-right: -2px;
}

@media (max-width: 600px) {
	.category-slider__track {
		gap: 6px;
	}

	.category-links__item a {
		padding: 2px 10px;
		font-size: 0.8rem;
	}

	.category-slider__arrow {
		width: 26px;
		height: 26px;
	}
}

/* Grid toolbar: category slider on the left, filter bar right-aligned beside it.
 * Both stay on the same line until the viewport wraps in the responsive stylesheet.
 */
.grid-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-bottom: 16px;
}

.grid-toolbar .category-links {
	margin-bottom: 0;
	/* Zero flex-basis is what keeps the slider on the *same line* as the filter
	 * bar: a content-sized basis would exceed the toolbar width, and with
	 * flex-wrap on the dropdown would be pushed onto its own line instead of
	 * letting the track scroll behind its arrows. Growing from 0 means the
	 * slider takes whatever room is left once the dropdown has its space. */
	flex: 1 1 0;
	min-width: 0;
}

.grid-toolbar .filter-bar {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	/* Never let the dropdowns compress: the category slider is the part that
	 * gives up space and scrolls behind its arrows. */
	flex: 0 0 auto;
}


.site-header__search {
	flex: 0 0 auto;
	min-width: 220px;
}

/* -------------------------------------------------------------------------
 * Search form & buttons
 * ---------------------------------------------------------------------- */

.search-form {
	display: flex;
	gap: 8px;
}

.search-field {
	flex: 1;
	min-width: 0;
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	color: var(--gridtube-text);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.9rem;
}

.search-field:focus {
	outline: 2px solid var(--gridtube-accent);
	outline-offset: 1px;
	border-color: transparent;
}

.button {
	display: inline-block;
	background: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
	border: none;
	border-radius: 6px;
	padding: 9px 16px;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
}

.button:hover {
	background: var(--gridtube-accent-hover);
	color: var(--gridtube-on-accent, #fff);
}

/* -------------------------------------------------------------------------
 * Main layout
 * ---------------------------------------------------------------------- */

/* Sticky footer: keep the colophon at the bottom of the viewport on short
 * pages (404, empty search, age gate) instead of floating it up the screen. */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 1 auto;
}

.site-main {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 20px 64px;
}

.site-main--full {
	max-width: none;
}

.site-main--narrow {
	max-width: 860px;
}

.page-title,
.section-title {
	font-size: 1.4rem;
	margin: 0 0 16px;
}

.archive-description {
	color: var(--gridtube-muted);
	margin: -8px 0 16px;
}

.page-header {
	margin-bottom: 20px;
}

.page-header .search-form {
	max-width: 480px;
}

/* Actor (performer) archives get a tinted header so they read differently
 * from category / tag / quality archives. */
.page-header--actor {
	padding: 18px 20px;
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-left: 3px solid var(--gridtube-accent);
	border-radius: var(--gridtube-radius);
}

.page-header--actor .page-title {
	margin-bottom: 0;
}

.page-header--actor .archive-description {
	margin: 6px 0 0;
}

.author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.author-box__avatar img {
	border-radius: 50%;
	display: block;
}

.author-box .page-title {
	margin-bottom: 8px;
}

.author-box__info .archive-description {
	margin: 0 0 8px;
}

.author-box__count {
	color: var(--gridtube-muted);
	font-size: 0.85rem;
	margin: 0;
}

@media (max-width: 600px) {
	.author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* -------------------------------------------------------------------------
 * Filter bar (sort + optional quality dropdown)
 * ---------------------------------------------------------------------- */

.filter-bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 20px;
}

.filter-sort,
.filter-quality {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.sort-select,
.quality-select {
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	color: var(--gridtube-text);
	border-radius: 6px;
	padding: 7px 12px;
	font-size: 0.85rem;
	cursor: pointer;
}

.quality-select {
	flex: 0 1 auto;
	min-width: 160px;
}

/* -------------------------------------------------------------------------
 * Video grid & cards
 * ---------------------------------------------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}

.card {
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.card__link {
	display: block;
	color: inherit;
}

.card__link:hover {
	color: inherit;
}

.card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Play button overlay — shown on hover / keyboard focus. */
.card__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	background: rgba(0, 0, 0, 0.25);
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.card__play::before {
	content: "";
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--gridtube-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M8 4v16l12-8z'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 52%;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease;
}

.card:hover .card__play,
.card:focus-within .card__play {
	opacity: 1;
}

.card:hover .card__play::before,
.card:focus-within .card__play::before {
	transform: scale(1.08);
}

/* Hover preview video (preview_url) — created on first hover, muted+loop. */
.card__thumb-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.card__thumb.is-playing .card__thumb-preview {
	opacity: 1;
}

/* Gallery slideshow (thumbs): stacked images, active one visible. */
.card__thumb-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
}

.card__thumb-slide.is-active {
	opacity: 1;
}

/* Cursor-position scrub bar for the thumbs slideshow. */
.card__thumb-scrub {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	gap: 3px;
	padding: 0 6px 6px;
	z-index: 2;
	pointer-events: none;
}

.card__thumb.has-thumbs:hover .card__thumb-scrub,
.card__thumb.has-thumbs:focus-within .card__thumb-scrub {
	display: flex;
}

.card__thumb-scrub i {
	flex: 1 1 0;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
}

.card__thumb-scrub i.is-active {
	background: #fff;
}

/* Touch / reduced-motion: never autoplay hover video. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.card__thumb-preview {
		display: none;
	}
}

.card__thumb-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--gridtube-muted);
	background: var(--gridtube-surface-2);
}

.card__duration {
	position: absolute;
	right: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	padding: 2px 7px;
	border-radius: 4px;
}

.card__title {
	margin: 10px 12px 4px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 6px;
	row-gap: 2px;
	padding: 0 12px 12px;
	font-size: 0.78rem;
	color: var(--gridtube-muted);
}

/* Wrap whole items onto the next line rather than breaking a label in half
 * on narrow cards ("12.4K / views"). */
.card__meta > * {
	white-space: nowrap;
}

/* Dot separators so author · views · date don't read as one blob of text. */
.card__meta > :not(:first-child)::before {
	content: '·';
	margin-right: 5px;
	color: var(--gridtube-muted);
	opacity: 0.55;
}

.card__author {
	color: var(--gridtube-muted);
}

.card__author:hover {
	color: var(--gridtube-accent);
}

/* -------------------------------------------------------------------------
 * Single video
 * ---------------------------------------------------------------------- */

.single-video .entry-header {
	margin-bottom: 18px;
}

.single-video .entry-header--under-video {
	margin-top: 16px;
	margin-bottom: 0;
}

.entry-title {
	font-size: 1.6rem;
	margin: 0 0 6px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: var(--gridtube-muted);
	font-size: 0.85rem;
}

.entry-meta a {
	color: var(--gridtube-muted);
}

.entry-meta a:hover {
	color: var(--gridtube-accent);
}

/* Separator between meta items (author · date · views). */
.entry-meta__sep {
	color: var(--gridtube-muted);
	opacity: 0.55;
}

.video-frame {
	background: #000;
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	overflow: hidden;
}

.video-frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* WPS Player (HTML5 player) output inside the frame. */
.video-frame video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	background: #000;
}

/* Player controls sit on the same line as the source buttons, on the right
 * end of the underbar. Theater mode lifts the frame over the whole viewport,
 * which would bury this row — float the pill above the frame so the only way
 * out stays reachable instead of forcing the visitor to discover Escape. */
body.gridtube-theater .video-action--theater {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 10000;
}

/* The underbar: everything about this video on one band — title, meta and
 * taxonomy on the left, the source buttons plus the theater toggle on the
 * right. */
.video-underbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-top: 16px;
}

.video-underbar .entry-header--under-video {
	margin-top: 0;
	margin-bottom: 0;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

/* The buttons and the theater toggle share one trailing row, level with the
 * title. Wrapping keeps a long button set tidy instead of colliding with the
 * title. */
.video-source {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin-top: 0;
	text-align: right;
	flex-shrink: 0;
}

/* The theater toggle is a player control, so it reads as a ghost button like
 * the "Watch on source site" link rather than as another engagement pill. */
.video-action--theater {
	padding: 8px 16px;
	background: transparent;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 700;
}

@media (max-width: 640px) {
	.video-underbar {
		flex-direction: column;
	}

	.video-source {
		text-align: left;
	}
}

.single-video .entry-header--under-video .entry-tax {
	margin-top: 12px;
	margin-bottom: 0;
}

.entry-content--description {
	margin-top: 16px;
}

/* -------------------------------------------------------------------------
 * Single video: breadcrumbs, badges, details, actions, actor rail, uploader
 * ---------------------------------------------------------------------- */

.breadcrumbs {
	margin-bottom: 12px;
	font-size: 0.8rem;
}

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
	color: var(--gridtube-muted);
}

/* Separator between crumbs, drawn between items rather than after the last. */
.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	margin-right: 6px;
	color: var(--gridtube-muted);
	opacity: 0.5;
}

.breadcrumbs__item a {
	color: var(--gridtube-muted);
}

.breadcrumbs__item a:hover {
	color: var(--gridtube-accent);
}

/* Quality badges: HD / 4K / VR chips. */
.quality-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

.quality-badge {
	display: inline-block;
	padding: 1px 7px;
	border: 1px solid var(--gridtube-accent);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--gridtube-accent);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.7;
}

/* 4K reads as the premium tier, so it takes the accent fill. */
.quality-badge--4k {
	background: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
}

.entry-badges {
	margin-top: 10px;
}

/* Card badges sit top-left, opposite the duration chip. Cards are not
 * positioned containers by default, so the overlay is anchored here. */
.card__badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
}

/* Previous / next within the category. */
.post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 48%;
	padding: 10px 14px;
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	font-size: 0.85rem;
}

.post-nav__link--next {
	margin-left: auto;
	text-align: right;
}

.post-nav__link:hover {
	border-color: var(--gridtube-accent);
}

.post-nav__label {
	color: var(--gridtube-muted);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.post-nav__title {
	font-weight: 600;
	line-height: 1.35;
}

/* Actions row: rating, save, share. The report link lives inside the share
 * menu; theater lives with the source buttons in the underbar. */
.video-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
}

.video-action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	border-radius: 999px;
	color: var(--gridtube-text);
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.video-action:hover {
	border-color: var(--gridtube-accent);
	color: var(--gridtube-accent);
}

.video-action.is-active {
	border-color: var(--gridtube-accent);
	color: var(--gridtube-accent);
}

.video-action__count {
	color: var(--gridtube-muted);
	font-variant-numeric: tabular-nums;
}

/* Thumb-up glyph, drawn with CSS so no icon asset is needed. */
.video-action--like .video-action__icon,
.video-action--favorite .video-action__icon {
	width: 14px;
	height: 14px;
	background: currentColor;
	/* Rounded mask so the square reads as a symbol rather than a block. */
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.video-action--like .video-action__icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L14.2 1 7.6 7.6c-.37.36-.6.86-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M2 21h4V9H2v12zM23 10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L14.2 1 7.6 7.6c-.37.36-.6.86-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1z'/></svg>");
}

.video-action--favorite .video-action__icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z'/></svg>");
}

/* Theater control icon: a widening rectangle. */
.video-action--theater .video-action__icon {
	width: 14px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 2px;
}

/* Star rating. */
.video-action--stars {
	cursor: default;
}

.video-action__stars {
	display: inline-flex;
	gap: 2px;
}

.star-rating__star {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: var(--gridtube-muted);
	cursor: pointer;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 17.3l6.2 3.7-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.4 4.8-1.6 7z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 17.3l6.2 3.7-1.6-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2l5.4 4.8-1.6 7z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background 0.15s ease;
}

.star-rating__star.is-filled {
	background: var(--gridtube-accent);
}

/* Share: the trigger is an ordinary action pill, the destinations live in a
 * panel below it. The panel is an absolutely positioned child so the action
 * bar stays a single tidy row however many networks are configured. */
.video-share {
	position: relative;
}

/* Chevron marking the button as a disclosure rather than a plain action. */
.video-action__caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.7;
}

/* Share glyph: three nodes joined by lines, drawn as a mask like the others. */
.video-action--share .video-action__icon {
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M18 16.1c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z'/></svg>");
}

.video-share__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 300;
	min-width: 190px;
	padding: 6px;
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.video-share__menu[hidden] {
	display: none;
}

.video-share__item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: none;
	border: 0;
	border-radius: calc(var(--gridtube-radius) - 2px);
	color: var(--gridtube-text);
	font: inherit;
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.video-share__item:hover,
.video-share__item:focus-visible {
	background: var(--gridtube-surface-2);
	color: var(--gridtube-accent);
}

/* Near the right edge the panel would overflow, so hang it off the trailing
 * side of the pill instead. */
@media (max-width: 480px) {
	.video-share__menu {
		left: auto;
		right: 0;
	}
}

/* Actor rail. */
.actor-rail {
	margin-top: 28px;
}

.actor-rail__title {
	font-size: 1.05rem;
	margin: 0 0 12px;
}

.actor-rail__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.actor-rail__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 84px;
	text-align: center;
}

.actor-rail__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	border-radius: 50%;
}

.actor-rail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.actor-rail__fallback {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--gridtube-muted);
}

.actor-rail__name {
	font-size: 0.78rem;
	color: var(--gridtube-muted);
	line-height: 1.3;
}

.actor-rail__link:hover .actor-rail__name {
	color: var(--gridtube-accent);
}

.actor-rail__link:hover .actor-rail__thumb {
	border-color: var(--gridtube-accent);
}

/* Uploader box. */
.uploader-box {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
	padding: 16px;
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
}

.uploader-box__avatar img {
	display: block;
	border-radius: 50%;
}

.uploader-box__name {
	display: block;
	font-weight: 700;
}

.uploader-box__count {
	margin: 2px 0 0;
	color: var(--gridtube-muted);
	font-size: 0.82rem;
}

/* -------------------------------------------------------------------------
 * Single video: player modes (theater, sticky, up next, locked)
 * ---------------------------------------------------------------------- */

/* Theater mode widens the player to the viewport and dims the rest of the
 * page behind it, without leaving the document. */
body.gridtube-theater {
	overflow: hidden;
}

body.gridtube-theater .video-frame {
	position: fixed;
	inset: 0;
	z-index: 9999;
	max-width: none;
	margin: 0;
	border-radius: 0;
	background: #000;
}

body.gridtube-theater .video-frame iframe,
body.gridtube-theater .video-frame video {
	height: 100%;
	aspect-ratio: auto;
}

/* Sticky mini player. The slot holds the original space so the page does not
 * jump when the frame is lifted out of the flow. */
.video-frame-slot {
	display: none;
}

.video-frame-slot.is-active {
	display: block;
	aspect-ratio: 16 / 9;
}

.video-frame.is-mini {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	width: 320px;
	max-width: 40vw;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Keep the colophon reachable while the mini player is up. */
body.has-mini-player .site-footer {
	padding-bottom: 200px;
}

@media (max-width: 640px) {
	/* On phones the mini player would cover most of the screen. */
	.video-frame.is-mini {
		display: none;
	}
}

/* "Up next" overlay, shown when a native player ends. */
.video-up-next {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: rgba(0, 0, 0, 0.82);
}

.video-frame {
	position: relative;
}

.video-up-next__heading {
	margin: 0;
	color: var(--gridtube-muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.video-up-next__link {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--gridtube-text);
}

.video-up-next__link:hover {
	color: var(--gridtube-accent);
}

/* Locked (premium) teaser. */
.video-frame--locked {
	background-color: #000;
	background-size: cover;
	background-position: center;
}

.video-locked {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	aspect-ratio: 16 / 9;
	padding: 24px;
	text-align: center;
	background: rgba(0, 0, 0, 0.72);
}

/* Padlock drawn with CSS so no icon asset is needed. */
.video-locked__badge {
	width: 34px;
	height: 26px;
	border: 3px solid var(--gridtube-accent);
	border-radius: 4px;
	position: relative;
}

.video-locked__badge::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -14px;
	transform: translateX(-50%);
	width: 18px;
	height: 14px;
	border: 3px solid var(--gridtube-accent);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
}

.video-locked__heading {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

/* New ad zones share the existing zone treatment; only the spacing differs. */
.ad-zone--single-below-title {
	margin-top: 20px;
}

.ad-zone--single-related {
	margin-top: 24px;
}

/* -------------------------------------------------------------------------
 * Prose (post, page & block content)
 *
 * Editors write arbitrary markup into .entry-content. Without these rules
 * body-copy links inherit the global `a { text-decoration: none }` and read
 * as plain text, and lists / quotes / tables fall back to browser defaults
 * that clash with the dark palette — the same content then looks different on
 * a page, a video description and a full-width template.
 * ---------------------------------------------------------------------- */

.entry-content {
	font-size: 1rem;
	overflow-wrap: break-word;
}

/* Contain floated images (classic editor alignment). */
.entry-content::after {
	content: "";
	display: table;
	clear: both;
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content p {
	margin: 0 0 1em;
}

.entry-content a {
	color: var(--gridtube-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--gridtube-accent-hover);
}

/* Buttons and block buttons are links too — never underline them. */
.entry-content a.button,
.entry-content a.wp-block-button__link {
	text-decoration: none;
}

.entry-content strong,
.entry-content b {
	color: #fff;
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin: 1.6em 0 0.6em;
	font-weight: 700;
}

.entry-content h2 {
	font-size: 1.35rem;
}

.entry-content h3 {
	font-size: 1.15rem;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-size: 1rem;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.entry-content li + li {
	margin-top: 0.35em;
}

.entry-content ul ul,
.entry-content ul ol,
.entry-content ol ul,
.entry-content ol ol {
	margin-bottom: 0;
}

.entry-content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--gridtube-accent);
	color: var(--gridtube-muted);
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.entry-content cite {
	color: var(--gridtube-muted);
	font-size: 0.9em;
}

.entry-content code,
.entry-content kbd,
.entry-content samp {
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	border-radius: 4px;
	padding: 1px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
}

.entry-content pre {
	margin: 1.4em 0;
	padding: 14px 16px;
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.5;
}

.entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
}

.entry-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--gridtube-border);
}

.entry-content table {
	width: 100%;
	margin: 0 0 1.4em;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.entry-content caption {
	caption-side: bottom;
	padding-top: 8px;
	color: var(--gridtube-muted);
	font-size: 0.85rem;
	text-align: left;
}

.entry-content th,
.entry-content td {
	padding: 9px 12px;
	border: 1px solid var(--gridtube-border);
	text-align: left;
}

.entry-content th {
	background: var(--gridtube-surface-2);
	font-weight: 700;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
	margin-top: 8px;
	color: var(--gridtube-muted);
	font-size: 0.85rem;
	text-align: center;
}

.entry-content .wp-caption {
	max-width: 100%;
	margin-bottom: 1.4em;
}

.entry-content .wp-caption img {
	margin: 0 auto;
}

.entry-content iframe {
	max-width: 100%;
}

.entry-content img {
	border-radius: 6px;
}

/* Classic-editor image alignment (`wp-block-styles` only covers blocks). */
.entry-content .alignleft {
	float: left;
	margin: 4px 20px 12px 0;
}

.entry-content .alignright {
	float: right;
	margin: 4px 0 12px 20px;
}

.entry-content .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entry-content .alignwide,
.entry-content .alignfull {
	max-width: none;
}

.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img {
	border-radius: 6px;
}

/* Paged posts: <div class="page-links">Pages: 1 2 3</div>. */
.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
	color: var(--gridtube-muted);
	font-size: 0.9rem;
}

.page-links a,
.page-links > span {
	display: inline-block;
	min-width: 32px;
	padding: 4px 10px;
	border: 1px solid var(--gridtube-border);
	border-radius: 999px;
	color: var(--gridtube-muted);
	text-align: center;
}

.page-links a:hover {
	border-color: var(--gridtube-accent);
	color: var(--gridtube-accent);
}

.page-links > span {
	background: var(--gridtube-accent);
	border-color: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
	font-weight: 700;
}

.entry-footer {
	margin-top: 24px;
}

.entry-tax {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.entry-tax a {
	font-size: 0.8rem;
	color: var(--gridtube-muted);
	border: 1px solid var(--gridtube-border);
	border-radius: 999px;
	padding: 3px 10px;
}

.entry-tax__label {
	font-size: 0.8rem;
	color: var(--gridtube-muted);
	margin-right: 2px;
}

.entry-tax a:hover {
	color: var(--gridtube-accent);
	border-color: var(--gridtube-accent);
}

.related-videos {
	margin-top: 40px;
}

/* -------------------------------------------------------------------------
 * Advertising (widget zones)
 * ---------------------------------------------------------------------- */

.ad-zone {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 16px;
}

.ad-zone .widget {
	margin: 0;
	max-width: 100%;
}

/* Base slot wrapper: a widget dropped into any zone (header, footer, below
 * player, sidebar) is centred and never overflows the viewport. */
.ad-slot {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

.ad-zone iframe,
.ad-zone img,
.ad-zone ins {
	max-width: 100%;
	height: auto;
}

.ad-zone--header,
.ad-zone--footer {
	max-width: 1440px;
	margin: 0 auto;
	padding: 16px 20px 0;
}

.ad-zone--footer {
	padding-bottom: 24px;
}

/* AdSense-style <ins> placeholders are inline by default — an unfilled slot
 * would still occupy line height. Force them to collapse when empty. */
.ad-zone ins:empty,
.single-sidebar__slot ins:empty,
.ad-slot:empty {
	display: none;
}

.ad-zone--single-middle {
	justify-content: center;
	margin-top: 24px;
}

/* Single video two-column layout (content + optional 300x250 sidebar). */
.site-main--single.site-main--with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}

.single-column {
	min-width: 0;
}

.single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: calc(var(--gridtube-header-h) + 16px);
}

/* Offset sticky sidebar below the WP admin bar when logged in. */
.admin-bar .single-sidebar {
	top: calc(var(--gridtube-header-h) + 48px);
}

@media screen and (max-width: 782px) {
	.admin-bar .single-sidebar {
		top: calc(var(--gridtube-header-h) + 62px);
	}
}

/* Zone modifiers are presentational hooks. All four zones centre their widget
 * identically, so they share one rule instead of drifting apart. */
.ad-slot--header,
.ad-slot--footer,
.ad-slot--single-middle,
.ad-slot--sidebar {
	width: 100%;
}

.single-sidebar__slot iframe,
.single-sidebar__slot img,
.single-sidebar__slot ins {
	max-width: 300px;
	width: 100%;
	height: auto;
}

@media (max-width: 1024px) {
	.site-main--single.site-main--with-sidebar {
		grid-template-columns: 1fr;
	}

	.single-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 8px;
	}
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.pagination .nav-links,
.comments-pagination .nav-links {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 32px 0 0;
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 14px;
	text-align: center;
	border: 1px solid var(--gridtube-border);
	border-radius: 999px;
	color: var(--gridtube-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
	background: var(--gridtube-accent);
	border-color: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
	font-weight: 700;
}

.pagination .page-numbers:hover,
.comments-pagination .page-numbers:hover {
	color: var(--gridtube-text);
	border-color: var(--gridtube-accent);
}

.pagination .page-numbers.dots,
.comments-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
	padding: 8px 6px;
}

/* WordPress renders comment pagination as nav.comments-pagination, not
 * nav.pagination — the selectors above cover both. */

/* -------------------------------------------------------------------------
 * Pricing
 * ---------------------------------------------------------------------- */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-top: 28px;
}

.pricing-card {
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pricing-card.is-featured {
	border-color: var(--gridtube-accent);
	box-shadow: 0 0 0 1px var(--gridtube-accent) inset;
}

.pricing-card__name {
	margin: 0;
	font-size: 1.05rem;
}

.pricing-card__price {
	font-size: 2rem;
	font-weight: 800;
	margin: 4px 0 0;
}

.pricing-card__period {
	font-size: 0.85rem;
	color: var(--gridtube-muted);
	font-weight: 400;
}

.pricing-card__features {
	margin: 8px 0 16px;
	padding: 0;
	list-style: none;
	color: var(--gridtube-muted);
	font-size: 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pricing-card__features li::before {
	content: "✓ ";
	color: var(--gridtube-accent);
}

.pricing-card__cta {
	margin-top: auto;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--gridtube-border);
	background: var(--gridtube-surface);
}

.site-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.footer-navigation .menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.footer-navigation a {
	color: var(--gridtube-muted);
	font-size: 0.85rem;
	padding: 4px 10px;
}

.footer-navigation a:hover {
	color: var(--gridtube-accent);
}

.site-info {
	color: var(--gridtube-muted);
	font-size: 0.8rem;
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */

.comments-area {
	margin-top: 48px;
	border-top: 1px solid var(--gridtube-border);
	padding-top: 24px;
}

.comments-title {
	font-size: 1.1rem;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
}

.comment-list .children {
	list-style: none;
	padding-left: 24px;
}

.comment-body {
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: var(--gridtube-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
}

.comment-meta {
	font-size: 0.8rem;
	color: var(--gridtube-muted);
	margin-bottom: 6px;
}

.comment-form label {
	display: block;
	font-size: 0.85rem;
	color: var(--gridtube-muted);
	margin: 12px 0 4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	background: var(--gridtube-surface-2);
	border: 1px solid var(--gridtube-border);
	color: var(--gridtube-text);
	border-radius: 6px;
	padding: 8px 12px;
}

.comment-form .submit {
	background: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
	border: none;
	border-radius: 6px;
	padding: 9px 18px;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: var(--gridtube-accent-hover);
	color: var(--gridtube-on-accent, #fff);
}

.form-submit {
	margin-top: 12px;
}

/* Comment list items (wp_list_comments default markup). */
.comment-author {
	font-weight: 700;
}

.comment-author a,
.comment-metadata a {
	color: var(--gridtube-muted);
}

.comment-author a:hover,
.comment-metadata a:hover {
	color: var(--gridtube-accent);
}

.comment-metadata {
	font-size: 0.8rem;
}

.comment-content {
	margin-top: 8px;
}

.comment-content p:last-child {
	margin-bottom: 0;
}

.comment-body .reply {
	margin-top: 10px;
	font-size: 0.85rem;
}

.comment-body .reply a {
	color: var(--gridtube-accent);
}

/* Nested replies read as a lighter card so the thread depth is obvious. */
.comment-list .children .comment-body {
	background: var(--gridtube-surface-2);
}

.comment-list .bypostauthor > .comment-body {
	border-color: var(--gridtube-accent);
}

@media (max-width: 600px) {
	.comment-list .children {
		padding-left: 12px;
	}
}

/* "Leave a reply" form. */
.comment-respond {
	margin-top: 32px;
}

.comment-reply-title {
	font-size: 1.1rem;
	margin: 0 0 4px;
}

.comment-reply-title small {
	font-size: 0.85rem;
	font-weight: 400;
}

.comment-reply-title small a {
	color: var(--gridtube-muted);
	text-decoration: underline;
}

.comment-notes,
.logged-in-as {
	color: var(--gridtube-muted);
	font-size: 0.85rem;
}

.comment-form .comment-notes {
	margin-top: 0;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.85rem;
}

.comment-form .required {
	color: var(--gridtube-accent);
}

/* Author / email / website side by side once there is room for them.
 *
 * Laid out with flex rather than inline-block: the fields are separate <p>
 * elements in comment_form()'s markup, and the whitespace text nodes between
 * inline-blocks push the third field onto its own line. */
@media (min-width: 601px) {
	.comment-form {
		display: flex;
		flex-wrap: wrap;
		column-gap: 10px;
	}

	.comment-form > p {
		flex: 1 1 100%;
		margin: 0;
	}

	/* Must out-specify `.comment-form > p` above (class + element). */
	.comment-form > .comment-form-author,
	.comment-form > .comment-form-email,
	.comment-form > .comment-form-url {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * Lightbox
 * ---------------------------------------------------------------------- */

.gridtube-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	cursor: zoom-out;
}

.gridtube-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.gridtube-lightbox__close {
	position: absolute;
	top: 16px;
	right: 20px;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * Age gate
 * ---------------------------------------------------------------------- */

.age-gate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: radial-gradient(circle at 50% 30%, #24272c 0%, #101214 70%);
}

.age-gate.is-hidden {
	display: none;
}

/* Lock the page behind the gate while the overlay is showing. */
body.age-gate-open {
	overflow: hidden;
}

.age-gate__card {
	max-width: 560px;
	width: 100%;
	background: var(--gridtube-surface);
	border: 1px solid var(--gridtube-border);
	border-radius: 12px;
	padding: 40px 36px;
	text-align: center;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.age-gate__badge {
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--gridtube-accent);
	color: var(--gridtube-on-accent, #fff);
	font-size: 1.9rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.age-gate__title {
	margin: 0 0 10px;
	font-size: 1.6rem;
}

.age-gate__text {
	color: var(--gridtube-muted);
	margin: 0 0 10px;
}

.age-gate__text--small {
	font-size: 0.85rem;
}

.age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 22px 0 14px;
}

.button--ghost {
	background: transparent;
	border: 1px solid var(--gridtube-border);
	color: var(--gridtube-muted);
}

.button--ghost:hover {
	background: var(--gridtube-surface-2);
	color: var(--gridtube-text);
}

.age-gate__legal {
	font-size: 0.8rem;
	color: var(--gridtube-muted);
	margin: 0;
}

.age-gate__legal a {
	color: var(--gridtube-muted);
	text-decoration: underline;
}

.age-gate__legal a:hover {
	color: var(--gridtube-accent);
}

.site-main--gate {
	max-width: none;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Attachment (photo) pages
 * ---------------------------------------------------------------------- */

.site-main--attachment {
	max-width: 960px;
	margin: 0 auto;
}

.attachment-single__figure {
	margin: 0 0 20px;
	text-align: center;
}

.attachment-single__image {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--gridtube-border);
	border-radius: 10px;
}

.attachment-single__caption {
	margin-top: 10px;
	color: var(--gridtube-muted);
	font-size: 0.9rem;
}

.attachment-single__meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--gridtube-border);
}

.attachment-single__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.attachment-single__label {
	margin-right: 6px;
	color: var(--gridtube-muted);
}

.attachment-single__full {
	margin: 16px 0 0;
}

.attachment-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}

.attachment-nav__prev,
.attachment-nav__next {
	min-width: 0;
}

.attachment-nav__next {
	margin-left: auto;
	text-align: right;
}

.attachment-nav img {
	border: 1px solid var(--gridtube-border);
	border-radius: 6px;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------
 * Empty states (404, no results)
 * ---------------------------------------------------------------------- */

.not-found {
	max-width: 620px;
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
}

.not-found .page-header {
	margin-bottom: 12px;
}

.not-found .page-title {
	margin-bottom: 0;
}

.not-found .page-content {
	color: var(--gridtube-muted);
}

.not-found .page-content p {
	margin: 0 0 1em;
}

.not-found .search-form {
	max-width: 420px;
	margin: 20px auto 0;
}

.site-main--narrow .not-found {
	padding: 56px 0;
}

/* -------------------------------------------------------------------------
 * Blocks
 * ---------------------------------------------------------------------- */

.wp-block-gallery,
.wp-block-image {
	margin-bottom: 1em;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	/* Two rows, not three: a three-row sticky header swallowed a third of a
	 * phone screen. Brand + search share the first row, nav sits below. */
	.site-header__inner {
		flex-wrap: wrap;
		padding-top: 8px;
		padding-bottom: 8px;
		gap: 8px 10px;
	}

	.site-header__search {
		order: 2;
		flex: 1 1 140px;
		min-width: 0;
	}

	.main-navigation {
		order: 3;
		flex-basis: 100%;
	}
}

@media (max-width: 640px) {
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.card__title {
		font-size: 0.85rem;
	}

	.site-main {
		padding: 20px 14px 48px;
	}

	.filter-bar {
		gap: 8px;
	}

	/* The toolbar wraps here, so let the filter bar take the row instead of
	 * shrinking to content and floating against the right edge. */
	.grid-toolbar .filter-bar {
		width: 100%;
		margin-left: 0;
	}

	.sort-select,
	.quality-select {
		width: 100%;
	}

	.filter-sort,
	.filter-quality {
		flex: 1 1 100%;
	}

	.entry-title {
		font-size: 1.25rem;
	}

	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* On narrow screens the toolbar wraps: the category slider keeps its own
	 * line above the filter bar, and its track still scrolls behind the arrows
	 * when there are more categories than fit. */
	.grid-toolbar .category-slider {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * High contrast
 * ---------------------------------------------------------------------- */

/* Windows High Contrast / forced-colours mode replaces every colour with a
 * system palette, so keep the focus ring on a system colour that stays visible. */
@media (forced-colors: active) {
	:focus-visible {
		outline: 2px solid Highlight;
	}

	.card__play::before {
		border-color: CanvasText;
	}

	.age-gate__card,
	.filter-bar,
	.pricing-card,
	.video-action,
	.video-share__menu,
	.video-share__item,
	.post-nav__link,
	.uploader-box,
	.actor-rail__thumb {
		border: 1px solid CanvasText;
	}

	/* Masked glyphs are drawn with the text colour, which forced colours
	 * rewrites — keep them opted out so the icons stay visible. */
	.video-action__icon,
	.star-rating__star,
	.quality-badge {
		forced-color-adjust: none;
	}
}

/* -------------------------------------------------------------------------
 * Print — a dark theme prints as a solid black page, so drop to ink-friendly
 * colours and remove the interactive chrome that means nothing on paper.
 * ---------------------------------------------------------------------- */

@media print {
	:root {
		--gridtube-bg: #fff;
		--gridtube-surface: #fff;
		--gridtube-surface-2: #f4f4f4;
		--gridtube-text: #111;
		--gridtube-muted: #444;
		--gridtube-border: #bbb;
		--gridtube-header-h: 0px;
	}

	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #111 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}

	/* Chrome that has no meaning on paper. */
	.site-header,
	.site-footer,
	.main-navigation,
	.site-header__search,
	.skip-link,
	.grid-toolbar,
	.filter-bar,
	.breadcrumbs,
	.navigation.pagination,
	.ad-zone,
	.ad-slot,
	.single-sidebar,
	.related-videos,
	.comment-respond,
	.age-gate,
	.card__play,
	.card__thumb-preview,
	.card__thumb-scrub,
	.video-frame,
	.video-actions,
	.video-share,
	.post-nav,
	.actor-rail,
	.uploader-box {
		display: none !important;
	}

	/* The sticky player and theater mode are screen-only conceits. */
	.video-frame.is-mini,
	.video-frame-slot {
		display: none !important;
	}

	body.has-mini-player .site-footer {
		padding-bottom: 0 !important;
	}

	.site-main,
	.single-column,
	.entry-content,
	.page-content,
	.container {
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.site-main--single.site-main--with-sidebar {
		display: block !important;
	}

	/* Print the destination of links the reader cannot click… */
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		font-weight: 400;
		word-break: break-all;
	}

	/* …but not the ones whose target is already obvious on paper. */
	.card__link::after,
	.button::after,
	.category-links__item a::after,
	.entry-tax a::after {
		content: "" !important;
	}

	.entry-title,
	.page-title {
		font-size: 16pt;
	}
}