/* blue_eyed_monster_corp — static rebuild
   Palette + fonts taken from the original WordPress (h4) theme:
   base #132088, contrast #e0d2e8, body Anonymous Pro, headings Josefin Sans */

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
	--base: #132088;
	--contrast: #e0d2e8;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--base);
	color: var(--contrast);
	font-family: "Anonymous Pro", ui-monospace, "Courier New", monospace;
	font-size: 18px;
	line-height: 1.428571429;
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 24px 80px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 400;
	line-height: 1.125;
}

a {
	color: inherit;
}

a:hover {
	text-decoration: none;
}

/* Site header / nav */
.site-header {
	margin-bottom: 48px;
}

.site-logo {
	display: block;
	margin: 0 0 16px;
}

.site-logo img {
	max-width: 100%;
	height: auto;
}

.site-title {
	font-family: "Josefin Sans", sans-serif;
	font-size: 2rem;
	margin: 0 0 12px;
}

.site-title a {
	text-decoration: none;
}

.site-nav a {
	margin-right: 20px;
	text-decoration: none;
}

.site-nav a:hover {
	text-decoration: underline;
}

/* Post meta */
.entry-title {
	font-size: 1.8rem;
	margin: 0 0 4px;
}

.entry-date {
	opacity: 0.7;
	font-size: 0.85rem;
	margin: 0 0 32px;
}

/* Content */
.entry-content p {
	margin: 0 0 1.2em;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

.entry-content ul {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.4em;
}

/* Embeds */
figure.wp-block-embed {
	margin: 24px 0;
}

figure iframe {
	max-width: 100%;
}

/* Header top row: main gif + shadows button */
.header-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.header-top .site-logo {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* House That Shadows Built button */
.shadows-button {
	flex: 0 0 auto;
	display: block;
	width: 110px;
	margin: 0;
	transition: transform 0.15s, opacity 0.15s;
}

.shadows-button img {
	display: block;
	width: 100%;
	height: auto;
}

.shadows-button:hover {
	transform: scale(1.05);
	opacity: 0.9;
}

/* Home full-body stream */
.post-sep {
	border: none;
	border-top: 1px solid var(--contrast);
	opacity: 0.3;
	margin: 48px 0;
}

.stream-post .entry-title a {
	text-decoration: none;
}

.stream-post .entry-title a:hover {
	text-decoration: underline;
}

/* Home post list */
.post-list {
	list-style: none;
	padding: 0;
	margin: 32px 0 0;
}

.post-list li {
	margin-bottom: 16px;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.3rem;
}

.post-list a {
	text-decoration: none;
}

.post-list a:hover {
	text-decoration: underline;
}

.post-list .date {
	display: block;
	font-family: "Anonymous Pro", monospace;
	font-size: 0.8rem;
	opacity: 0.6;
}

/* Footer */
.site-footer {
	margin-top: 64px;
	font-size: 0.8rem;
	opacity: 0.6;
}

/* ---- Wall / board layout (homepage) ---- */
/* widen the page so the board has room to breathe */
body:has(.board) {
	max-width: 1040px;
	padding-top: 28px;
}

.board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: row dense;
	align-items: start;
	gap: 30px 26px;
	margin-top: 0;
}

/* clippings sit directly on the blue — no box, no dot, just position + tilt */
.clip {
	position: relative;
	min-width: 0;
}

/* gentle, varied tilt so items read as pinned-up clippings */
.clip:nth-child(4n)   { transform: rotate(0.5deg); }
.clip:nth-child(4n+1) { transform: rotate(-0.6deg); }
.clip:nth-child(4n+2) { transform: rotate(0.3deg); }
.clip:nth-child(4n+3) { transform: rotate(-0.4deg); }

/* the video is the centrepiece: spans two columns, sits in the middle */
.clip-video {
	grid-column: 1 / 3;
	transform: none;
}
@media (min-width: 900px) {
	.clip-video { grid-column: 2 / 4; }
}

.clip .entry-title {
	font-size: 1.35rem;
	margin: 0 0 3px;
}

.clip .entry-title a { text-decoration: none; }
.clip .entry-title a:hover { text-decoration: underline; }

.clip .entry-date {
	display: none;
}

.clip .entry-content p {
	font-size: 0.95rem;
	margin: 0 0 0.9em;
}

.clip .entry-content > :last-child {
	margin-bottom: 0;
}

.clip-more {
	margin: 2px 0 0;
	font-size: 0.9rem;
}

.clip-more a { text-decoration: underline; opacity: 0.85; }

/* about / links folded into the wall */
.clip-about .entry-content p { font-style: italic; opacity: 0.9; }

.clip-links ul { list-style: none; padding: 0; margin: 0.4em 0 0; }
.clip-links li { margin-bottom: 0.4em; }
.clip-links a { text-decoration: underline; }

/* --- header pieces as wall items --- */
.clip-logo img,
.clip-shadows img {
	display: block;
	width: 100%;
	height: auto;
}

.clip-title .site-title {
	font-size: 1.7rem;
	margin: 0;
	line-height: 1.05;
}
.clip-title .site-title a { text-decoration: none; }

.clip-nav .site-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.clip-nav .site-nav a {
	margin: 0;
	font-family: "Josefin Sans", sans-serif;
	font-size: 1.2rem;
	text-decoration: underline;
}

/* shadows button now lives inside the links clip */
.clip-links .shadows-button {
	display: block;
	width: 120px;
	max-width: 100%;
	margin: 16px 0 0;
}
.clip-links .shadows-button img { display: block; width: 100%; height: auto; }

/* --- embeds scale to the column, keep aspect ratio, never crop --- */
/* youtube 16:9 */
.clip .wp-block-embed-youtube .wp-block-embed__wrapper,
.clip .embed-youtube {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.clip .embed-youtube iframe,
.clip .wp-block-embed-youtube iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* soundcloud players: let them fill the column width, keep their own height */
.clip .embed-soundcloud iframe,
.clip .entry-content > div iframe {
	display: block;
	width: 100%;
	max-width: 100%;
}

.clip figure.wp-block-embed { margin: 12px 0; }

/* on narrow screens straighten into one readable column, drop the tilt */
@media (max-width: 640px) {
	.board { grid-template-columns: 1fr; }
	.clip, .clip-video { transform: none; grid-column: auto; }
}