/* ------------------------------
   RESET
------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ------------------------------
   GLOBAL LAYOUT & COLORS
------------------------------ */
:root {
  --bg: #e6e6e6;
  --panel: #f5f5f5;
  --text: #333;
  --muted: #444;
  --accent: #b35c2e;
}

body {
  font-family: "Georgia", serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container {
  /* nice side margins on all screens */
  width: min(1100px, 100% - 48px);
  margin-inline: auto;
  background: #d9d9d9;
  border-radius: 8px;
  margin-top: 10px;
}

/* ------------------------------
   HEADER (image with overlayed brand)
------------------------------ */
header {
  padding-block: 0px 0px; /* spacing above/below header block */
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border-radius: 8px 8px 0px 0px;
}

.header-img {
  width: 100%;
  height: auto;
  display: block;
}

.brand-overlay {
  font-style: italic;
  position: absolute;
  top: 67%;
  right: 3%;
  transform: translateY(-50%);
  text-align: right;
  color: var(--text);
  line-height: 1.2;
}

.brand-overlay p {
  color: #535353;
  margin: 4px 0;
  font-size: clamp(18px, 2.5vw, 32px);
}

.brand-overlay .accent {
  font-weight: bold;
  font-size: clamp(24px, 2.5vw, 42px);
}

.brand-overlay .author {
  color: gray;
  margin-top: 4px;
  font-size: clamp(18px, 2.5vw, 28px);
}



/* ------------------------------
   SOCIAL (overlay on header)
------------------------------ */
.social {
  position: absolute;
  top: 8px;
  right: 14px;
  display: flex;
  gap: 8px;
}

.social a svg {
  width: 24px; height: 24px;
  fill: var(--text);
  transition: fill .2s ease;
}
.social a:hover svg,
.social a:focus svg { fill: var(--accent); }

/* ------------------------------
   NAVIGATION + HAMBURGER
   (hamburger + dropdown overlay on image for mobile,
    inline bar below image for desktop)
------------------------------ */
#menu-toggle { display: none; }

.menu-icon {
  position: absolute;
  top: 8px; left: 8px;   /* space so it doesn't overlap social icons */
  display: none;            /* shown on mobile */
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  background: rgba(245,245,245,0.7);
}

.menu-icon span {
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* little "X" animation */
#menu-toggle:checked + label.menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#menu-toggle:checked + label.menu-icon span:nth-child(2) { opacity: 0; }
#menu-toggle:checked + label.menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* nav element is placed AFTER the .hero block for desktop flow */
nav.menu {
  font-style: italic;
  display: flex;
  justify-content: left;
  gap: 14px;
  padding: 8px;
}

nav.menu a {
  text-decoration: none;
  color: var(--text);
  transition: color .25s ease;
}

nav.menu a:hover,
nav.menu a:focus,
nav.menu a.active { color: var(--accent); }

/* Mobile: show dropdown over the image */
@media (max-width: 768px) {
  .brand-overlay {
    top: 47%;
  }

  .brand-overlay p {
    font-size: clamp(18px, 4.5vw, 18px); /* smaller max for tiny screens */
     margin: 2px 0;
  }

  .menu-icon { display: flex; }

  /* Move the nav into an overlay position for mobile */
  nav.menu {
    position: absolute;
    top: 50px;   /* under the hamburger */
    left: 8px;
    display: none;
    flex-direction: column;
    background: var(--panel);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    z-index:1000;
  }

  nav.menu a {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
  }
  nav.menu a:last-child { border-bottom: none; }

  /* toggle open */
  #menu-toggle:checked ~ nav.menu { display: flex; }
}

/* ------------------------------
   MAIN CONTENT
------------------------------ */
main { 
    padding-block: 0px 40px; 
    font-size: 1.2rem;
}

.links {
    height:45px;
    margin: 0; padding: 0;
    position: relative;
    overflow: visible;
    background: var(--panel);
}