/*
Theme Name: ork v3 (child)
Theme URI: https://orka.tv
Template: ork
Author: OrkaTV
Description: OrkaTV v3 child of "ork v2.1". New consumer homepage (3.6.5: header logo at the homepage size on every page, child header.php without the duplicate meta/OG tags, logo/hero alt text, 230+ channels, /advertisers/ 301 to /ads/, homepage VideoObject JSON-LD; 3.6.4: LIVE tags 10px lower (8px on phones) for more room under the nav; 3.6.3: homepage background is the Creators dark blue (#0b1220 with the same blue glows); 3.6.2: homepage header logo 33% larger, header Contact Us button removed on all pages; 3.6.1: self-hosted homepage video, native player; 3.6.0: compact one-row 44px footer, in flow at the end of every page; 3.5.9: footer arc removed (straight top edge, all pages); 3.5.8: header logo / Contact Us / menu pills transparent until hovered, LIVE tags top-left of each hero panel; 3.5.7: red LIVE tag on each hero panel; 3.5.6: hero background is Ken's three-panel image, tile wall kept as an unused alternative; 3.5.5: staging only - no WP Staging login wall, forced noindex; 3.5.4: /advertise/ eyebrow "For Agencies and Brands"; 3.5.3: "this need to be made by a human" placeholder label across the tile wall; 3.5.2: hero wall back to the first v3 colour TV-screen tiles; 3.5: no Free live TV pill, no hero app note, no full-lineup button, no web-player line; 3.4: value props, top channels from the OrkaTV feed, FAQ), phone menu from the Primary (big-3) menu, tablet nav fix, footer without the Monetize Now / Advertise Now blocks (3.5), 301s from /features/ and /solutions/ to /ads/. The parent theme is unchanged.
Version: 3.6.5
Requires PHP: 7.4
Text Domain: ork
*/

/* ==========================================================================
   Header fixes (all pages)
   ========================================================================== */
/* 3.5.8 (Ken 10/21): the header's logo, Contact Us and phone-menu pills no longer draw a dark
   box (Tailwind bg-black/30 or bg-black/10 plus backdrop-blur, from header-content.php) when not
   hovered, so they sit on whatever background the page has. Hover (the blue pill) is unchanged;
   keyboard focus gets a visible ring.
   The inner pages (Creators 934, Broadcasters 953 and /ads 969 in their page CSS, /advertise/ 712
   in inc/advertise-v3.css) re-add the same rgba(0,0,0,.3) with !important, so this rule doubles
   the id and uses !important to win everywhere without editing those pages. */
#nav-container#nav-container a.rounded-full.backdrop-blur:not(:hover),
#nav-container#nav-container .menu-toggle.backdrop-blur:not(:hover) {
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
#nav-container a.rounded-full.backdrop-blur:focus-visible,
#nav-container .menu-toggle:focus-visible,
#nav-container label:focus-within .menu-toggle {
	outline: 2px solid #00a0df;
	outline-offset: 2px;
}
/* 3.6.2 (Ken 10/21): the header Contact Us button is gone (header-content.php). It used to give
   the right-hand header cell its height; the phone-menu button is absolutely positioned inside
   its label, so the label now gets the button's own size (2.75rem tall, py-3 + h-5 icon) and the
   button stays in the same spot, vertically centred with the logo. */
#nav-container label[for="mobile-menu"] { height: 2.75rem; } /* a flex item, so height applies; lg:hidden still hides it */

/* 3.6.2 (Ken 10/21): the header OrkaTV logo is 33% larger (wordmark 16px -> 21.3px tall on
   desktop, 14.4px -> 19.2px under 1024px where the root font is 90%). The pill around it
   (transparent until hovered, blue on hover, blue focus ring from 3.5.8) scales with it:
   44px -> 58.5px tall and 1.33x padding. On phones (<768px) the pill keeps its 44px height so its
   hover box still clears the first LIVE tag below the header; only the wordmark and the side
   padding grow there.
   3.6.5 (Ken 10/21, "make all the same size ... the size of the logo on the home page"): this
   was body.home only; it now applies on every page (Creators, Broadcasters, /ads, /advertise/,
   posts...). The doubled id outranks any page-content CSS (body.page-id-NNN #nav-container...). */
