/* ==========================================================================
   TABLE OF CONTENTS
   1. Theme Variables & Seasonal Themes
   2. Reset, Typography & Pixel Utilities
   3. Main Container & Layout Wrapper
   4. Header, Navigation & Toggles
   5. Main Content, Blogroll & Posts
   6. Interactive Toys (Tamagotchi, Doll, Homunculus, Familiar)
   7. Footer & Pagination
   8. Media
   ========================================================================== */

/* ==========================================================================
   1. THEME VARIABLES & SEASONAL THEMES
   ========================================================================== */
:root,
body.theme-spring {
  --body-bg-color:   #f2f7f2;
  --bg-container:    #ffffff;
  --bg-sidebar:      #f5f9f5;
  --text-main:       #1a241a;
  --text-muted:      #5a6b5a;
  --border-color:    #d4e0d4;
  --link-hover-bg:   #2e4a2e;
  --link-hover-text: #ffffff;
  --quip-bg:         #e8f0e8;
  --quip-txt:        #3755ae;

  --bg-tile:            url('../images/tile-spring.png');
  --img-doll-base:      url('../images/doll-base-spring.png');
  --img-homunculus-base:url('../images/homunculus-base-spring.png');
  --img-familiar-base:  url('../images/familiar-base-spring.png');

  --portrait-1:        url('../images/portrait/spring-1.png');
  --portrait-2:        url('../images/portrait/spring-2.png');
  --portrait-3:        url('../images/portrait/spring-3.png');
  --portrait-4:        url('../images/portrait/spring-4.png');

  --tamagotchi-1: url('../images/tamagotchi/spring-1.png');
  --tamagotchi-2: url('../images/tamagotchi/spring-2.png');
  --tamagotchi-3: url('../images/tamagotchi/spring-3.png');
  --tamagotchi-4: url('../images/tamagotchi/spring-4.png');

  /* Doll Layers */
  --doll-pet-1:    url('../images/doll/spring-pet-1.png');    --doll-pet-2:    url('../images/doll/spring-pet-2.png');    --doll-pet-3:    url('../images/doll/spring-pet-3.png');    --doll-pet-4:    url('../images/doll/spring-pet-4.png');
  --doll-head-1:   url('../images/doll/spring-head-1.png');   --doll-head-2:   url('../images/doll/spring-head-2.png');   --doll-head-3:   url('../images/doll/spring-head-3.png');   --doll-head-4:   url('../images/doll/spring-head-4.png');
  --doll-face-1:   url('../images/doll/spring-face-1.png');   --doll-face-2:   url('../images/doll/spring-face-2.png');   --doll-face-3:   url('../images/doll/spring-face-3.png');   --doll-face-4:   url('../images/doll/spring-face-4.png');
  --doll-torso-1:  url('../images/doll/spring-torso-1.png');  --doll-torso-2:  url('../images/doll/spring-torso-2.png');  --doll-torso-3:  url('../images/doll/spring-torso-3.png');  --doll-torso-4:  url('../images/doll/spring-torso-4.png');
  --doll-pelvis-1: url('../images/doll/spring-pelvis-1.png'); --doll-pelvis-2: url('../images/doll/spring-pelvis-2.png'); --doll-pelvis-3: url('../images/doll/spring-pelvis-3.png'); --doll-pelvis-4: url('../images/doll/spring-pelvis-4.png');
  --doll-legs-1:   url('../images/doll/spring-legs-1.png');   --doll-legs-2:   url('../images/doll/spring-legs-2.png');   --doll-legs-3:   url('../images/doll/spring-legs-3.png');   --doll-legs-4:   url('../images/doll/spring-legs-4.png');
  --doll-feet-1:   url('../images/doll/spring-feet-1.png');   --doll-feet-2:   url('../images/doll/spring-feet-2.png');   --doll-feet-3:   url('../images/doll/spring-feet-3.png');   --doll-feet-4:   url('../images/doll/spring-feet-4.png');
  --doll-arms-1:   url('../images/doll/spring-arms-1.png');   --doll-arms-2:   url('../images/doll/spring-arms-2.png');   --doll-arms-3:   url('../images/doll/spring-arms-3.png');   --doll-arms-4:   url('../images/doll/spring-arms-4.png');

  /* Homunculus Layers */
  --homunculus-head-1:  url('../images/homunculus/spring-head-1.png');  --homunculus-head-2:  url('../images/homunculus/spring-head-2.png');  --homunculus-head-3:  url('../images/homunculus/spring-head-3.png');  --homunculus-head-4:  url('../images/homunculus/spring-head-4.png');
  --homunculus-face-1:  url('../images/homunculus/spring-face-1.png');  --homunculus-face-2:  url('../images/homunculus/spring-face-2.png');  --homunculus-face-3:  url('../images/homunculus/spring-face-3.png');  --homunculus-face-4:  url('../images/homunculus/spring-face-4.png');
  --homunculus-torso-1: url('../images/homunculus/spring-torso-1.png'); --homunculus-torso-2: url('../images/homunculus/spring-torso-2.png'); --homunculus-torso-3: url('../images/homunculus/spring-torso-3.png'); --homunculus-torso-4: url('../images/homunculus/spring-torso-4.png');

  /* Familiar Layers */
  --familiar-head-1: url('../images/familiar/spring-head-1.png'); --familiar-head-2: url('../images/familiar/spring-head-2.png'); --familiar-head-3: url('../images/familiar/spring-head-3.png'); --familiar-head-4: url('../images/familiar/spring-head-4.png');
  --familiar-body-1: url('../images/familiar/spring-body-1.png'); --familiar-body-2: url('../images/familiar/spring-body-2.png'); --familiar-body-3: url('../images/familiar/spring-body-3.png'); --familiar-body-4: url('../images/familiar/spring-body-4.png');
  --familiar-tail-1: url('../images/familiar/spring-tail-1.png'); --familiar-tail-2: url('../images/familiar/spring-tail-2.png'); --familiar-tail-3: url('../images/familiar/spring-tail-3.png'); --familiar-tail-4: url('../images/familiar/spring-tail-4.png');
}

