/* ═══════════════════════════════════════════════════════════════════
   girlmade.online — kawaii myspace theme
   Adapted from the CUTESPACE template.

   Colours, the background pattern and every image slot live in the
   :root block right below. Change a value there and the whole site
   follows. Everything after that is layout and does not need editing.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;1,400;1,600&display=swap');

:root {
  /* ── Colours ── */
  --pink-light:  #ffd6e7;
  --pink-mid:    #ffb3d1;
  --pink-deep:   #e87aaa;
  --pink-text:   #c4547e;
  --blue-light:  #d6eeff;
  --blue-mid:    #b3d9ff;
  --blue-deep:   #7ab8e8;
  --blue-text:   #3a7ab5;
  --lavender:    #e8d6ff;
  --mint:        #d6fff0;
  --cream:       #fff9f5;
  --pearl:       #fef0f5;
  --pixel-border:#e8a0c0;
  --text-main:   #5a3a5a;
  --text-muted:  #9a7a9a;

  /* Fonts: the pixel one for headings and labels, the typewriter one for
     small print, and the serif for anything you actually read. */
  --font-pixel: 'VT323', 'Courier New', monospace;
  --font-mono:  'Courier Prime', 'Courier New', monospace;
  --font-read:  'Crimson Pro', Georgia, serif;

  --page-width: 1100px;

  /* Images are set in config.toml, not here — the templates paste the
     URLs in as inline styles so a writer never has to open this file. */
}

/* The kawaii palette is a light one; asking the browser for light
   widgets stops form controls and scrollbars going dark on us. */
:root { color-scheme: light; }

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

body {
  font-family: var(--font-mono);
  color: var(--text-main);
  min-height: 100vh;
  background-color: #cceeff;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0 L0 12 L3 9 L6 16 L8 15 L5 8 L9 8 Z' fill='%23e87aaa' stroke='white' stroke-width='1'/%3E%3C/svg%3E"), auto;
}

/* With a background image set in config.toml it tiles; without one you
   get the polka dots. */
body.has-bg-image {
  background-image: var(--bg-image);
  background-repeat: repeat;
  background-position: top left;
}
body:not(.has-bg-image) {
  background-image:
    radial-gradient(circle, rgba(255,182,218,.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(150,210,255,.4) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
}

/* Skip link: visible only once it has focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--pink-light);
  border: 2px solid var(--pink-text);
  color: var(--pink-text);
  font-family: var(--font-pixel);
  font-size: 18px;
  padding: 4px 12px;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 2px; }

/* ── SITE HEADER ── */
#site-header {
  border-bottom: 3px solid var(--pink-deep);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffb3d1 0%, #ffd6e7 60%, #d6eeff 100%);
}
#site-header.has-image { background-size: cover; background-position: center; }
#site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255,255,255,.18) 6px, rgba(255,255,255,.18) 7px);
  pointer-events: none;
  z-index: 0;
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 18px;
  position: relative;
  z-index: 1;
}
.site-logo {
  font-family: var(--font-pixel);
  font-size: 42px;
  color: #fff;
  text-shadow: 3px 3px 0 #c4547e, -1px -1px 0 var(--pink-deep);
  letter-spacing: 4px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}
.logo-star {
  display: inline-block;
  font-size: 24px;
  animation: twinkle 2s ease-in-out infinite alternate;
  color: #fffacd;
  text-shadow: 0 0 8px #ffb347, 0 0 16px #ffb347;
}
@keyframes twinkle {
  from { opacity: .6; transform: scale(.9) rotate(-5deg); }
  to   { opacity: 1;  transform: scale(1.1) rotate(5deg); }
}
.header-tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: italic;
  color: var(--pink-text);
  background: rgba(255,255,255,.55);
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.8);
  max-width: 340px;
}

