/*
Theme Name: The Mesker-Garcias
Theme URI: https://www.meskergarcia.net
Author: Claude for the Mesker-Garcia family
Description: A custom family theme for meskergarcia.net with the Annual Holiday Letter, photo albums, stories and Cybertoad's Travelogue.
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mesker-garcia
*/

/* Dark mode follows the visitor's device setting. */
@media (prefers-color-scheme: dark) {
	body {
		--wp--preset--color--paper: #141C1A;
		--wp--preset--color--card: #1C2623;
		--wp--preset--color--ink: #E7ECE8;
		--wp--preset--color--muted: #9DAAA5;
		--wp--preset--color--line: #2E3B37;
		--wp--preset--color--spruce: #8CC2B0;
		--wp--preset--color--gold: #E0B260;
		--wp--preset--color--sky: #3C5560;
		--wp--preset--color--sand: #55493A;
		--wp--preset--color--sage: #3E5244;
		--wp--preset--color--rose: #5A4440;
		color-scheme: dark;
	}
}

:root {
	--mg-paper: var(--wp--preset--color--paper);
	--mg-card: var(--wp--preset--color--card);
	--mg-ink: var(--wp--preset--color--ink);
	--mg-muted: var(--wp--preset--color--muted);
	--mg-line: var(--wp--preset--color--line);
	--mg-spruce: var(--wp--preset--color--spruce);
	--mg-gold: var(--wp--preset--color--gold);
	--mg-display: var(--wp--preset--font-family--display);
	--mg-hand: var(--wp--preset--font-family--hand);
}
body { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }

.mg-wrap {
	max-width: 1080px; margin: 0 auto; box-sizing: content-box;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Header */
.mg-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 22px; }
.mg-mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--wp--preset--color--ink) !important; }
.mg-mark b { font-family: var(--mg-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; }
.mg-who { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--mg-hand); font-size: 22px; color: var(--wp--preset--color--gold); }
.mg-who small { display: inline-flex; align-items: center; gap: 5px; font-size: 19px; color: var(--wp--preset--color--spruce); padding-left: 14px; }
.mg-paw { width: 16px; height: 16px; transform: rotate(14deg); flex: none; }
.mg-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-family: var(--mg-display); font-size: 15px; }
.mg-nav a { color: var(--wp--preset--color--ink); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.mg-nav a[aria-current] { border-color: var(--wp--preset--color--gold); }
.mg-nav a:hover { color: var(--wp--preset--color--spruce); }

/* Shared bits */
.mg-eyebrow { font-family: var(--mg-display); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--wp--preset--color--gold); font-weight: 600; }
.mg-sig { font-family: var(--mg-hand); font-size: 28px; color: var(--wp--preset--color--spruce); display: block; line-height: 1.3; }
.mg-sig .mg-paw { width: .62em; height: .62em; vertical-align: -.04em; margin-left: .12em; }
.mg-paw--gold { color: var(--wp--preset--color--gold); }
.mg-btn { display: inline-block; margin-top: 22px; font-family: var(--mg-display); font-weight: 600; font-size: 15px; background: var(--wp--preset--color--spruce); color: var(--wp--preset--color--paper) !important; padding: 12px 22px; border-radius: 999px; text-decoration: none; }
.mg-btn:hover { filter: brightness(1.08); }
.mg-album > .mg-empty, .mg-list > .mg-empty { grid-column: 1 / -1; max-width: 40em; }
.mg-empty { color: var(--wp--preset--color--muted); font-style: italic; }

.mg-photo { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/3; max-width: 100%; background: var(--wp--preset--color--sky); }
.mg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-photo--empty svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-tone-sky { background: var(--wp--preset--color--sky); }
.mg-tone-sand { background: var(--wp--preset--color--sand); }
.mg-tone-sage { background: var(--wp--preset--color--sage); }
.mg-tone-rose { background: var(--wp--preset--color--rose); }
.mg-hill { fill: var(--wp--preset--color--sage); }
.mg-tone-sage .mg-hill { fill: var(--wp--preset--color--sky); }
.mg-hill2 { fill: var(--wp--preset--color--spruce); opacity: .55; }
.mg-sun { fill: var(--wp--preset--color--gold); opacity: .75; }