body.theme-summer {
  --body-bg-color:   #fffde8;
  --bg-container:    #ffffff;
  --bg-sidebar:      #fffce0;
  --text-main:       #2b220a;
  --text-muted:      #6b5d37;
  --border-color:    #eee3ad;
  --link-hover-bg:   #8c6d1f;
  --link-hover-text: #ffffff;
  --quip-bg:         #f9f6f0;
  --quip-txt:        #dc399d;

  --bg-tile:            url('../images/tile-summer.png');
  --img-doll-base:      url('../images/doll-base-summer.png');
  --img-homunculus-base:url('../images/homunculus-base-summer.png');
  --img-familiar-base:  url('../images/familiar-base-summer.png');

  --portrait-1:        url('../images/portrait/summer-1.png');
  --portrait-2:        url('../images/portrait/summer-2.png');
  --portrait-3:        url('../images/portrait/summer-3.png');
  --portrait-4:        url('../images/portrait/summer-4.png');

  --tamagotchi-1: url('../images/tamagotchi/summer-1.png');
  --tamagotchi-2: url('../images/tamagotchi/summer-2.png');
  --tamagotchi-3: url('../images/tamagotchi/summer-3.png');
  --tamagotchi-4: url('../images/tamagotchi/summer-4.png');

  --doll-pet-1:    url('../images/doll/summer-pet-1.png');    --doll-pet-2:    url('../images/doll/summer-pet-2.png');    --doll-pet-3:    url('../images/doll/summer-pet-3.png');    --doll-pet-4:    url('../images/doll/summer-pet-4.png');
  --doll-head-1:   url('../images/doll/summer-head-1.png');   --doll-head-2:   url('../images/doll/summer-head-2.png');   --doll-head-3:   url('../images/doll/summer-head-3.png');   --doll-head-4:   url('../images/doll/summer-head-4.png');
  --doll-face-1:   url('../images/doll/summer-face-1.png');   --doll-face-2:   url('../images/doll/summer-face-2.png');   --doll-face-3:   url('../images/doll/summer-face-3.png');   --doll-face-4:   url('../images/doll/summer-face-4.png');
  --doll-torso-1:  url('../images/doll/summer-torso-1.png');  --doll-torso-2:  url('../images/doll/summer-torso-2.png');  --doll-torso-3:  url('../images/doll/summer-torso-3.png');  --doll-torso-4:  url('../images/doll/summer-torso-4.png');
  --doll-pelvis-1: url('../images/doll/summer-pelvis-1.png'); --doll-pelvis-2: url('../images/doll/summer-pelvis-2.png'); --doll-pelvis-3: url('../images/doll/summer-pelvis-3.png'); --doll-pelvis-4: url('../images/doll/summer-pelvis-4.png');
  --doll-legs-1:   url('../images/doll/summer-legs-1.png');   --doll-legs-2:   url('../images/doll/summer-legs-2.png');   --doll-legs-3:   url('../images/doll/summer-legs-3.png');   --doll-legs-4:   url('../images/doll/summer-legs-4.png');
  --doll-feet-1:   url('../images/doll/summer-feet-1.png');   --doll-feet-2:   url('../images/doll/summer-feet-2.png');   --doll-feet-3:   url('../images/doll/summer-feet-3.png');   --doll-feet-4:   url('../images/doll/summer-feet-4.png');
  --doll-arms-1:   url('../images/doll/summer-arms-1.png');   --doll-arms-2:   url('../images/doll/summer-arms-2.png');   --doll-arms-3:   url('../images/doll/summer-arms-3.png');   --doll-arms-4:   url('../images/doll/summer-arms-4.png');

  --homunculus-head-1:  url('../images/homunculus/summer-head-1.png');  --homunculus-head-2:  url('../images/homunculus/summer-head-2.png');  --homunculus-head-3:  url('../images/homunculus/summer-head-3.png');  --homunculus-head-4:  url('../images/homunculus/summer-head-4.png');
  --homunculus-face-1:  url('../images/homunculus/summer-face-1.png');  --homunculus-face-2:  url('../images/homunculus/summer-face-2.png');  --homunculus-face-3:  url('../images/homunculus/summer-face-3.png');  --homunculus-face-4:  url('../images/homunculus/summer-face-4.png');
  --homunculus-torso-1: url('../images/homunculus/summer-torso-1.png'); --homunculus-torso-2: url('../images/homunculus/summer-torso-2.png'); --homunculus-torso-3: url('../images/homunculus/summer-torso-3.png'); --homunculus-torso-4: url('../images/homunculus/summer-torso-4.png');

  --familiar-head-1: url('../images/familiar/summer-head-1.png'); --familiar-head-2: url('../images/familiar/summer-head-2.png'); --familiar-head-3: url('../images/familiar/summer-head-3.png'); --familiar-head-4: url('../images/familiar/summer-head-4.png');
  --familiar-body-1: url('../images/familiar/summer-body-1.png'); --familiar-body-2: url('../images/familiar/summer-body-2.png'); --familiar-body-3: url('../images/familiar/summer-body-3.png'); --familiar-body-4: url('../images/familiar/summer-body-4.png');
  --familiar-tail-1: url('../images/familiar/summer-tail-1.png'); --familiar-tail-2: url('../images/familiar/summer-tail-2.png'); --familiar-tail-3: url('../images/familiar/summer-tail-3.png'); --familiar-tail-4: url('../images/familiar/summer-tail-4.png');
}

