@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=MedievalSharp&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   COLOURS — tweak these to adjust the look
   ============================================================

   --bg-start : top-left colour of the page background gradient
   --bg-end   : bottom-right colour of the page background gradient
   --bio-bg   : solid colour of the floating bio box
   --ink      : main text colour (body, titles)
   --mid-blue : accent colour (links, tags, blog title)
   --blue     : butterfly colour on the intro screen

   ============================================================ */
:root {
  --bg-start : #f0f8ff;   /* almost-white blue  — top left       */
  --bg-end   : #64c7f9;   /* sky blue            — bottom right  */
  --bio-bg   : #c8e0f4;   /* bio box background  — change freely */
  --blue     : #0000ff;
  --ink      : #1a1a6e;
  --mid-blue : #3355cc;
}

/* ── BODY ─────────────────────────────────────────────────── */
body {
  /* gradient from top-left to bottom-right                    */
  /* change --bg-start and --bg-end in :root above to adjust   */
  background: linear-gradient(to bottom right, var(--bg-start) 0%, var(--bg-end) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  color: var(--ink);
}

/* ── INTRO ────────────────────────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 1;
  transition: opacity 1s ease;
}

#intro.fade-out {
  opacity: 0;
  pointer-events: none;
}

#intro-inner {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards 0.3s;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

#butterfly {
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.55rem, 1.1vw, 0.82rem);
  line-height: 1.45;
  color: var(--blue);
  white-space: pre;
  letter-spacing: 0.05em;
}

/* ── BLOG PAGE ────────────────────────────────────────────── */
#blog-page {
  opacity: 0;
  transition: opacity 1s ease;
  min-height: 100vh;
}

#blog-page.visible { opacity: 1; }

/* ── BACK LINK ────────────────────────────────────────────── */
.blog-back {
  position: fixed;
  top: 1.2rem;
  right: 1.8rem;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  color: var(--mid-blue);
  text-decoration: none;
  z-index: 50;
  transition: opacity 0.2s;
}

.blog-back:hover { opacity: 0.6; }

/* ── BLOG TITLE — fixed top left, above bio box ───────────── */
.blog-title {
  position: fixed;
  top: 2rem;
  left: 2rem;
  font-family: 'Ballet', cursive;
  font-size: 5rem;
  color: rgb(27, 171, 255);
  font-weight: 400;
  line-height: 1.1;
  z-index: 45;
}

.title-deco {
  font-family: Arial, sans-serif;
  font-size: 2rem;
  color: rgb(27, 171, 255);
  letter-spacing: 0.1em;
  vertical-align: middle;
}

/* ── FLOATING BIO BOX ─────────────────────────────────────── */
/* flat square, no border/radius/shadow, colour set by --bio-bg */
.bio-box {
  position: fixed;
  top: 10rem;         /* sits just below the title             */
  left: 4rem;
  width: 200px;
  background: var(--bio-bg);
  padding: 1.2rem;
  z-index: 40;
  /* deliberately no border, border-radius, or box-shadow      */
}

.bio-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(180, 210, 240, 0.6);
  margin-bottom: 0.9rem;
  /* no border */
}

.bio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is the secret sauce */
  display: block;    /* Removes weird bottom gaps */
}

.bio-text {
  font-family: 'MedievalSharp', serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.bio-explore {
  font-family: 'MedievalSharp', serif;
  font-size: 0.72rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.bio-tags {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bio-tag {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mid-blue);
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-block;
}

.bio-tag:hover { opacity: 0.6; }
.bio-tag.active-tag { text-decoration: underline; }

.bio-tag-desc {
  font-family: 'MedievalSharp', serif;
  font-size: 0.68rem;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

/* ── MAIN SCROLLABLE AREA ─────────────────────────────────── */
.blog-main {
  margin-left: 300px;   /* room for fixed bio box on the left  */
  margin-right: 160px;  /* room for fixed images on the right  */
  margin-top: 100px;
  padding: 2.5rem 2rem 4rem 2.5rem;
  min-height: 100vh;
}

/* ── FEED + RIGHT LAYOUT ──────────────────────────────────── */
.blog-body {
  display: flex;
  gap: 0;
  align-items: flex-start;
  padding-top: 4rem;    /* pushes feed below the fixed title    */
}

.blog-feed {
  flex: 1;
  min-width: 0;
}

/* ── RIGHT IMAGE COLUMN ───────────────────────────────────── */
.blog-right {
  position: fixed;
  right: 1.5rem;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-end;
  width: 130px;
}

.side-img-placeholder {
  background: rgba(210, 228, 248, 0.6);
  /* no border — flat squares matching bio box style */
}

.side-img-placeholder:nth-child(1) { width: 100px; height: 100px; }
.side-img-placeholder:nth-child(2) { width: 100px;  height: 100px;  }
.side-img-placeholder:nth-child(3) { width: 100px; height: 100px; }
.side-img-placeholder:nth-child(4) { width: 100px;  height: 100px;  }

/* ── POST ENTRIES ─────────────────────────────────────────── */
.post-entry {
  margin-bottom: 0;
  cursor: pointer;
}

.post-title-script {
  font-family: 'Ballet', cursive;
  font-size: 1.9rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.2rem;
  transition: opacity 0.2s;
}

.post-entry:hover .post-title-script { opacity: 0.7; }

.post-tags {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-size: 0.82rem;
  color: var(--mid-blue);
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.post-excerpt {
  font-family: Arial, sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 540px;
}

.post-divider {
  border: none;
  border-top: 1px dotted rgba(0, 0, 180, 0.35);
  margin: 1.8rem 0;
  background: none;
}

/* ── LOADING ──────────────────────────────────────────────── */
.feed-loading {
  font-family: Arial, sans-serif;
  font-style: italic;
  color: rgba(26, 26, 110, 0.45);
  font-size: 0.9rem;
  padding: 2rem 0;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 780px) {
  .blog-title {
    position: relative;
    top: auto;
    left: auto;
    font-size: 2.2rem;
    padding: 1rem 1.2rem 0;
  }

  .bio-box {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .blog-main {
    margin-left: 0;
    margin-right: 0;
    padding: 1.2rem;
  }

  .blog-right { display: none; }
  .blog-body  { padding-top: 1rem; }
}

#blog-page {
  padding-bottom: 55px;
}

.bio-box {
  max-height: calc(100vh - 120px); /* leaves room for player at bottom */
  overflow-y: auto;
}
/* ── Dynamic side images ──────────────────────────────────── */
.side-img {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}