/*

v0.14
- conversion therapy for links
- slight on-hover color change
- styling for bottom navigation (prev/next)
- added truncating for long article titles (mostly for mobile)
- article h1s on home page are now links but don't have link styling

v0.13:
- moved background image style to HTML head to prevent flickering on page change
- new much more data-efficient background image

v0.12:
- preview wavy links again
- maybe fixed them? (edit: did not fix them)
- slightly knocked down saturation on answer color

v0.11:
- put back the portrait spacing
- new answer colour?

v0.10 changes:
- added wavy underline back to link hover
- not much else really

v0.9 changes:
- responsive sizing + mobile mode
- removed "spacing" outside portrait (now the box-shadow touches the portrait directly)
- link styling: permanent straight underline
- ok just removed post title letter spacing, lol

v0.8 changes:
- more link styling
- reduced text spacing for titles
- styling for clues and answers
- mobile improvements (posts need work, avatars may need repositioned)
- lower case
- slightly increased line spacing in article

v0.7 changes:
- reduce corner rounding
- link styling + a tiny bit for post titles
- styling for non-skep/sorbier titles (c.f. about page)
- tone down the background colour

v0.6 changes:
- Colors, colors, colors

*/

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');
:root {
	--main-width: 50rem;
	--portrait-width: clamp(5%, 10%, 5rem);
	--space: clamp(8px, 2.5vw, 2rem);
	--half-space: calc(0.5*var(--space));
	--quarter-space: calc(0.25*var(--space));
	--radius: 8px;
	--portrait-spacing: calc(0.5*var(--space));
	--background-image: url('/images/style/grid.png');
	--background: hsl(216, 40%, 44%);
	--mediumground: hsl(210, 95%, 94%);
	--foreground: #fffffe;
	--text: rgb(25%, 25%, 25%);
	--text-answer: hsl(305, 78%, 60%);
	--clue-highlight: #f2f2f2;
	--link: hsl(216, 85%, 45%);
	--skep: hsl(43.71, 100%, 54.51%);
	--portrait-skep: url('/images/style/skep.png');
	--sorbier: hsl(255, 65%, 83%);
	--portrait-sorbier: linear-gradient(to top left, var(--mediumground) 25%, var(--sorbier) 25%, var(--mediumground) 50%, var(--sorbier) 50%, var(--mediumground) 95%);
	--text-font: Cabin, sans-serif;
	--post-title-font: var(--text-font);
	--accent-font: Caveat, cursive;
	--tagline-font: monospace;
}

/* layout */

feed, html {
	scroll-behavior: smooth;
	font-size: max(1em, 14pt);
	line-height: 1.5;
}
feed, body { max-width: var(--main-width); }
body {
	min-height: 100vh;
	box-sizing: border-box;
}
header { user-select: none; }
nav, footer { text-align: center; }
p#tagline, nav { text-align: right; }
img { max-width: 100%; }

/* spacing */

feed, body {
	margin: 0 auto;
	padding: var(--half-space) var(--space);
}
h1#title, nav, footer, article { border-radius: var(--radius); }
footer { padding: var(--half-space); }
h1#title { padding: var(--half-space) var(--half-space) var(--half-space) 0; }
nav { padding: var(--half-space) 0;}
h1#title { margin: 0 auto; }
p#tagline { margin: 0 0 0 auto; }
nav { margin-bottom: var(--space); }
article {
	padding: 0 var(--space);
	margin-bottom: var(--space);
}
article h1 {
	margin: 0 calc(-1*var(--space));
	padding: var(--quarter-space) var(--space);
}
.clear { clear: both; }

/* styling */