body.theme-autumn {
  --body-bg-color:   #2b1d14;
  --bg-container:    #1c130d;
  --bg-sidebar:      #241810;
  --text-main:       #f0e6df;
  --text-muted:      #b59f8e;
  --border-color:    #402c1f;
  --link-hover-bg:   #d97724;
  --link-hover-text: #ffffff;
  --quip-bg:         #241710;
  --quip-txt:        #1cc3c5;

  --bg-tile:            url('../images/tile-autumn.png');
  --img-doll-base:      url('../images/doll-base-autumn.png');
  --img-homunculus-base:url('../images/homunculus-base-autumn.png');
  --img-familiar-base:  url('../images/familiar-base-autumn.png');

  --portrait-1:        url('../images/portrait/autumn-1.png');
  --portrait-2:        url('../images/portrait/autumn-2.png');
  --portrait-3:        url('../images/portrait/autumn-3.png');
  --portrait-4:        url('../images/portrait/autumn-4.png');

  --tamagotchi-1: url('../images/tamagotchi/autumn-1.png');
  --tamagotchi-2: url('../images/tamagotchi/autumn-2.png');
  --tamagotchi-3: url('../images/tamagotchi/autumn-3.png');
  --tamagotchi-4: url('../images/tamagotchi/autumn-4.png');

  --doll-pet-1:    url('../images/doll/autumn-pet-1.png');    --doll-pet-2:    url('../images/doll/autumn-pet-2.png');    --doll-pet-3:    url('../images/doll/autumn-pet-3.png');    --doll-pet-4:    url('../images/doll/autumn-pet-4.png');
  --doll-head-1:   url('../images/doll/autumn-head-1.png');   --doll-head-2:   url('../images/doll/autumn-head-2.png');   --doll-head-3:   url('../images/doll/autumn-head-3.png');   --doll-head-4:   url('../images/doll/autumn-head-4.png');
  --doll-face-1:   url('../images/doll/autumn-face-1.png');   --doll-face-2:   url('../images/doll/autumn-face-2.png');   --doll-face-3:   url('../images/doll/autumn-face-3.png');   --doll-face-4:   url('../images/doll/autumn-face-4.png');
  --doll-torso-1:  url('../images/doll/autumn-torso-1.png');  --doll-torso-2:  url('../images/doll/autumn-torso-2.png');  --doll-torso-3:  url('../images/doll/autumn-torso-3.png');  --doll-torso-4:  url('../images/doll/autumn-torso-4.png');
  --doll-pelvis-1: url('../images/doll/autumn-pelvis-1.png'); --doll-pelvis-2: url('../images/doll/autumn-pelvis-2.png'); --doll-pelvis-3: url('../images/doll/autumn-pelvis-3.png'); --doll-pelvis-4: url('../images/doll/autumn-pelvis-4.png');
  --doll-legs-1:   url('../images/doll/autumn-legs-1.png');   --doll-legs-2:   url('../images/doll/autumn-legs-2.png');   --doll-legs-3:   url('../images/doll/autumn-legs-3.png');   --doll-legs-4:   url('../images/doll/autumn-legs-4.png');
  --doll-feet-1:   url('../images/doll/autumn-feet-1.png');   --doll-feet-2:   url('../images/doll/autumn-feet-2.png');   --doll-feet-3:   url('../images/doll/autumn-feet-3.png');   --doll-feet-4:   url('../images/doll/autumn-feet-4.png');
  --doll-arms-1:   url('../images/doll/autumn-arms-1.png');   --doll-arms-2:   url('../images/doll/autumn-arms-2.png');   --doll-arms-3:   url('../images/doll/autumn-arms-3.png');   --doll-arms-4:   url('../images/doll/autumn-arms-4.png');

  --homunculus-head-1:  url('../images/homunculus/autumn-head-1.png');  --homunculus-head-2:  url('../images/homunculus/autumn-head-2.png');  --homunculus-head-3:  url('../images/homunculus/autumn-head-3.png');  --homunculus-head-4:  url('../images/homunculus/autumn-head-4.png');
  --homunculus-face-1:  url('../images/homunculus/autumn-face-1.png');  --homunculus-face-2:  url('../images/homunculus/autumn-face-2.png');  --homunculus-face-3:  url('../images/homunculus/autumn-face-3.png');  --homunculus-face-4:  url('../images/homunculus/autumn-face-4.png');
  --homunculus-torso-1: url('../images/homunculus/autumn-torso-1.png'); --homunculus-torso-2: url('../images/homunculus/autumn-torso-2.png'); --homunculus-torso-3: url('../images/homunculus/autumn-torso-3.png'); --homunculus-torso-4: url('../images/homunculus/autumn-torso-4.png');

  --familiar-head-1: url('../images/familiar/autumn-head-1.png'); --familiar-head-2: url('../images/familiar/autumn-head-2.png'); --familiar-head-3: url('../images/familiar/autumn-head-3.png'); --familiar-head-4: url('../images/familiar/autumn-head-4.png');
  --familiar-body-1: url('../images/familiar/autumn-body-1.png'); --familiar-body-2: url('../images/familiar/autumn-body-2.png'); --familiar-body-3: url('../images/familiar/autumn-body-3.png'); --familiar-body-4: url('../images/familiar/autumn-body-4.png');
  --familiar-tail-1: url('../images/familiar/autumn-tail-1.png'); --familiar-tail-2: url('../images/familiar/autumn-tail-2.png'); --familiar-tail-3: url('../images/familiar/autumn-tail-3.png'); --familiar-tail-4: url('../images/familiar/autumn-tail-4.png');
}

