/* ------------------------------------------------------------------------------------------
   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;
	/* Light at the top, just enough to keep the logo and nav legible, then as close to clear
	   as it gets through the middle. The fade to the page colour starts around halfway and
	   is spread over the rest, so the video resolves into the page instead of dropping into
	   it. It has to reach the page colour exactly at 100% or there is a seam at the join. */
	background:
		linear-gradient(to bottom,
			rgba(18, 18, 20, 0.45) 0%,
			rgba(18, 18, 20, 0.04) 26%,
			rgba(18, 18, 20, 0.04) 44%,
			rgba(18, 18, 20, 0.16) 60%,
			rgba(18, 18, 20, 0.40) 76%,
			rgba(18, 18, 20, 0.72) 90%,
			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);
}

/* The text carries its own shadow rather than leaning on the scrim, so the gradient can stay
   light without the headline falling into a bright frame of the video behind it. */
.hero-text h1
{
	margin: 0 0 var(--s2);
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

.hero-text p
{
	margin: 0;
	max-width: 640px;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: #c9c6bf;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* ---- Sections --------------------------------------------------------------------------- */
.section
{
	padding: var(--s4) 0 var(--s3);
}

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

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

.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(--s3) 0 var(--s2);
	}

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

/* ---- Document pages ------------------------------------------------------------------------
   Privacy, terms, and the deletion policy. Same shell as the home page, but with a solid bar
   in place of the hero and a narrow measure, because legal text is read rather than scanned. */
.topbar
{
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.topbar .nav
{
	padding-top: var(--s2);
	padding-bottom: var(--s2);
}

.doc
{
	padding: var(--s4) 0 var(--s3);
}

.doc-inner
{
	max-width: 1020px;
	margin: 0 auto;
}

.doc h1
{
	margin: 0 0 var(--s1);
	font-size: clamp(1.7rem, 3.4vw, 2.2rem);
	letter-spacing: 0.5px;
}

.doc .updated
{
	margin: 0 0 var(--s4);
	padding-bottom: var(--s3);
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.88rem;
}

/* A longer line height and a dimmer body than the cards use: this is dense text that someone
   may actually have to read through. */
.prose
{
	font-size: 1rem;
	line-height: 1.8;
	color: #d6d4ce;
}

/* The breaks that used to sit before each heading are gone, so this margin is now the whole
   gap between one section and the next rather than an addition to it. */
.prose h2
{
	margin: var(--s3) 0 var(--s1);
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: var(--text);
}

.prose h2:first-child
{
	margin-top: 0;
}

/* Bold that is not a heading, such as the summary block or an emphasised address. */
.prose b
{
	color: var(--text);
}

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

.doc-nav
{
	margin-top: var(--s5);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	font-size: 0.9rem;
}

@media (max-width: 760px)
{
	.doc
	{
		padding-top: var(--s4);
	}

	.prose
	{
		font-size: 0.95rem;
		line-height: 1.75;
	}
}