/*
Theme Name: Good TV
Theme URI: https://goodtv.com
Author: Good TV Inc.
Description: One page for goodtv.com — the company mark, the current film, and room for the ones after it. No Google Fonts, no third-party scripts, no tracking. The only outside request the page can make is the video iframe, and only after a click.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: goodtv
*/

/* ------------------------------------------------------------------
   Brand. Sampled from the supplied logo, not guessed:
   yellow #F5C300, grey #666666.
   The yellow is used sparingly on purpose — a rule, the play button,
   one hover. Spread across a page it stops reading as expensive and
   starts reading as a warning sign.
   ------------------------------------------------------------------ */
:root {
	--yellow: #f5c300;
	--grey:   #666666;
	--ink:    #141414;
	--muted:  #6f6f6f;
	--line:   #e6e6e6;
	--bg:     #ffffff;

	--gutter: 24px;
	--max:    1080px;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

a { color: inherit; }

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

:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Masthead — the mark alone, with air around it. No navigation,
   because there is nowhere else to go yet.
   ------------------------------------------------------------------ */
.masthead { padding: 56px 0 0; }

.mark { display: inline-block; }
.mark img { width: 176px; height: auto; }

/* ------------------------------------------------------------------
   The feature
   ------------------------------------------------------------------ */
.feature { padding: 72px 0 96px; }

.eyebrow {
	margin: 0 0 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--grey);
}

/* The one place the yellow carries structure rather than decoration. */
.eyebrow::before {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--yellow);
	margin-bottom: 18px;
}

.feature h1 {
	margin: 0 0 20px;
	font-size: clamp(2.4rem, 6.2vw, 4.2rem);
	line-height: 1.04;
	letter-spacing: -.022em;
	font-weight: 700;
	max-width: 15ch;
}

.lede {
	margin: 0 0 14px;
	font-size: clamp(1.05rem, 1.9vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink);
	max-width: 46ch;
}

.meta {
	margin: 0 0 40px;
	font-size: 14px;
	color: var(--muted);
}

.stage { margin: 0 0 20px; }

/* ------------------------------------------------------------------
   Player. The poster fills the box; the UI sits on top. Nothing loads
   until the click, so this is an <img> and not an iframe.
   ------------------------------------------------------------------ */
.player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0e0e0e;
	overflow: hidden;
	cursor: pointer;
}

.player > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .6, .2, 1),
	            opacity .4s ease;
}

.player:hover > img,
.player:focus-visible > img { transform: scale(1.014); opacity: .88; }

.player.is-locked { cursor: default; }
.player.is-locked > img { opacity: .5; }

.player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.player-ui {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	pointer-events: none;
}

.play { color: #fff; opacity: .92; transition: color .25s ease, transform .25s ease; }
.play svg { display: block; }
.player:hover .play,
.player:focus-visible .play { color: var(--yellow); transform: scale(1.06); }

.cap {
	margin: 0;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}

/* ------------------------------------------------------------------
   The line under the player
   ------------------------------------------------------------------ */
.under {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 22px;
	margin: 0;
	font-size: 15px;
}

.soon { color: var(--muted); }

.go {
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid var(--yellow);
	padding-bottom: 1px;
	transition: color .2s ease;
}

.go span { display: inline-block; transition: transform .2s ease; }
.go:hover span { transform: translateX(3px); }

/* ------------------------------------------------------------------
   Teaser — only rendered before launch, and deliberately smaller than
   the feature so it never competes with it.
   ------------------------------------------------------------------ */
.teaser {
	margin-top: 72px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
	max-width: 620px;
}

.teaser h2 {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--grey);
}

/* ------------------------------------------------------------------
   A player with no poster. Not an error state — a deliberate dark
   panel carrying the play button, so a new episode can go up before
   anyone has cut a still for it.
   ------------------------------------------------------------------ */
.player.is-blank { background: #101010; }

/* ------------------------------------------------------------------
   Catalogue — no markup at all until inc/config.php has films in it.
   ------------------------------------------------------------------ */
.catalogue {
	padding: 0 0 96px;
}

.catalogue h2 {
	margin: 0 0 32px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--grey);
}

.grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 44px 32px;
	/* A max as well as a min: with one entry the card stays a sensible
	   size and sits left, instead of stretching to the full column. */
	grid-template-columns: repeat(auto-fit, minmax(300px, 440px));
	justify-content: start;
}

.grid img,
.grid .player { margin-bottom: 16px; }

/* The feature player owns the page; these are supporting. */
.grid .play svg { width: 48px; height: 48px; }

.grid h3 {
	margin: 0 0 4px;
	font-size: 1.15rem;
	letter-spacing: -.012em;
}

.grid h3 a { text-decoration: none; border-bottom: 2px solid var(--yellow); }

.grid p { margin: 0; }
.grid .meta { margin-bottom: 6px; }

/* ------------------------------------------------------------------
   Foot
   ------------------------------------------------------------------ */
.foot {
	padding: 36px 0 64px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}

.foot p { margin: 0 0 6px; }
.foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot a:hover { border-bottom-color: var(--yellow); }
.ways span { padding: 0 4px; color: var(--line); }

/* ------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------ */
@media (max-width: 640px) {
	.masthead { padding-top: 36px; }
	.mark img { width: 132px; }
	.feature { padding: 48px 0 64px; }
	.play svg { width: 52px; height: 52px; }
	.teaser { margin-top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	.player > img, .play, .go span { transition: none; }
	.player:hover > img { transform: none; }
}