/* Ctuckin — Our Corner of Currituck */

/* Mobile first. The base rules are the 390px boards; the min-width blocks
   build up to the 1200px boards. Breakpoints: 620 (phone → small tablet)
   and 880 (two-column layouts). */

:root {
	--paper: #F7F4EA;
	--paper-lift: #FFFDF6;
	--ink: #2B2A24;
	--ink-body: #55503F;
	--ink-prose: #45412F;
	--muted: #9A9483;
	--green: #385B34;
	--green-dark: #2C4A29;
	--crimson: #850931;
	--crimson-dark: #6E0727;
	--rule: rgba(56,91,52,0.18);
	--rule-crimson: rgba(133,9,49,0.22);

	--serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--green); }

img { max-width: 100%; }

.constrain {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}


/*===================
  Shared pieces */

.eyebrow {
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted);
}
.eyebrow.light { color: var(--paper); letter-spacing: 0.26em; }
.eyebrow.crimson { font-size: 11px; font-weight: 500; color: var(--crimson); }

.actions { display: flex; gap: 10px; }

.btn {
	display: inline-block;
	padding: 17px 24px;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn.crimson { background: var(--crimson); color: var(--paper-lift); }
.btn.crimson:hover { background: var(--crimson-dark); color: var(--paper-lift); }

.btn.ghost { padding: 15px 12px; border: 1px solid rgba(56,91,52,0.4); color: var(--green); }
.btn.ghost:hover { background: rgba(56,91,52,0.06); color: var(--green); }

.btn.ghost.light { padding: 17px 24px; border-color: rgba(247,244,234,0.6); color: var(--paper-lift); }
.btn.ghost.light:hover { background: rgba(247,244,234,0.14); color: var(--paper-lift); }

.btn.cream { align-self: stretch; margin-top: 4px; padding: 15px 24px; background: var(--paper); color: var(--green); letter-spacing: 0.1em; }
.btn.cream:hover { background: #FFFFFF; color: var(--green); }

.slice { padding: 34px 0 38px; }
.slice.tight { padding: 34px 0 0; }


/*===================
  Titlebar */

#titlebar {
	background: var(--paper);
	border-bottom: 1px solid rgba(56,91,52,0.2);
}
#titlebar .constrain {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	padding-bottom: 12px;
}
#titlebar .logo img { display: block; height: 30px; width: auto; }

#titlebar .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
#titlebar .links .link a {
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green);
}
#titlebar .links .link a:hover { color: var(--crimson); }


/*===================
  Footbar */

#footbar { background: var(--ink); }
#footbar .constrain {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 26px;
	padding-bottom: 26px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.08em;
	color: rgba(247,244,234,0.6);
}


/*===================
  Home — hero */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* The boards draw the titlebar inside the hero block; these are the board
	   heights (620 / 780) less the titlebar above us (89 / 85). */
	min-height: 531px;
	overflow: hidden;
}
.hero .image { position: absolute; inset: 0; }
.hero .image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24,32,22,0.66) 0%, rgba(24,32,22,0.5) 26%, rgba(24,32,22,0.58) 48%, rgba(24,32,22,0.82) 78%, rgba(24,32,22,0.9) 100%);
}
.hero .overlay { position: relative; width: 100%; padding-bottom: 32px; }
.hero .overlay .constrain { display: flex; flex-direction: column; gap: 18px; }
.hero h1 {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--paper-lift);
	text-wrap: pretty;
}
.hero .actions { flex-direction: column; margin-top: 4px; }


/*===================
  Home — cards */

.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
}
.card.paper { background: var(--paper-lift); border: 1px solid var(--rule-crimson); }
.card.green { background: var(--green); justify-content: center; }

.card h2 { margin: 0; font-size: 27px; font-weight: 400; line-height: 1.25; color: var(--ink); }
.card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-body); }

.card.green h2 { color: var(--paper); }
.card.green p { color: rgba(247,244,234,0.82); }

.card .more {
	margin-top: 4px;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--crimson);
}
.card .more:hover { color: var(--green); }


/*===================
  Home — photo band */

.band { position: relative; margin: 0; }
.band img { display: block; width: 100%; height: 220px; object-fit: cover; }
.band figcaption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 10px 16px;
	background: var(--paper);
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--green);
}


/*===================
  Home — social */

.social { display: flex; flex-direction: column; gap: 18px; }
.social .text { display: flex; flex-direction: column; gap: 18px; }
.social .lead {
	margin: 0;
	font-size: 21px;
	line-height: 1.55;
	color: var(--ink-body);
	text-wrap: pretty;
}
.social .actions .btn { flex: 1; }


/*===================
  Eggs — masthead */

.masthead {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.masthead .text { display: flex; flex-direction: column; gap: 16px; }
.masthead h1 {
	margin: 0;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--ink);
	text-wrap: pretty;
}
/* Full bleed on phones — the board runs it edge to edge, past the gutter. */
.masthead img {
	display: block;
	width: calc(100% + var(--gutter) * 2);
	max-width: none;
	margin-left: calc(var(--gutter) * -1);
	margin-right: calc(var(--gutter) * -1);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}