/* Hero */
.mg-hero { padding-block: 28px 56px; }
.mg-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.mg-hero h1 { font-size: clamp(38px, 6vw, 64px); margin: 10px 0 0; }
.mg-hero-text p { max-width: 34em; color: var(--wp--preset--color--muted); margin: 18px 0 14px; }
.mg-stack { position: relative; padding: 14px; }
.mg-stack .mg-photo { box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.mg-stack-back { position: absolute; inset: 0 30px 34px 0; transform: rotate(-4deg); background: var(--wp--preset--color--sand); border-radius: 6px; }

/* Letters by year */
.mg-shelf { border-block: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--card); }
.mg-shelf-row { display: flex; align-items: center; gap: 20px; padding-block: 18px; overflow-x: auto; }
.mg-shelf h2 { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--wp--preset--color--muted); margin: 0; }
.mg-years { display: flex; gap: 8px; }
.mg-years a { font-family: var(--mg-display); font-variant-numeric: tabular-nums; font-size: 15px; text-decoration: none; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--line); padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.mg-years a:first-child { background: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); color: #1E2E2A; }
.mg-years a:hover { border-color: var(--wp--preset--color--spruce); }

/* Sections */
.mg-block { padding-block: 56px; }
.mg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.mg-head h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0; }
.mg-head a { font-family: var(--mg-display); font-size: 15px; }
.mg-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mg-album figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mg-album figcaption { font-family: var(--mg-display); font-size: 15px; }
.mg-album figcaption a { color: var(--wp--preset--color--ink); text-decoration: none; }
.mg-album figcaption small { display: block; color: var(--wp--preset--color--muted); font-size: 13px; }
.mg-stories { background: var(--wp--preset--color--card); border-block: 1px solid var(--wp--preset--color--line); }
.mg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mg-list article { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mg-list time { font-family: var(--mg-display); font-size: 13px; color: var(--wp--preset--color--gold); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.mg-list h3 { font-size: 21px; margin: 0; }
.mg-list h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.mg-list h3 a:hover { color: var(--wp--preset--color--spruce); }
.mg-list p { margin: 0; color: var(--wp--preset--color--muted); font-size: 16px; }

/* Single posts and pages */
.mg-single { padding-block: 40px 64px; }
.mg-single .mg-eyebrow { margin-bottom: 10px; }
.mg-title { font-size: clamp(34px, 5vw, 54px) !important; margin-top: 0 !important; }
.mg-feature img { border-radius: 6px; }
.mg-content > p:first-child::first-letter { font-family: var(--mg-display); }
.mg-content img { border-radius: 6px; height: auto; }
.mg-content .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 1.5rem 0; }
.mg-content .gallery-item { width: auto !important; margin: 0 !important; }
.mg-content .gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 0 !important; }
.mg-content .gallery-caption { font-family: var(--mg-display); font-size: 13px; color: var(--wp--preset--color--muted); }
.mg-content .gallery br { display: none; }
.mg-signoff { margin-top: 2rem; font-size: 32px; }
.mg-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); font-family: var(--mg-display); font-size: 15px; }
.mg-postnav a { text-decoration: none; }
.mg-postnav-next { text-align: right; margin-left: auto; }
.mg-comments { margin-top: 3rem; font-size: 16px; }

/* Listings */
.mg-listing { padding-block: 40px 64px; }
.mg-archive-head { margin-bottom: 2rem; }
.mg-archive-head h1 { font-size: clamp(32px, 4.5vw, 48px); margin: 8px 0 0; }
.mg-archive-desc { color: var(--wp--preset--color--muted); }
.mg-cards .wp-block-post-template { gap: 32px 24px; }
.mg-card-img img { border-radius: 6px; }
.mg-card-date { font-family: var(--mg-display); font-size: 13px; color: var(--wp--preset--color--gold); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: 12px !important; }
.mg-card-title { font-size: 21px !important; margin-top: 4px !important; }
.mg-card-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.mg-card-excerpt { color: var(--wp--preset--color--muted); font-size: 16px; margin-top: 6px !important; }
.mg-pagination { margin-top: 3rem; font-family: var(--mg-display); }

/* Footer */
.mg-site-footer { border-top: 1px solid var(--wp--preset--color--line); }
.mg-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 32px 40px; color: var(--wp--preset--color--muted); font-size: 14px; font-family: var(--mg-display); }
.mg-footer .mg-sig { font-size: 24px; }
.mg-footer a { color: var(--wp--preset--color--muted); }

@media (max-width: 760px) {
	.mg-hero-grid { grid-template-columns: 1fr; gap: 28px; }
	.mg-album, .mg-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.mg-album, .mg-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
	.mg-btn, .mg-years a, .mg-nav a { transition: all .15s ease; }
}