/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

  /* === Custom Cursors (kept) === */
  body { 
    cursor: url("SMOL.png"), auto; }
 .my-element:hover{
    cursor: url("SMOL.png"),auto; }

  /* === Fonts (kept) === */
  @font-face {
    font-family: 'K22 Monastic';
    src: url('/Fonts/K22_Monastic.ttf') format('truetype');
    font-display: swap;
  }
  

  /* === Theme Vars (kept) === */
  :root {
  cursor: url("SMOL.png"), auto;
}
  :root{
    --gold:#cbb26a;
    --pale:#fff3d6;
    --ink:#f4f1ed;
    --black:#000000;
    --shadow:#6a4c2e;
    --white:#FFFFFF;
  }

  /* === Base (kept) === */
  html,body { height:100%; }
  body{
    margin:0;
    color:var(--ink);
    font-family:'Crimson Text', serif;
    line-height:1.6;
    background:#000 url('https://i.pinimg.com/originals/ea/8b/b2/ea8bb2d971341b2da68a2de1b73ff4ea.gif') center / cover fixed no-repeat;
  }
  .page-bg{
    position:fixed; inset:0;
    background: radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,.25), rgba(0,0,0,.85));
    pointer-events:none;
    z-index:0;
  }

  /* === BRAND (kept) === */
  .brand{
    position:fixed; top:5px; left:12px;
    display:flex; align-items:center; gap:.6rem;
    text-decoration: underline white 2px;z-index:2000; pointer-events:none;
  }
  .brand-mark{ width:110px; height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); opacity:.95; }
  .brand-title{
    font-family:'K22 Monastic', serif;
    font-size: clamp(3.5rem, 5.2vw, 2.4rem);
    letter-spacing:1px; color:var(--gold);
    text-shadow:0 0 12px rgba(106,76,46,.55), 0 0 2px #000;
    white-space:nowrap; opacity:.98;
    z-index:6000;
  }
  @media (max-width:600px){ .brand-title{display:none;} .brand-mark{width:84px;} }

  /* === Spotify pinned top-right (kept) === */
  .spotify-embed{
    position:fixed; top:10px; right:12px;
    background:url("/spotify-background-home.png") center / cover no-repeat;
    padding:5px; border-radius:12px; z-index:2100;
  }
  #embed-iframe{ position:relative; z-index:1000; border-radius:12px; }
  /* Fixed divider that travels with the pinned header items */
.top-divider{
  position: fixed;
  top: 0px;            /* ← sit under your Moon Mauler title; adjust */
  left: 0;
  width: 100vw;
  height: 105px;         /* ← match your art’s height */
  z-index: 1000;        /* below Spotify (2100), above page frame */
  pointer-events: none; /* never block clicks */

  /* OPTION A: a thin image that tiles horizontally */
  background: url('https://cdn11.bigcommerce.com/s-qyh8707wxd/images/stencil/1280x1280/products/743/1952/Black_Black__04733__90341.1687659387.jpg?c=2') center/cover no-repeat;
  background-size: 100%;
  opacity: 0.7;
  /* If your art is very faint, a subtle glow helps it pop */
  filter: 
  drop-shadow(0 1px 2px rgba(0,0,0,.55))  /* edge pop */
    blur(0.2px)                              /* tiny soften */
    brightness(.8)                         /* slight lift */
    contrast(1.1);                           /* more punch */
}

