/* Six Foot Five — theme styles */

:root {
	--sff-oswald: var(--wp--preset--font-family--oswald);
	--sff-bitter: var(--wp--preset--font-family--bitter);
	--sff-ink: var(--wp--preset--color--ink);
	--sff-muted: var(--wp--preset--color--muted);
	--sff-rule: var(--wp--preset--color--rule);
	--sff-rust: var(--wp--preset--color--rust);
	--sff-lake: var(--wp--preset--color--lake);
	--sff-cream: var(--wp--preset--color--cream);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sff-rust);
	outline-offset: 2px;
}

/* ---------- Header ---------- */

.sff-header {
	padding-top: 22px;
}

.sff-header__row {
	gap: 4px 24px;
}

.sff-site-title {
	margin: 0;
}

.sff-header__place {
	margin: 0;
	font-family: var(--sff-oswald);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sff-rust);
}

nav.sff-nav {
	margin-top: 12px;
	padding: 10px 0;
	border-top: 2px solid var(--sff-lake);
	border-bottom: 2px solid var(--sff-lake);
}

.sff-nav .wp-block-navigation__container {
	gap: 6px 18px;
}

.sff-nav a {
	color: var(--sff-ink);
	text-decoration: none;
}

.sff-nav a:hover,
.sff-nav a:focus-visible,
body.sff-cat-woodworking .sff-header .sff-nav a[href$="/category/woodworking/"],
body.sff-cat-ai-projects .sff-header .sff-nav a[href$="/category/ai-projects/"],
body.sff-cat-data-analysis .sff-header .sff-nav a[href$="/category/data-analysis/"],
body.sff-cat-recipes .sff-header .sff-nav a[href$="/category/recipes/"],
body.sff-page-photos .sff-header .sff-nav a[href$="/photos/"] {
	color: var(--sff-rust);
}

@media (max-width: 640px) {
	.sff-header__row {
		flex-direction: column;
		align-items: flex-start !important;
	}
	.sff-nav .wp-block-navigation__container {
		justify-content: flex-start !important;
		gap: 4px 16px;
	}
	.sff-nav {
		font-size: 0.8125rem !important;
	}
}

/* ---------- Kickers and section headings ---------- */

.sff-kicker,
.sff-kicker a {
	font-family: var(--sff-oswald);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--sff-rust);
	text-decoration: none;
}

.sff-kicker {
	margin: 0 0 4px;
}

.sff-kicker a:hover {
	color: var(--sff-lake);
}

.sff-section-heading {
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: 10px;
	border-top: 2px solid var(--sff-ink);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Poster ---------- */

.sff-poster {
	max-width: 540px;
	margin: 0;
}

.sff-poster > * {
	margin-block: 0;
}

.sff-poster__art {
	margin: 0;
}

.sff-poster__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.sff-poster__band {
	padding: 16px 18px 18px;
	text-align: center;
}

.sff-poster__band > * {
	margin: 0;
}

.sff-poster__title {
	font-family: var(--sff-oswald);
	font-weight: 700;
	font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
	letter-spacing: 0.09em;
	line-height: 1.05;
	text-transform: uppercase;
}

.sff-poster__band .sff-poster__line {
	margin-top: 6px;
	font-style: italic;
	font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.05rem);
	line-height: 1.35;
}

