* { box-sizing: border-box; }
html, 
	body { 
		margin:0;
	padding:0;
	background-color:#f6f1e7; /* your tan base */
	background-image: url("../assets/background.png");
	background-repeat: repeat; /* tiles across entire site */
	background-size: auto; /* or 'contain' or '200px' depending on pattern size */
	color:#1b2620;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	line-height:1.5;}
	a { color:#2b6f49; text-decoration:none; }
	a:focus, button:focus, .btn:focus { outline:2px dashed #2b6f49; outline-offset:2px; }

	.app { 
		width:100%; 
		max-width:300px; 
		margin:0 auto; 
		min-height:100svh; 
		display:flex; 
		flex-direction:column; }

	.content {
		padding: 16px;
		flex: 1;
		background-color: rgba(245, 240, 225, 0.95); /* soft tan overlay */
		border-radius: 12px;
		margin: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

	.content section,
	.content article,
	.content header,
	.content footer,
	.content div,
	.content p,
	.content h1,
	.content h2,
	.content h3,
	.content ul,
	.content ol {
		background-color: rgba(255, 255, 255, 0.8); 
		border-radius: 8px;
		padding: 10px;
		margin-bottom: 10px;
		}


	.site-header { 
		position:sticky; 
		top:0; z-index:10; 
		background:#234231; 
		padding:10px 12px; 
		border-bottom:1px solid #2e4a39; }

	.brand { 
		display:inline-flex; 
		gap:8px; 
		align-items:center; 
		font-weight:800; 
		letter-spacing:.4px; 
		color:#ffffff; }

	.brand img { display:block; }

	.site-nav { 
		display:flex; justify-content:space-between; 
		gap:6px; 
		padding:6px 8px; 
		background:#efe7d6; 
		border-bottom:1px solid #d8cbb4; 
		position:sticky; 
		top:48px; 
		z-index:9; }

	.site-nav a { 
		flex:1; 
		text-align:center; 
		padding:8px 6px; 
		border-radius:8px; 
		font-weight:600; 
		color:#2a3a31; 
		background:#f5ead5; 
		border:1px solid #e2d6c1; }

	.site-nav a.active { 
		background:#2f6f4a; 
		border-color:#4e8b61; 
		color:white; }

	.site-footer { 
		padding:14px 12px; 
		border-top:1px solid #d8cbb4; 
		background:#efe7d6; 
		font-size:.85rem; 
		color:#5a6b5f; }

	.site-footer a { color:#2b6f49; }

	.btn { 
		display:inline-block; 
		margin-top:8px; 
		padding:8px 10px; 
		border-radius:8px; 
		background:#2f6f4a; 
		color:white; 
		font-weight:700; 
		border:1px solid #4e8b61; }

	.btn:hover { filter:brightness(1.05); }

	h1 { 
		font-family: 'Playfair Display', serif; 
		font-size:1.5rem; 
		line-height:1.2; 
		margin:10px 0 6px; }

	h2 { 
		font-size:1.05rem; 
		margin:10px 0 6px; }

	p, li { font-size:.95rem; 
		color:#21352c; }


	.hero .full { 
		width:100%; 
		border-radius:12px; 
		display:block; 
		border:1px solid #e8dcc7; 
		margin-top:8px; }

	.cards { 
		display:grid; 
		gap:10px; 
		margin-top:12px; }

	.card { 
		padding:10px; 
		background:#ffffffaf0; 
		border:1px solid #e2d6c1; 
		border-radius:12px; }

	.card h2 { margin-top:0; }

	.embed .ratio-16x9 { 
		position:relative; 
		width:100%; 
		aspect-ratio:16 / 9; 
		border-radius:12px; 
		overflow:hidden; 
		border:1px solid #e8dcc7; 
		background:#000; }

	.embed iframe { 
		width:100%; 
		height:100%; 
		border:0; 
		display:block; }

	.caption { font-size:.8rem; color:#5a6b5f; }

	/* Recipes */
	.section-header { margin:6px 0 10px; }

	.meta { 
		display:flex; 
		gap:6px; 
		padding:0; 
		list-style:none; 
		margin:6px 0; 
		font-size:.8rem; 
		color:#4b5e52; }

	.recipe { 
		padding:10px; 
		background:#ffffffaf0; 
		border:1px solid #e2d6c1; 
		border-radius:12px; 
		margin-bottom:12px; }

	.recipe img { 
		width:100%; 
		border-radius:10px; 
		border:1px solid #e8dcc7; }

	.recipe--split { 
		display:grid; 
		grid-template-columns:1fr; 
		gap:8px; }

	.recipe--stack img { margin:6px 0; }

	.recipe--grid .grid { display:grid; gap:8px; }

	.note { font-size:.85rem; color:#4b5e52; }

	.list ul { padding-left:18px; }

	.callout { 
		margin-top:12px; 
		padding:10px; 
		border:2px dashed #5a9b6e; 
		border-radius:12px; 
		background:#faf2e3; }

	.downloads { margin-top:12px; }

	.hide-text { 
		position:absolute; 
		width:1px; 
		height:1px; 
		overflow:hidden; 
		clip:rect(1px,1px,1px,1px); 
		white-space:nowrap; }