/* cineviv — one layout for cineviv.com and cineviv.com/weatherbox.
   The page is exactly one viewport tall on every device: type and spacing
   scale with the smaller of width and height, so nothing ever scrolls. */

@font-face {
	font-family: 'u_DIN';
	src: url('/assets/fonts/uDIN1451Mittelschrift.ttf?v=6') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

:root {
	--white: #ffffff;
	--text: #e5e5e5;
	--muted: #7f7f7f;
	--grey: #636363;

	/* one type scale: the width sets it, the height caps it (K = the page's
	   height in rem), so both pages fit one screen on every device */
	--k: 40;
	font-size: 15px;
	font-size: clamp(10px, min(calc(14.5px + 0.3vw), calc(100vh / var(--k))), 18px);
	font-size: clamp(10px, min(calc(14.5px + 0.3vw), calc(100dvh / var(--k))), 18px);

	--pad-y: clamp(1.25rem, 6vh, 4.5rem);
	--pad-y: clamp(1.25rem, 6dvh, 4.5rem);
	--pad-x: clamp(1.5rem, 6vw, 4.5rem);
	--gap: 1.6rem;
	--logo: clamp(24px, min(7vw, 6.5vh), 50px);
	--logo: clamp(24px, min(7vw, 6.5dvh), 50px);
}

*, *::before, *::after {
	box-sizing: border-box;
	text-transform: lowercase !important;
	font-family: 'u_DIN', sans-serif !important;
}

html, body {
	margin: 0;
	padding: 0;
	background: #000000;
}

body {
	color: var(--muted);
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: -0.01em;
	height: 100vh;
	height: 100dvh;
	padding: var(--pad-y) var(--pad-x);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--gap);
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* logo — the square mark and the weatherbox wordmark share one height */
.logo {
	flex: none;
	display: block;
	height: var(--logo);
	line-height: 0;
}

.logo a {
	display: inline-block;
	height: 100%;
}

.logo svg {
	display: block;
	height: 100%;
	width: auto;
}

.logo-path {
	animation: color-cycle 60s linear infinite;
	stroke: none;
}

@keyframes color-cycle {
	0% { fill: hsl(0, 100%, 50%); }
	20% { fill: hsl(72, 100%, 50%); }
	40% { fill: hsl(144, 100%, 50%); }
	60% { fill: hsl(216, 100%, 50%); }
	80% { fill: hsl(288, 100%, 50%); }
	100% { fill: hsl(360, 100%, 50%); }
}

/* main's blocks join the body's column, so the free height is shared
   evenly between every block, logo included */
main {
	display: contents;
}

main > * {
	max-width: 48rem;
}

.tagline {
	margin: 0;
	font-size: 1.3rem;
	font-weight: normal;
	line-height: 1.35;
	color: var(--text);
	border-left: 2px solid var(--grey);
	padding-left: 1.25rem;
}

/* the tagline is always two lines, one per span */
.tagline span {
	display: block;
	white-space: nowrap;
}

h2 {
	margin: 0 0 0.75rem 0;
	font-size: 1.05rem;
	font-weight: normal;
	color: var(--grey);
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* list rows: name — description, flowing as one line of text that wraps */
.rows li {
	padding: 0.5rem 0;
	font-size: 1.05rem;
}

.rows li:first-child {
	padding-top: 0;
}

.name {
	color: var(--white);
	white-space: nowrap;
}

.inline a {
	white-space: nowrap;
}

.desc {
	display: block;
	margin-top: 0.1rem;
}

/* inline rows of links (download, contact, footer) */
.inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.6rem;
	font-size: 1.05rem;
	color: var(--text);
}


a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

a.name {
	color: var(--white);
}

a:hover {
	color: var(--white);
	border-bottom-color: var(--white);
}

.logo a,
.logo a:hover {
	border-bottom: 0;
}

a:focus-visible {
	outline: 1px solid var(--text);
	outline-offset: 3px;
	border-bottom-color: transparent;
}

/* phones held sideways: too short for stacked rows, wide enough for one line */
@media (orientation: landscape) and (max-height: 480px) {
	:root { --gap: 1rem; }
	.rows li { padding: 0.3rem 0; }
	.desc { display: inline; margin: 0 0 0 1.2em; }
}

@media (prefers-reduced-motion: reduce) {
	.logo-path { animation: none; fill: #F04A00; }
	a { transition: none; }
}