/* Mobile: nudge down or hide if it collides with UI */
@media (max-width: 600px){
  .top-divider{
    top: 70px;     /* or: display:none; */
    height: 12px;
  }
}

  /* === Framed content (kept) === */
  .frame {
    position: relative;
    z-index: 1;
    max-width: 980px;
    min-height: 553px;
    margin: 8rem auto 2rem;
    padding: 3.2rem 1.5rem 1.5rem;

    /* Background image */
    background: 
        linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), /* 50% black overlay */
        url('https://images.pexels.com/photos/326333/pexels-photo-326333.jpeg?cs=srgb&dl=pexels-pixabay-326333.jpg&fm=jpg') center/cover no-repeat;

    box-shadow: 0 8px 20px rgba(0,0,0,0.65);
  }
  .frame::before{
  content:"";
  position:absolute;
  top:0;
  right:-300px;
  width:600px;
  height:600px;
  background:url('https://picsur.org/i/02b723cc-d0bd-454b-a201-6cd3106c0439.png') no-repeat center / contain;
  z-index: 50;            /* higher than tabs */
  pointer-events:none;
}
  .frame::after {
    content: "";
    position: absolute;
    top: 0;
    left: -300px; /* pushes it outside to the left */
    width: 600px;
    height: 600px;
    background: url('https://picsur.org/i/02b723cc-d0bd-454b-a201-6cd3106c0439.png') no-repeat center / contain;
    z-index: 2;
    pointer-events: none; /* makes sure it doesn't block clicks */
}
/* Make sure the frame can be a positioning parent */
.frame { position: relative; }

/* Tabs strip: centered, sitting on the top rim of .frame ALSO MAYBE NEED SQUIGGLE UNDER HERE */

/* Mobile: fall back to your normal row menu inside the frame */
/* Desktop tabs (stay above) */
/* === Right-side paper tabs tucked under the vine === */

/* Make sure the RIGHT vine stays in front of tabs */

/* Position the vertical stack of tabs */
.frame header .tabs-nav.tabs-right{
  position: absolute;
  top: 140px;                  /* move up/down as you like */
  right: -10px;                /* near the frame edge */
  transform: translateX(200px);/* <-- the TUCK: slide left under vine */

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;

  z-index: 5;                  /* below vine (50), above frame */
  pointer-events: auto;
}