/* Pixel button, used for the feed link and anything else button-shaped. */
.btn-pixel {
  font-family: var(--font-pixel);
  font-size: 16px;
  background: var(--pink-light);
  border: 2px solid var(--pink-text);
  border-right-color: #a03060;
  border-bottom-color: #a03060;
  color: var(--pink-text);
  padding: 3px 12px;
  text-decoration: none;
  letter-spacing: 1px;
  transition: transform .1s;
  display: inline-block;
}
.btn-pixel:hover { transform: translate(1px, 1px); background: #ffc8e0; }

/* ── NAV ── */
#site-nav {
  background: var(--cream);
  border-top: 2px solid #fff;
  border-bottom: 2px solid var(--pixel-border);
  display: flex;
  flex-wrap: wrap;
}
#site-nav a {
  font-family: var(--font-pixel);
  font-size: 20px;
  color: var(--pink-text);
  text-decoration: none;
  padding: 5px 18px;
  border-right: 1px solid var(--pixel-border);
  letter-spacing: 1px;
  transition: background .1s, color .1s;
}
#site-nav a:first-child { border-left: 1px solid var(--pixel-border); }
#site-nav a:hover { background: var(--pink-light); color: var(--blue-text); }
#site-nav a.is-current { background: var(--pink-light); color: var(--blue-text); }

/* ── MAIN LAYOUT ── */
#main-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 10px;
  max-width: var(--page-width);
  margin: 12px auto;
  padding: 0 10px;
  align-items: start;
}
#sidebar { display: flex; flex-direction: column; gap: 10px; }
#main-feed { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ── PANEL ── */
.panel {
  background: var(--pearl);
  border: 2px solid var(--pink-mid);
  border-right-color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
  position: relative;
  overflow: hidden;
}
.panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--pink-deep) 0, var(--pink-deep) 4px, transparent 4px, transparent 8px);
}
.panel-title {
  font-family: var(--font-pixel);
  font-size: 28px;
  color: var(--pink-text);
  padding: 8px 12px 4px;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 rgba(200,84,126,.2);
  border-bottom: 1px dashed var(--pink-mid);
  margin-top: 3px;
  font-weight: normal;
}

/* ── SIDEBAR PROFILE CARD ── */
#profile-card {
  background: linear-gradient(160deg, #ffe0f0 0%, #d6eeff 100%);
  border: 2px solid var(--pink-deep);
  border-right-color: #b05a8a;
  border-bottom-color: #b05a8a;
  text-align: center;
  padding: 0 0 12px;
  position: relative;
  overflow: hidden;
}
.sidebar-banner {
  width: 100%;
  height: 70px;
  background: linear-gradient(135deg, #ffb3d1, #b3d9ff);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--pink-mid);
  position: relative;
}
.sidebar-banner-text {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.38);
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: rgba(180,100,140,.85);
  letter-spacing: 3px;
}
.sidebar-avatar {
  width: 72px;
  height: 72px;
  border: 3px solid #fff;
  margin: -36px auto 8px;
  box-shadow: 3px 3px 0 var(--pink-mid);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffd6e7, #d6eeff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.sidebar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
}
.profile-name { font-family: var(--font-pixel); font-size: 30px; color: var(--pink-text); letter-spacing: 3px; text-shadow: 2px 2px 0 var(--blue-mid); }
.profile-handle { font-size: 11px; color: var(--blue-text); margin: 2px 0 8px; }
.profile-bio { font-size: 11.5px; color: var(--text-main); line-height: 1.5; padding: 0 14px; font-style: italic; }
.profile-stats { display: flex; justify-content: center; gap: 16px; margin: 10px 0 6px; }
.stat-item { text-align: center; }
.stat-num { font-family: var(--font-pixel); font-size: 22px; color: var(--pink-text); display: block; }
.stat-label { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; }
.mood-line { font-size: 10.5px; color: var(--text-muted); padding: 6px 14px 0; border-top: 1px dashed var(--pink-mid); margin-top: 8px; text-align: left; }
.mood-line + .mood-line { margin-top: 4px; }
.mood-line span { color: var(--pink-text); }