body.theme-winter {
  --body-bg-color:   #0f141d;
  --bg-container:    #131a26;
  --bg-sidebar:      #18202e;
  --text-main:       #e1e8f5;
  --text-muted:      #8a9bb8;
  --border-color:    #25334a;
  --link-hover-bg:   #4a7bb0;
  --link-hover-text: #ffffff;
  --quip-bg:         #18202e;
  --quip-txt:        #88a3db;

  --bg-tile:            url('../images/tile-winter.png');;
  --img-doll-base:      url('../images/doll-base-winter.png');
  --img-homunculus-base:url('../images/homunculus-base-winter.png');
  --img-familiar-base:  url('../images/familiar-base-winter.png');

  --portrait-1:        url('../images/portrait/winter-1.png');
  --portrait-2:        url('../images/portrait/winter-2.png');
  --portrait-3:        url('../images/portrait/winter-3.png');
  --portrait-4:        url('../images/portrait/winter-4.png');

  --tamagotchi-1: url('../images/tamagotchi/winter-1.png');
  --tamagotchi-2: url('../images/tamagotchi/winter-2.png');
  --tamagotchi-3: url('../images/tamagotchi/winter-3.png');
  --tamagotchi-4: url('../images/tamagotchi/winter-4.png');

  --doll-pet-1:    url('../images/doll/winter-pet-1.png');    --doll-pet-2:    url('../images/doll/winter-pet-2.png');    --doll-pet-3:    url('../images/doll/winter-pet-3.png');    --doll-pet-4:    url('../images/doll/winter-pet-4.png');
  --doll-head-1:   url('../images/doll/winter-head-1.png');   --doll-head-2:   url('../images/doll/winter-head-2.png');   --doll-head-3:   url('../images/doll/winter-head-3.png');   --doll-head-4:   url('../images/doll/winter-head-4.png');
  --doll-face-1:   url('../images/doll/winter-face-1.png');   --doll-face-2:   url('../images/doll/winter-face-2.png');   --doll-face-3:   url('../images/doll/winter-face-3.png');   --doll-face-4:   url('../images/doll/winter-face-4.png');
  --doll-torso-1:  url('../images/doll/winter-torso-1.png');  --doll-torso-2:  url('../images/doll/winter-torso-2.png');  --doll-torso-3:  url('../images/doll/winter-torso-3.png');  --doll-torso-4:  url('../images/doll/winter-torso-4.png');
  --doll-pelvis-1: url('../images/doll/winter-pelvis-1.png'); --doll-pelvis-2: url('../images/doll/winter-pelvis-2.png'); --doll-pelvis-3: url('../images/doll/winter-pelvis-3.png'); --doll-pelvis-4: url('../images/doll/winter-pelvis-4.png');
  --doll-legs-1:   url('../images/doll/winter-legs-1.png');   --doll-legs-2:   url('../images/doll/winter-legs-2.png');   --doll-legs-3:   url('../images/doll/winter-legs-3.png');   --doll-legs-4:   url('../images/doll/winter-legs-4.png');
  --doll-feet-1:   url('../images/doll/winter-feet-1.png');   --doll-feet-2:   url('../images/doll/winter-feet-2.png');   --doll-feet-3:   url('../images/doll/winter-feet-3.png');   --doll-feet-4:   url('../images/doll/winter-feet-4.png');
  --doll-arms-1:   url('../images/doll/winter-arms-1.png');   --doll-arms-2:   url('../images/doll/winter-arms-2.png');   --doll-arms-3:   url('../images/doll/winter-arms-3.png');   --doll-arms-4:   url('../images/doll/winter-arms-4.png');

  --homunculus-head-1:  url('../images/homunculus/winter-head-1.png');  --homunculus-head-2:  url('../images/homunculus/winter-head-2.png');  --homunculus-head-3:  url('../images/homunculus/winter-head-3.png');  --homunculus-head-4:  url('../images/homunculus/winter-head-4.png');
  --homunculus-face-1:  url('../images/homunculus/winter-face-1.png');  --homunculus-face-2:  url('../images/homunculus/winter-face-2.png');  --homunculus-face-3:  url('../images/homunculus/winter-face-3.png');  --homunculus-face-4:  url('../images/homunculus/winter-face-4.png');
  --homunculus-torso-1: url('../images/homunculus/winter-torso-1.png'); --homunculus-torso-2: url('../images/homunculus/winter-torso-2.png'); --homunculus-torso-3: url('../images/homunculus/winter-torso-3.png'); --homunculus-torso-4: url('../images/homunculus/winter-torso-4.png');

  --familiar-head-1: url('../images/familiar/winter-head-1.png'); --familiar-head-2: url('../images/familiar/winter-head-2.png'); --familiar-head-3: url('../images/familiar/winter-head-3.png'); --familiar-head-4: url('../images/familiar/winter-head-4.png');
  --familiar-body-1: url('../images/familiar/winter-body-1.png'); --familiar-body-2: url('../images/familiar/winter-body-2.png'); --familiar-body-3: url('../images/familiar/winter-body-3.png'); --familiar-body-4: url('../images/familiar/winter-body-4.png');
  --familiar-tail-1: url('../images/familiar/winter-tail-1.png'); --familiar-tail-2: url('../images/familiar/winter-tail-2.png'); --familiar-tail-3: url('../images/familiar/winter-tail-3.png'); --familiar-tail-4: url('../images/familiar/winter-tail-4.png');
}

