/* ------------------------------------------------------------------------------------------
   Studio Vykanic - one page site.

   Self contained: the home page loads only this file. main5.css still serves the legal pages,
   so nothing here can disturb them and nothing there constrains this.

   The layout is a uniform card grid. Every project gets the same shape of card and the media
   is locked to 16:9, which is what keeps rows level - the previous version let each clip set
   its own height, so neighbouring entries never lined up.
   ------------------------------------------------------------------------------------------ */

:root
{
	--bg:          #121214;
	--surface:     #1a1a1e;
	--surface-hi:  #212128;
	--line:        rgba(255, 255, 255, 0.09);
	--line-hi:     rgba(218, 210, 125, 0.45);
	--text:        #e9e7e2;
	--muted:       #9b988f;
	--accent:      #dad27d;

	--radius: 10px;
	--max: 1180px;

	--s1: 8px;
	--s2: 16px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	--s6: 96px;
}

*
{
	box-sizing: border-box;
}

html
{
	scroll-behavior: smooth;
}

body
{
	margin: 0;
	background-color: var(--bg);
	color: var(--text);
	font-family: "Niramit", system-ui, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a:hover
{
	text-decoration: underline;
}

.wrap
{
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--s3);
}

/* ---- Header and hero ---------------------------------------------------------------------
   The necromancer clip stays the first thing on the page. A gradient sits over its lower half
   so the logo and the nav keep contrast against whatever frame happens to be playing, and so
   the video resolves into the page background instead of stopping at a hard edge. */
.hero
{
	position: relative;
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hero-video
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero-shade
{
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom,
			rgba(18, 18, 20, 0.72) 0%,
			rgba(18, 18, 20, 0.15) 32%,
			rgba(18, 18, 20, 0.55) 72%,
			var(--bg) 100%);
}

.nav
{
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: var(--s3);
}

.nav-logo
{
	height: 62px;
	width: auto;
	display: block;
}

.nav-links
{
	display: flex;
	gap: var(--s4);
}

.nav-links a
{
	color: var(--text);
	font-size: 0.95rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.nav-links a:hover
{
	color: var(--accent);
	border-bottom-color: var(--accent);
	text-decoration: none;
}

/* The menu toggle is a checkbox so the nav works with scripting off. */
.nav-toggle,
.nav-burger
{
	display: none;
}

.hero-text
{
	position: relative;
	z-index: 2;
	margin-top: auto;
	width: 100%;
	max-width: var(--max);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--s3) var(--s5);
}

.hero-text h1
{
	margin: 0 0 var(--s2);
	font-size: clamp(1.9rem, 4.5vw, 3.1rem);
	line-height: 1.15;
	letter-spacing: 1px;
}

.hero-text p
{
	margin: 0;
	max-width: 640px;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: var(--muted);
}

/* ---- Sections --------------------------------------------------------------------------- */
.section
{
	padding: var(--s6) 0 var(--s5);
}

.section + .section
{
	padding-top: var(--s4);
}

.section-head
{
	display: flex;
	align-items: baseline;
	gap: var(--s3);
	margin-bottom: var(--s4);
}

.section-head h2
{
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--text);
	white-space: nowrap;
}

/* A rule that runs to the end of the row, so the heading reads as a divider rather than as a
   floating label. */
.section-head::after
{
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--line);
}

/* ---- Card grid ---------------------------------------------------------------------------
   auto-fit with a minimum means the column count follows the width on its own, so there is no
   breakpoint to maintain: two up for works on a desktop, four up for the smaller jam cards,
   one up on a phone. */
.grid
{
	display: grid;
	gap: var(--s3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.grid--small
{
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

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

.card:hover
{
	transform: translateY(-3px);
	border-color: var(--line-hi);
	background: var(--surface-hi);
}

/* Locked ratio. Every clip is cropped to the same shape, so cards in a row are always level
   whatever the source footage happens to be. */
.card-media
{
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0d0d0f;
	border-bottom: 1px solid var(--line);
}

.card-media video
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* For an entry whose capture does not exist yet. Deliberately plain, so an empty slot reads as
   "not filmed" rather than as a broken video element. */
.card-media--soon
{
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6a675f;
	font-size: 0.9rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	background:
		repeating-linear-gradient(135deg,
			#141416 0 10px,
			#17171a 10px 20px);
}

.card-body
{
	padding: var(--s3);
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	flex: 1 1 auto;
}

.card-body h3
{
	margin: 0;
	font-size: 1.15rem;
	letter-spacing: 0.4px;
}

.grid--small .card-body h3
{
	font-size: 1rem;
}

.card-body p
{
	margin: 0;
	color: var(--muted);
	font-size: 0.97rem;
	line-height: 1.55;
}

.grid--small .card-body p
{
	font-size: 0.9rem;
}

.card-tag
{
	align-self: flex-start;
	font-size: 0.72rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid var(--line-hi);
	border-radius: 99px;
	padding: 2px 10px;
	margin-bottom: var(--s1);
}

.card-links
{
	margin-top: auto;
	padding-top: var(--s2);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
}

.card-links a
{
	font-size: 0.9rem;
	letter-spacing: 0.6px;
}

/* ---- Contact ---------------------------------------------------------------------------- */
.contact-list
{
	display: grid;
	gap: var(--s2);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.contact-item
{
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--s3);
	background: var(--surface);
}

.contact-item span
{
	display: block;
	font-size: 0.75rem;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}

.contact-item a
{
	font-size: 1rem;
	word-break: break-word;
}

/* ---- Footer ------------------------------------------------------------------------------ */
.footer
{
	border-top: 1px solid var(--line);
	margin-top: var(--s5);
	padding: var(--s4) 0;
	text-align: center;
	color: var(--muted);
	font-size: 0.88rem;
}

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

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

.footer-sep
{
	margin: 0 var(--s2);
	opacity: 0.4;
}

/* ---- Phone -------------------------------------------------------------------------------
   The grid collapses by itself, so this only has to deal with the nav and with trimming the
   generous desktop spacing. */
@media (max-width: 760px)
{
	:root
	{
		--s5: 44px;
		--s6: 56px;
	}

	.hero
	{
		min-height: 62vh;
	}

	.nav
	{
		padding: var(--s2);
		flex-wrap: wrap;
	}

	.nav-logo
	{
		height: 44px;
	}

	.nav-burger
	{
		display: block;
		cursor: pointer;
		width: 28px;
		height: 20px;
		position: relative;
	}

	.nav-burger span,
	.nav-burger span::before,
	.nav-burger span::after
	{
		content: "";
		position: absolute;
		left: 0;
		width: 28px;
		height: 2px;
		background: var(--text);
		transition: transform 0.2s ease;
	}

	.nav-burger span
	{
		top: 9px;
	}

	.nav-burger span::before
	{
		top: -8px;
	}

	.nav-burger span::after
	{
		top: 8px;
	}

	.nav-links
	{
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		gap: var(--s2);
		padding-top: var(--s2);
	}

	.nav-toggle:checked ~ .nav-links
	{
		display: flex;
	}

	.hero-text
	{
		padding-bottom: var(--s4);
	}

	.section
	{
		padding: var(--s6) 0 var(--s4);
	}

	.card-body
	{
		padding: var(--s2) var(--s3) var(--s3);
	}
}