/* ===========================
   MEET THE BEATLES — beatlepage.css
   rain's beatles page
   =========================== */

@font-face {
  font-family: "ModernTypewriter";
  src: url("fonts/MODERNTYPEWRITER.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* ---------- body ---------- */
body {
    background-image: url('beatlespage/UnionJack.jpg');
  color: #222;
  margin: 0;
  padding: 0;
  font-family: "ModernTypewriter", monospace;
  min-height: 100vh;
}

/* ---------- porthole ---------- */
.porthole {
  position: fixed;
  top: 8px;
  left: 8px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  z-index: 100;
}

/* ---------- outer wrapper ---------- */
.candy_rapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 10px 8px;
  box-sizing: border-box;
}

/* ---------- two-column grid ---------- */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
}

/* ============================================================
   LEFT COLUMN — photo stack
   ============================================================ */
#g1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

.img-stack {
  position: relative;
  width: 97%;
}

.main-photo {
  width: 100%;
  max-width: 550px;
  display: block;
  border: 3px solid #ddd;
}

.bottom-photo {
  margin-top: -10px;
  width: 55%;
  max-width: 240px;
  display: block;
  position: relative;
  z-index: 5;
}

/* ============================================================
   RIGHT COLUMN — info panel
   ============================================================ */
#g2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- title box ---- */
.title-box {
  background-color: #f5f0c0;
  border: 3px dashed #6a8fa8;
  padding: 14px 20px;
  text-align: center;
}

.title-box h1 {
  font-size: 2rem;
  font-family: "ModernTypewriter", monospace;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.title-box h2 {
  font-size: 1rem;
  font-family: "ModernTypewriter", monospace;
  color: #333;
  margin: 0;
  font-weight: normal;
  font-style: normal;
}

/* ---- main info box ---- */
.info-box {
  background-color: #f2edba;
  border: 3px dashed #6a8fa8;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
  gap: 10px;
}

.info-box h3 {
  font-family: "ModernTypewriter", monospace;
  font-size: 1.05rem;
  color: #1a1a1a;
  margin: 0;
  font-weight: normal;
}

.info-box p {
  font-size: 0.72rem;
  font-family: "ModernTypewriter", monospace;
  color: #333;
  margin: 0;
  line-height: 1.5;
}

/* ---- beatle stamps row ---- */
.beatle-stamps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.beatle-stamps a {
  text-decoration: none;
  color: inherit;
}

.stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #d9d4a0;
  border: 2px solid #6a8fa8;
  padding: 2px 4px 4px;
  width: 72px;
  cursor: pointer;
  transition: transform 0.1s;
}

.stamp:hover {
  transform: scale(1.07);
  border-color: #c0392b;
}

.stamp img {
  width: 64px;
  height: 50px;
  object-fit: cover;
  display: block;
}

.stamp span {
  font-size: 0.65rem;
  font-family: "ModernTypewriter", monospace;
  color: #222;
  margin-top: 2px;
}

/* ---- bottom row ---- */
.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}

.page-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-links a {
  font-family: "ModernTypewriter", monospace;
  font-size: 1rem;
  color: #1a4a6e;
  text-decoration: none;
  font-weight: normal;
}

.page-links a:hover {
  text-decoration: underline;
  color: #c0392b;
}

.sub-gif {
  width: 44px;
  height: auto;
  margin-bottom: 6px;
}

.ringo-gif {
  width: 80px;
  height: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}