/* ==========================================================================
   2. RESET, TYPOGRAPHY & PIXEL UTILITIES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: 'PlaywriteAUVic';
  src: url('/fonts/PlaywriteAUVIC-Light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

html, body {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  font-family: 'TimesNewRoman', monospace;
  font-size: 16px;
  line-height: 1.15;
}

body {
  background: var(--body-bg-color) var(--bg-tile) repeat top left / 32px 32px;
}

.site-title, 
h1.site-title a {
  font-family: 'PlaywriteAUVic', sans-serif;
  letter-spacing: 0.1em;
}

img { background-color: transparent; }

body, .portrait-img, .portrait-slot, .doll-base, .doll-layer, .tamagotchi-img, 
.tamagotchi-slot, .tamagotchi-guest, .pixel-art-hd img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ==========================================================================
   3. MAIN CONTAINER & LAYOUT WRAPPER
   ========================================================================== */
.site-container, .layout-wrapper {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 1.25rem auto;
  padding: 0.75rem 1rem;
  background-color: var(--bg-container);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
}

/* Custom Scrollbar */
.site-container::-webkit-scrollbar { width: 10px; }
.site-container::-webkit-scrollbar-track { background-color: var(--bg-sidebar); border-left: 1px solid var(--border-color); }
.site-container::-webkit-scrollbar-thumb { background-color: var(--text-muted); border: 2px solid var(--bg-sidebar); }
.site-container::-webkit-scrollbar-thumb:hover { background-color: var(--text-main); }
.site-container::-webkit-scrollbar-button { display: block; height: 10px; background-color: var(--bg-sidebar); border: 1px solid var(--border-color); }

/* ==========================================================================
   4. HEADER, NAVIGATION & TOGGLES
   ========================================================================== */
