:root {
--radius: 8px;
--side-spacing: 20px;
--gap-spacing: 10px;
--gap-spacing-sm: 4px;

--dark-spacing: calc( var(--side-spacing) * 2 + var(--gap-spacing));
--page-max-width: calc( 1800px - var(--dark-spacing) );

--color-default: rgb(219,219,219);
--color-default-enhanced: rgb(223,234,238);
--color-default-subdued: rgb(161,161,160);
--background-default: #0e0e0e;
--overlay-gradient-1: rgb(23,22,18,0.88);
--overlay-gradient-2: rgb(23,22,18,0.62);
--overlay-gradient-3: rgb(20,22,21,0.22);
--overlay-gradient-4: rgb(20,22,21,0.18);

--button-thickness: 3px;
}

* { font-family:Verdana, Geneva, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-sizing:border-box; padding:0; margin:0; }

html, body { margin:0; height:100%; }

body { font-family: sans-serif; display:grid; background:var(--background-default); background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment:fixed;
	grid-template:	minmax(var(--side-spacing),2fr) auto minmax(var(--side-spacing),2fr) auto minmax(var(--side-spacing),5fr) auto /
					minmax(var(--side-spacing),1fr) auto minmax(var(--side-spacing),1fr);
	background-image: linear-gradient(to right,var(--overlay-gradient-1) 35%, var(--overlay-gradient-2) 75%, var(--overlay-gradient-3) 95%, var(--overlay-gradient-4)), url(background.jpg);
}

header, main, footer  { width:70vw; max-width:var(--page-max-width); grid-column:2/3; color:var(--color-default); }

header { grid-row:2/3; min-height:26vh; }

main { grid-row:4/5; min-height:46vh; }

footer { grid-row:6/7; }

h1, h2 { font-weight:300; }
p { margin:0; }

header .logo			{ display:grid; grid-template-rows:1fr auto; grid-template-columns:auto 1fr; gap:var(--gap-spacing-sm); justify-items:center;
				& > *		{ grid-column:1/2; } }
header .logo .brand		{ font-size:var(--brand-size,4em); letter-spacing:var(--brand-letter-spacing,3px); word-spacing:var(--brand-word-spacing,4px); color:var(--color-default-enhanced); }
header .logo .tag		{ font-size:var(--tag-size,0.9em); }

main .under				{ display:grid; height:100%; grid-template-rows:auto auto auto auto 1fr auto; gap:var(--gap-spacing-sm); }
main .under .notice		{ font-size:2.4em; font-style:italic; letter-spacing:0.5px; color:var(--color-default-subdued);}
main .under .context	{ font-size:var(--font-size,1.1em); width:max(300px,70%); }
main .under .intro		{ padding:calc(var(--gap-spacing) * 3) 0 0; }
main .under .interlude	{ padding:calc(var(--gap-spacing) * 2) 0; padding-left:calc(var(--gap-spacing) * 4);
				& > li	{ text-align:left; } }
main .under .outro		{  }

main .under .cta		{ font-size:1.1em; grid-row:6/7; font-variant:small-caps; text-align:right;
				& > a		{ border:var(--button-thickness) solid var(--color-default); border-radius:var(--radius);
							color:var(--color-default); font-size:var(--font-size-cta,1.4em); cursor:pointer; text-decoration:none; transition:background 0.18s;
							padding:calc(var(--gap-spacing) * 1.65) calc(var(--gap-spacing) * 2.15);
							background-color:rgba(120,120,120,0.25);
							&:hover { background-color:rgba(0,0,0,0.20); border-color:var(--color-default-enhanced); }
							}
						}
footer .shout-out-cc { text-align:center; font-size: 0.9em; line-height:1.2em; letter-spacing:-1px; color:var(--color-default-subdued); padding:var(--gap-spacing);
					   background: radial-gradient(
					     ellipse at center,
					     rgba(0,0,0,0.4) 0%,     /* dark center */
					     rgba(0,0,0,0.25) 0.15em, /* blur start */
					     rgba(0,0,0,0.0) 40%     /* fade out */
					   );
				& a			{ color:var(--color-default);
					&:hover	{ color:var(--color-default-subdued); } }
					 }

@media (width < 1080px) {
	main .under .cta { text-align:center; }
	main .under .cta  > a { --button-thickness:2px; }
}
@media (width < 800px) {
	header, main, footer  { width:85vw; }
	header { min-height:24vh; }
	main { min-height:50vh; }
}
@media (width < 660px) {
	header, main, footer  { width:92vw; }
	header { min-height:22vh; }
	main { min-height:54vh; }
	header .logo { grid-template-columns:1fr; }
	main .under .context { width:100%; }
	footer .shout-out-cc { letter-spacing:0px; line-height:1.3em; }
}

.phrase { white-space:nowrap; }