/* ============================================================
   CAT WAITER STUDIOS — main stylesheet
   Palette, type, layout, grid, hover overlays, anchored footer.
   ============================================================ */

/* Custom hand-drawn title font, bundled with the theme */
@font-face {
	font-family: 'Sundanight';
	src: url('../fonts/Sundanight-Regular.woff2') format('woff2'),
	     url('../fonts/Sundanight-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--sage:        #cbd9b2;   /* project tile green from wireframe */
	--sage-dark:   #b9c99c;
	--ink:         #1a1a1a;   /* near-black text */
	--paper:       #ffffff;   /* page background */
	--overlay:     rgba(0,0,0,0.70); /* hover cover */
	--overlay-text:#ffffff;
	--rule:        #1a1a1a;
	--max:         1600px;    /* content max width */
	--gap:         28px;      /* grid gutter */
	--footer-cat-w:clamp(180px, 22vw, 329px); /* footer cat image width */
	--font-display:'Sundanight', 'Comic Sans MS', cursive;
	--font-mono:   'Courier New', 'Courier Prime', 'Courier', monospace;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* leave room so fixed footer never overlaps content */
	padding-bottom: 180px;
	min-height: 100vh;
	position: relative;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Body / content links: bold + underlined site-wide. Scoped to content
   areas so the footer menu and site title keep their own styling. */
.grid-text a,
.page-content a,
.entry-content a,
.project-body a {
	font-weight: 700;
	text-decoration: underline;
}

/* ---------- site header / title ---------- */
.site-header {
	text-align: center;
	padding: 48px 24px 24px;
}
.site-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.56rem, 4.2vw, 3.28rem); /* shrunk a further 20% */
	line-height: 0.98;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}
.site-title a:hover { text-decoration: none; }
.site-description {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	margin-top: 0.4rem;
	opacity: 0.7;
}

/* ---------- layout container ---------- */
.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 32px;
}

/* ============================================================
   PROJECT GRID  (masonry mosaic of 16x9 + 9x16 tiles)
   Uses CSS columns for a true masonry flow. `column-width` lets the
   browser fit as many evenly-sized columns as the width allows, so the
   grid spreads dynamically on wide desktops instead of locking to a
   fixed column count.
   ============================================================ */
.project-grid {
	column-width: 320px;
	column-gap: var(--gap);
	margin: 24px auto 64px;
}
/* Cap the number of columns on very large screens so tiles don't get tiny */
@media (min-width: 1700px) { .project-grid { column-width: 360px; } }
@media (max-width: 560px)  { .project-grid { column-width: auto; column-count: 1; } }

.grid-item {
	break-inside: avoid;
	margin-bottom: var(--gap);
	display: inline-block;
	width: 100%;
}

/* tile itself */
.tile {
	position: relative;
	display: block;
	width: 100%;
	background: var(--sage);
	overflow: hidden;
}
.tile .tile-media,
.tile img,
.tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* aspect ratios */
.tile.ratio-16x9 { aspect-ratio: 16 / 9; }
.tile.ratio-9x16 { aspect-ratio: 9 / 16; }

/* hover cover: 70% black with white text */
.tile-overlay {
	position: absolute;
	inset: 0;
	background: var(--overlay);
	color: var(--overlay-text);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.4rem 1.5rem;
	opacity: 0;
	transition: opacity 0.28s ease;
}
.tile:hover .tile-overlay,
.tile:focus-within .tile-overlay { opacity: 1; }
.tile-overlay .proj-title {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	line-height: 1.25;
}
.tile-overlay .proj-desc {
	font-family: var(--font-mono);
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0;
}
/* touch devices: no hover, so show a tappable caption bar */
@media (hover: none) {
	.tile-overlay {
		opacity: 1;
		background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.0) 55%);
		justify-content: flex-end;
	}
}

/* editable text block that sits inside the grid flow */
.grid-text {
	break-inside: avoid;
	margin-bottom: var(--gap);
}
.grid-text .editable-label {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	margin: 0 0 0.4rem;
}
.grid-text p {
	font-family: var(--font-mono);
	font-size: 1.15rem;
	line-height: 1.55;
	margin: 0 0 1rem;
}