/* The paper tab look (right edge rounded, left edge “attached”) */
.frame header .tabs-nav.tabs-right a{
  position: relative;
  display: inline-block;

  /* size — widen here if needed */
  padding: 1rem 1.25rem;
  min-width: 150px;       /* make wider/narrower as you like */

  color: var(--shadow);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .5px;

  background: url(https://plus.unsplash.com/premium_photo-1675788301950-6ab70e71a207?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2xkJTIwcGFwZXIlMjB0ZXh0dXJlfGVufDB8fDB8fHww);
  border: 1px solid rgba(0,0,0,.25);
  border-left: none;            /* the “attached” side that tucks under vine */
  border-radius: 0 10px 10px 0; /* rounded on the right */
  box-shadow:
    0 2px 0 rgba(0,0,0,.15) inset,
    0 6px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}

/* Hover — nudge outward a touch */
.frame header .tabs-nav.tabs-right a:hover,
.frame header .tabs-nav.tabs-right a:focus{
  transform: translateX(6px);
  color: var(--gold);
  box-shadow:
    0 2px 0 rgba(0,0,0,.15) inset,
    0 10px 16px rgba(0,0,0,.3);
}

/* Active — same color + underline (your preference) */
.frame header .tabs-nav.tabs-right a.active{
  background: url(https://plus.unsplash.com/premium_photo-1675788301950-6ab70e71a207?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2xkJTIwcGFwZXIlMjB0ZXh0dXJlfGVufDB8fDB8fHww);
  color: var(--shadow);
  text-decoration: underline;
  box-shadow:
    0 2px 0 rgba(0,0,0,.12) inset,
    0 12px 18px rgba(0,0,0,.32);
}

/* Mobile — fall back to a normal row */
@media (max-width: 800px){
  .frame header .tabs-nav.tabs-right{
    position: static;
    right: auto;
    top: auto;
    transform: none;

    flex-direction: row;
    justify-content: center;
    gap: .6rem;
    margin-top: .25rem;
  }
  .frame header .tabs-nav.tabs-right a{
    border-left: 1px solid rgba(0,0,0,.25);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    min-width: auto;
  }
}
/* —— MOBILE ONLY —— */
@media (max-width: 800px){
  .tabs-nav{
    position: static;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .25rem;
  }
  .tabs-nav a{
    border-bottom: 1px solid rgba(0,0,0,.2);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }
} /* ← make sure this closes right here */
  header{ text-align:center; padding:1.5rem 1rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); }
  header h1{
    position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;
  }
  nav{ margin-top:.3rem; }
  nav a{
    color:var(--gold); text-decoration:underline; margin:0 .8rem; font-weight:700; letter-spacing:.5px;
    transition: transform .15s ease, text-shadow .3s ease, color .3s ease;
  }
  nav a:hover{ text-shadow:0 0 6px var(--pale), 0 0 12px var(--gold); transform:translateY(-1px); color:var(--pale); }

  .welcome-banner{ display:flex; margin:-70px auto 8px; max-width:280px; height:auto; margin-left: auto;  /* pushes it to the right */
  margin-right: 0; }

  main{ max-width:800px; margin:auto; padding:2rem 0; text-align:center; }
  .dropcap-paragraph{ font-size:1.2rem; max-width:600px; margin:0 auto 1rem; display:inline-block; text-align:center; }
  .dropcap{ font-family:'K22 Monastic', serif; font-size:3.5rem; color:var(--gold); vertical-align:middle; margin-right:4px; }

  h2{
    font-family:'K22 Monastic', serif; color:var(--pale); letter-spacing:1px;
    border-bottom:1px solid var(--gold); padding-bottom:.2rem; margin-bottom:1rem;
  }
  footer{ text-align:center; font-size:.9rem; padding:1rem 0 .5rem; color:#a6a6a6; border-top:1px solid rgba(255,255,255,.08); margin-top:1.5rem; }

  @keyframes flicker { 0%,100%{opacity:1;} 50%{opacity:.85;} }

  /* === ENTRANCE OVERLAY (kept) === */
  #gate{
    position:fixed; inset:0; z-index:3000;
    display:grid; place-items:center;
    background:
      radial-gradient(120% 120% at 50% 10%, rgba(0,0,0,.4), rgba(0,0,0,.9)),
      url('https://www.ledr.com/colours/black.jpg') center / cover no-repeat;
    transition:opacity .6s ease;
  }
  #gate .door{
    width:min(75vw, 520px);
    aspect-ratio:3/5;
    background:url('tavern-door.png') center / cover no-repeat;
    border-radius:6px;
    transform-origin:right center;
    transition:transform 1s ease, opacity .6s ease;
    position:relative;
  }
  .door-text{
    position:absolute;
    top:50%;
    right:-250px;
    transform:translateY(-50%);
    font-family:'K22 Monastic', serif;   /* uses your K22 Monastic font */
    font-size: clamp(1.1rem, 2.8vw, 1.6rem);
    color:var(--pale);
    text-align:left;
    letter-spacing:.5px;
    text-shadow:0 0 10px rgba(0,0,0,.7);
    user-select:none;
    max-width:200px;
  }
  .door-text span{
    color:var(--gold);
    text-shadow:0 0 12px rgba(106,76,46,.55), 0 0 2px #000;
  }
  #gate .hint{
    margin-top:8px;
    font-family:'K22 Monastic', serif;
    color:var(--pale);
    letter-spacing:1px;
    opacity:.8;
    text-shadow:0 0 10px rgba(0,0,0,.7);
    user-select:none;
  }
  #gate.opening .door{ transform:perspective(1200px) rotateY(-78deg) scale(1.02); opacity:.25; }
  #gate.faded{ opacity:0; pointer-events:none; }

  /* === (status update) === */
 
/* Make sure children don’t override the cursor */
.avatar, .avatar *{
  cursor: url('moonmauler-avatar-logo.png'), pointer !important;
}

.avatar img{
  width:300px;               /* resize here */
  top:-140px;
  height:auto;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  pointer-events:auto;       /* clickable */
}

/* Thought bubble */

.avatar.show-bubble .bubble{
  opacity:1;
  transform:translateY(0);
}

.avatar-sign{
  position:absolute;
  left:50%;
  top:-280px;                     /* how high above the frame */
  transform:translateX(-50%);
  padding:6px 12px;
  font-family:'K22 Monastic', serif;
  font-size:14px;
  color:#ffffff;
  background:
    linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
    url('https://m.media-amazon.com/images/I/81eyw8ktUjL._UF894,1000_QL80_.jpg') center/cover;
  border:1px solid rgba(0,0,0,.45);
  border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.06);
  filter: blur(0.1px) brightness(90%);
  white-space:nowrap;
}
.avatar-sign .label{ color:var(--gold); font-weight:700; margin-right:6px; }

