/* ===== Palette ===== */
:root {
  --color-1: #61172D;   /* average of background image — not used elsewhere */
  --color-2: #FEF2F4;   /* lightest — behind main text */
  --color-3: #745154;
  --color-4: #C27284;
  --color-5: #C9A2AA;
}

/* ===== Base ===== */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #000;
  background: url("assets/images/background.gif") repeat;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5 { color: #000; }

/* ===== Header ===== */
header {
  width: 100%;
  background: var(--color-4);
  color: #000;
}

.banner {
  text-align: center;
  color: #000;
  font-size: 2.6rem;
  font-weight: bold;
  letter-spacing: 0.35em;
  padding: 22px 0 18px;
}

/* ===== Bar-type menu ===== */
nav.menu { width: 100%; }

nav.menu ul.bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-5);
  border-top: 2px solid var(--color-4);
  border-bottom: 2px solid var(--color-3);
}

nav.menu ul.bar > li { position: relative; }

nav.menu a {
  display: block;
  padding: 10px 24px;
  color: #000;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
}

nav.menu ul.bar > li > a:hover { background: var(--color-4); }

/* Dropdowns */
nav.menu ul.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 210px;
  background: var(--color-5);
  border: 2px outset var(--color-4);
  z-index: 20;
}

nav.menu ul.bar > li:hover > ul.dropdown,
nav.menu ul.bar > li:focus-within > ul.dropdown { display: block; }

nav.menu ul.dropdown a {
  padding: 9px 18px;
  font-weight: normal;
  white-space: nowrap;
}

nav.menu ul.dropdown a:hover { background: var(--color-4); }

/* Caret hint on dropdown parents */
nav.menu li.has-dropdown > a::after { content: " \25BE"; }

/* ===== Centered content box ===== */
main.content {
  flex: 1 0 auto;
  margin: 0 10vw;                       /* 10vw away from page edges */
  padding: 10px;                       /* 10px inner padding all sides */
  background: var(--color-2);
  border-left: 4px double var(--color-4);     /* no top/bottom border */
  border-right: 4px double var(--color-4);
}

main.content h1 { text-align: left; }  /* default left-aligned H1 */

/* ===== Footer ===== */
footer {
  width: 100%;
  background: var(--color-4);
  color: #000;
  padding-top: 10px;                   /* box cuts off 10px above the text */
}

footer p {
  margin: 0;
  padding: 0 20px 14px;
  text-align: center;
  color: #000;
}

/* ===== Home page ===== */
main.content > h2 { text-align: center; }   /* "welcome to my website" */

.welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 12px 0 28px;
}

.welcome-grid .cell {
  display: block;
  text-decoration: none;
  color: #000;
  text-align: center;
}

.welcome-grid .cell img {
  width: 100%;
  aspect-ratio: 16 / 9;               /* customizable 16:9 */
  object-fit: cover;
  border: 2px outset #faf0f6;
}

.welcome-grid .cell span {
  display: block;
  margin-top: 8px;
  font-weight: bold;
}

.welcome-grid .cell:hover span { text-decoration: underline; }

.social {
  border-top: 2px groove #faf0f6;
  padding-top: 14px;
  text-align: center;            /* center the find-me-elsewhere section */
}

.social ul {
  display: flex;
  justify-content: center;       /* center the links as a group */
  gap: 3vw;                      /* space links by 3vw */
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.social a { color: #000; font-weight: bold; }

/* ===== About me page ===== */
.aboutme {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.aboutme .photo img {
  border: 2px outset #faf0f6;
  width: 15vw;
  height: auto;
}

.aboutme .bio { flex: 1; }

/* ===== Novels page ===== */
.checkback {
  text-align: center;
  font-style: italic;
}

/* ===== Generic gallery flexbox (short stories, poetry, etc.) ===== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;   /* center slots within the gallery */
}

.gallery .slot {
  flex: 1 1 280px;
  border: 2px ridge #faf0f6;
  background: #cfbcc9;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* center image above text */
}

.gallery .slot img {
  width: auto;          /* start from the image's real size */
  height: auto;
  zoom: 0.5;            /* render at half real size */
  border: 2px outset #faf0f6;
  margin-bottom: 10px;
}

.gallery .slot p {
  max-width: 56ch;       /* cap line length at 56 characters */
  margin-bottom: 12px;
  text-align: justify;   /* justified text */
}

/* ===== Events page ===== */
.events {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.events article {
  flex: 1 1 calc(50% - 24px);          /* max 2 posts per row */
  max-width: calc(50% - 12px);
  border: 2px ridge #faf0f6;
  background: #cfbcc9;
  padding: 14px;
}

.events article img {
  width: 100%;
  border: 2px outset #faf0f6;
  margin-bottom: 12px;
}

.events article h3 { margin: 0 0 4px; }

.events article h5 {
  margin: 0 0 10px;
  font-style: italic;
  font-weight: normal;
}

.events article p { margin-bottom: 12px; }

@media (max-width: 640px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .aboutme { flex-direction: column; }
  .events article { flex-basis: 100%; max-width: 100%; }
}