/* ── FRIENDS GRID ── */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 10px 10px;
}
.friend-box {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--blue-mid);
  background: var(--blue-light);
  text-decoration: none;
  transition: filter .1s;
  position: relative;
  overflow: hidden;
}
.friend-box:hover { filter: brightness(1.08); outline: 2px solid var(--pink-deep); }
/* Colour options for a friend box, picked by name in config.toml. */
.friend-blue   { background: var(--blue-light); border-color: var(--blue-mid); }
.friend-pink   { background: var(--pink-light); border-color: var(--pink-mid); }
.friend-lav    { background: var(--lavender);   border-color: #c8a8f0; }
.friend-mint   { background: var(--mint);       border-color: #a0e0c8; }
.friend-yellow { background: #fff5cc;           border-color: #e8d870; }
.friend-peach  { background: #ffe0d0;           border-color: #f0b0a0; }
.friend-face  { font-size: 26px; display: block; line-height: 1; }
.friend-label { font-family: var(--font-pixel); font-size: 11px; color: var(--blue-text); text-align: center; display: block; padding: 0 4px; overflow-wrap: anywhere; }
.friend-box img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; position: absolute; inset: 0; }
.friend-box .friend-name-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(255,200,230,.82);
  font-family: var(--font-pixel); font-size: 11px;
  color: var(--pink-text); text-align: center; padding: 1px 0;
}

/* ── NOW PLAYING MARQUEE ── */
.marquee-wrap {
  background: #fff;
  border: 2px solid var(--pink-mid);
  border-right-color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
  padding: 5px 8px;
  margin: 10px 12px;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-inner { display: inline-block; animation: marquee 12s linear infinite; font-family: var(--font-pixel); font-size: 16px; color: var(--pink-text); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── BLINKIES ── */
.blinkies-wrap { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px 10px; }
.blinkie { height: 20px; padding: 0 8px; font-family: var(--font-pixel); font-size: 13px; display: flex; align-items: center; white-space: nowrap; border: 1px solid; animation: blink-border 2s step-start infinite; }
.blinkie-pink   { background: #ffb3d1; border-color: #e87aaa; color: #8b2252; animation-delay: 0s; }
.blinkie-blue   { background: #b3d9ff; border-color: #7ab8e8; color: #1a4a7a; animation-delay: .4s; }
.blinkie-mint   { background: #b3ffe0; border-color: #5adab0; color: #0a5a38; animation-delay: .8s; }
.blinkie-lav    { background: #ddb3ff; border-color: #aa7ae8; color: #4a1a7a; animation-delay: 1.2s; }
.blinkie-yellow { background: #fffab3; border-color: #e8d87a; color: #6a580a; animation-delay: 1.6s; }
.blinkie-dark   { background: #3a2050; border-color: #7a40a0; color: #ddb3ff; animation-delay: .2s; }
@keyframes blink-border { 0%,100% { opacity: 1; } 50% { opacity: .5; filter: brightness(1.3); } }

/* ── TAG LIST IN THE SIDEBAR ── */
.trending-list { padding: 6px 12px 10px; }
.trend-item { padding: 6px 0; border-bottom: 1px dashed var(--blue-light); display: block; text-decoration: none; }
.trend-item:last-child { border-bottom: none; }
.trend-tag { font-family: var(--font-pixel); font-size: 17px; color: var(--blue-text); letter-spacing: 1px; display: block; }
.trend-item:hover .trend-tag { color: var(--pink-text); }
.trend-desc { font-size: 10px; color: var(--text-muted); font-style: italic; display: block; margin-top: 1px; }

/* ── PROFILE HEADER (big banner) ── */
#profile-header {
  border: 2px solid var(--pink-deep);
  border-right-color: #a05080;
  border-bottom-color: #a05080;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  background: linear-gradient(135deg, #ffe8f4, #e8f4ff, #f4ffe8);
  background-size: cover;
  background-position: center;
}
#ph-overlay {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 10% 50%, rgba(255,180,220,.35) 0%, transparent 40%),
    radial-gradient(circle at 90% 30%, rgba(180,220,255,.35) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.header-inner { display: flex; align-items: flex-end; gap: 18px; padding: 18px; position: relative; z-index: 1; }
.main-avatar {
  width: 120px;
  height: 120px;
  border: 3px solid #fff;
  box-shadow: 4px 4px 0 var(--pink-deep);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffd6e7, #d6eeff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.main-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; position: absolute; inset: 0; }
.profile-info-main { flex: 1; padding-bottom: 4px; min-width: 0; }
.big-name { font-family: var(--font-pixel); font-size: 48px; font-weight: normal; letter-spacing: 4px; text-shadow: 3px 3px 0 var(--pink-text), 5px 5px 0 rgba(196,84,126,.3); line-height: 1; margin-bottom: 4px; overflow-wrap: anywhere; }
.glitter-text { background: linear-gradient(90deg, var(--pink-text), var(--blue-text), var(--pink-text)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: glitter 3s linear infinite; }
@keyframes glitter { from { background-position: 0% center; } to { background-position: 200% center; } }
.big-handle { font-size: 12px; color: var(--blue-text); margin-bottom: 8px; opacity: .9; }
.big-bio { font-size: 12.5px; color: var(--text-main); font-style: italic; max-width: 500px; line-height: 1.5; background: rgba(255,255,255,.65); padding: 6px 10px; border-left: 3px solid var(--pink-deep); }
.big-bio p { margin: 0; }
.big-bio p + p { margin-top: .4em; }

/* ── PIXEL DIVIDER ── */
.pixel-divider { width: 100%; height: 10px; background: repeating-linear-gradient(90deg, var(--pink-mid) 0, var(--pink-mid) 8px, var(--blue-mid) 8px, var(--blue-mid) 16px, var(--lavender) 16px, var(--lavender) 24px); border-top: 1px solid var(--pink-text); border-bottom: 1px solid var(--blue-deep); margin: 2px 0; }

/* ── POST CARD ── */
.post-card {
  background: var(--pearl);
  border: 2px solid var(--pink-mid);
  border-right-color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
  position: relative;
  overflow: hidden;
}
.post-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--pink-mid) 0, var(--pink-mid) 4px, var(--blue-mid) 4px, var(--blue-mid) 8px);
}
.post-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; border-bottom: 1px dashed var(--pink-mid); margin-top: 3px; }
.post-avatar {
  width: 36px; height: 36px;
  border: 2px solid var(--pink-mid);
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #ffd6e7, #d6eeff);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  position: relative;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; position: absolute; inset: 0; }
.post-meta { flex: 1; min-width: 0; }
.post-author { font-family: var(--font-pixel); font-size: 20px; font-weight: normal; color: var(--pink-text); letter-spacing: 1px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; line-height: 1.2; }
.post-author a { color: inherit; text-decoration: none; }
.post-author a:hover { text-decoration: underline; }
.post-tag { font-family: var(--font-pixel); font-size: 12px; background: var(--blue-light); border: 1px solid var(--blue-mid); color: var(--blue-text); padding: 1px 6px; letter-spacing: 1px; }
.post-tag-draft { background: #fff5cc; border-color: #e8cc60; color: #806020; }
.post-date { font-size: 10px; color: var(--text-muted); }
.post-body { padding: 14px 16px; }
.post-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 8px 14px; border-top: 1px dashed var(--pink-mid); background: rgba(255,240,248,.5); }
.post-action { font-family: var(--font-pixel); font-size: 16px; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 4px; }
.post-action:hover { color: var(--pink-text); }
.post-action-count { font-size: 10px; font-family: var(--font-mono); }

/* ── PROSE: everything written in Markdown lands in here ── */
.post-text {
  font-family: var(--font-read);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-main);
  overflow-wrap: break-word;
}
.post-text > :first-child { margin-top: 0; }
.post-text > :last-child { margin-bottom: 0; }
.post-text p { margin: 0 0 1em; }
.post-text em { color: var(--pink-text); }
.post-text strong { color: var(--blue-text); }
.post-text a { color: var(--pink-text); text-decoration: underline; text-underline-offset: 2px; }
.post-text a:hover { color: var(--blue-text); }
.post-text h1, .post-text h2, .post-text h3,
.post-text h4, .post-text h5, .post-text h6 {
  font-family: var(--font-pixel);
  font-weight: normal;
  color: var(--pink-text);
  letter-spacing: 2px;
  line-height: 1.2;
  margin: 1.4em 0 .4em;
  text-shadow: 2px 2px 0 rgba(200,84,126,.15);
}
.post-text h1 { font-size: 32px; }
.post-text h2 { font-size: 27px; }
.post-text h3 { font-size: 23px; color: var(--blue-text); text-shadow: 2px 2px 0 rgba(58,122,181,.15); }
.post-text h4, .post-text h5, .post-text h6 { font-size: 20px; color: var(--blue-text); text-shadow: none; }
.post-text ul, .post-text ol { margin: 0 0 1em; padding-left: 1.6em; }
.post-text li { margin-bottom: .3em; }
.post-text ul { list-style: '✦ '; }
.post-text ul ul { list-style: '✧ '; }
.post-text blockquote {
  margin: 1.2em 0;
  padding: 8px 14px;
  background: rgba(255,255,255,.6);
  border-left: 3px solid var(--pink-deep);
  font-style: italic;
  color: var(--text-muted);
}
.post-text blockquote p:last-child { margin-bottom: 0; }
.post-text img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 2px solid var(--pink-mid);
  border-right-color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
  margin: 14px auto;
}
.post-text figure { margin: 14px 0; }
.post-text figcaption { font-size: 11px; color: var(--text-muted); text-align: center; font-style: italic; }
.post-text hr {
  border: none;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--pink-mid) 0, var(--pink-mid) 6px, transparent 6px, transparent 10px);
  margin: 1.4em 0;
}
.post-text code { font-family: var(--font-mono); font-size: .88em; }
.post-text :not(pre) > code {
  background: var(--pink-light);
  border: 1px solid var(--pink-mid);
  color: var(--pink-text);
  padding: 0 .3em;
}
/* Zola writes its own colours onto <pre> as light-dark() pairs, with an
   inline `color-scheme: light dark`. That would turn code blocks dark for
   anyone whose system is set to dark while the rest of the page stayed
   pastel, so pin them to the light half. Inline styles need the
   !important to be overridden. */
.post-text pre {
  color-scheme: light !important;
  overflow-x: auto;
  padding: 10px 12px;
  margin: 1.2em 0;
  border: 2px solid var(--blue-mid);
  border-right-color: var(--blue-deep);
  border-bottom-color: var(--blue-deep);
  font-size: 12.5px;
  line-height: 1.55;
}
.post-text pre code { color: inherit; background: none; border: none; padding: 0; }
.post-text table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-family: var(--font-mono); font-size: 12px; display: block; overflow-x: auto; }
.post-text th, .post-text td { border: 1px solid var(--pink-mid); padding: 5px 8px; text-align: left; }
.post-text th { background: var(--pink-light); color: var(--pink-text); font-family: var(--font-pixel); font-size: 15px; letter-spacing: 1px; }
.post-text a.zola-anchor { text-decoration: none; opacity: .45; margin-left: .3em; }

/* Post excerpt in a list: same face as prose, one paragraph of it. */
.post-excerpt { font-family: var(--font-read); font-size: 14px; line-height: 1.7; color: var(--text-muted); font-style: italic; }

/* ── FOUND DOC — a paper-coloured aside, used for the empty state ── */
.found-doc {
  background: #fff9f0;
  border: 1px solid #e8d0a0;
  border-left: 4px solid #c8a060;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #6a5020;
  position: relative;
}
.found-doc::before {
  content: attr(data-label);
  position: absolute;
  top: -9px; left: 10px;
  background: #fff9f0;
  padding: 0 5px;
  color: #a07030;
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 2px;
}

/* ── TAGS ── */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.tag { font-family: var(--font-pixel); font-size: 14px; color: var(--pink-text); background: var(--pink-light); border: 1px solid var(--pink-mid); padding: 1px 8px; letter-spacing: 1px; text-decoration: none; }
.tag:hover { background: var(--pink-mid); }
.tag-blue { color: var(--blue-text); background: var(--blue-light); border-color: var(--blue-mid); }
.tag-count { font-family: var(--font-mono); font-size: 10px; opacity: .75; }

/* ── FLOATING STARS ── */
.float-star { position: fixed; font-size: 14px; color: rgba(232,122,170,.6); animation: float-up 8s linear infinite; pointer-events: none; z-index: 0; user-select: none; }
@keyframes float-up {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .8; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
@keyframes sparkle-fade { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-20px) scale(.3); } }

/* ── FOOTER ── */
#site-footer {
  /* the 20px matches the side padding on #main-wrap, so the footer lines
     up with the cards above it rather than sitting 10px wider */
  max-width: calc(var(--page-width) - 20px);
  margin: 10px auto 24px;
  padding: 10px 14px;
  background: var(--cream);
  border: 2px solid var(--pink-mid);
  border-right-color: var(--pink-deep);
  border-bottom-color: var(--pink-deep);
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}
#site-footer a { color: var(--pink-text); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--pink-light); }
::-webkit-scrollbar-thumb { background: var(--pink-deep); border: 1px solid var(--pink-text); }

/* ── NARROW SCREENS ── */
@media (max-width: 820px) {
  #main-wrap { grid-template-columns: 1fr; }
  /* On a phone the writing comes first and the trinkets follow. */
  #sidebar { order: 2; }
  #main-feed { order: 1; }
  .site-logo { font-size: 32px; letter-spacing: 2px; }
  .header-tagline { max-width: none; }
  .big-name { font-size: 34px; letter-spacing: 2px; }
  .header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .main-avatar { width: 84px; height: 84px; font-size: 34px; }
  .float-star { display: none; }
}

/* ── PRINT & REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .glitter-text { -webkit-text-fill-color: var(--pink-text); color: var(--pink-text); }
}