/*
Theme Name: Derham Groves v5
Theme URI: https://derhamgroves.com/
Description: The vector edition, awake. Same traced SVG portrait and the same random palette as v4 — but the eyelids and the pupils are now built in the browser out of paths that were already in the drawing, so he blinks every few seconds and, every minute or two, glances off to one side.
Author: Huey Groves
Author URI: https://hueygroves.com/
Version: 5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dgv5
*/

/* ---------- fonts (licensed via MyFonts, 2011 — same files as dgv2) ---------- */
@font-face {
	font-family: 'SomewhatBold';
	src: url('webfonts/F8683_0.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'MuseoSlab-500';
	src: url('webfonts/F8667_0.woff') format('woff');
	font-display: swap;
}
@font-face {
	font-family: 'SomewhatExpandedBold';
	src: url('webfonts/F8667_1.woff') format('woff');
	font-display: swap;
}

/* ---------- palette ----------
   script.js overwrites the hue properties per visitor (same algorithm and
   localStorage keys as dgv2); these defaults render a complete page without JS. */
:root {
	color-scheme: light;
	--h-bg: 200;
	--h-hair: 320;
	--h-skin: 80;
	--h-eyes: 290;

	--page-bg: hsl(var(--h-bg) 50% 62%);
	--card-bg: hsl(var(--h-bg) 50% 91%);
	--ink: hsl(var(--h-bg) 35% 13%);
	--ink-soft: hsl(var(--h-bg) 20% 32%);
	--link: hsl(var(--h-bg) 70% 28%);
	--shadow-c: hsl(var(--h-bg) 45% 58%);
	--rule: hsl(var(--h-bg) 35% 13% / .25);
	--wash: hsl(var(--h-bg) 35% 13% / .06);
	--page-glow: none;
	--pattern-ink: hsl(var(--h-bg) 35% 45% / .45);
	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 -.3'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
	--pat0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M1 25 A24 24 0 0 1 49 25 M-24 50 A24 24 0 0 1 24 50 M26 50 A24 24 0 0 1 74 50 M-24 0 A24 24 0 0 1 24 0 M26 0 A24 24 0 0 1 74 0' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
	--pat1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='50'%3E%3Cpath d='M21.5 0 0 12 M21.5 0 43 12 M0 12 21.5 24 43 12 M0 38 21.5 50 M43 38 21.5 50 M21.5 24 V50 M0 12 V38 M43 12 V38' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E");
	--pat2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M25 0 50 25 25 50 0 25 Z' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
	--pat3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M0 1 H50 M0 26 H50 M1 0 V27 M25 25 V51' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}
/* ---------- perceptual palette ----------
   The 2011 HSL formulas made blue/purple draws far darker than yellow ones.
   OKLCH keeps every random palette at the same perceived lightness. */
@supports (color: oklch(50% 0 0)) {
	:root {
		--page-bg: oklch(80% .09 var(--h-bg));
		--page-glow: linear-gradient(180deg, oklch(85% .06 var(--h-bg)), oklch(76% .11 var(--h-bg)));
		--pattern-ink: oklch(68% .12 var(--h-bg) / .5);
		--card-bg: oklch(96% .02 var(--h-bg));
		--ink: oklch(28% .04 var(--h-bg));
		--ink-soft: oklch(48% .03 var(--h-bg));
		--link: oklch(45% .13 var(--h-bg));
		--shadow-c: oklch(74% .11 var(--h-bg));
		--rule: oklch(28% .04 var(--h-bg) / .3);
		--wash: oklch(28% .04 var(--h-bg) / .07);
	}
	}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	background-color: var(--page-bg);
	background-image: var(--page-glow, none);
	background-attachment: fixed;
	overflow-y: scroll;
}
body {
	margin: 0;
	font-family: 'MuseoSlab-500', 'Iowan Old Style', Georgia, serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	-webkit-text-size-adjust: 100%;
}
img, video, iframe, embed, object { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 2px; }

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--pattern-ink);
	-webkit-mask-image: var(--pattern-url, var(--pat0));
	mask-image: var(--pattern-url, var(--pat0));
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--card-bg);
	color: var(--link);
	padding: .5rem 1rem;
	z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- the portrait ----------
   One inline SVG traced from the 2011 layers; each layer is a set of paths
   whose fill comes straight from the palette custom properties. */