/* cords holding the sign for status */
.avatar-sign::before,
.avatar-sign::after{
  content:"";
  position:absolute;
  top:-18px;
  width:2px;
  height:18px;
  background:linear-gradient(#d9c08a,#8b6a3a);
  box-shadow:0 0 2px rgba(0,0,0,.6);
}
.avatar-sign::before{ left:10px; }
.avatar-sign::after { right:10px; }

/* little nails on the frame (purely decorative) */
.avatar-sign .nail-left,
.avatar-sign .nail-right{ display:none; } /* reserved if you later want extra dots */


/* the avatar image (outfit) */
.avatar-img{
  position:absolute;
  left:50%;
  bottom:370px;                  /* nudge up/down inside the window */
  transform:translateX(-50%);
  width:200px;                  /* slightly smaller than wrapper width */
  height:auto;
  z-index:2;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  pointer-events:auto;
}

/* decorative frame PNG on top — won't block clicks */
.avatar-frame{
  position:absolute;
  bottom:340px;
  left:15%;
  z-index:0;
  pointer-events:none;          /* SUPER important so arrows/clicks pass through */
  width:70%;
  height:70%;
  object-fit:cover;
}

/* arrows to cycle outfits */
/* Arrow buttons now purely visual image buttons */
/* Image arrow buttons */

/* Image arrow buttons */
.avatar-arrow {
  position: absolute;
  z-index: 500;
  width: 44px;
  height: 44px;
  border: none;
  padding: 0;
  background: transparent center/contain no-repeat;
}

/* Use your PNG here — MUST be a direct/raw image URL that ends in .png/.webp/.gif */
.avatar-arrow.right{
  right:30px;
  top:-132px;
  height: 50px;
  width:30px;
  background-image:url('avatar-arrow-right.png');
  z-index:500;
}

/* Mirror the same image for the left arrow */
.avatar-arrow.left{
  left:30px;
  top:-132px;
  height:50px;
  width:30px;
  background-image:url('avatar-arrow-left.png');
  z-index:500;

}

/* small screens tweak */
@media (max-width:800px){
  .avatar-arrow{ width:32px; height:32px; }
  .avatar-arrow.left{ left:-24px; }
  .avatar-arrow.right{ right:-24px; }
}
/* ==== FORCE RIGHT-SIDE TABS (wins over older rules) ==== */
/* RIGHT-SIDE stack, tabs poke OUT to the RIGHT of the vine */

/* Paper tab look when mounted on the RIGHT edge */
.frame header .tabs-nav.tabs-right a{
  position: relative;
  display: inline-block;
  padding: 1.3rem 2rem;

  color: var(--shadow);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .5px;

  background: url(https://plus.unsplash.com/premium_photo-1675788301950-6ab70e71a207?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2xkJTIwcGFwZXIlMjB0ZXh0dXJlfGVufDB8fDB8fHww);
  border: 1px solid rgba(0,0,0,.25);
  border-left: none !important;        /* attached edge = no border */
  border-radius: 0 10px 10px 0;         /* rounded on the right side */
  box-shadow:
    0 2px 0 rgba(0,0,0,.15) inset,
    0 6px 10px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
}

/* Hover: slide a little FURTHER right */
.frame header .tabs-nav.tabs-right a:hover,
.frame header .tabs-nav.tabs-right a:focus{
  transform: translateX(6px);          /* nudge outward to the right */
  color: var(--gold);
  box-shadow:
    0 2px 0 rgba(0,0,0,.15) inset,
    0 10px 16px rgba(0,0,0,.3);
}

/* Active: underline, same color set */
.frame header .tabs-nav.tabs-right a.active{
  background: url(https://plus.unsplash.com/premium_photo-1675788301950-6ab70e71a207?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2xkJTIwcGFwZXIlMjB0ZXh0dXJlfGVufDB8fDB8fHww);
  color: var(--shadow);
  text-decoration: underline;
  box-shadow:
    0 2px 0 rgba(0,0,0,.12) inset,
    0 12px 18px rgba(0,0,0,.32);
}

/* Mobile: fall back to a normal row inside the frame */
@media (max-width: 800px){
  .frame header .tabs-nav.tabs-right{
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    flex-direction: row !important;
    justify-content: center;
    gap: .6rem;
    margin-top: .25rem;
  }
  .frame header .tabs-nav.tabs-right a{
    border-right: 1px solid rgba(0,0,0,.25) !important;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
  }
}
/* --- Update Log card --- */
.update-log {
  position: absolute;
  top: 340px;
  left: -270px;
  width: 200px;
  max-height: 320px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  overflow-y: auto;
  z-index: 4;
  
  background: none; /* background will move to ::before */
}

.update-log::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  border-radius: 12px;
  background: rgba(36,28,22,.75) url(https://m.media-amazon.com/images/I/81eyw8ktUjL._UF894,1000_QL80_.jpg) center/cover;
  filter: blur(1px) brightness(30%);
  z-index: -1; /* stays behind text */
}
.update-log h3{
  margin: 0 0 6px;
  font-family: 'K22 Monastic', serif;
  color: var(--gold);
  letter-spacing: .5px;
  text-align: center;
}
.update-log ul{ list-style: none; margin: 0; padding: 0; }
.update-log li{
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--pale);
  line-height: 1.35;
  font-size: .95rem;
}
.update-log li:last-child{ border-bottom: 0; }
.update-log time{ color: #d8c487; font-weight: 700; margin-right: 6px; }
:root{
  --paper: url('https://plus.unsplash.com/premium_photo-1675788301950-6ab70e71a207?fm=jpg&q=60&w=3000');
  --ornate-frame: url('https://picsur.org/i/48666056-1b0f-4857-9163-e90e333ad6dd.png'); /* your frame PNG (transparent center) */
  --ink:#f4f1ed; --gold:#cbb26a; --shadow:#6a4c2e; --pale:#fff3d6;
}

/* section shell */
.about{ margin: 1.5rem auto 2rem; }
.about-title{
  font-family:'K22 Monastic', serif;
  color: var(--white);
  letter-spacing: 1px;
  top:-150px;
  margin: 0 0 .75rem;
  text-align: top;
  border-bottom: 1px solid var(--gold);
  padding-bottom: .3rem;
  text-decoration:underline black .5px;
}

/* layout */
.about-grid{
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 800px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* portrait in a fancy frame */
.portrait-frame{
  position: relative;
  margin: 0;
  width: 100%;
  right:-520px;
  top:-164px;
  aspect-ratio: 3/4;
  display: grid;
  isolation: isolate; /* keep shadows contained */
}
.portrait-frame img{
  width: 30%;
  height: 30%;
  object-fit: contain;
  z-index: 1;
}
.portrait-frame figcaption{
  position: absolute; bottom: 100px; left: 40%;
  transform: translateX(-50%);
  font-family:'K22 Monastic', serif;
  font-size: 14px; color: var(--black);
  text-shadow: 0 1px 2px #000;
}

/* parchment bio card */
.about-card{
  position: relative;
  padding: 1.5rem 1.6rem 1.30rem;
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.25)),
    var(--paper) center/cover no-repeat;
  color: var(--black);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  border-radius: 0px;
  left:-340px;
  top:-140px;
}
.about-card h3{
  margin:.25rem 0 .5rem;
  font-family:'K22 Monastic', serif;
  color: var(--black);
  letter-spacing:.1px;
  left:300px;
}
.about-card p{ margin:.6rem 0; }

/* buttons? if i want to add some, put them here */

.about-actions{ margin-top:.8rem; }

/* universal ornate border helper */
.ornate-border{
  border: 10px solid transparent;
border-image: url('border-sprite.png') 30 fill / 10px round; */
  /* fallback: soft gold edge */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}  
/* Book wrapper behind the About content */
.about-book{
  position: relative;
  max-width: 980px;                 /* smaller than the frame so paper shows around it */
  margin: 1.25rem auto 2rem;
  padding: clamp(28px, 4vw, 56px);  /* space so text sits inside pages */
  isolation: isolate;               /* keep z-index effects self-contained */
}

/* The book image itself */
.about-book::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("book-background.png") center/contain no-repeat;
  z-index: 1;
  opacity: 0.95;                    /* show the book but not too stark */
  pointer-events: none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
  top:-520px;
}

/* Make the actual content sit above the book */
.about-book > *{ position: relative; z-index: 1; }

/* Let the book show through: make the card transparent */
.about-card{
  background: transparent;          /* was parchment — now the book shows */
  box-shadow: none;                 /* book already has a shadow */
  border-radius: 0;
  padding: 1rem 1.25rem;            /* keep some inner spacing for readability */
}

/* Optional: nudge layout to feel like two pages */
.about-grid{
  grid-template-columns: 360px 1fr; /* portrait (left page) + text (right page) */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  min-height: clamp(360px, 48vw, 520px); /* give the book some height to breathe */
}

/* Typographic polish on the book */
.about-title{
  font-family:'K22 Monastic', serif;
  font-size: clamp(22px, 3.2vw, 32px);
  letter-spacing: 1px;
  color: #20180f;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  border: none;                     /* cleaner on the book */
  margin-bottom: .5rem;
}
.about-card h3{
  font-family:'K22 Monastic', serif;
  font-size: clamp(18px, 2.4vw, 24px);
  text-align: center;
  margin-bottom: .6rem;
}
.about-card p{
  color:#2a2219;
  line-height: 1.55;
}

/* Portrait frame sizing so it sits nicely on the left page */
.portrait-frame{ aspect-ratio: 3/4; }
.portrait-frame img{ width: 78%; height: 78%; }

/* Mobile: collapse to a single page look */
@media (max-width: 800px){
  .about-grid{ grid-template-columns: 1fr; }
  .portrait-frame{ max-width: 380px; margin: 0 auto; }
  .about-book{ padding: 28px 24px 36px; }
  .about-book::before{
    background-size: 120% auto;     /* zoom book a bit so page area remains readable */
    opacity: .92;
  }
}
/* Free-floating deco PNGs inside .frame */
.extra-deco{
  position: absolute;     /* <-- critical */
  display: block;
  width: 260px;           /* size it with width; height will auto-scale */
  height: auto;
  z-index: 3;             /* above the frame bg, below your update log (z:4) */
  pointer-events: auto;
  display:block;
  transition:
      transform .45s ease,
      filter .25s ease,
      box-shadow .25s ease;
}
.extra-deco.one.pressed{ transform: translateY(100px); }

/* Position each image */
.extra-deco.one{ top: -100px; right: -200px; width:170px }
.extra-deco.two{ top: 250px; right: 100px; width: 200px; }
/* === FINAL OVERRIDE: lock avatar placement === */
.frame { position: relative; }

.frame > .avatar-wrapper{
  position: absolute !important;   /* anchor to .frame */
  left: -300px !important;         /* tuck outside the frame on the left */
  bottom: 550px !important;        /* height up from bottom */
  width: 300px !important;
  height: 360px !important;
  z-index: 200 !important;         /* above frame bg, below vines */
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  opacity: 0;
  cursor: url('https://media.discordapp.net/attachments/1406664735880904816/1407074564923461773/SMOL.png?ex=68a4c7ce&is=68a3764e&hm=2f74692cf5948a3eb467dec58840e76bf7c7a41028bb57b5650eab8ae15eaad9&=&format=webp&quality=lossless&width=21&height=21'), pointer;
}

.revealed .avatar-wrapper{
  opacity: 1;
  transform: none;
}
/* keep portrait + favorites in the left column */
.about-left{
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* (if you used the book background earlier, keep your .about-book styles;
   if not, a minimal baseline:) */
.about-book{
  position: relative;
  padding: 1rem 1rem 1.25rem;
  top:50px;
}

/* favorites already given earlier; keeping here for completeness */
.favorites-card {
  position: absolute;
  top: 350px;    /* adjust vertical placement */
  right: -225px;  /* adjust horizontal placement */
  background: rgba(250, 245, 230, 0.85);
  opacity:60%;
  border: 2px solid #6b4b3d;
  padding: 15px;
  max-width: 220px;
}
.favorites-card h4{
  margin: 0 0 .35rem;
  font-family: 'K22 Monastic', serif;
  letter-spacing: .5px;
  color: var(--black);
  text-align: center;
}
.favorites-card ul{
  margin: 0;
  padding-left: 1rem;
  list-style: "✦  ";
  line-height: 1.35;
}

/* goals row + roman numerals (same as before) */
/* goals row + roman numerals */
.goals-row{
  margin: 1.2rem auto 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  position: relative;
  z-index: 1; /* ensure this whole band sits above other stuff */
}

.goals-deco{
  position: relative;          /* create its own stacking context */
  z-index: 5;                  /* above the card so clicks land */
  width: 230px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
  user-select: none;
  pointer-events: auto;        /* allow clicking */
  cursor: pointer;             /* was 'hover' (invalid) */
  transition: transform .15s ease;
}

.goals-deco.left{ transform: rotate(-3deg); }
.goals-deco.right{ transform: rotate(2deg); }

/* throb while sound plays */
@keyframes throb {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.goals-deco.throbbing{
  animation: throb .6s ease-in-out infinite;
}

/* small press on mouse down (optional) */
.goals-deco:active { transform: translateY(1px) scale(0.98); }

/* keep the card under the flourishes so it doesn’t block clicks */
.goals-card{
  position: relative;
  z-index: 2;                  /* below the .goals-deco (z:5) */
  max-width: 640px;
  width: min(95%, 640px);
  padding: 1rem 1.15rem;
  background:
    linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.18)),
    var(--paper) center/cover no-repeat;
  color: var(--black);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  text-align: left;
  top: -100px;
}
.goals-card h3{
  margin: .1rem 0 .5rem;
  font-family: 'K22 Monastic', serif;
  letter-spacing: .5px;
  color: var(--black);
}

.goals-list{
  counter-reset: goal;
  list-style: none;
  margin: 0;
  padding: 0;
}
.goals-list li{
  counter-increment: goal;
  padding-left: 2.1rem;
  position: relative;
  margin: .35rem 0;
}
.goals-list li::before{
  content: counter(goal, upper-roman) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--gold);
}

