/* === Font Setup === */
@font-face {
  font-family: 'Sancreek';
  src: url('fonts/Sancreek.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Patua';
  src: url('fonts/Patua.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* === Base Reset === */
body {
  margin: 0;
  padding: 0;
  font-family: Georgia, serif;
  background-color: #C6B292; /* greenish sepia background */
  color: #2C1B10;
  line-height: 1.6;
}

/* === Sticky Header === */
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: #E2C8A6; /* poster paper */
  padding: 1em;
  border-bottom: 3px solid #8A6845;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  text-align: center;
}

header h1 {
  font-family: 'Sancreek', cursive;
  font-size: 3.2em;
  color: #2F3B2D; /* dark green-black ink */
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* === Sticky Nav Bar === */
nav {
  position: sticky;
  top: 4.4em;
  z-index: 998;
  background-color: #5B3C26; /* dark wooden tone */
  padding: 0.4em 0;
  border-bottom: 2px solid #3C2A1B;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
  gap: 1em;
}

nav li {
  margin: 0;
}

nav a {
  font-family: 'Patua', cursive;
  color: #FFF8DC;
  text-decoration: none;
  padding: 0.6em 1.2em;
  background: linear-gradient(to bottom, #B88956, #7C563A); /* brass gradient */
  border: 2px inset #D4B07A;
  border-radius: 5px;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}

nav a:hover {
  background-color: #D7B279;
  color: #2C1B10;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* === Main Content === */
main {
  max-width: 800px;
  margin: 2em auto;
  padding: 1.5em;
  background-color: #FFF9F0; /* light parchment content box */
  border: 2px solid #D6B78A;
  border-radius: 4px;
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.1),
    2px 2px 6px rgba(0, 0, 0, 0.08);
}

/* === Headings === */
h2, h3 {
  font-family: 'Patua', cursive;
  color: #3C2A1B;
  margin-top: 1.5em;
}

/* === Images === */
img {
  max-width: 100%;
  display: block;
  margin: 1em auto;
  border: 1px solid #D6B78A;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* === Body Links === */
main a {
  color: #7D5A3C;
  text-decoration: underline;
  font-weight: bold;
}
main a:hover {
  color: #4A2E1F;
  text-shadow: 1px 1px 1px rgba(125, 90, 60, 0.2);
}

/* === Buttons === */
.button {
  font-family: 'Patua', cursive;
  font-size: 1em;
  background: linear-gradient(to bottom, #B88956, #7C563A); /* Brass-toned gradient */
  color: #FFF8DC; /* Light parchment text */
  padding: 0.6em 1.2em;
  border: 2px inset #D4B07A; /* Slight bevel effect */
  border-radius: 6px;
  box-shadow: 
    inset 0 0 3px rgba(0, 0, 0, 0.2),
    2px 2px 4px rgba(0, 0, 0, 0.1); /* Tactile depth */
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}

.button:hover {
  background-color: #D7B279; /* Lighter brass on hover */
  color: #2C1B10; /* Deep brown ink tone */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.button:active {
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
  transform: scale(0.98); /* Tap/press effect */
}

/* === Footer === */
footer {
  text-align: center;
  font-size: 0.9em;
  color: #4A2E1F; /* warmer brown to match theme */
  margin-top: 2em;
  padding: 1em;
  background-color: transparent; /* keeps background clean */
  font-family: Georgia, serif;
}

footer a {
  color: #7D5A3C;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

footer a:hover {
  color: #3C2A1B;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.back-to-top {
  display: inline-block;
  margin-top: 1em;
  padding: 0.4em 0.8em;
  border: 2px solid #7D5A3C;
  border-radius: 5px;
  background-color: #EAD6B4;
  font-family: 'Patua', cursive;
}

.back-to-top:hover {
  background-color: #D5A86A;
  color: #2C1B10;
}

/* === Text Alignment Utilities === */
.txt-left {
  text-align: left;
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

/* === Image Alignment Utilities === */
.img-left {
  float: left;
  margin-right: 1em;
  max-width: 50%;
}

.img-right {
  float: right;
  margin-left: 1em;
  max-width: 50%;
}

.img-center {
  display: block;
  margin: 1em auto;
}

/* === Image Size Utilities === */
.img-small {
  width: 25%;
}

.img-medium {
  width: 50%;
}

.img-large {
  width: 100%;
}

/* === Box Width + Centering === */
.box-small {
  max-width: 200px;
  margin: 0 auto;
}

.box-medium {
  max-width: 400px;
  margin: 0 auto;
}

.box-large {
  max-width: 800px;
  margin: 0 auto;
}

/* === Spacing Utilities === */
.mt-1 { margin-top: 1em; }
.mb-1 { margin-bottom: 1em; }
.pt-1 { padding-top: 1em; }
.pb-1 { padding-bottom: 1em; }

/* === Visibility Utilities === */
.hide {
  display: none;
}

.show {
  display: block;
}