/**
 * This is the main CSS for cinescape.com. Refer to theme files for specific design variations.
 * Version: 2.4
 * 
 * Table of Contents:
 * 
 *    0 - Definitions
 *    1 - CSS Reset
 *    2 - Background Fix
 *    3 - Global Styles
 *    4 - Chrome
 *    5 - Articles (Newsletters, Privacy Policy, etc.)
 *    6 - Pages
 *        6.1 - Home Page
 *        6.2 - Table of Contents and Index
 *        6.3 - Privacy Policy
 */


/**
 * 0 - Definitions
 */

:root
{
	--color-background: white;
	--color-highlight-default-background: black;
	--color-highlight-hover-background: white;
	--color-highlight-text: white;
	--color-text: black;
	
	--size-font: 25px; /* NEW 25px OLD 20px */
	--size-line: 0.1rem; /* NEW 0.1rem OLD 0.12rem */
	--size-radius: 0.25rem; /* NEW 0.25rem OLD 0.2rem */
	--size-spacer: 1rem; /* NEW 1rem OLD 1.5rem */
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Book.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Book.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Book-Oblique.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Book-Oblique.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face
{
	font-family: 'FuturaPT';
	src:
		url('/assets/fonts/Futura-PT_Bold.woff2') format('woff2'),
		url('/assets/fonts/Futura-PT_Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}


/**
 * 1 - CSS Reset
 */

*,
*:after,
*:before
{
	/* Applies a natural box layout model to all elements. */
	-moz-box-sizing: border-box; /* Firefox ≤ 28 */
	-webkit-box-sizing: border-box; /* Android ≤ 3, iOS ≤ 4.3 */
	box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5+ */
}

[hidden], /* Addresses [hidden] styling not present in IE 8/9/10 */
template /* Hides the template element in IE 8/9/11, Safari, and Firefox < 22 */
{
	display: none;
}

article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
main,
nav,
ruby,
section,
summary
{
	display: block;
}

button, /* Corrects the inability to style clickable types in iOS and Safari */
[type="button"],
[type="reset"],
[type="submit"]
{
	-webkit-appearance: button;
}

html
{
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* Prevents adjustments of font size after orientation changes in iOS */
	overflow-y: scroll; /* Forces persistent scrollbars */
}


/**
 * 2 - Background Fix
 * Note: "background-attachment: fixed" does not work in mobile browsers
 */

div#theme
{
	background: var(--color-background);
	background-repeat: no-repeat;
	background-position: center;
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: -1;
}

div#content
{
	padding: var(--size-spacer);
	position: absolute;
	width: 100%;
}


/**
 * 3 - Global Styles
 */

html
{
	font-size: var(--size-font);
	line-height: 1.5;
}

body
{
	color: var(--color-text);
	font-family: FuturaPT, Futura, sans-serif;
	margin: 0;
}

a
{
	color: var(--color-text);
	text-decoration-color: var(--color-highlight-default-background);
	text-underline-offset: var(--size-line);
}

a:hover
{
	text-decoration-color: var(--color-highlight-hover-background);
}

abbr
{
	/* To make "AI" more legible typographically */
	font-family: monospace;
	font-size: calc(var(--size-font) * 0.8);
}

article section h1 span
{
	margin-right: 0.25rem;
	text-decoration: underline;
	text-decoration-thickness: var(--size-line);
	text-underline-offset: 0.125rem;
}

article section h2
{
	font-size: 0.75rem;
	text-decoration: underline;
	text-decoration-thickness: var(--size-line);
	text-transform: uppercase;
	text-underline-offset: 0.125rem;
}

article section figure + h2
{
	margin-top: var(--size-spacer);
}

article section h3
{
	font-size: 0.75rem;
}

aside
{
	font-style: italic;
	text-align: center;
}

figure + aside
{
	margin-top: var(--size-spacer);
}

aside:before
{
	content: '﹒ • ◉ • ﹒';
	display: block;
	font-style: normal;
	text-align: center;
}

figure
{
	background-color: var(--color-highlight-default-background);
	border-radius: var(--size-radius);
	font-size: 0.75rem;
	margin: 0 0 0 -0.5rem;
	padding: calc(var(--size-line) * 3);
	width: calc(100% + 1rem);
}

figure + figure
{
	margin-top: var(--size-spacer);
}

main:not(#home) a figure figcaption::after
{
	content: '❐';
	margin: 0 0 0 0.5rem;
}

a:hover figure
{
	background-color: var(--color-highlight-hover-background);
}

a:hover figure figcaption
{
	color: var(--color-text);
}

figure img
{
	border-radius: var(--size-radius);
	display: block;
	width: 100%;
}

figure figcaption
{
	color: var(--color-highlight-text);
	font-size: 0.75rem;
	padding: 0.25rem 0.25rem 0 0.25rem;
	text-align: left;
}

figure figcaption a
{
	color: var(--color-highlight-text);
	text-decoration-color: var(--color-highlight-text);
}

figure figcaption a:hover
{
	text-decoration: none;
}

figure img
{
	border-radius: var(--size-radius);
	display: block;
	width: 100%;
}

hr
{
	border: 0;
}

hr:before
{
	color: var(--color-text);
	content: '﹒ • ◉ • ﹒';
	display: block;
	text-align: center;
}

nav
{
	display: flex;
	flex-direction: column;
	gap: var(--size-spacer);
	
	border-top: 1px solid var(--color-highlight-default-background);
	font-weight: bold;
	padding-top: var(--size-spacer);
}

main#home nav
{
	border: 0;
	padding: 0;
}

nav span
{
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
}


/**
 * 4 - Chrome
 */

main
{
	display: flex;
	flex-direction: column;
	gap: var(--size-spacer);
}

main > header
{
	font-size: 0.75rem;
	text-align: center;
}

main > header a, /* Logo */
form input, /* Sign Up email */
form button /* Sign Up button */
{
	border: var(--size-line) solid black;
	border-radius: var(--size-radius);
	font-size: 0.75rem;
	padding: 0.75rem 1rem;
}

main > header a, /* Logo */
form button /* Sign Up button */
{
	background-color: black;
	color: white;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}

main > header a /* Logo */
{
	display: inline-block;
	margin-bottom: var(--size-spacer);
}

main > header a:hover, /* Logo */
form button:hover /* Sign Up button */
{
	background-color: white;
	color: black;
}

footer
{
	font-size: 0.7rem;
	line-height: 2.25;
	text-align: center;
}

footer p
{
	margin: 0;
}

footer p#browse a
{
	font-weight: bold;
}

form
{
	border-top: 1px solid var(--color-highlight-default-background);
	padding-top: var(--size-spacer);
	text-align: center;
}

main#home form,
main#newsletters form
{
	border: 0;
	padding: 0;
}

form button /* Sign Up button */
{
	cursor: pointer;
	display: block;
	font-family: inherit;
	margin: 0 auto;
}

form h1
{
	font-size: 1.25rem;
	margin: 0;
}

form input /* Sign Up email */
{
	background-color: white;
	display: block;
	font-family: inherit;
	margin: 0 auto var(--size-spacer) auto;
	outline: none;
	text-align: center;
}

form p
{
	margin: 0 0 var(--size-spacer) 0;
}

main:after
{
	content: '﹒ • ◉ • ﹒';
	display: block;
	font-style: normal;
	text-align: center;
}

@media (min-width: 600px)
{
	form button,
	form input
	{
		display: inline-block;
	}
	
	form input
	{
		margin-bottom: 0;
		margin-right: var(--size-spacer);
		text-align: left;
	}
	
	main
	{
		padding: calc(var(--size-spacer) * 4) var(--size-spacer) 0 var(--size-spacer);
	}
	
	main#error,
	main#home,
	main#newsletter,
	main#privacy,
	main#subscriber
	{
		margin: 0 auto;
		max-width: 28rem;
	}
	
	main > header
	{
		left: var(--size-spacer);
		position: fixed;
		top: var(--size-spacer);
		z-index: 200;
	}
	
	main > header a
	{
		margin-right: var(--size-spacer);
	}
	
	main > header div
	{
		display: inline;
	}
}

@media (min-width: 1000px)
{
	main:not(#home) form
	{
		margin-bottom: calc(-1 * var(--size-spacer));
	}
	
	main:not(#home) form div
	{
		position: fixed;
		right: var(--size-spacer);
		top: var(--size-spacer);
		z-index: 200;
	}
	
	main:not(#home) form input
	{
		background-color: transparent;
	}
	
	main:not(#home) form input::placeholder
	{
		color: var(--color-text);
	}
	
	main:not(#home) form input:focus,
	main:not(#home) form input:hover,
	main:not(#home) form input:not(:placeholder-shown)
	{
		background-color: white;
	}
	
	main:not(#home) footer
	{
		bottom: calc(var(--size-spacer) / 2);
		position: fixed;
		right: var(--size-spacer);
		text-align: right;
		z-index: 200;
	}
}


/**
 * 5 - Articles
 */

article blockquote
{
	margin: 0 0 var(--size-spacer) -0.5rem;
	padding: 0 0 0 calc(var(--size-spacer) * 1.25);
	position: relative;
	z-index: 100;
}

article blockquote:before
{
	background-color: black;
	border-radius: var(--size-radius);
	content: '';
	display: block;
	height: 100%;
	left: 0.25rem;
	position: absolute;
	top: 0;
	width: calc(var(--size-line) * 3);
}

article header
{
	text-align: center;
}

article header h1
{
	margin: 0;
	text-decoration: underline;
	text-underline-offset: 0.125rem;
}

article header p#subhead
{
	font-weight: bold;
	margin: calc(var(--size-spacer) / 3) 0 0 0;
}

article header p#dateline
{
	font-style: italic;
	margin: calc(var(--size-spacer) / 3) 0 0 0;
}

/*
article section h1:not(:first-child)
{
	margin-top: 3rem;
}

main:not(#privacy) article section h1:last-of-type
{
	margin-top: revert;
}

*/


/**
 * 6.1 - Home Page
 */

main#home
{
	text-align: center;
}


/**
 * 6.2 - Table of Contents and Index
 */

div#archives
{
	font-size: 0.75rem;
	margin: 0 -0.5rem;
}

div#archives p
{
	font-size: 1rem;
	margin-top: 0;
	padding: 0 0.5rem;
}

div#archives *:last-child
{
	border-radius: 0 0 var(--size-radius) var(--size-radius);
}

div#archives article
{
	border-bottom: var(--size-line) solid var(--color-highlight-default-background);
	font-family: Courier, monospace;
	margin: 0;
}

div#archives article:last-child
{
	border-bottom: 0;
}

div#archives article:hover
{
	background-color: white;
	color: black;
}

div#archives article a
{
	display: flex;
	padding: 0.25rem 0.5rem;
	text-decoration: none;
}

div#archives article a span
{
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 0.25rem;
}

div#archives article a span cite
{
	display: block;
	font-style: italic;
	font-weight: normal;
}

div#archives dl
{
	border-bottom: var(--size-line) solid var(--color-highlight-default-background);
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	margin: 0;
	padding: 0.25rem 0.5rem;
}

div#archives dl:hover
{
	background-color: white;
	color: black;
}

div#archives dl:last-child
{
	border-bottom: 0;
}

div#archives dl dt
{
	font-weight: bold;
}

div#archives dl dd
{
	display: flex;
	font-style: italic;
	margin: 0 0 0 0.5rem;
}

div#archives dl dd span
{
	font-family: Courier, monospace;
	font-style: normal;
	margin-right: 0.25rem;
}

div#archives h1
{
	background-color: var(--color-highlight-default-background);
	border-radius: var(--size-radius) var(--size-radius) 0 0;
	color: var(--color-highlight-text);
	font-size: 0.75rem;
	margin: 0;
	padding: 0.25rem 0.5rem;
	text-transform: uppercase;
	
	position: sticky;
	top: calc(var(--size-spacer) / 2);
}

div#archives h2
{
	background-color: var(--color-highlight-default-background);
	color: var(--color-highlight-text);
	font-size: 0.75rem;
	margin: 0.1rem 0 0 0;
	padding: 0.25rem 0.5rem;
	
	position: sticky;
	top: calc(1.725rem + (var(--size-spacer) / 2));
}

@media (min-width: 600px)
{
	div#archives h1
	{
		position: static;
	}
	
	div#archives h2
	{
		position: static;
	}
}


/**
 * 6.3 - Privacy Policy
 */

main#privacy address
{
	margin-left: 1.5rem;
}

main#privacy table
{
	border: var(--size-line) solid var(--color-highlight-default-background);
	border-collapse: collapse;
	font-size: 0.7rem;
	margin-bottom: calc(var(--size-spacer) * 2);
	text-align: left;
	width: 100%;
}

main#privacy table tr td,
main#privacy table tr th
{
	border: var(--size-line) solid var(--color-text);
	padding: 0.2rem 0.4rem;
	vertical-align: top;
}

main#privacy table tr th
{
	background-color: var(--color-highlight-default-background);
	color: var(--color-highlight-text);
	min-width: 5rem;
	width: 20%;
}