#nav-container#nav-container .basis-1\/2:first-child > a.rounded-full {
	height: 58.5px;
	padding: 1.0666rem 1.6666rem 0;   /* was pt-3 px-5 (.75rem / 1.25rem) */
}
#nav-container#nav-container .basis-1\/2:first-child > a.rounded-full > img {
	height: 1.3333rem;                /* was h-4 (1rem) */
	width: auto;
	top: 1.33px;
}
@media (max-width: 767px) {
	#nav-container#nav-container .basis-1\/2:first-child > a.rounded-full {
		height: 44px;
		padding-top: calc((44px - 1.3333rem) / 2 - 1px);
	}
}
#nav-container nav[aria-label="Mobile Navigation"] li.is-sub > a { padding-left: 2.25rem; font-size: .925em; }

/* ==========================================================================
   v3 consumer homepage (body.home only)
   ========================================================================== */
/* 3.6.3 (Ken 10/21): the homepage background is the Creators page's dark blue (#0b1220), with the
   same two soft blue glows (on .v3-home below), header fade and footer bar colour as page 934.
   It was black (#000, footer #0b0b0d). */
body.home,
body.home .layout { background: #0b1220; }
body.home #dots-container { display: none; }
body.home .layout.snap,
body.home .layout.snap #slides { scroll-snap-type: none !important; }
body.home footer.general > div { background: #131d31; } /* 3.6.3: as Creators (was #0b0b0d) */
body.home footer.general > svg { color: #131d31; }
/* 3.6.3: header fade as on Creators (#nav-container.general:before), was rgba(0,0,0,.5) over 10vh */
body.home #nav-container.spotlights:before { height: 12vh; background: linear-gradient(#0b1220, rgba(11, 18, 32, 0)); }

/* v3.1: front page only - normal document scrolling with the footer in flow at
   the very end. The rest of the site keeps the parent's fixed-height layout
   (scroll area = viewport minus 130px, footer pinned at the bottom). */
body.home { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; }
body.home .layout { height: auto !important; min-height: 0 !important; overflow: visible !important; }
body.home .layout:before { display: none; }
body.home #slides { overflow: visible !important; flex: none !important; }
body.home footer#colophon { position: relative !important; bottom: auto !important; left: auto; right: auto; margin-top: 0; } /* 3.5.9: was 60px, the room for the footer arc (removed) */

.v3-home {
	--v3-blue: #00a0df;
	--v3-blue-hi: #19b3ef;
	--v3-blue-lo: #008cc4;
	--v3-live: #ef4444;
	--v3-text: #fff;
	--v3-muted: rgba(255, 255, 255, .72);
	--v3-header: 96px;
	/* 3.6.3: Creators navy + its two glows (top right, bottom left), was #000 */
	background-color: #0b1220;
	background-image:
		radial-gradient(900px 500px at 85% 0%, rgba(0, 160, 223, .14), transparent 60%),
		radial-gradient(700px 500px at 0% 100%, rgba(0, 160, 223, .08), transparent 60%);
	color: var(--v3-text);
	font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.v3-home *, .v3-home *::before, .v3-home *::after { box-sizing: border-box; }
.v3-home a { color: inherit; }
.v3-home .v3-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* ---------- 3.6.1 video (self-hosted, native controls) ---------- */
.v3-video { padding: 8px 0 32px; }
.v3-video .v3-h2 { margin-bottom: 1.5rem; }
.v3-video__frame {
	max-width: 1100px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: 20px; background: #05080b; border: 1px solid rgba(0, 160, 223, .25);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.v3-video__el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.v3-video__el:focus-visible { outline: 2px solid #00a0df; outline-offset: -2px; }
@media (max-width: 640px) {
	.v3-video { padding: 0 0 24px; }
	.v3-video__frame { border-radius: 14px; }
}

/* ---------- Hero ---------- */
.v3-hero {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	min-height: calc(100dvh - 140px);
	padding: var(--v3-header) 0 40px;
}
.v3-hero__copy {
	position: relative;
	z-index: 2;
	padding: 24px 24px 24px max(32px, calc((100vw - 1240px) / 2 + 32px));
}
@supports (container-type: inline-size) {
	.v3-hero { container-type: inline-size; }
}
.v3-title {
	margin: 0 0 1.25rem;
	font-weight: 900;
	font-size: clamp(2.6rem, 5.2vw, 5rem);
	line-height: 1.02;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}
.v3-title .v3-live { color: var(--v3-blue); }
.v3-sub { margin: 0 0 2rem; max-width: 30rem; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--v3-muted); }
.v3-cta {
	display: inline-flex; align-items: center; gap: .65rem;
	height: 56px; padding: 0 28px; border-radius: 9999px;
	background: #fff; color: #000 !important; text-decoration: none;
	font-weight: 800; font-size: 1.05rem;
	box-shadow: 0 10px 30px rgba(0, 160, 223, .25);
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.v3-cta svg { width: 18px; height: 18px; }
.v3-cta:hover { background: var(--v3-blue); color: #fff !important; transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0, 160, 223, .4); }
.v3-cta:focus-visible, .v3-home a:focus-visible { outline: 3px solid var(--v3-blue-hi); outline-offset: 3px; }

/* Wall of TV-screen tiles — v3.5.2: back to the first v3 (3.0/3.1) look: soft colour
   gradient placeholder screens, 3 angled columns, a few red LIVE tags (Ken 10/21). */
.v3-wall {
	position: relative;
	z-index: 1;
	align-self: stretch;
	height: calc(100dvh - 140px - var(--v3-header) - 40px);
	min-height: 440px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 14%);
	mask-composite: intersect;
}
.v3-wall__inner {
	position: absolute; inset: -12% -6% -12% 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
	transform: rotate(-6deg);
}
.v3-col { display: flex; flex-direction: column; gap: 14px; animation: v3-up 80s linear infinite; will-change: transform; }
.v3-col:nth-child(2) { animation-name: v3-down; animation-duration: 95s; margin-top: -90px; }
.v3-col:nth-child(3) { animation-duration: 70s; margin-top: -40px; }
@keyframes v3-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes v3-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }

.v3-tile {
	position: relative; margin: 0; flex: none;
	aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
	background: #111;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.v3-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v3-tile.is-ph {
	background:
		radial-gradient(90% 70% at 22% 18%, hsla(var(--h), 95%, 66%, .55), transparent 62%),
		radial-gradient(70% 60% at 85% 90%, hsla(calc(var(--h) + 50), 90%, 55%, .35), transparent 60%),
		linear-gradient(135deg, hsl(var(--h), 62%, 24%), hsl(calc(var(--h) + 35), 70%, 9%));
}
.v3-tile.is-ph::after {
	content: ""; position: absolute; inset: 0;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45));
}
.v3-tile .v3-badge {
	position: absolute; left: 10px; top: 10px; z-index: 1;
	padding: 3px 8px; border-radius: 6px; background: var(--v3-live); color: #fff;
	font-size: .6rem; font-weight: 800; letter-spacing: .1em;
}

/* Phone strip (replaces the wall under 768px) */
.v3-strip { display: none; }

/* ---------- Ken's copy ---------- */
.v3-copy { padding: 48px 0 64px; background: linear-gradient(#000, #05080b 120px); border-top: 1px solid rgba(255, 255, 255, .08); }
.v3-copy__body { max-width: 46rem; margin: 0 auto; }
.v3-copy__body p { margin: 0 0 1.35rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.65; color: rgba(255, 255, 255, .82); }
.v3-copy__body p:first-child { font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.5; color: #fff; }
.v3-copy__body strong { color: #fff; font-weight: 800; }
.v3-copy__body p:last-child { margin-bottom: 0; }

/* ---------- Download block ---------- */
.v3-dl { padding: 0 0 72px; background: transparent; /* 3.6.3: was #000 */ text-align: center; } /* 3.6.0: the .v3-copy block above was removed, so no top padding and no gradient (it joins the channels section directly) */
.v3-dl__card {
	max-width: 920px; margin: 0 auto; padding: 40px 32px;
	border-radius: 24px; background: rgba(0, 160, 223, .1); border: 1px solid rgba(0, 160, 223, .25);
}
.v3-dl h2 { margin: 0 0 .5rem; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; color: #fff; }
.v3-dl__lede { margin: 0 0 1.75rem; color: var(--v3-muted); }
.v3-dl__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 36px; margin: 0; padding: 0; list-style: none; }
.v3-dl__logos a, .v3-dl__soon span { display: inline-flex; align-items: center; color: #fff; transition: color .15s ease; }
.v3-dl__logos a:hover { color: var(--v3-blue-hi); }
.v3-dl__logos svg, .v3-dl__soon svg { height: 100%; width: auto; }
.v3-h-roku { height: 22px; } .v3-h-firetv { height: 40px; } .v3-h-androidtv { height: 24px; } .v3-h-googleplay { height: 46px; } .v3-h-lg { height: 36px; } .v3-h-samsung { height: 28px; }
.v3-dl__soon-label { margin: 2rem 0 .75rem; font-size: .85rem; color: rgba(255, 255, 255, .55); }
.v3-dl__soon { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 12px 24px; border-radius: 14px; border: 2px solid rgba(0, 160, 223, .15); }
.v3-dl__soon span { color: rgba(255, 255, 255, .7); }
.v3-h-vizio { height: 12px; } .v3-h-appletv { height: 20px; }

/* ==========================================================================
   v3.4: value props, top channels, FAQ (structure loosely after philo.com/go/welcome;
   kept monochrome: white/grey on black, brand blue only for focus and hover)
   ========================================================================== */
.v3-h2 { margin: 0 0 .6rem; text-align: center; font-weight: 900; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.v3-lede { max-width: 36rem; margin: 0 auto 2.5rem; text-align: center; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; color: var(--v3-muted); text-wrap: balance; }

/* ---------- Value props ---------- */
.v3-props { padding: 8px 0 56px; }
.v3-props__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.v3-prop { padding: 32px 28px; text-align: center; }
.v3-prop + .v3-prop { border-left: 1px solid rgba(255, 255, 255, .1); }
.v3-prop svg { width: 30px; height: 30px; margin: 0 auto 14px; display: block; color: rgba(255, 255, 255, .85); }
.v3-prop h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.v3-prop p { margin: 0 auto; max-width: 18rem; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* ---------- Top channels ---------- */
.v3-channels { padding: 40px 0 72px; }
.v3-ch__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1100px; margin: 0 auto; padding: 0; list-style: none; }
.v3-ch {
	flex: 0 0 calc((100% - 5 * 14px) / 6);
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 16 / 9; border-radius: 14px;
	background: #0b0c0e; border: 1px solid rgba(255, 255, 255, .07);
	transition: border-color .2s ease, background .2s ease;
}
.v3-ch img { display: block; width: var(--w, 50%); max-width: 76%; max-height: 70%; height: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: opacity .2s ease; }
.v3-ch:hover { border-color: rgba(255, 255, 255, .18); background: #101215; }
.v3-ch:hover img { opacity: 1; }
.v3-ch.is-text span { padding: 0 10px; text-align: center; font-size: .8rem; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, .72); }
.v3-ghost {
	display: inline-flex; align-items: center; gap: .5rem;
	height: 46px; padding: 0 22px; border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, .25); color: #fff !important; text-decoration: none;
	font-weight: 700; font-size: .95rem; transition: border-color .15s ease, color .15s ease;
}
.v3-ghost svg { width: 16px; height: 16px; }
.v3-ghost:hover { border-color: var(--v3-blue); color: var(--v3-blue-hi) !important; }

/* ---------- FAQ ---------- */
.v3-faq { padding: 24px 0 24px; }
.v3-faq .v3-h2 { margin-bottom: 2rem; }
.v3-faq__list { max-width: 46rem; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .12); }
.v3-faq__item { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.v3-faq__item summary {
	position: relative; display: block; cursor: pointer; list-style: none;
	padding: 22px 48px 22px 4px; font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 700; color: #fff;
}
.v3-faq__item summary::-webkit-details-marker { display: none; }
.v3-faq__item summary::after {
	content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
	border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7);
	transform: rotate(45deg); transition: transform .2s ease;
}
.v3-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.v3-faq__item summary:hover { color: var(--v3-blue-hi); }
.v3-faq__item summary:focus-visible { outline: 3px solid var(--v3-blue-hi); outline-offset: 2px; }
.v3-faq__item p { margin: 0; padding: 0 48px 22px 4px; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.v3-faq__cta { margin: 2.5rem 0 0; text-align: center; }

@media (max-width: 1023px) {
	.v3-ch { flex-basis: calc((100% - 3 * 12px) / 4); }
	.v3-ch__grid { gap: 12px; }
}
@media (max-width: 767px) {
	.v3-props { padding: 0 0 40px; }
	.v3-props__list { grid-template-columns: 1fr; }
	.v3-prop { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; padding: 20px 4px; text-align: left; }
	.v3-prop + .v3-prop { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
	.v3-prop svg { grid-row: span 2; margin: 2px 0 0; width: 26px; height: 26px; }
	.v3-prop p { max-width: none; margin: 0; }
	.v3-channels { padding: 32px 0 56px; }
	.v3-ch__grid { gap: 10px; }
	.v3-ch { flex-basis: calc((100% - 2 * 10px) / 3); border-radius: 10px; }
	.v3-lede { margin-bottom: 1.75rem; }
	.v3-faq__item summary { padding: 18px 40px 18px 2px; }
	.v3-faq__item p { padding: 0 8px 18px 2px; }
	.v3-faq__cta .v3-cta { width: 100%; justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.v3-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.v3-hero__copy { padding-left: 32px; }
	.v3-wall__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); inset: -12% -10% -12% 0; }
	.v3-col:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
	.v3-home .v3-wrap { padding: 0 20px; }
	.v3-hero { display: block; min-height: 0; padding: calc(var(--v3-header) - 8px) 0 40px; }
	.v3-wall { display: none; }
	.v3-strip {
		display: grid; gap: 10px; margin: 0 0 28px; overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	}
	.v3-row { display: flex; gap: 10px; width: max-content; animation: v3-left 60s linear infinite; }
	.v3-row + .v3-row { animation-name: v3-right; animation-duration: 70s; }
	.v3-row .v3-tile { width: 168px; border-radius: 10px; }
	@keyframes v3-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
	@keyframes v3-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
	.v3-hero__copy { padding: 0 20px; text-align: left; }
	.v3-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
	.v3-cta { width: 100%; justify-content: center; }
	.v3-copy { padding: 36px 0 48px; }
	.v3-dl { padding-bottom: 72px; }
	.v3-dl__card { padding: 28px 18px; border-radius: 18px; }
	.v3-dl__logos { gap: 16px 26px; }
	.v3-h-roku { height: 17px; } .v3-h-firetv { height: 30px; } .v3-h-androidtv { height: 18px; } .v3-h-googleplay { height: 36px; } .v3-h-lg { height: 28px; } .v3-h-samsung { height: 22px; }
}
/* v3.5.3: placeholder label across the tile wall (Ken 10/21) so the team knows this
   visual is a stand-in and must be made by a human. Decorative only: no clicks. */
.v3-human {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.v3-human span {
	display: block; width: 116%; padding: 18px 24px;
	transform: rotate(-6deg);
	background: rgba(0, 0, 0, .72);
	border-top: 2px solid rgba(255, 255, 255, .85); border-bottom: 2px solid rgba(255, 255, 255, .85);
	color: #fff; text-align: center;
	font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
	text-wrap: balance;
}
@media (max-width: 767px) {
	.v3-strip { position: relative; }
	.v3-human span { width: 110%; padding: 10px 16px; font-size: clamp(1.1rem, 5.6vw, 1.5rem); }
}

/* v3.5.6: hero background = Ken's three-panel image (podcast / basketball / concert), 10/21.
   Anchored right + cover so the headline sits on the image's dark left side. The tile wall
   rules above stay for the alternative in template-parts/alt/hero-tilewall.php. */
.v3-hero__bg {
	position: absolute; inset: 0 0 0 20%; z-index: 0;
	pointer-events: none;
	background: transparent; /* 3.6.3: was #000; the image fades into the page's navy */
	overflow: hidden;
	container-type: size; /* 3.5.7: the image frame and LIVE tags are sized from this box */
}
/* 3.5.7: the hero is one centred unit with the header row. --v3-gut is the header's own side
   margin (its Tailwind container: 1024 / 1280 / 1536px wide, at least 32px): the headline starts
   exactly under the logo, and the image ends 32px past the Contact Us edge, so where the gutter is
   32px (1024, 1280, 1536...) the image still runs to the screen edge as before, and on wide screens
   it no longer sticks to the viewport's right edge. */
@property --v3-rf { syntax: '<length>'; inherits: true; initial-value: 0px; }
@supports (container-type: inline-size) {
	.v3-hero { --v3-cw: 100cqw; }
	.v3-hero__bg {
		--v3-gut: max(32px, (100cqw - var(--v3-cw)) / 2);
		left: calc(var(--v3-gut) - 32px + (100cqw - 2 * var(--v3-gut) + 64px) * .2);
		right: calc(var(--v3-gut) - 32px);
		--v3-rf: min(90px, var(--v3-gut) - 32px); /* right-edge fade only where black follows */
	}
	@media (min-width: 768px) {
		.v3-hero__copy { padding-left: max(32px, (100cqw - var(--v3-cw)) / 2); }
	}
}
@media (min-width: 1024px) { .v3-hero { --v3-cw: 1024px; } }
@media (min-width: 1280px) { .v3-hero { --v3-cw: 1280px; } }
@media (min-width: 1536px) { .v3-hero { --v3-cw: 1536px; } }
.v3-hero__media { position: absolute; inset: 0; }
/* Fades live on the image frame (not on .v3-hero__bg) so they never fade the LIVE tags: the image's
   own dark left side fades out before the first panel, a soft top/bottom edge, and a right-edge
   fade only when there is black beyond it (wide screens). */
.v3-hero__media .v3-hero__frame {
	-webkit-mask-image: linear-gradient(to right, transparent 26%, #000 36%), linear-gradient(to bottom, transparent 0, #000 7%, #000 85%, transparent 100%), linear-gradient(to left, transparent 0, #000 var(--v3-rf));
	-webkit-mask-composite: source-in, source-in;
	mask-image: linear-gradient(to right, transparent 26%, #000 36%), linear-gradient(to bottom, transparent 0, #000 7%, #000 85%, transparent 100%), linear-gradient(to left, transparent 0, #000 var(--v3-rf));
	mask-composite: intersect;
}
/* Fallback (no container queries): plain cover image, no tags. */
.v3-hero__frame { position: absolute; inset: 0; --v3-ox: 1; }
.v3-hero__frame picture, .v3-hero__frame img { display: block; width: 100%; height: 100%; }
.v3-hero__frame img { object-fit: cover; object-position: right center; }
.v3-hero__tags { display: none; }
@supports (container-type: size) {
	/* 3.5.7: a box with the image's exact 1672:941 shape that covers .v3-hero__bg the same way
	   object-fit: cover did (anchored right, centred vertically). Tags are placed in % of this box,
	   so they stay on their panel whatever the screen size. */
	.v3-hero__frame {
		inset: auto;
		/* cover, but capped at 1.2x the box width on desktop (tall windows): at least 83% of the
		   image width stays visible, so all three panels are always whole and the podcaster's face
		   stays clear of the headline; any spare height fades to black above and below. */
		--v3-fw: min(max(100cqw, 100cqh * 1.776833), 100cqw * var(--v3-cap, 1.2));
		--v3-fh: calc(var(--v3-fw) * .562799);
		width: var(--v3-fw); height: var(--v3-fh);
		left: calc((100cqw - var(--v3-fw)) * var(--v3-ox));
		/* 3.5.8: 20px lower on desktop so the top of the panels clears the header row (room for the
		   LIVE tags above the heads); the extra 20px at the bottom falls in the fade to black. */
		--v3-ft: calc((100cqh - var(--v3-fh)) * .5 + var(--v3-oy, 20px));
		top: var(--v3-ft);
	}
	.v3-hero__tags { display: block; z-index: 1; }
}
.v3-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		/* 3.6.3: the same shading in the page navy instead of black, so the fade lands on #0b1220 */
		linear-gradient(90deg, rgba(11, 18, 32, .55) 0, rgba(11, 18, 32, .2) 30%, rgba(11, 18, 32, 0) 45%),
		linear-gradient(to bottom, rgba(11, 18, 32, .35) 0, rgba(11, 18, 32, 0) 22%, rgba(11, 18, 32, 0) 78%, #0b1220 100%);
}

/* 3.5.7: red LIVE tags (Ken 10/21). Decorative only. Positions are image coordinates
   (x / 1672, y / 941), picked so each tag stays inside its own panel, clear of the slanted
   dividers, the faces/hair, the header (logo, Creators/Broadcasters/Advertisers, Contact Us)
   and the hero copy. 3.5.8: top-left of each panel everywhere (Ken's sample); on desktop
   just below the header row. */
.v3-live-tag {
	position: absolute;
	/* 3.5.8: --x/--y are fractions of the image (top-left of each panel at y = 6%). On desktop a tag
	   is never closer than 80px to the top of the hero (just below the header row, whose nav pill
	   and Contact Us end at 74px); when it has to move down it also moves left along the slanted
	   divider (slope 0.115), so it stays just inside its panel. */
	/* 3.6.4 (Ken 10/21): every tag sits --v3-tag-drop lower than in 3.5.8 (all breakpoints), for
	   more breathing room under the nav pill / logo; it still slides left along the divider. */
	--t: calc(max(calc(var(--v3-fh) * var(--y)), calc(80px - var(--v3-ft))) + var(--v3-tag-drop, 10px));
	top: var(--t);
	left: calc(var(--v3-fw) * var(--x) - (var(--t) - var(--v3-fh) * var(--y)) * .115);
	display: inline-flex; align-items: center; gap: .5em;
	height: 2em; padding: 0 .85em 0 .75em; border-radius: .5em;
	background: #e3262f; color: #fff;
	/* scales with the image (about 15px of the 1672px-wide source), 10-13px */
	font: 800 clamp(10px, var(--v3-fw) * .00897, 13px)/1 Montserrat, ui-sans-serif, system-ui, sans-serif;
	letter-spacing: .06em;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
	pointer-events: none; user-select: none;
}
.v3-live-tag::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: #fff; }
.v3-live-tag { --y: .06; }
.v3-live-tag--1 { --x: .38098; } /* 3.5.8: top-left of each panel, like Ken's sample: podcaster (637, 56) */
.v3-live-tag--2 { --x: .60287; } /* basketball (1008, 56) */
.v3-live-tag--3 { --x: .82955; } /* singer (1387, 56) */
/* Very short desktop windows (hero under ~520px tall): the header covers the top of the
   panels and there is no clear spot left, so the tags are hidden rather than collide. */
@media (min-width: 768px) and (max-height: 659px) and (orientation: landscape) {
	.v3-live-tag { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	/* Tablet portrait: the hero is taller than the image, so show it whole (no face crop). */
	.v3-hero__bg {
		inset: 50% 0 auto 14%; transform: translateY(-50%);
		aspect-ratio: 1672 / 941;
	}
	.v3-hero__frame { --v3-cap: 99; --v3-oy: 0px; }
}
@media (max-width: 767px) {
	/* Phone: the image sits above the copy (where the tile strip was), cropped to the three
	   panels, fading into black so the headline stays on solid dark. */
	.v3-hero__bg {
		position: relative; inset: auto;
		aspect-ratio: 1.15 / 1;
		margin: -28px 0 -36px;
	}
	.v3-hero__frame { --v3-cap: 99; --v3-oy: 0px; } /* 3.5.7: anchored right (was 82%) so the singer is whole too */
	.v3-hero__bg::after {
		background: linear-gradient(to bottom, rgba(11, 18, 32, .35) 0, rgba(11, 18, 32, 0) 22%, rgba(11, 18, 32, 0) 58%, #0b1220 100%); /* 3.6.3: navy, was black */
	}
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
	/* Phone / tablet portrait: top-left of each panel (the header is clear of the image here). */
	/* 3.6.4: the same --v3-tag-drop as desktop, sliding left along the divider (slope .115) */
	.v3-live-tag { font-size: 10px; --y: .03826; top: calc(var(--v3-fh) * var(--y) + var(--v3-tag-drop, 10px)); left: calc(var(--v3-fw) * var(--x) - var(--v3-tag-drop, 10px) * .115); }
	.v3-live-tag--1 { --x: .38278; } /* (640, 36) */
	.v3-live-tag--2 { --x: .60706; } /* (1015, 36) */
	.v3-live-tag--3 { --x: .82835; } /* (1385, 36) */
}
/* 3.6.4: in short desktop windows (up to 740px tall) the tags sit at the 80px floor right above
   the heads, so the image moves down the same 10px as the tags (--v3-oy 20px -> 30px; the extra
   falls in the bottom fade) and the heads keep their clearance. Taller windows: image unchanged. */
@media (min-width: 768px) and (orientation: landscape) and (max-height: 740px) {
	.v3-hero__frame { --v3-oy: 30px; }
}
/* 3.6.4: phones get 8px rather than 10px: the image is only ~1/3 scale there, and 10px would put
   the tags onto the podcaster's and singer's hair at 360px. 8px still doubles the gap to the logo. */
@media (max-width: 767px) {
	.v3-live-tag { --v3-tag-drop: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.v3-col, .v3-row { animation: none !important; }
}


/* ==========================================================================
   v3.6 footer (Ken 10/21): about a third of the old height
   Desktop: one 44px row (the old footer was 130px, in two rows). Phones: hidden, as before.
   Inner pages now scroll the whole document from 768px up, as the homepage
   already does, so the footer sits at the end of the page instead of staying
   pinned over the content.
   ========================================================================== */
footer#colophon.v3-foot { position: relative !important; left: auto; right: auto; bottom: auto !important; height: auto !important; margin: 0; z-index: 40; }
footer#colophon.v3-foot > div.v3-foot__bar { display: none; }
@media (min-width: 768px) {
	footer#colophon.v3-foot > div.v3-foot__bar {
		display: flex; align-items: center; justify-content: space-between; gap: 24px;
		height: 44px; padding: 0 max(32px, calc((100% - 1472px) / 2)); box-sizing: border-box;
		font-size: 12.5px; line-height: 1; color: rgba(255,255,255,.82); white-space: nowrap;
	}
	.v3-foot__legal, .v3-foot__right, .v3-foot__badges { display: flex; align-items: center; }
	.v3-foot__legal { gap: 8px; min-width: 0; }
	.v3-foot__sep { opacity: .45; }
	.v3-foot__logo { display: inline-flex; align-items: center; }
	.v3-foot__logo img { height: 11px; width: auto; display: block; }
	.v3-foot__privacy, .v3-foot__privacy:visited { color: var(--orka-secondary, #00a0df); }
	.v3-foot__privacy:hover { text-decoration: underline; }
	.v3-foot__right { gap: 14px; }
	.v3-foot__badges { gap: 6px; }
	.v3-foot__badges a { display: inline-flex; align-items: center; height: 28px; }
	.v3-foot__badges img { height: 18px; width: auto; display: block; }
	.v3-foot__badges .v3-foot__li img { height: 16px; width: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links { display: inline-flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; border-radius: 9999px; overflow: hidden; font-size: 12.5px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn {
		display: inline-flex; align-items: center; height: 28px; min-height: 0; padding: 0 14px; font-size: 12.5px; line-height: 1; border-radius: 0;
	}
	footer#colophon.v3-foot ul.v3-foot__links > li:first-child > a.btn { padding-left: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links > li:last-child > a.btn { padding-right: 16px; }
	footer#colophon.v3-foot ul.v3-foot__links > li > a.btn:hover { background-color: rgba(0,160,223,.5); }
	footer#colophon.v3-foot a:focus-visible { outline: 2px solid #00a0df; outline-offset: 2px; }

	/* inner pages: whole-document scrolling, footer in flow at the end */
	body.wp-child-theme-ork-v3-child:not(.home) { overflow-x: hidden !important; overflow-y: visible !important; height: auto !important; }
	body.wp-child-theme-ork-v3-child:not(.home) > .layout.layout { height: auto !important; min-height: calc(100dvh - 44px) !important; overflow: visible !important; }
	body.wp-child-theme-ork-v3-child:not(.home) > .layout > article.slides-wrapper { overflow: visible !important; height: auto !important; flex: 1 0 auto !important; }
	html:has(body.wp-child-theme-ork-v3-child:not(.home)) { scroll-padding-top: 104px; }
}