/* =========================
   PAGE BASE
========================= */
body {
  background: #fff2e6;
  color: #663300;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 10px;
  line-height: 1.5;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 8px;
  background: #fff8f2;
  border-radius: 5px;
}

/* =========================
   HEADINGS
========================= */

h1 { font-size: 1.3em; }
h2 { font-size: 1.15em; color: #855C33; }
h3 { font-size: 1.05em; color: #af7904; }

/* =========================
   LINKS (underline only for text links)
========================= */

a {
  color: #a64d00;
  text-decoration: none;
}

a:not(:has(img)) {
  border-bottom: 3px solid rgba(200, 100, 0, 0.5);
}

a:hover:not(:has(img)) {
  color: #7a3a00;
  border-bottom-color: #7a3a00;
}

a:focus {
  outline: 3px solid #e0a874;
  outline-offset: 2px;
}

/* =========================
   IMAGES (GLOBAL BEHAVIOUR)
========================= */

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: bottom;
  border-radius: 8px;
  border: 2px solid #994d00;   /* <-- restores thumbnail border */
}

/* spacing when images appear together */
p img {
  margin: 2px;
}

/* =========================
   MENU
========================= */

.menu {
  max-width: 600px;
  margin: 20px auto;
  padding: 0;
  list-style: none;
}

.menu li {
  margin-bottom: 12px;
}

.menu a {
  display: block;
  padding: 14px 16px;
  background: #fff8f2;
  border: 1px solid #f0d8c2;
  border-radius: 10px;
}

/* =========================
   MORE LINKS
========================= */

.morelinks {
  text-align: center;
  margin: 10px auto;
  max-width: 75ch;
}

.morelinks a {
  margin: 0 10px;
}

/* =========================
   LIGHTBOX
========================= */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  display: none;
  z-index: 9999;
}

.lightbox:target {
  display: block;
}

.lightbox img {
  display: block;
  margin: 5vh auto;
  max-width: 90vw;
  max-height: 90vh;
  border: 10px solid #fff;
  border-radius: 14px;
}

/* =========================
   CAPTIONS
========================= */

figcaption {
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}