/* --- GLOBAL --- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body{
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f6c1d9;
  color: #4b1d33;
}


/* =========================
   THEME COLOURS
   ========================= */

/* CAMO – green */
body.theme-camo{
  background-color:#d9f0d9;
  color:#1f2a1f;
}

/* LEOPARD – burgundy vibes (for leopard.html) */
body.theme-leopard{
  background-color:#3a0f1f; /* deep burgundy */
  color:#ffe7ef;
}

/* CHERRY – yellow + red vibes (for cherry.html) */
body.theme-cherry{
  background-color:#ffe36a; /* warm yellow */
  color:#7a0a0a;           /* deep cherry red */
}

/* INDEX ONLY: keep pink sparkle background */
body.theme-leopard.index{
  background-color:#ffd1e6;
  background-image: url("sparkle.gif");
  background-repeat: repeat;
  background-attachment: fixed;
  color:#4b1d33;
}

/* --- WRAPPER --- */
.wrap{
  width: 980px;
  margin: 30px auto 80px;
  position: relative;
}

/* --- TOP BAR / WARNING --- */
.topbar{
  background: rgba(255,255,255,0.65);
  border: 3px solid #ff77b7;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: .5px;
  text-align:center;
  box-shadow: 0 0 0 4px rgba(255,119,183,0.15);
}
.topbar b{ color:#ff2f9a; }

body.theme-camo .topbar{
  border-color:#4f8a4f;
  box-shadow: 0 0 0 4px rgba(79,138,79,0.15);
}
body.theme-camo .topbar b{ color:#2f6b2f; }

/* Burgundy topbar */
body.theme-leopard .topbar{
  background: rgba(255,255,255,0.10);
  border: 3px solid #b33b63;
  box-shadow: 0 0 0 4px rgba(179,59,99,0.18);
  color:#ffe7ef;
}
body.theme-leopard .topbar b{ color:#ff7aa8; }

/* Cherry topbar */
body.theme-cherry .topbar{
  background: rgba(255,255,255,0.35);
  border: 3px solid #c81d25;
  box-shadow: 0 0 0 4px rgba(200,29,37,0.18);
  color:#7a0a0a;
}
body.theme-cherry .topbar b{ color:#c81d25; }

/* --- HEADER COLLAGE --- */
.header{
  margin-top: 14px;
  position: relative;
  background: rgba(255,240,247,0.85);
  border: 6px solid #ff9acb;
  padding: 18px 18px 10px;
  box-shadow: 0 0 0 6px rgba(255,154,203,0.2);
}

/* Camo header */
body.theme-camo .header{
  border-color:#4f8a4f;
  box-shadow: 0 0 0 6px rgba(79,138,79,0.2);
  background: rgba(240,255,244,0.85);
}

/* Burgundy header */
body.theme-leopard .header{
  border-color:#b33b63;
  box-shadow: 0 0 0 6px rgba(179,59,99,0.22);
  background: #c9a06a;
}

/* Cherry header */
body.theme-cherry .header{
  border-color:#c81d25;
  box-shadow: 0 0 0 6px rgba(200,29,37,0.18);
  background: rgba(255,248,225,0.75);
}

/* Index overrides: keep your pink header look on the home page */
body.theme-leopard.index .header{
  background: rgba(255,240,247,0.85);
  border-color:#ff9acb;
  box-shadow: 0 0 0 6px rgba(255,154,203,0.2);
}

.logo{
  width: 520px;
  max-width: 100%;
  display:block;
  margin: 0 auto;
  image-rendering: auto;
}

/* sticker layer */
.stickers{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.stickers img{
  position:absolute;
  image-rendering: auto;
}
.stk1{ top:-18px; left:-18px; width:90px; }
.stk2{ top:-22px; right:-18px; width:80px; }
.stk3{ bottom:-22px; left:40px; width:70px; }
.stk4{ bottom:-28px; right:40px; width:90px; opacity:0.95; }

/* --- LAYOUT 3 COLS --- */
.grid{
  display:grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 14px;
  margin-top: 14px;
}

/* --- PANELS --- */
.panel{
  background: rgba(255,255,255,0.78);
  border: 4px solid #ff9acb;
  padding: 12px;
  box-shadow: 0 0 0 4px rgba(255,154,203,0.18);
}

/* Camo panels */
body.theme-camo .panel{
  border-color:#4f8a4f;
  box-shadow: 0 0 0 4px rgba(79,138,79,0.18);
}

/* Burgundy panels */
body.theme-leopard .panel{
  background: rgba(255,255,255,0.08);
  border-color:#b33b63;
  box-shadow: 0 0 0 4px rgba(179,59,99,0.18);
  color:#ffe7ef;
}

/* Cherry panels */
body.theme-cherry .panel{
  background: rgba(255,255,255,0.55);
  border-color:#c81d25;
  box-shadow: 0 0 0 4px rgba(200,29,37,0.18);
  color:#7a0a0a;
}

/* Index panels stay pink/white */
body.theme-leopard.index .panel{
  background: rgba(255,255,255,0.78);
  border-color:#ff9acb;
  box-shadow: 0 0 0 4px rgba(255,154,203,0.18);
  color:#4b1d33;
}

.panel h3{
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 1px;
  color:#ff2f9a;
}
body.theme-camo .panel h3{ color:#2f6b2f; }
body.theme-leopard .panel h3{ color:#ff7aa8; }
body.theme-cherry .panel h3{ color:#c81d25; }
body.theme-leopard.index .panel h3{ color:#ff2f9a; }

/* --- NAV STARS --- */
.nav-stars{
  display:flex;
  flex-direction: column;
  gap: 14px;
  align-items:center;
}

.starlink{
  text-decoration:none;
  display:block;
  text-align:center;
  color: inherit;
}

.starlink img{
  width: 300px;
  display:block;
  margin: 0 auto;
  transition: transform .15s ease;
}
.starlink:hover img{ transform: scale(1.06); }

.starlabel{
  margin-top: 4px;
  font-size: 12px;
  color:#7a2c4f;
  letter-spacing: .6px;
}
body.theme-camo .starlabel{ color:#244024; }
body.theme-leopard .starlabel{ color:#ffe7ef; }
body.theme-cherry .starlabel{ color:#7a0a0a; }
body.theme-leopard.index .starlabel{ color:#7a2c4f; }

/* --- BUTTON WALL / BLINKIES --- */
.buttons{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.buttons img{
  width: 100%;
  display:block;
  border: 2px solid rgba(0,0,0,0.08);
}

/* --- MAIN CONTENT --- */
.main h2{
  margin: 0 0 8px;
  font-size: 16px;
  color:#ff2f9a;
  letter-spacing: .6px;
}
body.theme-camo .main h2{ color:#2f6b2f; }
body.theme-leopard .main h2{ color:#ff7aa8; }
body.theme-cherry .main h2{ color:#c81d25; }
body.theme-leopard.index .main h2{ color:#ff2f9a; }

.note{
  font-size: 12px;
  margin: 6px 0 12px;
  color:#8b4b6b;
}
body.theme-camo .note{ color:#2f4f2f; }
body.theme-leopard .note{ color:#ffe7ef; }
body.theme-cherry .note{ color:#7a0a0a; }
body.theme-leopard.index .note{ color:#8b4b6b; }

.divider{
  height: 18px;
  background-image: url("divider.gif");
  background-repeat: repeat-x;
  background-position: center;
  margin: 10px 0;
  opacity: .9;
}

/* --- WORK GRID --- */
.work{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.work img{
  width:100%;
  display:block;
  border: 4px solid rgba(255,154,203,0.5);
  background: rgba(255,255,255,0.7);
}
body.theme-camo .work img{ border-color: rgba(79,138,79,0.5); }
body.theme-leopard .work img{ border-color: rgba(179,59,99,0.55); background: rgba(255,255,255,0.08); }
body.theme-cherry .work img{ border-color: rgba(200,29,37,0.55); }

/* --- FOOTER --- */
.footer{
  margin-top: 14px;
  font-size: 11px;
  text-align:center;
  opacity: .95;
}
.footer a{
  color:#ff2f9a;
  text-decoration:none;
}
.footer a:hover{ text-decoration: underline; }

body.theme-camo .footer a{ color:#2f6b2f; }
body.theme-leopard .footer a{ color:#ff7aa8; }
body.theme-cherry .footer a{ color:#c81d25; }
body.theme-leopard.index .footer a{ color:#ff2f9a; }

/* corner logo on ALL pages */
.corner-logo{
  position: absolute;      /* NOT fixed (so it won't stay when you scroll) */
  top: -6px;
  right: -14px;
  width: 280px;            /* make bigger (try 240–340) */
  height: auto;
  transform: rotate(6deg); /* slight tilt */
  z-index: 999;
  pointer-events: none;    /* so it doesn't block clicks */
}

/* IMPORTANT: make sure wrap is the positioning parent */
.wrap{ position: relative; }

/* ========== CORNER LOGO (ALL PAGES) ========== */
/* ONE LOGO SYSTEM ONLY */
.corner-logo{
  position: fixed;
  top: 18px;
  right: 18px;
  width: 220px;         /* try 180–280 */
  height: auto;
  transform: rotate(6deg);
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.18));
}