/*===================
  Eggs — specs */

.specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	margin: 26px 0 30px;
	padding: 22px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.spec { display: flex; flex-direction: column; gap: 5px; }
.spec .key {
	font-family: var(--sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.spec .val { font-size: 18px; line-height: 1.3; color: var(--ink); }


/*===================
  Eggs — prose */

.prose {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-bottom: 30px;
}
.prose .col { display: flex; flex-direction: column; gap: 22px; }
.prose p { margin: 0; font-size: 18px; line-height: 1.68; color: var(--ink-prose); }
.prose strong { font-weight: 600; }

.callout {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 22px;
	background: var(--paper-lift);
	border: 1px solid var(--rule-crimson);
}
.callout p { font-size: 18px; line-height: 1.6; }


/*===================
  Eggs — closing */

.closing {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0 0 34px;
	padding: 28px 24px;
	background: var(--green);
}
.closing p {
	margin: 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--paper);
}
.closing .signature {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 21px;
	line-height: 1.3;
}
.closing .signature .thanks { font-style: italic; color: rgba(247,244,234,0.9); }
.closing .signature .name { color: var(--paper); }


/*===================
  620px — small tablet: the titlebar and footbar go back to one row, type
  steps up, buttons stop being full width */

@media (min-width: 620px) {
	:root { --gutter: 32px; }

	.eyebrow.light { letter-spacing: 0.3em; }

	.actions { flex-wrap: wrap; gap: 14px; }
	.btn { padding: 15px 30px; font-size: 14px; }
	.btn.ghost { padding: 12px 22px; }
	.btn.ghost.light { padding: 15px 30px; }
	.btn.cream { align-self: flex-start; margin-top: 6px; padding: 13px 24px; }

	.slice { padding: 56px 0 48px; }
	.slice.tight { padding: 48px 0 0; }

	#titlebar .constrain {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding-top: 22px;
		padding-bottom: 22px;
	}
	#titlebar .logo img { height: 40px; }
	#titlebar .links { gap: 34px; }
	#titlebar .links .link a { font-size: 13px; letter-spacing: 0.18em; }

	#footbar .constrain {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding-top: 34px;
		padding-bottom: 34px;
		font-size: 13px;
	}

	.hero { min-height: 560px; }
	.hero .overlay { padding-bottom: 48px; }
	.hero .overlay .constrain { gap: 26px; }
	.hero h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.14; }
	.hero .actions { flex-direction: row; margin-top: 6px; }

	.card { padding: 32px 30px; }
	.card h2 { font-size: 30px; }

	.band img { height: 300px; }

	.social .actions .btn { flex: 0 0 auto; }

	.masthead { gap: 32px; padding-bottom: 36px; }
	.masthead h1 { font-size: clamp(34px, 4.5vw, 54px); line-height: 1.15; }
	/* Back inside the gutter. Capped, because 4:5 across a full single column
	   at this width makes the image taller than the viewport. */
	.masthead img { width: 100%; max-width: 460px; margin-left: 0; margin-right: 0; }

	.specs { gap: 24px; margin: 0 0 40px; }

	.prose { gap: 26px; }
	.prose p, .callout p { font-size: 20px; }
	.callout { gap: 12px; padding: 30px 32px; }

	.closing { gap: 28px; padding: 34px 30px; margin-bottom: 56px; }
	.closing p, .closing .signature { font-size: 24px; }
	.closing .signature { gap: 8px; }
}


/*===================
  880px — the two-column layouts */

@media (min-width: 880px) {
	:root { --gutter: 52px; }

	.eyebrow { font-size: 12px; letter-spacing: 0.24em; }

	.slice { padding: 84px 0 72px; }
	.slice.tight { padding: 76px 0 0; }

	.hero { min-height: 695px; }
	.hero .overlay { padding-bottom: 56px; }
	.hero h1 { max-width: 20ch; }

	.cards { grid-template-columns: 1fr 1fr; gap: 32px; }
	.card { gap: 14px; padding: 40px 42px; }
	.card h2 { font-size: 34px; }
	.card p { font-size: 18px; }
	.card .more { margin-top: 6px; font-size: 14px; }

	.band img { height: 420px; }
	.band figcaption { padding: 14px 24px; font-size: 12px; letter-spacing: 0.2em; }

	.masthead {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 64px;
		align-items: center;
		padding-bottom: 44px;
	}
	.masthead .text { gap: 22px; }
	.masthead img { max-width: 100%; }

	.specs { grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 56px; padding: 26px 0; }
	.spec { gap: 6px; }
	.spec .key { font-size: 11px; letter-spacing: 0.22em; }
	.spec .val { font-size: 20px; }

	.prose {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		padding-bottom: 40px;
	}
	.prose .col { gap: 26px; }

	.closing {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
		margin: 20px 0 76px;
		padding: 44px 48px;
	}
	.closing p { max-width: 38ch; }
	.closing .signature { align-items: flex-end; text-align: right; }

	.social .lead { font-size: 26px; }
	.social .actions { gap: 12px; margin-top: 6px; }
}