/* ============================================================
   PROJECT (single page) layouts
   ============================================================ */
.project-single { padding: 8px 0 40px; }

.project-single .video-wrap {
	background: var(--sage);
	overflow: hidden;
}
.project-single .video-wrap iframe,
.project-single .video-wrap video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.project-single .video-wrap.ratio-16x9 { aspect-ratio: 16 / 9; }
.project-single .video-wrap.ratio-9x16 { aspect-ratio: 9 / 16; }

.project-body { font-family: var(--font-mono); font-size: 1.05rem; line-height: 1.65; }
.project-body .editable-label { margin-bottom: 0.4rem; }

/* horizontal variant: video on top, text below */
.layout-horizontal .video-wrap { max-width: 1000px; margin: 0 auto 28px; }
.layout-horizontal .project-body { max-width: 1000px; margin: 0 auto; }

/* vertical variant: video left, text right */
.layout-vertical .project-cols {
	display: grid;
	grid-template-columns: minmax(280px, 520px) 1fr;
	gap: 48px;
	align-items: start;
}
.layout-vertical .video-wrap { width: 100%; }
@media (max-width: 820px) {
	.layout-vertical .project-cols { grid-template-columns: 1fr; }
	.layout-vertical .video-wrap { max-width: 420px; }
}

/* ---------- generic page/post content ---------- */
.page-content, .entry-content {
	max-width: 800px;
	margin: 0 auto;
	font-family: var(--font-mono);
	font-size: 1.05rem;
	line-height: 1.7;
	padding: 0 0 40px;
}
.entry-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3.4rem);
	text-align: center;
	margin: 0 0 1.5rem;
}
.page-content h2, .entry-content h2 { font-size: 1.5rem; margin-top: 2rem; }
blockquote {
	border-left: 3px solid var(--ink);
	margin: 1.5rem 0; padding-left: 1.2rem; font-style: italic;
}

/* ============================================================
   FOOTER — cat image anchored bottom-left, nav bottom-right.
   Anchored to the BOTTOM OF THE PAGE (absolute), so on long pages
   they rest below the content rather than floating over it.
   `body` reserves space via padding-bottom so nothing is covered.
   ============================================================ */
.site-footer-image {
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--footer-cat-w);
	z-index: 5;
	pointer-events: none;
}
.site-footer-image img { width: 100%; height: auto; display: block; }

.site-footer-nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 24px 22px;
	z-index: 6;
	text-align: center;
}
.site-footer-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	font-family: var(--font-mono);
	font-size: 1.05rem;
}
.site-footer-nav li { display: flex; align-items: center; }
.site-footer-nav li:not(:last-child)::after {
	content: "|";
	margin: 0 0.7rem;
	opacity: 0.8;
}
.site-footer-nav a:hover { text-decoration: underline; }
/* Active / current menu item: bold + underlined */
.site-footer-nav .current-menu-item > a,
.site-footer-nav .current_page_item > a,
.site-footer-nav a[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
}

/* On small screens, keep the menu centered above the (smaller) cat. */
@media (max-width: 720px) {
	body { padding-bottom: 200px; }
	.site-footer-image { width: 130px; opacity: 0.97; }
	.site-footer-nav {
		left: 0;
		right: 0;
		text-align: center;
		padding: 14px 12px 18px;
	}
	.site-footer-nav ul { justify-content: center; }
}

/* ---------- comments (kept minimal) ---------- */
.comments-area { max-width: 800px; margin: 0 auto 40px; font-family: var(--font-mono); }
.comment-list { list-style: none; padding: 0; }
.comment-list li { border-top: 1px solid #eee; padding: 1rem 0; }

/* ---------- pagination ---------- */
.pagination {
	max-width: var(--max);
	margin: 0 auto 64px;
	padding: 0 32px;
	display: flex;
	gap: 1rem;
	justify-content: center;
	font-family: var(--font-mono);
}
.pagination .page-numbers {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--ink);
}
.pagination .current { background: var(--ink); color: #fff; }

/* ---------- skip link ---------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	left: 8px; top: 8px; background: #fff; padding: 8px 12px;
	z-index: 100; border: 2px solid var(--ink);
}