/* ==========================================================================
   DGN UX layer: mobile / accessibility fixes shared by every brand.
   One copy for all sites (served as /scripts/dgn-ux/ through the shared-scripts
   rule in web.config); loaded after the brand theme (Base.css).
   Brand colours come from the site INI through the variables printed by
   includes/DGN_UX.cfm:
     --dgn-site      SiteColor
     --dgn-site-rgb  SiteColor as "r, g, b" (for glows)
     --dgn-site-ink  black or white, whichever reads on SiteColor
   ========================================================================== */

:root {
	--dgn-site: #cc0000;
	--dgn-site-rgb: 204, 0, 0;
	--dgn-site-ink: #ffffff;
	--dgn-site-ink-shadow: rgba(0, 0, 0, .55);
	/* reading font for paragraphs, forms, buttons and legal text; each brand keeps its own display font for logo, menu and headings */
	--dgn-font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--dgn-qrbar-h: 0px; /* height of the visible join bar, kept up to date by dgn-ux.js */
}

/* phones: nothing may widen the page sideways (e.g. the rotated PREVIEWS stamp on album covers); a wider page also pushes the
   right end of the fixed bars off screen. body uses "clip", which (unlike "hidden") does not turn it into a scroll box, so
   window scroll events keep working. */
@media (max-width: 767.98px) {
	html { overflow-x: hidden; }
	body { overflow-x: clip; }
}

/* ---------- 1. Floating join bar (includes/BannerTop.cfm) ---------- */
.dgn-qrbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background: var(--dgn-site);
	color: var(--dgn-site-ink);
	box-shadow: 0 3px 14px rgba(0, 0, 0, .45);
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY(-110%);
	visibility: hidden;
	transition: transform .3s ease, visibility 0s linear .3s;
}
.dgn-qrbar.is-shown {
	transform: none;
	visibility: visible;
	transition: transform .3s ease;
}
.dgn-qrbar__inner {
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 10px 64px 10px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.dgn-qrbar__copy { text-align: center; }
.dgn-qrbar a.dgn-qrbar__offer,
.dgn-qrbar a.dgn-qrbar__offer:hover,
.dgn-qrbar a.dgn-qrbar__more,
.dgn-qrbar a.dgn-qrbar__more:hover {
	color: var(--dgn-site-ink) !important;
	text-shadow: none !important;
	background: none !important;
}
.dgn-qrbar a.dgn-qrbar__offer {
	display: block;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	text-decoration: none !important;
}
.dgn-qrbar__offer strong {
	display: block;
	font-size: 1.15em;
	letter-spacing: .03em;
	text-decoration: underline;
	text-underline-offset: 4px;
}
.dgn-qrbar a.dgn-qrbar__more {
	display: inline-block;
	margin-top: 6px;
	padding: 4px 0;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline !important;
}
.dgn-qrbar a.dgn-qrbar__qrlink { display: block; flex: 0 0 auto; line-height: 0; background: none !important; }
/* the QR jpg has a 1px black frame baked into its edge: clip it so no dark line shows around the code */
.dgn-qrbar__qr {
	display: block;
	width: 118px;
	height: 118px;
	max-width: none;
	margin: 0;
	clip-path: inset(2%);
}
.dgn-qrbar .dgn-qrbar__close,
.dgn-qrbar .dgn-qrbar__close:hover,
.dgn-qrbar .dgn-qrbar__close:focus {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dgn-qrbar__close span {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--dgn-site-ink);
	color: var(--dgn-site);
	font: 700 24px/30px Arial, Helvetica, sans-serif;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.dgn-qrbar__close:hover span,
.dgn-qrbar__close:focus-visible span { transform: scale(1.1); }
.dgn-qrbar a:focus-visible,
.dgn-qrbar__close:focus-visible { outline: 3px solid var(--dgn-site-ink); outline-offset: 2px; }
@media (max-width: 640px) {
	.dgn-qrbar__inner { padding: 6px 52px 6px 10px; gap: 10px; }
	.dgn-qrbar a.dgn-qrbar__offer { font-size: 17px; line-height: 1.15; }
	.dgn-qrbar a.dgn-qrbar__more { font-size: 13px; margin-top: 2px; }
	.dgn-qrbar__qr { width: 84px; height: 84px; }
	.dgn-qrbar__close { right: 4px; }
}
@media (max-width: 360px) {
	.dgn-qrbar a.dgn-qrbar__offer { font-size: 16px; }
	.dgn-qrbar__qr { width: 76px; height: 76px; }
}

/* ---------- 2. Header and main menu on narrow phones ---------- */
#contentMenu .MainMenuLink .MenuLink { white-space: nowrap; display: inline-block; }
/* KSZ, KSZ2, YTF and DGN underline the hovered link with a 2px border: every link keeps a transparent 2px border, so hovering only
   colours it and no longer pushes the menu and the page down. :where() keeps this below the brand's own .MenuLink:hover. */
:where(#contentMenu .MainMenuLink) .MenuLink { border-bottom: 2px solid transparent; }
@media (max-width: 767.98px) {
	/* header art (#wrapper background) scales down with "contain": tile it sideways only, never down over the menu */
	#wrapper { background-repeat: repeat-x; }
	/* keep the menu clear of the TV / search side tabs */
	#contentMenu .MainMenuLink { padding-left: 42px; padding-right: 42px; line-height: 1.25; }
	#contentMenu .MainMenuLink .MenuLink,
	#contentMenu .MainMenuLink .MenuLink:hover { font-size: 19px; padding: 8px 8px; }
}
@media (max-width: 400px) {
	#contentMenu .MainMenuLink .MenuLink,
	#contentMenu .MainMenuLink .MenuLink:hover { font-size: 17px; padding: 8px 6px; }
}

/* ---------- 3. Floating quick menu (includes/MainMenu_1.cfm, shown by dgn-ux.js once the main menu scrolls away) ---------- */
.dgn-sticky {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--dgn-qrbar-h);
	z-index: 9990;
	background: rgba(14, 14, 14, .95);
	border-bottom: 3px solid var(--dgn-site);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
	font-family: Arial, Helvetica, sans-serif;
	transform: translateY(-130%);
	visibility: hidden;
	transition: transform .25s ease, top .3s ease, visibility 0s linear .25s;
}
.dgn-sticky.is-shown {
	transform: none;
	visibility: visible;
	transition: transform .25s ease, top .3s ease;
}
.dgn-sticky__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 54px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4px 12px;
}
.dgn-sticky__links,
.dgn-sticky__mobile { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; }
.dgn-sticky a.dgn-sticky__link,
.dgn-drawer a.dgn-drawer__link {
	color: #ffffff !important;
	font-weight: 700;
	letter-spacing: .05em;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
}
.dgn-sticky a.dgn-sticky__link {
	display: inline-block;
	padding: 11px 13px;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1;
	/* member pages load stylesheets with "nav a:hover { transform: scale(1.6) }" (accountdetails.css, details.css) that also match
	   this <nav>: no growing links here (the JOIN pulse is an animation and still runs) */
	transform: none;
	transition: background-color .15s ease, filter .15s ease;
}
.dgn-sticky a.dgn-sticky__link:hover,
.dgn-sticky a.dgn-sticky__link:focus-visible { background: rgba(255, 255, 255, .14); }
.dgn-sticky a:focus-visible,
.dgn-sticky button:focus-visible,
.dgn-drawer a:focus-visible,
.dgn-drawer button:focus-visible { outline: 3px solid var(--dgn-site); outline-offset: 2px; }
.dgn-sticky .dgn-sticky__burger,
.dgn-sticky .dgn-sticky__burger:hover,
.dgn-sticky .dgn-sticky__burger:focus,
.dgn-drawer .dgn-drawer__close,
.dgn-drawer .dgn-drawer__close:hover,
.dgn-drawer .dgn-drawer__close:focus {
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 8px;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
}
.dgn-sticky__burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; }
.dgn-sticky__burger span { display: block; width: 24px; height: 3px; border-radius: 2px; background: #ffffff; }
.dgn-sticky__mobile { display: none; }
/* members get the same floating links as visitors: the member control bar no longer floats (it stays at the top of the page,
   2026-10-07), so the 768-1179px hamburger that kept the links out from under it is gone */
@media (max-width: 767.98px) {
	.dgn-sticky__links { display: none; }
	.dgn-sticky__burger { display: flex; }
	.dgn-sticky__mobile { display: flex; flex-wrap: nowrap; gap: 8px; }
	.dgn-sticky__bar { justify-content: space-between; padding: 4px 10px; }
	.dgn-sticky a.dgn-sticky__link { font-size: 17px; padding: 13px 14px; }
}

/* JOIN in the quick menu: it has to stand out */
.dgn-sticky a.dgn-join,
.dgn-drawer a.dgn-join {
	background: var(--dgn-site);
	color: var(--dgn-site-ink) !important;
	border-radius: 8px;
	animation: dgn-join-pulse 1.4s ease-in-out infinite;
}
.dgn-sticky a.dgn-join:hover,
.dgn-sticky a.dgn-join:focus-visible,
.dgn-drawer a.dgn-drawer__link.dgn-join:hover {
	background: var(--dgn-site);
	filter: brightness(1.12);
	outline: 2px solid rgba(255, 255, 255, .75);
	outline-offset: 2px;
}
@keyframes dgn-join-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--dgn-site-rgb), .85); }
	50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(var(--dgn-site-rgb), 0); }
}