.site-header {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.header-portrait-box { flex-shrink: 0; width: 242px; height: 242px; }
.portrait-box { text-align: left; border: 1px solid var(--border-color); height: 100%; }
.portrait-img { width: 240px; height: 240px; display: block; margin: 0 auto; content: var(--portrait); }

.header-container { 
  display: grid; 
  grid-template-rows: 62px 180px; 
  flex-grow: 1; 
  min-width: 0; 
  height: 242px; 
  gap: 0; }

.header-top-section { grid-row: 1; height: 42px; display: flex; justify-content: space-between; align-items: center; padding: 0 0.2rem; line-height: 8px; }

.site-title { font-size: 1.5rem; font-weight: bold; color: var(--text-main); text-decoration: none; line-height: 1.4; margin: 0; padding-top: 10px; }

.theme-toggles { display: flex; gap: 6px; align-items: center; }
.theme-box { width: 18px; height: 18px; border: 1px solid var(--text-main); cursor: pointer; outline: none; display: block; }
.theme-box:hover { transform: scale(1.1); }
.spring-box { background-color: #88c088; }
.summer-box { background-color: #f2cb61; }
.autumn-box { background-color: #d97724; }
.winter-box { background-color: #5b82a6; }

.quip-container {
  grid-row: 2; 
  height: 180px; 
  border: 1px solid var(--border-color); 
  padding: 0.8rem 1.2rem;
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  background-color: var(--quip-bg, transparent);
}
.quip-text { font-style: italic; font-size: 1.0rem; line-height: 1.4; margin: 0; color: var(--quip-txt, var(--text-main)); }
.quip-metadata-container { padding-top: 0.4rem; margin-top: auto; color: var(--quip-txt, var(--text-muted)); }
.quip-metadata { font-family: monospace; font-size: 0.7rem; opacity: 0.8; display: flex; justify-content: left; gap: 0.5rem; }
.meta-separator { opacity: 0.5; }

.header-widgets-row { display: flex; flex-direction: row; gap: 0.5rem; width: 100%; flex-grow: 1; min-height: 0; }
.navigation-widgets-row { gap: 0.4rem; padding-bottom: 0.4rem; }

.header-widget-box {
  flex: 1; min-width: 0; height: 240px;; overflow-y: auto; background-color: var(--bg-sidebar);
  border: 1px solid var(--border-color); padding: 0.4rem; scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--bg-sidebar);
}
.header-widget-box h3 { font-size: 0.8rem; margin-bottom: 0.3rem; color: var(--text-main); border-bottom: 1px solid var(--border-color); padding-bottom: 0.2rem; }

.nav-links-list, .recent-entries-list { list-style: none; }
.nav-links-list li, .recent-entries-list li { margin-bottom: 0.3rem; }
.recent-entries-list li { display: flex; flex-direction: column; padding-bottom: 0.3rem; border-bottom: 1px dashed var(--border-color); }
.recent-entries-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.recent-entries-list time { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; }
.nav-links-list a, .recent-entries-list a { font-size: 0.8rem; color: var(--text-main); text-decoration: none; line-height: 1.2; }
.nav-links-list a:hover, .recent-entries-list a:hover { text-decoration: underline; }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem; }
.tag-list li a { display: inline-block; background-color: var(--bg-sidebar); color: var(--text-main); padding: 0.1rem 0.3rem; border: 1px solid var(--border-color); font-size: 0.7rem; text-decoration: none; }
.tag-list li a:hover { background-color: var(--link-hover-bg); color: var(--link-hover-text); border-color: var(--link-hover-bg); }

/* ==========================================================================
   5. MAIN CONTENT, BLOGROLL & POSTS
   ========================================================================== */
.page-header h1 { font-size: 1.1rem; color: var(--text-main); }
.page-description { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }

.blogroll { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.blogroll-entry { background: var(--bg-container); padding: 0.6rem; display: flex; flex-direction: column; border: 1px solid var(--border-color); }
.entry-header { margin-bottom: 0.4rem; }
.entry-header h2 { font-size: 1.1rem; line-height: 1.2; }
.entry-header h2 a { color: var(--text-main); text-decoration: none; }
.entry-header time { font-size: 0.8rem; color: var(--text-muted); }

.entry-body, .single-post-body { display: flex; flex-direction: row; gap: 0.6rem; align-items: flex-start; }
.entry-content, .single-post-content { flex-grow: 1; min-width: 0; line-height: 1.25; }
.divider { border: 0; height: 0px; background: var(--border-color); margin: 0; }

.single-post-container { background: transparent; padding: 0; margin-bottom: 0.8rem; }
.single-post-header { margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border-color); }
.single-post-title { font-size: 1.1rem; font-weight: bold; color: var(--text-main); margin-bottom: 0.2rem; line-height: 1.15; }
.single-post-meta { font-size: 0.7rem; color: var(--text-muted); }
.single-post-content p { margin-bottom: 0.6rem; }
.single-post-content h2, .single-post-content h3 { color: var(--text-main); margin: 1rem 0 0.35rem 0; line-height: 1.2; }
.single-post-content img { max-width: 100%; height: auto; margin: 0.5rem 0; border: 1px solid var(--border-color); }
.single-post-content a { color: var(--text-main); text-decoration: underline; text-underline-offset: 2px; }
.single-post-content a:hover { color: var(--link-hover-text); background-color: var(--link-hover-bg); text-decoration: none; }

.pixel-art-hd {
  width: 100%; max-width: 100%; max-height: 400px; overflow: auto; contain: inline-size;
  display: block; background-color: transparent; margin: 0.5rem 0;
  border: 1px solid var(--border-color); scrollbar-width: thin; scrollbar-color: var(--text-muted) var(--bg-sidebar);
}
.pixel-art-hd a { display: inline-block; line-height: 0; }
.pixel-art-hd img { display: block; max-width: none; height: auto; }

/* ==========================================================================
   6. INTERACTIVE TOYS (Tamagotchi, Doll, Homunculus, Familiar)
   ========================================================================== */
.tamagotchi-slot[data-variant="1"] { content: var(--tamagotchi-1); }
.tamagotchi-slot[data-variant="2"] { content: var(--tamagotchi-2); }
.tamagotchi-slot[data-variant="3"] { content: var(--tamagotchi-3); }
.tamagotchi-slot[data-variant="4"] { content: var(--tamagotchi-4); }

.portrait-slot[data-variant="1"] { content: var(--portrait-1); }
.portrait-slot[data-variant="2"] { content: var(--portrait-2); }
.portrait-slot[data-variant="3"] { content: var(--portrait-3); }
.portrait-slot[data-variant="4"] { content: var(--portrait-4); }


.tamagotchi-guest { width: 80px; height: 160px; display: block; }

.blogroll-doll-wrapper { display: flex; justify-content: center; align-items: center; padding: 1rem 0; margin-top: 1rem; width: 100%; }
.blogroll-doll-wrapper.doll-trio-wrapper { flex-direction: row; justify-content: center; align-items: flex-end; gap: 0; }

.doll-display.doll-box { position: relative; width: 240px; height: 720px; margin: 0 auto; padding: 0; background-color: var(--bg-sidebar); border: 1px solid var(--border-color); overflow: hidden; }
.doll-trio-wrapper.blogroll-doll-wrapper .doll-display.doll-box { background-color: transparent; border: none; }

.doll-display .doll-base, .doll-display .doll-layer { position: absolute; top: 0; left: 0; width: 240px; height: 720px; pointer-events: none; }
.doll-display .doll-base, .doll-layer.layer-base { z-index: 0; content: var(--img-doll-base); }

/* Main Doll Layers */
.doll-layer.layer-legs { z-index: 1; }  .doll-layer.layer-feet { z-index: 2; }    .doll-layer.layer-pelvis { z-index: 3; } .doll-layer.layer-torso { z-index: 4; }
.doll-layer.layer-head { z-index: 5; }  .doll-layer.layer-face { z-index: 6; }    .doll-layer.layer-arms { z-index: 7; }   .doll-layer.layer-pet { z-index: 8; }

.doll-box[data-pet="1"] .layer-pet { content: var(--doll-pet-1); }       .doll-box[data-pet="2"] .layer-pet { content: var(--doll-pet-2); }       .doll-box[data-pet="3"] .layer-pet { content: var(--doll-pet-3); }       .doll-box[data-pet="4"] .layer-pet { content: var(--doll-pet-4); }
.doll-box[data-face="1"] .layer-face { content: var(--doll-face-1); }     .doll-box[data-face="2"] .layer-face { content: var(--doll-face-2); }     .doll-box[data-face="3"] .layer-face { content: var(--doll-face-3); }     .doll-box[data-face="4"] .layer-face { content: var(--doll-face-4); }
.doll-box[data-head="1"] .layer-head { content: var(--doll-head-1); }     .doll-box[data-head="2"] .layer-head { content: var(--doll-head-2); }     .doll-box[data-head="3"] .layer-head { content: var(--doll-head-3); }     .doll-box[data-head="4"] .layer-head { content: var(--doll-head-4); }
.doll-box[data-torso="1"] .layer-torso { content: var(--doll-torso-1); }  .doll-box[data-torso="2"] .layer-torso { content: var(--doll-torso-2); }  .doll-box[data-torso="3"] .layer-torso { content: var(--doll-torso-3); }  .doll-box[data-torso="4"] .layer-torso { content: var(--doll-torso-4); }
.doll-box[data-pelvis="1"] .layer-pelvis { content: var(--doll-pelvis-1); } .doll-box[data-pelvis="2"] .layer-pelvis { content: var(--doll-pelvis-2); } .doll-box[data-pelvis="3"] .layer-pelvis { content: var(--doll-pelvis-3); } .doll-box[data-pelvis="4"] .layer-pelvis { content: var(--doll-pelvis-4); }
.doll-box[data-feet="1"] .layer-feet { content: var(--doll-feet-1); }     .doll-box[data-feet="2"] .layer-feet { content: var(--doll-feet-2); }     .doll-box[data-feet="3"] .layer-feet { content: var(--doll-feet-3); }     .doll-box[data-feet="4"] .layer-feet { content: var(--doll-feet-4); }
.doll-box[data-legs="1"] .layer-legs { content: var(--doll-legs-1); }     .doll-box[data-legs="2"] .layer-legs { content: var(--doll-legs-2); }     .doll-box[data-legs="3"] .layer-legs { content: var(--doll-legs-3); }     .doll-box[data-legs="4"] .layer-legs { content: var(--doll-legs-4); }
.doll-box[data-arms="1"] .layer-arms { content: var(--doll-arms-1); }     .doll-box[data-arms="2"] .layer-arms { content: var(--doll-arms-2); }     .doll-box[data-arms="3"] .layer-arms { content: var(--doll-arms-3); }     .doll-box[data-arms="4"] .layer-arms { content: var(--doll-arms-4); }

/* Center Doll */
.doll-trio-wrapper .center-doll-box { position: relative; z-index: 3; }

/* Homunculus (Left - 520px) */
.doll-trio-wrapper .homunculus-box { height: 520px; position: relative; z-index: 1; margin-right: -40px; }
.doll-trio-wrapper .homunculus-box .doll-base, .doll-trio-wrapper .homunculus-box .doll-layer { height: 520px; }
.doll-trio-wrapper .homunculus-base { content: var(--img-homunculus-base); }
.doll-trio-wrapper .homunculus-box[data-head="1"] .layer-head { content: var(--homunculus-head-1); } .doll-trio-wrapper .homunculus-box[data-head="2"] .layer-head { content: var(--homunculus-head-2); } .doll-trio-wrapper .homunculus-box[data-head="3"] .layer-head { content: var(--homunculus-head-3); } .doll-trio-wrapper .homunculus-box[data-head="4"] .layer-head { content: var(--homunculus-head-4); }
.doll-trio-wrapper .homunculus-box[data-face="1"] .layer-face { content: var(--homunculus-face-1); } .doll-trio-wrapper .homunculus-box[data-face="2"] .layer-face { content: var(--homunculus-face-2); } .doll-trio-wrapper .homunculus-box[data-face="3"] .layer-face { content: var(--homunculus-face-3); } .doll-trio-wrapper .homunculus-box[data-face="4"] .layer-face { content: var(--homunculus-face-4); }
.doll-trio-wrapper .homunculus-box[data-torso="1"] .layer-torso { content: var(--homunculus-torso-1); } .doll-trio-wrapper .homunculus-box[data-torso="2"] .layer-torso { content: var(--homunculus-torso-2); } .doll-trio-wrapper .homunculus-box[data-torso="3"] .layer-torso { content: var(--homunculus-torso-3); } .doll-trio-wrapper .homunculus-box[data-torso="4"] .layer-torso { content: var(--homunculus-torso-4); }

/* Familiar (Right - 320px) */
.doll-trio-wrapper .familiar-box { height: 320px; position: relative; z-index: 1; margin-left: -40px; }
.doll-trio-wrapper .familiar-box .doll-base, .doll-trio-wrapper .familiar-box .doll-layer { height: 320px; }
.doll-trio-wrapper .familiar-base { content: var(--img-familiar-base); }
.doll-trio-wrapper .familiar-box[data-head="1"] .layer-head { content: var(--familiar-head-1); } .doll-trio-wrapper .familiar-box[data-head="2"] .layer-head { content: var(--familiar-head-2); } .doll-trio-wrapper .familiar-box[data-head="3"] .layer-head { content: var(--familiar-head-3); } .doll-trio-wrapper .familiar-box[data-head="4"] .layer-head { content: var(--familiar-head-4); }
.doll-trio-wrapper .familiar-box[data-body="1"] .layer-torso { content: var(--familiar-body-1); } .doll-trio-wrapper .familiar-box[data-body="2"] .layer-torso { content: var(--familiar-body-2); } .doll-trio-wrapper .familiar-box[data-body="3"] .layer-torso { content: var(--familiar-body-3); } .doll-trio-wrapper .familiar-box[data-body="4"] .layer-torso { content: var(--familiar-body-4); }
.doll-trio-wrapper .familiar-box[data-tail="1"] .layer-pelvis { content: var(--familiar-tail-1); } .doll-trio-wrapper .familiar-box[data-tail="2"] .layer-pelvis { content: var(--familiar-tail-2); } .doll-trio-wrapper .familiar-box[data-tail="3"] .layer-pelvis { content: var(--familiar-tail-3); } .doll-trio-wrapper .familiar-box[data-tail="4"] .layer-pelvis { content: var(--familiar-tail-4); }

/* ==========================================================================
   7. FOOTER & PAGINATION
   ========================================================================== */
.post-navigation { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border-color); }
.nav-links { display: flex; justify-content: space-between; gap: 0.5rem; }
.nav-previous, .nav-next { display: flex; flex-direction: column; text-decoration: none; max-width: 50%; }
.nav-next { margin-left: auto; text-align: right; }
.meta-nav { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 0.1rem; }
.post-title { font-weight: 600; color: var(--text-main); font-size: 0.8rem; }

.pagination { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 0.35rem 0; padding-top: 0.35rem; }
.page-link { background: var(--bg-sidebar); color: var(--text-main); padding: 0.25rem 0.5rem; border: 1px solid var(--border-color); text-decoration: none; font-weight: 500; font-size: 0.8rem; }
.page-link:hover { background: var(--link-hover-bg); color: var(--link-hover-text); }
.page-number { font-size: 0.8rem; color: var(--text-muted); }

.site-footer {
  margin-top: 0.5rem; padding-top: 0.35rem; text-align: center; color: #ffffff; font-size: 0.75rem;
  text-shadow: 1px 1px 0px #000000, -1px -1px 0px #000000, 1px -1px 0px #000000, -1px 1px 0px #000000;
}

/* ==========================================================================
   8. MEDIA
   ========================================================================== */
@media screen and (max-width: 790px) {
  .site-container, .layout-wrapper {
    width: 100%; max-width: 100%; margin-top: 1rem; margin-bottom: 0;
    padding: 0.5rem; border-top: 1px solid var(--border-color); border-left: none; border-right: none;
  }

  .site-header { flex-direction: row; align-items: stretch; gap: 0.4rem; padding-bottom: 0; margin-bottom: 0.4rem; }
  .navigation-widgets-row { padding-bottom: 0.2rem; }
  
  /* Header Scaling */
  .header-container { display: grid; grid-template-rows: 42px 80px; height: 122px; flex-grow: 1; min-width: 0; margin-top: 0; gap: 0; }
  .header-top-section { grid-row: 1; height: 26px; padding: 0 0.2rem; }
  
  .quip-container { grid-row: 2; height: 80px; padding: 0.3rem 0.5rem; display: flex; flex-direction: column; justify-content: space-between; }
  .quip-metadata-container { padding-top: 0.1rem; margin-top: auto; }
  .quip-metadata, .quip-text { font-size: 0.6rem; }

  /* 50% Asset Scaling Preservation */
  .header-portrait-box { width: 122px; height: 122px; }
  .portrait-img { width: 120px; height: 120px; }
  
  .site-title { font-size: 0.8rem; padding-top: 8px; padding-bottom: 0; line-height: 1.6; }
  .theme-box { width: 14px; height: 14px; }
  .header-widgets-row { 
    flex-direction: row; 
    gap: 0.35rem; 
    height: 100%; }
  .header-widget-box { height: 120px; padding: 0.25rem; }
  .header-widget-box h3 { font-size: 0.7rem; margin-bottom: 0.2rem; padding-bottom: 0.1rem; }

  /* Interactive Toys 50% Scaling */
  .tamagotchi-box { width: 120px; height: 80px; }
  .tamagotchi-slot, .post-tamagotchi-box, .tamagotchi-guest { 
    width: 40px; 
    height: 80px; }
  .tamagotchi-frame { 
    width: 44px; 
    height: 84px; padding: 2px; }

  .blogroll-doll-wrapper { padding: 0.5rem 0; margin-top: 0.5rem; }
  
  .doll-display.doll-box { width: 120px; height: 360px; padding: 0; margin: 0 auto; }
  .doll-display .doll-base, .doll-display .doll-layer { width: 120px; height: 360px; }

  .doll-trio-wrapper .homunculus-box { width: 120px; height: 260px; margin-right: -20px; }
  .doll-trio-wrapper .homunculus-box .doll-base, .doll-trio-wrapper .homunculus-box .doll-layer { width: 120px; height: 260px; }

  .doll-trio-wrapper .familiar-box { width: 120px; height: 160px; margin-left: -20px; }
  .doll-trio-wrapper .familiar-box .doll-base, .doll-trio-wrapper .familiar-box .doll-layer { width: 120px; height: 160px; }

  /* Blogroll Typography Shrinking */
  .blogroll { gap: 0.2rem; margin-top: 0.2rem; }
  .blogroll-entry, .single-post-body { gap: 0.3rem; }
  
  .entry-content, .single-post-content { 
    font-size: 0.85rem; 
    line-height: 1.2; 
  }
}