.sff-poster--backwater .sff-poster__band { background: #1E4B57; }
.sff-poster--backwater .sff-poster__title { color: #F0E2C4; }
.sff-poster--backwater .sff-poster__line { color: #E8B85A; }

.sff-poster--workshop .sff-poster__band {
	background: #F7EEDB;
	border-block: 4px solid #9C3B2A;
}
.sff-poster--workshop .sff-poster__title { color: #9C3B2A; }
.sff-poster--workshop .sff-poster__line { color: #22201C; }

.sff-poster--first-technology .sff-poster__band { background: #1C2A24; }
.sff-poster--first-technology .sff-poster__title { color: #F0E2C4; }
.sff-poster--first-technology .sff-poster__line { color: #E0A53B; }

.sff-poster--ridgeline .sff-poster__band { background: #2A221F; }
.sff-poster--ridgeline .sff-poster__title { color: #F0E2C4; }
.sff-poster--ridgeline .sff-poster__line { color: #E0A53B; }

.sff-poster--long-view .sff-poster__band { background: #22201C; }
.sff-poster--long-view .sff-poster__title { color: #F2E6CC; }
.sff-poster--long-view .sff-poster__line { color: #E0B85A; }

.sff-poster--kitchen .sff-poster__band {
	background: #F7EEDB;
	border-block: 4px solid #2E3F5C;
}
.sff-poster--kitchen .sff-poster__title { color: #2E3F5C; }
.sff-poster--kitchen .sff-poster__line { color: #A3302A; }

/* ---------- Hero (poster + intro) ---------- */

.sff-hero {
	margin-top: clamp(24px, 4vw, 44px) !important;
	margin-bottom: 0 !important;
	gap: clamp(24px, 4vw, 56px) !important;
	align-items: center !important;
}

.sff-hero__poster .sff-poster {
	margin-inline: auto;
}

.sff-hero__title {
	margin: 0 0 12px;
	font-family: var(--sff-oswald);
	font-weight: 700;
	font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

.sff-hero__desc {
	font-size: 1.125rem;
	color: var(--sff-muted);
}

.sff-hero__desc p {
	margin: 0 0 0.75em;
}

.sff-latest__heading {
	margin: 0 0 6px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--sff-ink);
}

/* ---------- Post lists ---------- */

.sff-list .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sff-card {
	padding: 18px 0;
	border-top: 1px solid var(--sff-rule);
}

.sff-list .wp-block-post-template > li:first-child .sff-card {
	border-top: 0;
}

.sff-card > *,
.sff-card__text > * {
	margin-block: 0;
}

.sff-card__title {
	margin: 2px 0 6px !important;
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	line-height: 1.2;
}

.sff-card__excerpt {
	margin: 0 0 6px !important;
	color: var(--sff-muted);
}

.sff-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.sff-card__excerpt .wp-block-post-excerpt__more-text {
	display: none;
}

.sff-card--media {
	gap: 20px;
}

.sff-card__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sff-card__image {
	flex: 0 0 auto;
	margin: 0;
}

.sff-card__image img {
	object-fit: cover;
}

.sff-list--compact .sff-card {
	padding: 14px 0;
}

.sff-list--compact .sff-card__title {
	font-size: 1.2rem;
}

@media (max-width: 600px) {
	.sff-card__image,
	.sff-card__image img {
		width: 88px !important;
		height: 88px !important;
	}
}

.wp-block-query-pagination {
	margin-top: 28px;
	padding-top: 14px;
	border-top: 2px solid var(--sff-ink);
	font-family: var(--sff-oswald);
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

.sff-empty {
	color: var(--sff-muted);
	font-style: italic;
}

/* ---------- Single post ---------- */

.sff-single__head {
	margin-top: clamp(28px, 5vw, 56px);
}

.sff-single__title {
	margin: 4px 0 12px !important;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	line-height: 1.12;
}

.sff-byline {
	gap: 0 !important;
	font-size: 0.9375rem;
	color: var(--sff-muted);
}

.sff-byline > * {
	margin: 0;
}

.sff-byline .wp-block-post-author-name::before {
	content: "By ";
}

.sff-byline .wp-block-post-date::before {
	content: "\00B7";
	margin: 0 0.5em;
}

.sff-single__image {
	margin-top: 28px !important;
}

.sff-content {
	margin-top: 28px;
}

.sff-hero + .sff-content {
	margin-top: clamp(32px, 5vw, 56px) !important;
}

.sff-content h2,
.sff-content h3 {
	margin-top: 1.6em;
}

.sff-content img {
	height: auto;
}

.sff-postnav {
	margin-top: 48px !important;
	padding-top: 14px;
	border-top: 2px solid var(--sff-ink);
	font-family: var(--sff-oswald);
	letter-spacing: 0.04em;
}

.sff-postnav a {
	text-decoration: none;
}

/* ---------- Comments ---------- */

.sff-comments {
	margin-top: 48px !important;
}

.sff-comment {
	padding: 14px 0;
	border-top: 1px solid var(--sff-rule);
}

.sff-comment .wp-block-comment-author-name {
	font-weight: 700;
}

.sff-comment .wp-block-comment-date {
	color: var(--sff-muted);
	font-size: 0.875rem;
}

.wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]),
.wp-block-post-comments-form textarea {
	border: 1px solid var(--sff-rule);
	border-radius: 0;
	background: #FBF6EA;
	padding: 10px 12px;
	font-family: var(--sff-bitter);
	font-size: 1rem;
}

/* ---------- Footer ---------- */

.sff-footer {
	margin-top: clamp(56px, 8vw, 96px);
	padding-top: 36px;
	padding-bottom: 32px;
	background: var(--sff-lake);
	color: var(--sff-cream);
}

.sff-footer__row {
	gap: 24px 48px;
}

.sff-footer .wp-block-site-title a,
.sff-footer a {
	color: var(--sff-cream);
	text-decoration: none;
}

.sff-footer a:hover {
	color: var(--wp--preset--color--mustard);
}

.sff-footer__title {
	font-size: 1.6rem !important;
}

.sff-footer__credit {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: #E8DCC0;
}

.sff-footer__nav {
	gap: 6px 22px;
}

/* Template parts sit flush with the page edges. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
}