.portrait-wrap {
	width: min(910px, 100%);
	margin-inline: auto;
}
.portrait-svg {
	position: relative;
	z-index: 0;
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: -35.05%; /* content overlaps the shoulders, as in dgv2 */
	pointer-events: none;
}
.portrait-svg .l-skin,
.portrait-svg .lid-skin   { fill: hsl(var(--h-skin) 96% 54%); fill: oklch(75% .17 var(--h-skin)); }
.portrait-svg .l-hair     { fill: hsl(var(--h-hair) 94% 42%); fill: oklch(55% .19 var(--h-hair)); }
.portrait-svg .l-eyes     { fill: hsl(var(--h-eyes) 90% 60%); fill: oklch(78% .16 var(--h-eyes)); }
.portrait-svg .l-line,
.portrait-svg .lid-lash,
.portrait-svg .pupil-ink  { fill: #000; }
.portrait-svg .l-glint,
.portrait-svg .pupil-spark { fill: #fff; }

/* ---------- structure ---------- */
.site-main {
	position: relative;
	z-index: 1;
	width: min(42rem, 100% - 1.5rem);
	margin: 0 auto;
	padding: 1rem 1.25rem 1.5rem;
	border-radius: 12px;
	background-color: var(--card-bg);
	background-image: var(--noise);
	box-shadow: 0 12px 32px rgb(0 0 0 / .08);
	box-shadow: 0 12px 32px oklch(30% .05 var(--h-bg) / .12);
}
.site-footer-spacer { height: 2rem; }

/* ---------- header ---------- */
.site-header { text-align: center; }
.site-title {
	margin: 0;
	font-family: 'SomewhatBold', 'MuseoSlab-500', Georgia, serif;
	font-weight: normal;
	text-transform: uppercase;
	font-size: clamp(3.25rem, 16.5vw, 10.5rem);
	line-height: 1;
	overflow-wrap: anywhere;
}
.site-title a {
	color: var(--ink);
	text-shadow:
		1px 1px var(--shadow-c), 2px 2px var(--shadow-c), 3px 3px var(--shadow-c),
		4px 4px var(--shadow-c), 5px 5px var(--shadow-c), 6px 6px var(--shadow-c),
		7px 7px var(--shadow-c), 8px 8px var(--shadow-c), 9px 9px var(--shadow-c),
		10px 10px var(--shadow-c);
}
.site-title a:hover { text-decoration: none; }
.site-tagline {
	margin: .25rem 0 1rem;
	font-size: 1rem;
	color: var(--ink-soft);
}

/* ---------- posts ---------- */
.hentry {
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 2px dashed var(--rule);
}
.hentry:last-of-type { border-bottom: 0; }
.entry-title {
	margin: 0;
	font-family: 'SomewhatExpandedBold', 'MuseoSlab-500', Georgia, serif;
	font-weight: normal;
	font-size: clamp(1.7rem, 5.5vw, 2.5rem);
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.entry-title a { color: var(--ink); }
.entry-date {
	display: block;
	margin: .25rem 0 .5rem;
	font-size: .85rem;
	color: var(--ink-soft);
}
.entry-content p { margin: .75rem 0; }
.entry-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.entry-content img,
.entry-content video {
	display: block;
	margin: .75rem auto;
}
.entry-content > h2, .entry-content > h3 {
	font-family: 'SomewhatExpandedBold', Georgia, serif;
	font-weight: normal;
	line-height: 1.2;
	margin: 1.5rem 0 .5rem;
}
.entry-content blockquote {
	margin: 1rem 0;
	padding: .25rem 1rem;
	border-left: 4px solid var(--rule);
	background: var(--wash);
	border-radius: 0 8px 8px 0;
}
.entry-meta {
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--ink-soft);
}

/* legacy captions + alignment (his 2007-2015 posts use these) and block equivalents */
.wp-caption, figure { max-width: 100%; margin: .75rem auto; text-align: center; }
.wp-caption img, figure img { margin: 0 auto; }
.wp-caption-text, figcaption {
	font-size: .82rem;
	color: var(--ink-soft);
	padding: .25rem .5rem 0;
}
.alignleft { float: left; margin: .25rem 1rem .5rem 0; }
.alignright { float: right; margin: .25rem 0 .5rem 1rem; }
.aligncenter { display: block; margin-inline: auto; }
.hentry::after, .entry-content::after { content: ""; display: block; clear: both; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.gallery .gallery-item { margin: 0; }

/* ---------- older / newer ---------- */
.stream-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-family: 'SomewhatExpandedBold', Georgia, serif;
	font-size: clamp(1.9rem, 7.5vw, 4.5rem);
	line-height: 1.1;
}
.stream-nav a { color: var(--ink); }
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	font-size: .9rem;
}
.post-nav .next { text-align: right; margin-left: auto; }

/* ---------- comments ---------- */
.comments-area { margin-top: 2rem; }
.comments-title, .comment-reply-title {
	font-family: 'SomewhatExpandedBold', Georgia, serif;
	font-weight: normal;
	font-size: 1.4rem;
	margin: 1rem 0 .5rem;
}
.comment-list { list-style: none; margin: 1rem 0; padding: 0; }
.comment-list .comment { padding: .75rem; border-radius: 8px; margin-bottom: .5rem; }
.comment-list .even { background: var(--wash); }
.comment-list .odd { background: var(--wash); }
.comment-list .children { list-style: none; padding-left: 1.25rem; }
.comment-author .avatar { border-radius: 50%; vertical-align: middle; margin-right: .5rem; }
.comment-metadata, .comment-meta { font-size: .78rem; color: var(--ink-soft); }
.comment-content { font-size: .95rem; }
.reply { font-size: .82rem; }

/* forms */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
	font-family: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: var(--card-bg);
	border: 1px solid var(--rule);
	border-radius: 8px;
	padding: .5rem .75rem;
	width: 100%;
	max-width: 100%;
}
textarea { min-height: 10rem; }
input[type="submit"], button[type="submit"] {
	font-family: inherit;
	font-size: 1rem;
	color: hsl(var(--h-bg) 50% 96%);
	background: var(--link);
	border: 0;
	border-radius: 8px;
	padding: .55rem 1.25rem;
	cursor: pointer;
}
.comment-form p { margin: .5rem 0; }
.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] { flex: 1; }

/* ---------- archives template ---------- */
.archives-page { text-align: center; }
.archives-page h2 {
	font-family: 'SomewhatExpandedBold', Georgia, serif;
	font-weight: normal;
	font-size: 1.5rem;
	margin: 1.5rem 0 .5rem;
}
.archives-page ul { list-style: none; padding: 0; margin: 0; }
.archives-columns { columns: 3 10rem; column-gap: 1.5rem; }
.archives-page .search-form { max-width: 24rem; margin: 1rem auto 0; }

/* ---------- footer ---------- */
.site-footer {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 1.25rem 1rem 2rem;
	font-size: .95rem;
}
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.5rem;
}
.site-footer a { color: hsl(var(--h-bg) 60% 96%); }
/* ---------- small screens ---------- */
@media (max-width: 40rem) {
	.site-main { padding: .75rem .9rem 1.25rem; }
	.alignleft, .alignright { float: none; display: block; margin: .75rem auto; }
}

@media print {
	.portrait-wrap, .site-footer, .stream-nav, .post-nav { display: none; }
	html, body { background: #fff; }
	.site-main { background: #fff; width: 100%; }
}