/* full menu drawer behind the hamburger */
.dgn-drawer { position: fixed; inset: 0; z-index: 100000; display: none; font-family: Arial, Helvetica, sans-serif; }
.dgn-drawer.is-open { display: block; }
.dgn-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.dgn-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(320px, 86vw);
	overflow-y: auto;
	overscroll-behavior: contain; /* scrolling the menu does not scroll the page behind it */
	padding: 68px 0 24px;
	background: #141414;
	border-right: 4px solid var(--dgn-site);
	box-shadow: 4px 0 24px rgba(0, 0, 0, .6);
}
.dgn-drawer__close { position: absolute; top: 10px; right: 10px; font: 700 30px/1 Arial, Helvetica, sans-serif; }
.dgn-drawer a.dgn-drawer__link {
	display: block;
	padding: 15px 24px;
	font-size: 19px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dgn-drawer a.dgn-drawer__link:hover { background: rgba(255, 255, 255, .08); }
.dgn-drawer a.dgn-drawer__link.dgn-join { margin: 14px 18px; text-align: center; border-bottom: 0; }

/* ---------- 4. Join buttons: normal button size, they stand out by colour, glow, pulse and a light sweep ---------- */
.dgn-cta-wrap {
	clear: both;
	float: none !important;
	margin-top: 36px !important;
	margin-bottom: 36px !important;
	padding-left: 12px;
	padding-right: 12px;
}
.dgn-cta,
button.dgn-cta,
a.dgn-cta,
.buttonDGNMiddle.dgn-cta {
	position: relative;
	overflow: hidden;
	display: block;
	float: none;
	width: 100%;
	max-width: 640px;
	height: auto !important;
	min-height: 54px;
	margin: 0 auto;
	padding: 15px 20px;
	border-radius: 12px;
	font-family: var(--dgn-font-body);
	font-size: clamp(18px, 4.6vw, 23px) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	letter-spacing: .03em;
	text-align: center;
	text-decoration: none;
	color: var(--dgn-site-ink);
	text-shadow: 0 1px 2px var(--dgn-site-ink-shadow);
	animation: dgn-cta-pulse 1.5s ease-in-out infinite;
}
.dgn-cta:hover,
.dgn-cta:focus-visible { filter: brightness(1.12); }
.dgn-cta:focus-visible { outline: 4px solid #ffffff; outline-offset: 3px; }
/* light sweeping across the button */
.dgn-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: dgn-cta-shine 2.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes dgn-cta-pulse {
	0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--dgn-site-rgb), .75), 0 6px 18px rgba(0, 0, 0, .45); }
	50% { transform: scale(1.04); box-shadow: 0 0 0 16px rgba(var(--dgn-site-rgb), 0), 0 10px 26px rgba(0, 0, 0, .5); }
}
@keyframes dgn-cta-shine {
	0% { left: -60%; }
	60%, 100% { left: 130%; }
}

