/* =========================================================================
   Project Archotype Starter — main.css
   Architecture carried from the GBS build. The :root tokens below are
   NEUTRAL PLACEHOLDERS — replace these values when you set the real design
   direction. Nothing here is committed to the Archotype look yet.
   ========================================================================= */

:root {
	/* Fonts — placeholder system stack. Swap for the real type later. */
	--display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Colors — neutral grayscale placeholders. */
	--white: #ffffff;
	--off: #f4f4f4;
	--ink: #111111;
	--body-color: #3a3a3a;
	--muted: #8a8a8a;
	--rule: #e6e6e6;
	--link: #3a6ea5;

	/* Layout */
	--max-width: 1400px;
	--pad: 64px;
	--pad-mobile: 24px;
	
	
	
	
	--nav-h: 60px;
	--foot-h: 120px;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html { scroll-behavior: smooth; }

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--body);
	color: var(--body-color);
	background: var(--white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.2; }

/* Container */
.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--pad);
}
.content-narrow { max-width: 760px; }

.site-main { flex: 1 0 auto; padding: 48px 0; }

/* ---- Navigation ---- */
.site-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--nav-h);
	background: var(--white);
	border-bottom: 1px solid var(--rule);
}
.nav-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--pad);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.nav-brand { font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.nav-menu { list-style: none; display: flex; gap: 28px; }
.nav-menu a { color: var(--ink); }

/* Hamburger */
.nav-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 28px;
	height: 28px;
	background: none;
	border: 0;
	cursor: pointer;
}
.nav-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ink);
	transition: transform .25s ease, opacity .25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile overlay */
.mobile-overlay {
	position: fixed;
	inset: var(--nav-h) 0 0 0;
	background: var(--white);
	z-index: 99;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.mobile-overlay.open { display: flex; }
.mobile-menu { list-style: none; display: flex; flex-direction: column; gap: 20px; text-align: center; }
.mobile-menu a { color: var(--ink); font-family: var(--display); font-size: 1.25rem; }
body.menu-open { overflow: hidden; }

/* ---- Home placeholder ---- */
.home-placeholder {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 80px var(--pad-mobile);
}
.home-eyebrow {
	font-family: var(--mono);
	letter-spacing: 0.5em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--muted);
	margin-bottom: 0.5rem;
	padding-left: 0.5em;
}
.home-wordmark {
	font-family: var(--display);
	font-size: clamp(2.5rem, 8vw, 6rem);
	letter-spacing: 0.15em;
	color: var(--ink);
}
.home-note { color: var(--muted); margin-top: 1rem; letter-spacing: 0.1em; }

/* ---- Parallax hero (skeleton — not used on the starter front page) ---- */
.hero-photo-wrap { position: relative; width: 100%; height: 60vh; overflow: hidden; }
.hero-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	transform: scale(1.08);
	will-change: transform;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--pad);
}

/* ---- Blog archive ---- */
.archive-header { padding: 24px 0 32px; }
.archive-title { font-size: 2rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: var(--white); }
.blog-card-link { color: inherit; text-decoration: none; display: block; }
.blog-card-link:hover { text-decoration: none; }
.blog-card-thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-card-body { padding: 20px; }
.blog-card-date { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.blog-card-title { font-size: 1.25rem; margin: 8px 0; }
.blog-card-excerpt { color: var(--body-color); font-size: 0.95rem; }

.pagination { margin-top: 48px; }
.pagination ul { list-style: none; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 6px; }

/* ---- Single post ---- */
.single-post { padding: 24px 0 64px; }
.single-layout { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; }
.single-main { min-width: 0; }
.single-header { margin-bottom: 32px; }
.single-date { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.single-header .entry-title { font-size: clamp(1.8rem, 4vw, 2.75rem); margin-top: 8px; }
.single-post-sidebar { position: sticky; top: 80px; }
.single-tags { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }
.single-tags a { font-size: 0.85rem; margin-right: 10px; }

/* In-content typography */
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2 { font-size: 1.6rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.3rem; margin-top: 1.4em; }
.entry-content a { color: var(--link); text-decoration: underline; }

/* Content image frame (GBS pattern, neutral) 
.single-entry-content img {
	background: #2a2a2a;
	border-radius: 8px;
	padding: 5% 20%;
}
.single-entry-content figcaption {
	text-align: center;
	color: var(--muted);
	font-size: 0.85rem;
	margin-top: 0.5em;
}*/

/* ---- Page ---- */
.page-header { padding: 16px 0 24px; }
.page-header .entry-title { font-size: clamp(1.8rem, 4vw, 2.75rem); }

/* ---- Footer ---- */
.site-footer {
	flex-shrink: 0;
	background: var(--off);
	border-top: 1px solid var(--rule);
	padding: 40px 0;
}
.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--pad);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-brand { font-family: var(--display); font-weight: 700; color: var(--ink); }
.footer-copy { color: var(--muted); font-size: 0.85rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
	.container,
	.nav-inner,
	.footer-inner { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
	.nav-menu { display: none; }
	.nav-hamburger { display: flex; }
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.single-layout { grid-template-columns: 1fr; }
	.single-post-sidebar { display: none; }
	.single-entry-content img { padding: 4% 6%; }
}

@media (max-width: 560px) {
	.blog-grid { grid-template-columns: 1fr; }
}

@media (min-width: 861px) {
	.mobile-overlay { display: none !important; }
}