/* FONTS */

@font-face {
    font-family: 'josefin_sanssemibold';
    src: url('../fonts/josefinsans-semibold-webfont.woff2') format('woff2'),
         url('../fonts/josefinsans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;			}

@font-face {
    font-family: 'firasans-book';
    src: url('../fonts/firasans-book.woff2') format('woff2'),
         url('../fonts/firasans-book.woff') format('woff');
    font-weight: normal;
    font-style: normal;			}
 
 @font-face {
    font-family: 'firasans-bold';
    src: url('FiraSans-Bold.woff2') format('woff2'),
        url('FiraSans-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
   
      
 @font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/EBGaramond-Medium.woff2') format('woff2'),
        url('../fonts/EBGaramond-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;	}

@font-face {
    font-family: 'EB Garamond';
    src: url(../fonts/'EBGaramond-MediumItalic.woff2') format('woff2'),
        url(../fonts/'EBGaramond-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;	}


/* GENERAL STYLING */

body {
    max-width: 650px; /* Changed from width to max-width for responsiveness */
    margin: auto;
    padding: 0;
    background-color: white;           }

.cream {
    max-width: 100%;
    margin: auto;
    border: 1px solid black;
    background-image: url(greybar00.jpg);
    background-repeat: no-repeat;    
 /*   background-color: #fff0d0; */
    background-color: #fdfaf3; /* Classic book parchment */
    color: #2e2e2e;           /* Deep charcoal, softer than pure black */
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap; 
    align-content: flex-start; 	}

h1	{
	font: 24px/36px josefin_sanssemibold, Arial, sans-serif;
	color: #222;
	background-color: #fff0d0; 
	text-align: center;
	width:     calc(100% + 40px);
	margin-left: -20px; margin-bottom: 10px;
	padding: 20px;
}

h2	{
	font: 20px/30px josefin_sanssemibold, Arial, sans-serif;
	color: #222;
	text-align: left;
	width:   100%;
	margin-bottom: 8px; margin-top: 24px;
}

p.lead-para {
    font: 16px/17px 'josefin_sanssemibold', sans-serif;
    font-weight: normal;    
	background-color: white;
	margin-top: -8px; margin-bottom: 8px;
	}

h3	{
	font: 18px/24px 'josefin_sanssemibold', Arial, sans-serif;
	color: #222;
	text-align: left;
	width:   100%;
	margin-bottom: 4px; margin-top: 24px;
}

h4	{
	font: 15px/20px josefin_sanssemibold, Arial, sans-serif;
	color: #222;
	background-color: #fff0d0; 
	text-align: left;
	width:  calc (100% + 40px) ; 
	padding: 0 20px;
	margin-left: -20px;
	margin-bottom: 4px;
	margin-top: 4px;
}

.panorama {
    display: block;
    width:  calc(100% + 40px); /* Default for mobile, breaking over the 20px padding */
    margin-left: -20px; margin-top: 20px;
    height: auto;
    border-bottom: 1px solid black; /* Optional: matches theme */
}
@media (min-width: 620px) {
    .panorama {
        width: calc(100% + 60px);
        margin-left: -30px;
        max-width: none; /* Prevents parent constraints from shrinking it */    }
}

main {
    width: 100%; 
    padding: 20px;
    margin-top: 15px;
    box-sizing: border-box;	}
    
/* Navigation pods */
.pod-top, .pod-bottom {
	margin-top: 100px;
    display: flex;
    box-sizing: border-box; /* to not accidentally push the pods wider than the screen*/
}

.pod-top button, .pod-bottom button {
    flex: 1;
    margin: 5px; 
    height: 40px; line-height: 40px;
    cursor: pointer;	}

button {	
    font-family: "josefin_sanssemibold", Arial, sans-serif;
    font-size: 14px;
	background-color: #fff0d0}

button a {
    text-decoration: none;
    color: black;
    display: block; /*makes the entire button clickable*/
    width: 100%;
    height: 100%;
    line-height: 40px; /* Centers text vertically */
}

/* --- DESKTOP VIEW (600px and wider) --- */
@media (min-width: 600px) {
    .pod-top, .pod-bottom {
        flex: 0 0 50%; /* Each takes half width */
        position: sticky;
        top: 0;
        z-index: 1000;    }
}

/* --- MOBILE VIEW (Under 600px) --- */
@media (max-width: 599px) {
    .pod-top {
        flex: 0 0 100%; /* Full width */
        position: sticky;
        top: 0;
        z-index: 1000;
       /*  background-color: #fff0d0; Prevents seeing content behind sticky pod */
    } 
    .pod-bottom {
    	margin-top: 20px; /*overides default top-margin set at 85px*/
        flex: 0 0 100%; /* Full width */
/*         position: static; Scrolls away */
        position: sticky;
        top: 0;    }
}