/* ---------- 5. End of a preview video: JOIN instead of play-again (dgn-ux.js) ---------- */
.dgn-vjs-join {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(0, 0, 0, .55);
	font-family: Arial, Helvetica, sans-serif;
}
.video-js.dgn-ended .dgn-vjs-join { display: flex; }
.video-js.dgn-ended .vjs-big-play-button,
.video-js.dgn-ended + .vjs-paused-overlay { display: none !important; }
.dgn-vjs-join a.dgn-vjs-join__btn {
	display: block;
	max-width: 86%;
	padding: 16px 34px;
	border: 3px solid #ffffff;
	border-radius: 999px;
	background: var(--dgn-site);
	color: var(--dgn-site-ink) !important;
	font-size: clamp(20px, 5vw, 32px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none !important;
	animation: dgn-join-pulse 1.4s ease-in-out infinite;
}
.dgn-vjs-join a.dgn-vjs-join__btn small { display: block; margin-top: 4px; font-size: .5em; font-weight: 700; letter-spacing: .02em; }
.dgn-vjs-join button.dgn-vjs-join__replay,
.dgn-vjs-join button.dgn-vjs-join__replay:hover,
.dgn-vjs-join button.dgn-vjs-join__replay:focus {
	margin: 0;
	padding: 8px 14px;
	border: 0;
	background: none;
	color: #ffffff;
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- 6. Footer: readable on phones ---------- */
#wrapper2 { height: auto !important; min-height: 380px; }
.dgn-footer-nav .footerlink { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 4px 0; }
.dgn-footer-nav .footerlink a { white-space: nowrap; }
.dgn-copyright { line-height: 1.5; }
.dgn-copyright .dgn-copy-line { display: block; }
.dgn-nowrap { white-space: nowrap; }
@media (max-width: 800px) {
	/* two columns: site links | social links, legal links in two columns underneath */
	.dgn-footer-nav {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		max-width: 520px;
		margin: 0 auto;
		padding: 0 42px; /* clear of the TV / search side tabs */
	}
	.dgn-footer-nav .footerlink { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; margin: 0; }
	.dgn-footer-nav .footerlink a {
		display: block;
		padding: 10px 4px;
		font-size: 15px;
		line-height: 1.25;
		text-align: center;
		white-space: normal;
	}
	.dgn-footer-nav .footerlink--legal {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		margin-top: 10px;
		padding-top: 8px;
		border-top: 1px solid rgba(255, 255, 255, .35);
	}
	.dgn-copyright { padding: 0 44px; font-size: 13px; line-height: 1.45; }
	.dgn-copyright .dgn-copy-line { margin: 0 0 10px; }
	/* room for the fixed banner at the bottom */
	#wrapper2 { padding-bottom: 96px !important; }
}

/* ---------- 7. Meet Up page: cam site logos ---------- */
.dgn-camsites {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	max-width: 960px;
	margin: 10px auto 34px;
	padding: 0 12px;
}
.dgn-camsites a { display: flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; }
.dgn-camsites a:focus-visible { outline: 3px solid var(--dgn-site); outline-offset: 2px; }
.dgn-camsites img { display: block; width: auto; max-width: 100%; height: auto; max-height: 130px; }
@media (max-width: 640px) {
	.dgn-camsites { grid-template-columns: 1fr 1fr; gap: 14px; }
	.dgn-camsites img { max-height: 110px; }
}

/* ---------- 8. Members lobby (members/memberhome.cfm) on phones ---------- */
@media (max-width: 767.98px) {
	/* the paired boxes stack on phones: give each its own space and let it grow with its content
	   (fixed 460px heights made the text spill into the next box) */
	.dgn-lobby .rowpad {
		height: auto !important;
		margin: 0 0 22px !important;
		padding-top: 6px;
		padding-bottom: 14px;
	}
	.dgn-lobby .columns > .rowpad { margin-left: 0 !important; margin-right: 0 !important; }
	.dgn-lobby > .row { margin-bottom: 10px; }
}

/* ---------- 9. Members login / join page (memberslogin.cfm) ---------- */
/* side gutters: the login box and the pitch column touched the screen edges on tablets and laptops */
.row.wrapperAbot { padding-left: 12px; padding-right: 12px; }
.MambLogBox { border-radius: 10px; }
/* "Please use the fields below..." strip: icon and text side by side instead of a squashed floated icon */
.MEMBERSsmallBox { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; }
.MEMBERSsmallBox > div { float: none !important; flex: 0 0 auto; width: 30px !important; height: 30px !important; }
.MEMBERSsmallBox > div > img { float: none !important; display: block; width: 30px !important; height: 30px !important; margin: 0 !important; object-fit: contain; }
.MEMBERSsmallBox h2.MEMBERSsmall { margin: 0; padding: 0; font-size: 14px; line-height: 1.35; text-align: left; }
.MEMBERSsmallBox span.MEMBERSsmall { margin: 0; font-size: inherit; text-align: left; }
/* LOG IN button centred on its own line, "Login Problems" centred under it (it wrapped around the floated button) */
.MambLogBoxTop .buttonDGNMiddle { float: none !important; display: block; margin: 14px auto 12px !important; min-width: 140px; }
.MambLogBoxTop a[data-reveal-id] { display: block; text-align: center; padding: 6px 0; }
/* compact login box: spacing comes from margins instead of stacked <br> line breaks (they left big empty gaps) */
.MambLogBox > br,
.MambLogBoxTop > br { display: none; }
.MambLogBox .MEMBERS { margin: 0 0 10px; }
.MambLogBox .MEMBERSsmallBox { margin-bottom: 14px; }
.MambLogBoxTop .InputText { display: block; margin: 0 0 4px; }
.MambLogBoxTop input[type="text"],
.MambLogBoxTop input[type="password"] { height: 42px; margin-bottom: 12px; font-size: 16px; }
.MambLogBoxTop .buttonDGNMiddle { margin: 6px auto 6px !important; }
.MambLogBoxTop a[data-reveal-id] { padding: 6px 0 2px; font-size: 15px; }
/* feature list: compact rows with a check mark in the brand colour; two columns on wide screens */
.MambLogBoxRight .Memtext {
	position: relative;
	margin: 0;
	padding: 7px 12px 7px 34px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
}
.MambLogBoxRight .Memtext::before {
	content: "\2713";
	position: absolute;
	left: 12px;
	top: 7px;
	color: var(--dgn-site);
	font-weight: 700;
}
.MambLogBoxRight .MemtextInBox { padding-left: 0 !important; font-size: inherit; }
.MambLogBoxRight .MembersRightBig { margin-bottom: 8px; }
.MambLogBoxRight .TextHomeoblsmall { margin-bottom: 12px; }
.MambLogBoxRight { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 8px; }
.MambLogBoxRight > * { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 1024px) {
	.MambLogBoxRight > .Memtext { flex: 0 0 calc(50% - 4px); }
}
.MambLogBoxRight > .dgn-cta-wrap { margin-top: 26px !important; margin-bottom: 10px !important; }
@media (max-width: 767.98px) {
	.MambLogBox { margin-bottom: 28px; }
	.MambLogBoxRight { margin-top: 28px; padding-top: 12px; }
}

/* ---------- 9b. Pop-up dialogs (Foundation reveal: Login Problems, messages): dark text on the white dialog ---------- */
.reveal-modal { color: #222222; padding: 28px 30px; }
.reveal-modal p,
.reveal-modal li,
.reveal-modal .lead { color: #2b2b2b; font-family: var(--dgn-font-body); line-height: 1.55; }
.reveal-modal h1,
.reveal-modal h2,
.reveal-modal h3,
.reveal-modal h4,
.reveal-modal h5,
.reveal-modal h6 { color: #111111; font-family: var(--dgn-font-body); font-weight: 700; line-height: 1.25; }
.reveal-modal h2 { font-size: clamp(22px, 1.4vw + 14px, 28px); }
.reveal-modal .lead { font-size: 18px; font-weight: 600; margin-top: 18px; }
.reveal-modal .close-reveal-modal { font-size: 34px; width: 44px; height: 44px; line-height: 44px; text-align: center; top: 8px; right: 10px; color: #555555; }
@media (max-width: 640px) {
	.reveal-modal { padding: 22px 18px; }
}
/* an open dialog sits above the join bar, quick menu, side tabs and chat button (they were drawn on top of it) */
.reveal-modal-bg { z-index: 100001 !important; }
.reveal-modal { z-index: 100002 !important; }

/* ==========================================================================
   10. Type, button and box system (all brands)
   The 8 brand Base.css files are one copied skeleton with hard-coded sizes (32px section titles, 22px card titles, 30px inline
   button text, script fonts on long text). These rules put every brand on one size scale. Colours are NOT set here: every brand
   keeps its own palette (Base.css) and its display font for the logo, menu and headings; the only colours used are the brand's
   own SiteColor variables (--dgn-site / --dgn-site-ink) and neutral overlays. Rules that must beat page <style> blocks or
   inline style="" use doubled classes or !important. Nothing here changes any text.
   ========================================================================== */

/* ---- 10a. Reading text: one clean font, normal weight, comfortable line height and spacing ---- */
body,
p, li, dd, dt, td, th, label, input, select, textarea, button, .button,
ul, ol, dl {
	font-family: var(--dgn-font-body);
}
p, li { line-height: 1.55; }
.TextHomeobl,
.TextHomeoblsmall,
.TextHomeoblsmall2,
.Memtext,
.MemtextInBox,
.MembersRightmiddle:not(h3),
.MEMBERSsmall,
.SimpleAdText,
.PinkAdTextFm,
.BlueAdText,
.OffAdTextFm,
.TextBoxLikePicture,
.InputText,
.InputTextSub,
.CustomList,
.copyright,
.SendUsRightBotoom,
.SendUsRightBotoom2 {
	font-family: var(--dgn-font-body);
	word-spacing: normal;
	letter-spacing: normal;
}
.TextHomeobl { font-size: 17px; font-weight: 600; line-height: 1.5; }
.TextHomeoblsmall,
.TextHomeoblsmall2 { font-size: 16px; font-weight: 400; line-height: 1.6; }
.MembersRightmiddle,
.Memtext,
.MemtextInBox { line-height: 1.5; }
.SimpleAdText,
.PinkAdTextFm,
.BlueAdText,
.OffAdTextFm { font-size: 17px !important; line-height: 1.55 !important; }
.TextBoxLikePicture { font-size: 15px; font-weight: 400; line-height: 1.55; }
.TextBoxLikePicture .CustomList.CustomList { font-family: var(--dgn-font-body); font-size: 15px; line-height: 1.6; color: inherit; }
.InputText { font-size: 15px; font-weight: 600; }
/* justified text tears into rivers of white space on phones */
@media (max-width: 767.98px) {
	.MembersRightmiddle,
	.Memtext,
	.MEMBERSsmall,
	.SimpleAdText,
	.TextHomeobl,
	.TextHomeoblsmall,
	.TextHomeoblsmall2,
	p[style*="justify"],
	div[style*="justify"] { text-align: left !important; }
}

/* ---- 10b. Headings keep the brand display font and colour, on one size scale (phone -> desktop) ---- */
.TextHomeTop { font-size: clamp(22px, 2.2vw + 14px, 32px); line-height: 1.15; }
/* balanced wrapping: no lone last word on a second line */
.TextHomeTop,
.MembersRightBig,
.SendUs,
.SendUs2,
.block-title h3,
.cta-three h3,
.video-banner .video-content h1,
.video-banner .video-content h2 { text-wrap: balance; }
@media (max-width: 1023px) {
	.TextHomeTop { line-height: 1.35; }
}
@media (max-width: 500px) {
	.TextHomeTop { font-size: clamp(18px, 4vw + 4px, 22px); }
}
/* FAQ and similar section titles keep the brand display font, sized as titles */
h3.MembersRightmiddle { font-size: clamp(18px, 1vw + 14px, 22px); line-height: 1.3; }
.TextHomeTopblue { font-size: clamp(17px, 1.2vw + 13px, 24px); line-height: 1.3; }
.TextHomeTopSm { font-size: clamp(17px, 1vw + 13px, 22px); line-height: 1.2; }
.TextHome,
.TextHomeTopHome { font-size: clamp(22px, 2.2vw + 14px, 32px); line-height: 1.15; }
.MembersRightBig { font-size: clamp(20px, 1.6vw + 14px, 24px); line-height: 1.2; }
.MEMBERS { font-size: clamp(19px, 1.2vw + 14px, 23px); line-height: 1.2; }
.SendUs,
.SendUs2 { font-size: clamp(26px, 2.8vw + 16px, 40px); line-height: 1.15; }
.BigSettext { font-size: clamp(24px, 2.4vw + 14px, 34px); line-height: 1.15; }
.BigSettextSet { font-size: clamp(20px, 2vw + 12px, 28px); line-height: 1.2; }
.middleSettext { font-size: clamp(18px, 1.4vw + 12px, 22px); }
.GalleryLink { font-size: clamp(18px, 1.6vw + 12px, 26px); }
/* the rotated PREVIEWS stamp on album covers (inline 70px) */
div.GalleryLink[style*="rotate"] { font-size: clamp(34px, 9vw, 64px) !important; }
@media (min-width: 768px) {
	#contentMenu .MainMenuLink .MenuLink,
	#contentMenu .MainMenuLink .MenuLink:hover { font-size: 20px; padding: 16px 14px; }
}

/* ---- 10c. Buttons: one size for every brand; text colour follows each brand's colour (dark on gold/pink/magenta) ---- */
.buttonDGNMiddle.buttonDGNMiddle:not(.postfix):not(.dgn-cta) {
	font-family: var(--dgn-font-body);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.2 !important;
	height: auto !important;
	min-height: 46px;
	padding: 12px 24px;
	letter-spacing: .03em;
	color: var(--dgn-site-ink);
}
.buttonDGNMiddle.postfix { font-family: var(--dgn-font-body); font-weight: 700; color: var(--dgn-site-ink); }
.tributeButtons.tributeButtons {
	display: inline-block;
	height: auto !important;
	min-height: 38px;
	padding: 9px 16px;
	font-family: var(--dgn-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25 !important;
	color: var(--dgn-site-ink);
}
@media (min-width: 1024px) {
	.buttonDGNMiddle.buttonDGNMiddle:not(.postfix):not(.dgn-cta) { font-size: 18px !important; }
}

/* ---- 10d. Media cards (videos, photo sets, selfies, home grids) ---- */
/* the picture keeps its proportions instead of being stretched to the box */
.PicBox .ImgBoxHome img {
	float: none !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
/* caption bar over the bottom of the picture: smaller title on one line with an ellipsis, info icon on the left */
.PicBox .PicBoxTextBox { position: relative !important; height: 36px; margin-top: -36px; }
.PicBox .PicBoxText {
	position: static !important;
	display: block;
	height: 36px;
	padding: 0 10px 0 34px !important;
	font-family: var(--dgn-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 36px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--dgn-site-ink);
}
.VideoBoxMembers > a { position: relative; display: block; }
.VideoBox:has(> .info-popup) { position: relative; } /* RLC own home: the (i) pop-up spans its card */
.VideoBoxMembers video { max-width: 100%; }
.VideoBoxMembers .VideoBoxTextMembers,
.VideoBox .VideoBoxText {
	position: static !important;
	height: 38px;
	padding: 0 10px 0 34px;
	font-family: var(--dgn-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 38px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--dgn-site-ink);
}
.PicBox .PicBoxText > i.info-icon-trigger,
.VideoBoxMembers .VideoBoxTextMembers > i.info-icon-trigger {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	margin: 0 !important;
	float: none !important;
	line-height: 28px;
	text-align: center;
	font-size: 18px !important;
}
/* release date: a readable label on the picture just above the caption bar (was 12px with a red offset shadow, often clipped) */
.PicBox .PicBoxText > span[id^="date_"],
.PicBox .PicBoxText > span[style*="bottom"],
.VideoBoxMembers .VideoBoxTextMembers > span[id^="date_"] {
	position: absolute !important;
	left: 6px !important;
	bottom: calc(100% + 6px) !important;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .62);
	color: #ffffff;
	font-family: var(--dgn-font-body);
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.4;
	text-shadow: none !important;
	white-space: nowrap;
}
/* "Coming Soon" / bonus picture boxes: the box follows the picture (it was a fixed 299px with the picture stretched to fit),
   the title bar sits on the bottom of the picture */
.PicturesBox { height: auto !important; margin-bottom: 0; }
/* pictures come in slightly different shapes: crop them all to the same 3:2 frame so boxes side by side match */
.PicturesBox img {
	float: none !important;
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}
.PicturesBoxText {
	position: relative;
	top: 0 !important;
	margin-top: -34px;
	margin-bottom: 22px; /* room before whatever follows (it touched the next button) */
	font-family: var(--dgn-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 28px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--dgn-site-ink);
}
/* phones: photo sets and selfies two per row in tidy rows. Video cards stay one per row, full width (Foundation small-12): owner
   21 Oct 2026, two videos per row were too small on a phone */
@media (max-width: 640px) {
	.row:has(> .columns:not(.small-centered) > .PicBox) {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 4px;
	}
	.row:has(> .columns:not(.small-centered) > .PicBox)::before,
	.row:has(> .columns:not(.small-centered) > .PicBox)::after { display: none; }
	.columns.small-12:not(.small-centered):has(> .PicBox) {
		width: 50% !important;
		float: left !important;
		padding-left: 6px !important;
		padding-right: 6px !important;
	}
	.PicBox { margin: 6px 0 !important; }
	/* captions: up to three centred lines instead of an early ellipsis; every bar the same height so rows stay even */
	.PicBox .PicBoxTextBox { height: 48px; margin-top: -48px; }
	.PicBox .PicBoxText,
	.VideoBoxMembers .VideoBoxTextMembers {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 48px;
		padding: 0 6px 0 30px !important;
		font-size: 13px;
		line-height: 15px;
		white-space: normal;
		text-align: center;
		overflow: hidden;
	}
	.PicBox .PicBoxText > i.info-icon-trigger,
	.VideoBoxMembers .VideoBoxTextMembers > i.info-icon-trigger { width: 26px; height: 26px; line-height: 26px; font-size: 16px !important; }
	.VideoBoxMembers .video-js .vjs-big-play-button { font-size: 2em; }
	.PicBox .PicBoxText > span[id^="date_"],
	.PicBox .PicBoxText > span[style*="bottom"],
	.VideoBoxMembers .VideoBoxTextMembers > span[id^="date_"] { font-size: 12px !important; }
	/* like / views bar under each member card (members/videos, galleries, selfies, bonus pages: div.row.VideoBoxRatingMembers; the
	   single-video page's bar has no .row): its two Foundation halves are ~60px wide on a phone card, so the icons stacked and the vote
	   line wrapped. Compact bar: like / dislike / heart on one row (the word "Like" hidden, its title stays), then views + green bar,
	   then "100% like 5 dislike 0" on one line. Only the layout changes: classes, ids and the like-dislike JS hooks are untouched. */
	.row.VideoBoxRatingMembers { display: flex; flex-direction: column; padding: 2px 6px 7px; margin-left: 0 !important; margin-right: 0 !important; } /* !important: Foundation's .row .row / form .row .row margins made the bar 15px wider than the video on each side (cooking shows, bonus pages) */
	.row.VideoBoxRatingMembers::before,
	.row.VideoBoxRatingMembers::after { display: none; }
	.row.VideoBoxRatingMembers > .columns { width: auto; float: none; padding: 0 !important; } /* !important: Foundation's form .row .row .columns (0 8px) is more specific; it squeezed the icons to 2px apart on videos / galleries / selfies */
	.row.VideoBoxRatingMembers > .columns:first-child { display: flex; justify-content: space-evenly; align-items: center; margin-top: 0 !important; } /* !important: inline margin-top */
	.row.VideoBoxRatingMembers .js-voteTextlarge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 4px; }
	.row.VideoBoxRatingMembers .js-voteTextlarge i { font-size: 22px; line-height: 1; }
	.row.VideoBoxRatingMembers > .columns:first-child > .js-voteTextlarge { padding: 0; }
	.row.VideoBoxRatingMembers > .columns:first-child > .js-voteTextlarge > i { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; } /* the heart's click handler is on this <i> ("span .fi-heart"), not on the span: the icon now fills the whole 36x36 box (it was 18x24) */
	.row.VideoBoxRatingMembers .js-voteTextlarge.like > span { display: none; }
	.row.VideoBoxRatingMembers .js-voteTextlarge.right { float: none !important; } /* bonus pages' Download button: centred under the counts (Foundation .right is !important) */
	.row.VideoBoxRatingMembers > .columns:has(> .js-voteTextlarge.right) { text-align: center; }
	.row.VideoBoxRatingMembers .rating-info-container { font-size: 12px; line-height: 16px; text-align: center; }
	.row.VideoBoxRatingMembers .rating-info-container .views { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.row.VideoBoxRatingMembers .rating-bar-container { margin: 3px 0 4px; border-radius: 3px; overflow: hidden; }
	.row.VideoBoxRatingMembers .votes-count-container { display: flex; justify-content: center; align-items: center; gap: 3px; white-space: nowrap; }
	.row.VideoBoxRatingMembers .votes-count-container > * { flex: none; }
	.row.VideoBoxRatingMembers .votes-count-container > .percent { flex: 0 1 auto; min-width: 0; margin-right: 3px; overflow: hidden; text-overflow: ellipsis; } /* a long percent (2 of 3 likes prints 66.6666666667) shortens instead of pushing the counts out */
	.row.VideoBoxRatingMembers .votes-count-container > .clear { display: none; }
	/* full-width video cards (members/videos.cfm since 21 Oct, and the bonus pages: their bar sits right in .VideoBoxMembers or the
	   .columns) have room again: the desktop look on one band. Left: like + the word "Like", dislike, heart (36px tap targets); right:
	   views, the green bar, "100% like 5 dislike 0". The bonus pages' Download gets its own line, centred. Photo sets and selfies
	   (.PicBox, two per row) keep the compact bar above. */
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers { flex-flow: row wrap; align-items: center; column-gap: 10px; padding: 4px 10px; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers > .columns { flex: 1 1 0; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers > .columns:first-child { justify-content: center; gap: 6px; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers > .columns:nth-child(2) { min-width: 0; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers .js-voteTextlarge.like > span { display: inline; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers .rating-info-container { text-align: left; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers .votes-count-container { justify-content: flex-start; }
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers > .columns:has(> .js-voteTextlarge.right) { flex-basis: 100%; }
}
/* narrow phones (under 360px): the word "Like" goes (its title stays), so "50% like 999 dislike 1000" keeps room on the band */
@media (max-width: 359.98px) {
	:is(.VideoBoxMembers, .columns) > .row.VideoBoxRatingMembers .js-voteTextlarge.like > span { display: none; }
}

/* home hero over the cover video (home.cfm, DevilGotNaked home.cfm): the 34px title, 30px subtitle and 36px "Join Now!" were
   taller than the video on laptops and ran into the selling-points strip */
body .video-banner .video-content { top: 12%; }
body .video-banner .video-content h1 { font-size: clamp(20px, 1.4vw + 10px, 30px); line-height: 1.2; letter-spacing: 0; padding-left: 48px; padding-right: 48px; }
body .video-banner .video-content h2 { font-size: clamp(15px, .8vw + 9px, 22px); line-height: 1.35; letter-spacing: 0; }
body .video-banner .video-content .join-now-btn { padding-top: 12px; }
body .video-banner .video-content .join-now-btn a { font-size: clamp(20px, 1vw + 14px, 28px); padding: 4px 18px 8px; }
body .video-banner .video-content .join-now-btn a span { font-size: 12px; letter-spacing: .06em; }
body .video-banner .video-points li { font-size: clamp(14px, .5vw + 11px, 18px); letter-spacing: 0; margin: 6px 0; }

/* ---- 10e. Boxes grow with their content instead of fixed heights that cut text off ---- */
.TextBoxLikePicture {
	height: auto !important;
	top: auto !important;
	overflow: visible !important;
	padding: 16px 18px;
}
/* home news box: scrollable by touch as well (it only scrolled on mouse hover) */
div[onmouseover*="overflow"] { overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 767.98px) {
	div[onmouseover*="overflow"] { height: auto !important; max-height: 440px; }
	/* rows sitting directly in rows double the negative gutter: cards and text touched the screen edge */
	.row > .row { margin-left: 0 !important; margin-right: 0 !important; }
}

/* ---- 10f. Age gate (introduction.cfm + brand BaseLanding.css) ---- */
.buttonYEAP {
	font-family: var(--dgn-font-body) !important;
	font-size: clamp(22px, 2vw + 16px, 28px) !important;
	font-weight: 700;
	line-height: 1.2;
	padding: 14px 12px !important;
}
.buttonYEAP2 {
	font-family: var(--dgn-font-body) !important;
	font-size: 14px !important;
	line-height: 1.3;
	min-height: 44px;
	padding: 10px 12px !important;
	opacity: 1 !important;
}
.copyaftersmall { height: 260px !important; font-family: var(--dgn-font-body); }
@media (min-width: 768px) {
	.copyaftersmall { height: 300px !important; }
}
div.copyaftersmall h4 { font-size: 20px !important; line-height: 1.25 !important; padding: 6px 4px 10px !important; }
div.copyaftersmall h4 span[style*="font-size"] { font-size: inherit !important; }
div.copyaftersmall h5 { font-size: 17px !important; line-height: 1.35 !important; }
div.copyaftersmall h6 { font-size: 15px !important; padding-top: 10px !important; }
div.copyaftersmall p,
div.copyaftersmall ul,
div.copyaftersmall li { font-size: 15px !important; line-height: 1.5 !important; font-weight: 400 !important; }
img[src*="Site_Warning"] { display: block; max-width: 300px !important; height: auto !important; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
	img[src*="Site_Warning"] { max-width: 230px !important; }
}
.copyMiddle { font-size: 15px !important; line-height: 1.4 !important; }
p.copyright { line-height: 1.5 !important; }

/* ---- 10g. Floating helpers on phones: keep them off the menu button and the reading area ---- */
@media (max-width: 1023px) {
	/* TV (left) and search (right) tabs on phones and tablets: slim (inside the text gutter) and low, stacked above the
	   scroll-to-top / chat buttons, so they cover neither the quick-menu hamburger nor the reading area */
	.gamemizer .gamemizer-toggle,
	.customizer .customizer-toggle { top: auto !important; bottom: 128px !important; width: 26px !important; height: 44px !important; line-height: 48px !important; font-size: 16px !important; }
	@supports (height: 100dvh) {
		/* the panels are 100vh tall: measure from the visible bottom whether the address bar is shown or not */
		.gamemizer .gamemizer-toggle,
		.customizer .customizer-toggle { top: calc(100dvh - 172px) !important; bottom: auto !important; }
	}
	.gamemizer .gamemizer-toggle { left: auto !important; right: -26px !important; border-radius: 0 10px 10px 0 !important; }
	.customizer .customizer-toggle { left: -26px !important; border-radius: 10px 0 0 10px !important; }
}
/* scroll-to-top: a finger-sized target that sits above the bottom banner */
body .scroll_up {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	left: 14px;
	bottom: 74px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	border: 2px solid rgba(255, 255, 255, .85);
}
body .scroll_up i { font-size: 18px; color: var(--dgn-site-ink); }

/* ---- 10h. RLC landing blocks (RealLifeCuckolds home.cfm, brand Base.css) ---- */
.banner-one__content h3 { font-size: clamp(30px, 4.5vw + 10px, 62px) !important; line-height: 1.1 !important; }
.block-title h3 { font-size: clamp(24px, 2vw + 16px, 34px) !important; line-height: 1.2 !important; }
.block-title p { font-size: clamp(16px, .6vw + 14px, 19px) !important; line-height: 1.5 !important; }
.thm-btn { font-family: var(--dgn-font-body); font-size: clamp(16px, .8vw + 13px, 20px) !important; padding: 15px 32px !important; line-height: 1.2 !important; }
.cta-three h3 { font-size: clamp(26px, 3vw + 14px, 42px) !important; line-height: 1.15 !important; }

/* ==========================================================================
   11. Second pass (review of every brand at phone and desktop width)
   Brand-specific rules are scoped with body[data-brand="..."] (MastHeading_1.cfm) so each palette stays its own.
   ========================================================================== */

/* ---- 11a. Join bar on narrow phones: shorter (it wrapped into 6 lines and took a quarter of the screen) ---- */
@media (max-width: 400px) {
	.dgn-qrbar__inner { padding: 4px 50px 4px 8px; gap: 8px; }
	.dgn-qrbar a.dgn-qrbar__offer { font-size: 15px; line-height: 1.15; }
	.dgn-qrbar a.dgn-qrbar__more { font-size: 12px; margin-top: 0; padding: 2px 0; }
	.dgn-qrbar a.dgn-qrbar__offer,
	.dgn-qrbar a.dgn-qrbar__more { text-wrap: balance; }
	.dgn-qrbar__qr { width: 64px; height: 64px; }
}

/* ---- 11b. Album detail page (gallery.cfm): the single cover stays full width on phones, whole title under it ---- */
@media (max-width: 640px) {
	.columns.small-12.small-centered:has(> .PicBox) { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; }
}
.PicBox .PicBoxTextBoxMember { height: auto; min-height: 40px; }
.PicBox .PicBoxTextBoxMember .PicBoxText {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 32px;
	padding: 0 10px !important;
	line-height: 1.2;
	white-space: normal;
}
/* download tiles: readable size label; "Image Size: Large / Medium / Small" readable on the dark brand pages */
@media (min-width: 801px) {
	b.ArhiveSizeGallery { font-size: 12px; }
}
@media (max-width: 500px) {
	b.ArhiveSizeGallery { font-size: 15px; }
}
input[type="radio"][name="pokemon"] + label { margin-left: .25rem; margin-right: .6rem; }
body:not([data-brand="SIV"]):not([data-brand="RLC"]) .columns:has(> input[name="pokemon"]),
body:not([data-brand="SIV"]):not([data-brand="RLC"]) input[type="radio"][name="pokemon"] + label { color: #e8e8e8; }

/* ---- 11c. Home video grid where the caption is a direct child of the card (no link wrapper): date sits on the picture ---- */
.VideoBoxMembers > .VideoBoxTextMembers:last-child > span[id^="date_"] { left: 10px !important; bottom: 47px !important; }
@media (max-width: 640px) {
	.VideoBoxMembers > .VideoBoxTextMembers:last-child > span[id^="date_"] { bottom: 57px !important; }
}

/* ---- 11d. Listing search pill (galleries / videos / selfies): label sized to the button ---- */
.postfix-round .buttonDGNMiddle.postfix { display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: .03em; }

/* ---- 11e. FAQ-style text pages: the text column is centred at a comfortable reading width on desktop ---- */
@media (min-width: 1024px) {
	#content .wrapperAbot > .columns:has(> h3.TextHomeTop + hr) {
		float: none !important;
		max-width: calc(80ch + 30px);
		margin-left: auto;
		margin-right: auto;
	}
}

/* ---- 11g. Top videos (topvideos.cfm .dgn-topvideos): one card per month; rank, thumbnail, title (was 24 bare lists, 6,500px) ---- */
.dgn-top-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; margin: 18px 0 8px; }
.dgn-top-month { min-width: 0; padding: 14px 14px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.dgn-top-month > p.MembersRightmiddle { margin: 0 0 8px; padding: 0 4px; }
.dgn-top-month > ol { margin: 0; list-style: none; counter-reset: dgn-top; }
.dgn-top-month > ol > li { margin: 0; counter-increment: dgn-top; }
.dgn-top-month > ol > li > a { display: grid; grid-template-columns: 24px 88px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 4px; border-radius: 10px; text-decoration: none; }
.dgn-top-month > ol > li > a::before { content: counter(dgn-top); font-weight: 700; text-align: center; }
.dgn-top-thumb { display: block; width: 88px; height: 50px; object-fit: cover; border-radius: 7px; background: rgba(0, 0, 0, .3); }
.dgn-top-title { line-height: 1.3; overflow-wrap: anywhere; }

/* ---- 11h. Documents (legal / policy pages, #content.dgn-doc; contents list = dgn-ux.js section 7). Paragraph spacing from margins
   instead of stacked <br>s; on wide screens the contents list is a sticky side column next to a ~730px reading column. ---- */
#content.dgn-doc :is(h3, h6).TextHomeobl { scroll-margin-top: 84px; }
#content.dgn-doc .wrapperAbot > .columns > br { display: none; }
#content.dgn-doc .wrapperAbot > .columns :is(p.TextHomeoblsmall, h3.TextHomeoblsmall) { margin: 0 0 14px; }
#content.dgn-doc .wrapperAbot > .columns p:empty { display: none; }
@media (min-width: 1024px) { /* short documents (no contents list): one centred reading column */
	#content.dgn-doc:not(.dgn-doc--toc) .wrapperAbot > .columns { float: none; max-width: 860px; margin-left: auto; margin-right: auto; }
}
.dgn-doc-toc { margin: 8px 0 14px; }
.dgn-doc-toc summary { cursor: pointer; font-weight: 700; }
.dgn-doc-toc ol { margin: 8px 0 0; padding: 0; list-style: none; }
.dgn-doc-toc a { display: block; padding: 5px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; text-decoration: none; }
@media (min-width: 1100px) {
	#content.dgn-doc--toc .wrapperAbot { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
	#content.dgn-doc--toc .wrapperAbot::before,
	#content.dgn-doc--toc .wrapperAbot::after { display: none; }
	#content.dgn-doc--toc .wrapperAbot > .columns { float: none; width: auto; }
	.dgn-doc-toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); margin: 8px 0 0; overflow: auto; }
	.dgn-doc-toc summary { display: none; }
}

/* ---- 11f. Shop (shop.cfm) ---- */
/* welcome text: side gutter and no justified rivers on phones and tablets */
@media (max-width: 1023px) {
	.columns > .row > .WelcomeText.small-12 { padding-left: 15px !important; padding-right: 15px !important; text-align: left !important; font-size: 16px; line-height: 1.6; }
	.columns > div[style*="margin-left:-15px"] { margin-left: 0 !important; }
}
/* store buttons (ADOPT, Mail Card, ECard, Boost...) join the button system */
.billPayButtons.billPayButtons,
.billPayButtonsLite.billPayButtonsLite {
	display: inline-block;
	width: auto;
	height: auto !important;
	min-height: 30px;
	padding: 6px 12px;
	font-family: var(--dgn-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: .02em;
	color: var(--dgn-site-ink);
	vertical-align: middle;
	white-space: nowrap;
}
.billPayButtonsLite.billPayButtonsLite { font-weight: 600; }
/* dark reading text on the light pastel store panels (the brand's light-on-dark text colours were 2.3-2.6:1 there).
   AID's store panels are dark and saturated, so AID keeps its own colours. */
body:not([data-brand="AID"]) :is(.SupportStore, .SendYourSexStore, .TributeStore, .IdolStore, .LevelUpStore, .TokenStore) :is(.TextHomeoblsmall2, .TextHomeoblsmall, .BillPayList, .TokensList, .TokensList li, .FeaturesList li, .StoreSubHeading, .ShopTokensGroup, .ShopTokensGroup span, .TextBoxLikePicture) { color: #333333; }
body .shop .product .desc p { color: #555555; } /* body prefix: brand shop_products.css loads later with the same selector */
/* body text sitting directly in the light store panels (notes, intros, italic remarks) */
body:not([data-brand="AID"]) :is(.SupportStore, .SendYourSexStore, .TributeStore, .IdolStore, .LevelUpStore, .TokenStore) > .columns,
body:not([data-brand="AID"]) :is(.SupportStore, .SendYourSexStore, .TributeStore, .IdolStore, .LevelUpStore, .TokenStore) > .columns em { color: #333333; }
/* KSZ custom-video order form: labels were dark grey on the dark purple panel */
body[data-brand^="KSZ"] .customvideosbox label { color: #ffffff; }
/* token price list: the big 10000-token coin no longer covers the prices on phones and tablets */
p.ShopTokensGroup,
p.ShopTokensGroup span { font-family: var(--dgn-font-body); font-size: 16px; line-height: 1.6; }
@media (max-width: 64em) {
	p.ShopTokensGroup { background-size: 88px auto; background-position: 50% 0; padding-top: 96px; }
	p.ShopTokensGroup span { white-space: normal; }
}
/* mall directory on phones and tablets: an even two-column list instead of names breaking across three columns */
@media (max-width: 1024px) {
	.MallMenu { display: flex; flex-wrap: wrap; justify-content: center; }
	.MallMenu::before,
	.MallMenu::after { display: none; }
	.MallMenu > hr { flex: 0 0 100%; }
	.MallMenu > .columns { display: contents; }
	.MallMenu > .columns > br { display: none; }
	.MallMenu > .columns > a { flex: 0 0 50%; box-sizing: border-box; padding: 4px 6px; }
}
/* product rows (gift cards, toys): the text column gets room instead of a fixed narrow box */
body .shop { flex-wrap: wrap; justify-content: center; gap: 10px; }
body .shop .product { flex: 1 1 220px; width: auto; min-width: 0; padding-left: 0; }
body .shop .product .desc { height: auto; overflow: visible; }

/* ---- 11g. Footer legal text readable on the light brand footers ---- */
/* SIV pink footer: the brand's dark ink, as on SIV's pink buttons (white was about 3:1) */
body[data-brand="SIV"] #wrapper2 .SendUsRightBotoom,
body[data-brand="SIV"] #wrapper2 .SendUsRightBotoom2,
body[data-brand="SIV"] #wrapper2 .copyright {
	color: #111111;
	text-shadow: none;
}
body[data-brand="SIV"] #wrapper2 .footerlink--legal { border-top-color: rgba(17, 17, 17, .3); }
body[data-brand="SIV"] #wrapper2 p.copyright,
body[data-brand="SIV"] #wrapper2 p.copyright .dgn-copy-line { font-size: 14px; line-height: 1.6; }
body[data-brand="SIV"] #wrapper2 p.copyright img[src*="DGNMarketing"] { filter: brightness(0) saturate(0); height: .8em !important; }
/* KSZ photo footer: the legal lines sit on a soft dark panel so they read over the bright photo */
body[data-brand^="KSZ"] #wrapper2 p.dgn-copyright { background: rgba(45, 0, 45, .55); border-radius: 10px; padding: 10px 14px; }
body[data-brand^="KSZ"] #wrapper2 p.dgn-copyright .dgn-copy-line { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
@media (max-width: 800px) {
	body[data-brand^="KSZ"] #wrapper2 p.dgn-copyright { margin: 0 30px 20px; padding: 12px 10px 4px; }
}

/* ---- 11h. RLC landing (RealLifeCuckolds home.cfm) ---- */
/* the decorative art stays behind the text and the call-to-action */
.cta-one__moc,
.cta-one__moc2 { z-index: -1; pointer-events: none; }
@media (max-width: 1023px) {
	.cta-one__bg-shape-2 { opacity: .3; }
}
/* "JOIN NOW! FULL ACCESS!" pill: the boxes grow with their text instead of cutting it */
body .mailchimp-one .inner-container { height: auto; padding: 20px; display: flex; align-items: stretch; }
body .mailchimp-one .inner-container > br { display: none; }
body .mailchimp-one__icon,
body .mailchimp2-one__icon { float: none; height: auto; min-height: 136px; overflow: visible; display: flex; flex-direction: column; justify-content: center; }
body .mailchimp-one__image { float: none; }
body .mailchimp-one__image img { display: block; height: 100% !important; min-height: 136px; object-fit: cover; }
body .mailchimp-one__icon p,
body .mailchimp2-one__icon p { margin-bottom: 0; }
@media (max-width: 640px) {
	body .mailchimp-one .inner-container { flex-direction: column; padding: 12px; border-radius: 36px; }
	body .mailchimp-one__icon,
	body .mailchimp2-one__icon,
	body .mailchimp-one__image { width: 100%; }
	body .mailchimp-one__icon,
	body .mailchimp2-one__icon { min-height: 0; padding: 14px 16px; }
	body .mailchimp-one__icon { border-radius: 26px 26px 0 0; }
	body .mailchimp2-one__icon { border-radius: 0 0 26px 26px; }
	body .mailchimp-one__image img { height: 120px !important; min-height: 0; }
	/* latest videos: one per row like the other brands' video grids (owner 2026-10-22: "B and fix RLC home too"; was two per row) */
	.row:has(> .columns > .VideoBox) { display: flex; flex-wrap: wrap; margin-left: 0 !important; margin-right: 0 !important; padding: 0 4px; }
	.row:has(> .columns > .VideoBox)::before,
	.row:has(> .columns > .VideoBox)::after { display: none; }
	.columns.small-12:not(.large-12):has(> .VideoBox) { width: 100% !important; float: none !important; padding-left: 6px !important; padding-right: 6px !important; }
	.VideoBox { margin: 8px 0; }
	.VideoBox .VideoBoxText { min-height: 44px; height: auto; display: flex; align-items: center; justify-content: center; padding: 6px 10px; font-size: 15px; line-height: 19px; white-space: normal; text-align: center; }
}

/* ---------- motion: respect the visitor's "reduce motion" setting ---------- */
@media (prefers-reduced-motion: reduce) {
	.dgn-cta,
	.dgn-cta::after,
	.dgn-sticky a.dgn-join,
	.dgn-drawer a.dgn-join,
	.dgn-vjs-join a.dgn-vjs-join__btn { animation: none; }
	.dgn-cta { box-shadow: 0 0 0 5px rgba(var(--dgn-site-rgb), .55), 0 6px 18px rgba(0, 0, 0, .45); }
	.dgn-qrbar,
	.dgn-sticky { transition: none; }
}

/* ---- Account page (members/account.cfm) readability, all brands (2026-10-05) ----
   Text and icons on the brand-coloured bars use the brand ink (white or near-black, picked per brand by DGN_UX.cfm);
   the always-light token ledger uses the darkened brand colour (--dgn-site-on-light, >= 4.5:1 on white).
   Panel background + panel text colours are brand decisions: each brand's scripts/accountdetails.css. */
.accountContainer .leftMenu nav a { color: var(--dgn-site-ink, #FFFFFF); }
.accountContainer .leftMenu nav a:hover, .accountContainer .leftMenu nav a.active { color: var(--dgn-site-ink, #FFFFFF); background: rgba(0, 0, 0, .16); }
/* Side menu hover: the brand CSS scales the whole link 1.6x, which blew the hover plate up over the neighbouring icons and off
   the bar. Only the icon grows now; the plate keeps the link's size (same 53px row, icon centred instead of at the bottom). */
.accountContainer .leftMenu nav a, .accountContainer .leftMenu nav a:hover { transform: none; padding: 14px 5px 13px; transition: background-color .2s ease-in-out; }
.accountContainer .leftMenu nav a i { display: inline-block; transition: transform .2s ease-in-out; }
.accountContainer .leftMenu nav a:hover i { transform: scale(1.35); }
.accountContainer :is(.AD_RightSideButton1, .AD_RightSideButton2) :is(h1, h1 a, i) { color: var(--dgn-site-ink, #FFFFFF); }
.accountContainer :is(.AD_RightSideButton1, .AD_RightSideButton2) h1:hover { color: var(--dgn-site-ink, #FFFFFF); text-decoration: underline; }
.accountContainer table a { color: var(--dgn-site-on-light, #0b5a7a); color: color-mix(in srgb, var(--dgn-site-on-light, #0b5a7a) 80%, #000); } /* the ledger rows are light blue, not white */
.accountContainer .TokenActivityTableDateRow td { color: #555555; }

/* ---- Lobby store boxes (members/memberhome.cfm Upgrades / What's New): the random What's New item can be a tall photo;
   keep it inside the box (the boxes now grow with min-height instead of a fixed 460px) ---- */
.IdolStore img, .TributeStore img { max-width: 100%; height: auto; max-height: 220px; object-fit: contain; }

/* ---- Diary book calendars (members/DGNBooks/DGNBook*/pages, white calendar pages): the day numbers were #CCC / #999 on white
   (1.6:1). Plain days readable grey, days with an entry in the brand colour (darkened for white), bold. ---- */
body .book-content .book-calendar span.book-calendar-dates { color: #6b6b6b; }
body .book-content .book-calendar a.book-calendar-dates.daiaryevent { color: var(--dgn-site-on-light, #444); font-weight: 700; }

/* ---- Card descriptions (dgn-ux.js section 5): (i) button added to captions that only had a hover tooltip, and its pop-up ---- */
.dgn-has-info { position: relative; padding-left: 34px !important; padding-right: 34px !important; }
.dgn-has-info > .dgn-info-auto { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; margin: 0; border-radius: 50%; background: rgba(127, 127, 127, .22); color: inherit; font-size: 16px; line-height: 26px; text-align: center; cursor: pointer; z-index: 2; }
.dgn-has-info > .dgn-info-auto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dgn-info-popup { position: absolute; z-index: 9000; max-height: min(50vh, 420px); overflow: auto; padding: 12px 14px; border-radius: 8px; background: #333; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); font-size: 14px; line-height: 1.5; text-align: left; }
.dgn-info-popup__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.dgn-info-popup__head .fi-x { cursor: pointer; font-size: 18px; }
.dgn-info-popup__body { white-space: pre-line; }

/* ---- Lobby welcome without diary books (members/memberhome.cfm .splash): RLC and DGN have no books, and any brand whose shelf
   is empty gets the same: no half-empty row - the welcome text fills the panel and its tips list runs in two columns. ---- */
.splash > .center.row:not(:has(.bookshelf .loc > *)) > :is(.bookshelf, .msg-icn) { display: none; } /* .msg-icn = "Open the book..." bubble */
.splash > .center.row:not(:has(.bookshelf .loc > *)) > .details { width: 100%; float: none; }
@media screen and (min-width: 768px) {
	.splash > .center.row:not(:has(.bookshelf .loc > *)) > .details ul { columns: 2; column-gap: 40px; }
	.splash > .center.row:not(:has(.bookshelf .loc > *)) > .details ul > li { break-inside: avoid; }
}

/* ---- Login alert (memberslogin.cfm login box, introduction.cfm age-gate login): a failed login used to print the reason above the
   box as small unstyled text - dark on the dark brands, easy to miss. Now a white card inside the box: brand accent and icon, the
   reason, the tries left (dots) or a live lock countdown. The page's own Login Problems link stays under the button. ---- */
.dgn-login-alert { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px 0; padding: 12px 14px 12px 12px; border-radius: 10px; border-left: 5px solid var(--dgn-site, #c00); background: #fff; color: #1c1c21; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: normal; animation: dgn-login-shake .42s ease-in-out 1; }
.dgn-login-alert[hidden] { display: none; }
.dgn-login-alert__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--dgn-site, #c00); color: var(--dgn-site-ink, #fff); display: flex; align-items: center; justify-content: center; }
.dgn-login-alert__icon svg { width: 18px; height: 18px; display: block; }
.dgn-login-alert__body { flex: 1 1 auto; min-width: 0; }
.dgn-login-alert__title { display: block; margin: 0 0 2px 0; color: var(--dgn-site-on-light, #a00); font-size: 16px; font-weight: 700; }
.dgn-login-alert__msg { display: block; color: #1c1c21; }
.dgn-login-alert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: #4a4a52; font-size: 14px; }
.dgn-login-alert__dots { display: inline-flex; gap: 4px; }
.dgn-login-alert__dots i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--dgn-site, #c00); }
.dgn-login-alert__dots i.is-used { background: transparent; box-shadow: inset 0 0 0 2px #9ca3af; } /* a used try: a ring (light grey dots vanished on white) */
.dgn-login-alert__timer { color: #1c1c21; font-weight: 700; font-variant-numeric: tabular-nums; }
input.dgn-login-invalid { border-color: var(--dgn-site, #c00) !important; box-shadow: 0 0 0 2px var(--dgn-site, #c00) !important; }
.MambLogBox :disabled, #MLF_LoginBT:disabled { cursor: not-allowed; }
#MLF_LoginBT:disabled, #MLF_UserName:disabled, #MLF_Password:disabled { opacity: .45; }
@keyframes dgn-login-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .dgn-login-alert { animation: none; } }

/* ---- Sitemap page (SiteMap.cfm, /sitemap.htm): three groups (Pages, Legal, Elsewhere) from includes/SiteLinks.cfm, headed by a line in
   the brand colour; the links keep the brand's own TextHomeobl style. ---- */
.dgn-sitemap .dgn-sitemap__section { margin-bottom: 24px; }
.dgn-sitemap .dgn-sitemap__title { margin: 0 0 10px 0; padding-bottom: 6px; border-bottom: 2px solid var(--dgn-site, #c00); color: var(--dgn-site-on-dark, #fff); font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body[data-scheme="light"] .dgn-sitemap .dgn-sitemap__title { color: var(--dgn-site-on-light, #333); } /* inherit was dark text on the dark brands */
.dgn-sitemap .dgn-sitemap__list { margin: 0; padding: 0; list-style: none; }
.dgn-sitemap .dgn-sitemap__list li { margin: 0; padding: 4px 0; line-height: 1.4; }