/* FONTS */

@font-face {
    font-family: 'Josefin Sans';
    src: url('JosefinSans-Regular.woff2') format('woff2'),
        url('JosefinSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@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: 'Josefin Sans';
    src: url('../fonts/JosefinSans-Bold.woff2') format('woff2'),
        url('../fonts/JosefinSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('JosefinSans-Light.woff2') format('woff2'),
        url('JosefinSans-Light.woff') format('woff');
    font-weight: 300;
    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: 600px; /* 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:   100%; /* after adding 40px for its own padding breaking over the 20px padding 0f the 'cream' box */
	margin-left: -20px;
	padding: 20px;
}

p.lead-para {
    font: 15px/20px'josefin_sanssemibold';
    font-weight: normal;    
	background-color: white;
	}

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

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:   100%; /* breaking over the 20px padding */
	padding: 0 20px;
	margin-left: -20px;
	margin-bottom: 4px;
}

p {
font-family: 'EB Garamond', serif;
font-size: 14px;
line-height: 1.5em;
color: #111;	
margin-top: 0;	}

p.tagline {
font-style: italic;
margin-top: 0; }

.contents h4, .tagline	{
margin-bottom: 0; margin-top: 0;}
.contents p	{ margin-top: 0; margin-bottom; 4px}

.panorama {
    display: block;
    width:  calc(100% + 40px); /* Default for mobile, breaking over the 20px padding */
    margin-left: -20px;
    height: auto;
    border-bottom: 1px solid black; /* Optional: matches your 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: 25px;
    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;
	}

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;
    }
}

 /* BOOK COVER AND LINKS */

#bookpage {
  max-width: 600px;
  margin: 60px auto 20px auto; /* Centers the container */
  font-family: josefin_sanssemibold, Arial, sans-serif;
  font-size: 15px;
}

.book-container {
  display: flex;
  flex-wrap: wrap; /* Allows stacking on small screens */
  gap: 20px;       /* Space between image and links */
  align-items: center; /* Vertical center on desktop */
}

.book-cover {
  flex: 0 0 275px; /* Keeps image at its original width */
}

.book-cover img {
  width: 100%;
  height: auto;
  border: 2px solid #000;
}

.book-links {
  flex: 1;         /* Takes up remaining 325px on desktop */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;       /* Vertical spacing between buttons */
}

/* Styling the buttons to look like your table cells */
.greylink {
  display: block;
  text-align: right;
  padding: 10px 15px;
  border: 1px solid #ccc;
  text-decoration: none;
  background-color: #f9f9f9;
  color: #333;
}

.red-inbox {
  color: #a00; /* Example red color for specific links */
}

/* Mobile Adjustment */
@media (max-width: 550px) {
  .book-links {
    text-align: center;
  }
  .greylink {
    text-align: center; /* Better usability on thumbs */
  }
}