/*html {
	background: var(--background) var(--background-image) fixed;
}*/
body {
	background-color: var(--mediumground);
	font-family: var(--text-font);
	box-shadow: 0 0 var(--half-space) #333, 0 0 calc(-1*var(--half-space)) #333;
}
feed, html {
	hanging-punctuation: first;
	color: var(--text);
}
h1#title {
	font-family: var(--accent-font);
	font-size: min(6rem, 19vw);
	text-shadow: 
		2px 2px var(--mediumground),
		-2px -2px var(--mediumground),
		3px 6px var(--skep),
		-3px -6px var(--sorbier);
	letter-spacing: 2px;
	transform: rotate(-5deg);
	line-height: 1;
	transition: text-shadow 0.5s ease-in-out;
}
header:hover h1#title, header:focus h1#title {
	text-shadow: 
		4px 4px 2px var(--foreground),
		-4px -4px 2px var(--foreground),
		6px 12px 6px var(--skep),
		-6px -12px 6px var(--sorbier);
}
p#tagline {
	font-style: italic;
	font-family: var(--tagline-font);
	text-wrap: balance;
}
nav { font-size: 1.2rem; }
article {
	background: var(--foreground);
	border-bottom: 8px solid var(--background);
	line-height: 1.7;
}
article.skep { border-bottom-color: var(--skep); }
article.sorbier { border-bottom-color: var(--sorbier); }
article h1 {
	color: var(--foreground);
	background-color: var(--background);
	border-radius: var(--radius) var(--radius) 0 0;
	border-bottom: 4px solid var(--mediumground);
	font-family: var(--post-title-font);
	font-size: 1.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
article:is(.skep, .sorbier) h1 { color: revert; }
article.skep h1 { background-color: var(--skep); }
article.sorbier h1 { background-color: var(--sorbier); }
article .post-meta {
	font-style: italic;
	font-size: 0.9em;
}
a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: color-mix(in hsl, var(--link) 90%, white 10%);
}
a:hover, a:focus {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	color: color-mix(in hsl, var(--link) 70%, white 30%);
}
article h1 > a {
	color: var(--text) !important;
	text-decoration: none !important;
}
.bottomnav {
	margin: var(--space)auto 0;
	font-size: 1rem;
	text-align: center !important;
}
.clue {
	font-style: italic;
	padding: 0 0.5rem;
	background-color: var(--clue-highlight);
	border-radius: var(--radius);
}
.clue em, .clue cite {
	font-style: normal;
}
.answer {
	color: var(--text-answer);
	font-weight: 600;
	letter-spacing: 0.05ex;
	font-size: 1.05em;
}
ul.nobullets {
	list-style: none;
}

/* offset + portraits */

article.skep { margin-left: calc(var(--portrait-width) + var(--portrait-spacing)); }
article.sorbier {
	margin-right: calc(var(--portrait-width) + var(--portrait-spacing));
	text-align: right;
}
article.sorbier > * { text-align: left; }
article:is(.skep, .sorbier)::before {
	width: var(--portrait-width);
	aspect-ratio: 1;
	display: inline-block;
	content: '';
	position: absolute;
	border-radius: var(--radius);
	box-sizing: border-box;
	border: 2px solid var(--mediumground);
}
article.skep::before {
	background: no-repeat center/100% var(--portrait-skep);
	transform: translateX(calc(-100% - var(--space) - var(--portrait-spacing)));
	box-shadow: 4px 4px var(--skep);
}
article.sorbier::before {
	background: no-repeat center/100% var(--portrait-sorbier);
	transform: translateX(calc(var(--space) + var(--portrait-spacing)));
	box-shadow: -4px 4px var(--sorbier);
}

/* mobile */
@media (width < 40rem) {
	:root {
		--portrait-width: 2.25rem;
	}
	article:is(.skep, .sorbier) {
		margin-left: auto;
		margin-right: auto;
	}
	article.skep h1 { padding-left: calc(var(--portrait-width) + 2*var(--space)); }
	article.sorbier h1 { padding-right: calc(var(--portrait-width) + 2*var(--space)); }
	article:is(.skep, .sorbier)::before {
		transform: revert;
		margin-top: var(--space);
		box-shadow: none;
	}
	article.sorbier::before {
		transform: translateX(-100%)
	}
}