/* mobile */
@media (max-width: 800px){
  .goals-deco{ width: 90px; }
  .favorites-card{ width: 100%; }
}
/* —— Avatar speech bubble (final) —— */
.avatar-wrapper .bubble{
  position: absolute;
  left: 70%;          /* bubble sits to the right of the avatar */
  top: -50%;            /* vertically center next to the avatar */   /* keep it centered */
  max-width: 180px;
  background: rgba(0,0,0,.85);
  color: var(--pale);
  padding: .55rem .7rem;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease; /* don't override transform */
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  white-space: normal;
  z-index: 300;        /* above nearby decor */
}

.avatar-wrapper .bubble::after{
  content:"";
  position: absolute;
  left: -16px;         /* little arrow on the left edge */
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-right-color: rgba(0,0,0,.85);
}

/* Only fade in — keep the translateY(-50%) centering intact */
.avatar-wrapper.show-bubble .bubble{
  opacity: 1;
}
/* base vine block */
.vine{
  position: absolute;
  width: 600px;
  height: 600px;
  background: url('homepage-border.png') no-repeat center / contain;
  pointer-events: none;
}

/* left/right sides align with your existing ::after / ::before */
.vine.left  { left: -300px; z-index: 2;  }  /* under tabs, like ::after */
.vine.right { right: -300px; z-index: 500; }  /* above tabs, like ::before */

/* stack lower rows by moving them down */
.vine.row2 { top: 600px; }   /* continues just below the first pair */
.vine.row3 { top: 1200px; }  /* add if you inserted a 3rd pair */