/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	font: 12pt/1.45 Verdana, sans-serif;
}

body {
	display: grid;
	grid-auto-columns: min-content auto;
	grid-auto-rows: auto 1fr auto;
	column-gap: 1lh;
	
	color: #333;
	font-size-adjust: ex-height 0.5;
	
	min-block-size: 100dvb;
	
	box-sizing: border-box;
	padding: 1lh;
	margin: unset;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Big Caslon", serif;
	font-weight: 400;
	text-wrap: balance;
	line-height: 2rlh;
	margin-block: 0.75lh 0.25lh;
}

h1 {font-size: 1.6em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}

p {
	hyphens: auto;
	margin: unset;
	
	& + p {
		text-indent: 1.5lh;
	}
}

article :is(p, ul:not(li ul), ol:not(li ol), blockquote) {
	inline-size: clamp(0ch, 100%, 66ch);
}

blockquote {
	box-sizing: border-box;
	margin-block: 1lh;
	margin-inline: unset;
	padding-inline: 1.5lh 0;
}

body > header {
	grid-column: 1;
	grid-row: 1 / span 3;
	border-inline-end: 1px solid;
	padding-inline-end: 0.5lh;
}

article header {
	margin-block-end: 1lh;
}

main, nav, body > footer {
	grid-column: 2;
}

nav {
	grid-row: 1;
}

main {
	grid-row: 2;
}

body > footer {
	grid-row: 3;
}

nav {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
}

a {
	text-underline-offset: 0.1lh;
	color: inherit;
}