/*
Theme Name: Dean 2024
Theme URI: http://dean.co
Description: Dean 2024
Author: Dean Robinson
Author URI: http://dean.co
Version: 1.0
*/

:root {
	--base: 80px;
	--margin-right: calc((60vmin * (48/105)) - calc(var(--base) * 0.75)); /* 3/5 */
}

.mono {font-family:"lulo-one",sans-serif;}
.mono-outline {font-family:"lulo-outline",sans-serif;font-weight:700;}
.mono-300 {font-weight:300;}
.mono-400 {font-weight:400;}
.mono-700 {font-weight:700;}

.cls-1 {fill:#455540;}
.cls-2 {fill:#738162;}

html, body {font-size:20px;line-height:1.4;font-family:"kepler-3-variable",serif;font-variation-settings:"opsz" 10,"wdth" 100,"wght" 200;font-weight:normal;color:#455540;/*#45575A;*/font-variant:discretionary-ligatures oldstyle-nums;}
html {background-color:#F9F8EF;background-image:url('resources/illustration3.png');background-size:auto 60vmin;background-position:right bottom;background-repeat:no-repeat;background-attachment:fixed;}
/* #738162; #664E52; */
body {padding:var(--base);}
* {margin:0;padding:0;box-sizing:border-box;/*background:rgba(0,0,0,0.1);*/}

a {cursor:pointer;}

.post {margin:var(--base) var(--margin-right) var(--base) 0;z-index:2;position:relative;}

h1.post-title, h2.post-title, h3.post-title {font-family:"kepler-3-display-variable",serif;font-variation-settings:"wght" 250,"wdth" 60;font-weight:normal;line-height:0.75;}
h1.post-title {font-size:8em;}
h2.post-title {font-size:4em;}
h3.post-title {font-size:2em;font-variation-settings:"wght" 250,"wdth" 85;}

.post-intro {margin:1em 0 0 0;font-size:1.2em;line-height:1.2;z-index:2;position:relative;max-width:40em;}

.post-body {margin:var(--base) 0;display:flex;z-index:2;position:relative;}

.post-body a {text-decoration-color:#738162;color:inherit;text-decoration-thickness:2px;}
.post-body a:hover {color:#738162;}

.post-content h2, .post-content h3 {font-family:"kepler-3-variable",serif;font-variation-settings:"wght" 400,"wdth" 85;font-weight:normal;line-height:1.2;margin:1em 0 0.5em;}
.post-content h2 {font-size:1.6em;}
.post-content h3 {font-size:1.3em;}

.post-content p + p {margin-top:1.5em;}
.post-content > p {max-width:30em;}
.post-content > p:first-child {font-size:1.3em;max-width:30em;margin-bottom:1.5em;}
.post-content > p:first-child:first-letter {font-size:2.5em;float:left;padding-top:0.175em;font-family:"lulo-one",sans-serif;font-weight:700;margin-right:-0.1em;line-height:0.93;}

.post-content ul, .post-content ol {margin:2em 2em;max-width:28em;}
.post-content ul li::marker {content:"— ";}

.post-content strong {font-variation-settings:"wght" 600, "opsz" 15;font-weight:normal;}

.post-meta {width:var(--base);}
.post-meta .post-date {font-size:0.65em;line-height:1;transform-origin:0 100%;transform:rotate(90deg);margin-top:-0.3em;}

.post-content blockquote {border-left:2px solid #738162;color:#738162;padding-left:calc(var(--base) / 2);margin:1.5em 0;font-size:1.3em;line-height:1.2;}
.post-content blockquote p {max-width:20em;}

.post-excerpt {margin:calc(var(--base) / 3) 0;display:flex;}
.post-excerpt .post-content p {font-size:1em;margin-bottom:0;}
.post-excerpt .post-content p + p {margin-top:1em;}
/*.post-excerpt .post-content p:first-child:first-letter {font-size:2.5em;float:left;padding-top:0.175em;font-family:"lulo-one",sans-serif;font-weight:700;}*/

.post-preview .post-title a {color:inherit;text-decoration:none;}
.post-preview .post-title a:hover {text-decoration:underline;text-decoration-color:#738162;color:#738162;text-decoration-thickness:2px;}
.post-preview .post-intro {font-size:0.75em;max-width:50em;}
.post-preview .post-meta {width:calc(var(--base) / 2);}
.post-preview .post-excerpt .post-content p.read-more {font-size:0.75em;}
.post-preview .post-excerpt .post-content p.read-more a {text-decoration-color:#738162;color:inherit;text-decoration-thickness:2px;}
.post-preview .post-excerpt .post-content p.read-more a:hover {color:#738162;}
.post-preview .read-more .post-date {display:none;}

.post-archive {display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;margin:calc(var(--base)/2) var(--margin-right) calc(var(--base)/2) 0;}
.post-archive .post-title a {color:inherit;text-decoration:none;}
.post-archive .post-title a:hover {text-decoration:underline;text-decoration-color:#738162;color:#738162;text-decoration-thickness:2px;}
.post-archive .post-date {font-size:0.7em;width:7em;}

.post-content p.threads-button {margin-top:3em;}
.post-body .threads-button a {text-decoration:none;display:flex;align-items:center;gap:0.5em;min-width:20px;width:fit-content;padding:0.5em 0.75em;cursor:pointer;border:2px solid #455540;color:#455540;/*#F9F8EF;*/border-radius:3em;}
.post-body .threads-button a:hover {background:#738162;color:#F9F8EF;border-color:#738162;}
.threads-icon, .instagram-icon {max-width:20px;display:grid;place-items:center;}
.threads-label {font-family:"kepler-3-variable",serif;font-variation-settings:"wght" 300,"wdth" 90;font-weight:normal;line-height:1;}

.site-title {margin:calc(var(--base) * 4) var(--margin-right) var(--base) 0;font-size:calc(var(--base) * 1.5);line-height:1;letter-spacing:-0.13em;}
.site-title, h1.post-title {position:relative;}
.site-title::after, h1.post-title::after {content:"";position:absolute;top:calc(var(--base) * -3);left:calc(var(--base) * 3);z-index:0;width:50vmin;height:50vmin;background-image:url('resources/ring1.png');background-position:center center;background-size:cover;}
.site-title span, h1.post-title span {position:relative;z-index:1;}

.site-title-small {margin:0 0 calc(var(--base) * 4) 0;line-height:1;display:flex;justify-content:space-between;align-items:center;}
.site-title-small a {color:inherit;text-decoration:none;}
.site-title-small > a, .site-title-small > span {flex-grow:1;}
.site-title-small .social {display:flex;flex-shrink:0;}
.site-title-small .social a {display:block;}
.site-title-small .social a + a {margin-left:0.5em;}
.site-title-small a:hover {color:#738162;}

header .threads-icon, header .instagram-icon {max-height:20px;display:block;flex-shrink:0;}

.site-footer {margin:calc(var(--base) * 2) var(--margin-right) 0 0;line-height:1;font-size:0.6em;display:flex;align-items:baseline;}
.site-footer svg {height:1.25em;margin-right:1.5em;}
.site-footer p {padding-bottom:1px;}

@media screen and (max-width:1100px) {
	:root {
		--base: 70px;
	}
}

@media screen and (max-width:950px) {
	:root {
		--base: 60px;
	}
}

@media screen and (max-width:800px) {
	:root {
		--base: 50px;
		--margin-right:0;
	}
	html {background:#F9F8EF;}
	h1.post-title {font-size:6em;}
	h2.post-title {font-size:3em;}
	h3.post-title {font-size:2em;}
	.post-intro {font-size:1em;}
	.post-body {flex-direction:column;}
	.post-meta {width:100%;}
	.post-meta .post-date {font-size:0.65em;line-height:1;transform-origin:0 100%;transform:none;margin:0 0 calc(var(--base) / 2);}
	.post-content > p:first-child {font-size:1.2em;}
	.post-preview .post-meta {display:none;}
	.post-preview .read-more .post-date {display:inline;}
	.site-footer {text-align:center;background-image:url('resources/illustration3.png');background-position:center top;background-repeat:no-repeat;flex-direction:column;align-items:center;}
	.site-footer svg {margin-right:0;margin-bottom:1em;;}
}

@media screen and (max-width:800px) and (orientation:landscape) {
	.site-footer {padding-top:50vmin;background-size:auto 50vmin;}
}

@media screen and (max-width:800px) and (orientation:portrait) {
	.site-footer {padding-top:50vmax;background-size:auto 50vmax;}
	.site-title::after, h1.post-title::after {width:50vmax;height:50vmax;}
}

@media screen and (max-width:650px) {
	:root {
		--base: 40px;
	}
	.post + .post {margin-top:calc(var(--base) * 2);}
	.post-excerpt {margin-top:calc(var(--base) / 2);}
	.site-title-small {font-size:0.8em;}
}

@media screen and (max-width:525px) {
	:root {
		--base: 30px;
	}
	h1.post-title {font-size:4em;}
	h2.post-title {font-size:3em;}
	h3.post-title {font-size:2em;}
	.post-intro {font-size:0.8em;}
	.post-content > p:first-child {font-size:1.1em;}
	.post + .post {margin-top:calc(var(--base) * 2.5);}
	.post-excerpt {margin-top:var(--base);}
}

@media screen and (max-width:400px) {
	:root {
		--base: 20px;
	}
	.post + .post {margin-top:calc(var(--base) * 3);}
	.site-title {font-size:calc(var(--base) * 2);}
}