/*
Theme Name: Derham Groves v4
Theme URI: https://derhamgroves.com/
Description: The fully vector edition. The portrait is one inline SVG (traced from the 2011 art), every colour comes from CSS custom properties, and the background patterns are hand-written SVG tiles — no PNGs at all.
Author: Huey Groves
Author URI: https://hueygroves.com/
Version: 4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dgv4
*/

/* ---------- 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 {
	--h-bg: 200;
	--h-hair: 320;
	--h-skin: 80;
	--h-eyes: 290;

	--page-bg: hsl(var(--h-bg) 50% 50%);
	--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) 50% 50%);
	--rule: hsl(var(--h-bg) 35% 13% / .25);
	--wash: hsl(var(--h-bg) 35% 13% / .06);
	--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-opacity='.18' 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-opacity='.18' 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-opacity='.18' 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='M1 3 H49 V29 H1 Z M25 29 V51' fill='none' stroke='%23000' stroke-opacity='.18' stroke-width='3'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
	:root {
		--page-bg: hsl(var(--h-bg) 35% 20%);
		--card-bg: hsl(var(--h-bg) 22% 13%);
		--ink: hsl(var(--h-bg) 12% 88%);
		--ink-soft: hsl(var(--h-bg) 10% 68%);
		--link: hsl(var(--h-bg) 70% 74%);
		--shadow-c: hsl(var(--h-bg) 40% 32%);
		--rule: hsl(var(--h-bg) 12% 88% / .3);
		--wash: hsl(var(--h-bg) 12% 88% / .07);
		--noise: none;
		--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='%23fff' stroke-opacity='.12' 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='%23fff' stroke-opacity='.12' 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='%23fff' stroke-opacity='.12' 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='M1 3 H49 V29 H1 Z M25 29 V51' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='3'/%3E%3C/svg%3E");
	}
	.portrait-svg { filter: brightness(.85); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	background-color: var(--page-bg);
	overflow-y: scroll;
}
body {
	margin: 0;
	background-image: var(--pattern-url, var(--pat0));
	background-attachment: fixed;
	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; }

.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  { fill: hsl(var(--h-skin) 96% 54%); }
.portrait-svg .l-hair  { fill: hsl(var(--h-hair) 94% 35%); }
.portrait-svg .l-eyes  { fill: hsl(var(--h-eyes) 90% 60%); }
.portrait-svg .l-line  { fill: #000; }
.portrait-svg .l-glint { 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);
}
.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%); }
@media (prefers-color-scheme: dark) {
	.site-footer a { color: hsl(var(--h-bg) 30% 88%); }
}

/* ---------- 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%; }
}