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

/* ============================================================
   BODY — grid background, no page scroll
   ============================================================ */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #e4e1da;
  background-image:
    linear-gradient(rgba(70,60,50,0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,60,50,0.13) 1px, transparent 1px);
  background-size: 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Patrick Hand', 'Lucida Console', monospace;
  font-size: 13px;
  color: #333;
}

/* neko widget */
#nl { position: fixed; bottom: 10px; left: 10px; z-index: 999; font-size: 0; }
#skip-to-content-link {
  position: absolute;
  left: -9999px;
}
#skip-to-content-link:focus {
  left: 10px; top: 10px;
  background: #fff;
  padding: 4px 8px;
  z-index: 9999;
}

/* ============================================================
   SITE WINDOW — the fixed centered container
   ============================================================ */
#site-window {
  width: min(900px, 96vw);
  height: min(580px, 96vh);
  display: flex;
  flex-direction: column;
  background: #ccc9c0;
  /* torn paper edge top + bottom */
  clip-path: polygon(
    0% 1.5%, 1% 0%, 2% 1.8%, 3.5% 0.2%, 5% 1.5%, 6.5% 0%,
    8% 1.8%, 9.5% 0.3%, 11% 1.5%, 12.5% 0%, 14% 1.8%,
    16% 0.2%, 18% 1.5%, 20% 0%, 22% 1.8%, 24% 0.3%,
    26% 1.5%, 28% 0%, 30% 1.8%, 32% 0.2%, 34% 1.5%,
    36% 0%, 38% 1.8%, 40% 0.3%, 42% 1.5%, 44% 0%,
    46% 1.8%, 48% 0.2%, 50% 1.5%, 52% 0%, 54% 1.8%,
    56% 0.3%, 58% 1.5%, 60% 0%, 62% 1.8%, 64% 0.2%,
    66% 1.5%, 68% 0%, 70% 1.8%, 72% 0.3%, 74% 1.5%,
    76% 0%, 78% 1.8%, 80% 0.2%, 82% 1.5%, 84% 0%,
    86% 1.8%, 88% 0.3%, 90% 1.5%, 92% 0%, 94% 1.8%,
    96% 0.2%, 98% 1.5%, 100% 0%,
    100% 98.5%, 99% 100%, 97.5% 98.2%, 96% 100%, 94% 98.5%,
    92% 100%, 90% 98.2%, 88% 100%, 86% 98.5%, 84% 100%,
    82% 98.2%, 80% 100%, 78% 98.5%, 76% 100%, 74% 98.2%,
    72% 100%, 70% 98.5%, 68% 100%, 66% 98.2%, 64% 100%,
    62% 98.5%, 60% 100%, 58% 98.2%, 56% 100%, 54% 98.5%,
    52% 100%, 50% 98.2%, 48% 100%, 46% 98.5%, 44% 100%,
    42% 98.2%, 40% 100%, 38% 98.5%, 36% 100%, 34% 98.2%,
    32% 100%, 30% 98.5%, 28% 100%, 26% 98.2%, 24% 100%,
    22% 98.5%, 20% 100%, 18% 98.2%, 16% 100%, 14% 98.5%,
    12% 100%, 10% 98.2%, 8% 100%, 6% 98.5%, 4% 100%,
    2% 98.2%, 0% 100%
  );
  filter: drop-shadow(3px 6px 16px rgba(0,0,0,0.25)) drop-shadow(0 2px 4px rgba(0,0,0,0.10));
}

/* ============================================================
   HEADER
   ============================================================ */
#site-header {
  flex-shrink: 0;
  background: #b8b4aa;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 8px 14px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-title {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: #2a1f14;
  white-space: nowrap;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

nav ul li {
  position: relative;
}

nav ul li > a,
nav ul li > strong {
  display: block;
  padding: 3px 8px;
  font-size: 11px;
  color: #2a1f14;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}

nav ul li > a:hover,
nav ul li > strong:hover {
  background: rgba(0,0,0,0.1);
  letter-spacing: normal;
}

/* dropdown */
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ccc9c0;
  border: 1px solid rgba(0,0,0,0.15);
  z-index: 100;
  flex-direction: column;
  min-width: 110px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.15);
}
nav ul li:hover ul { display: flex; }
nav ul li ul li a {
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
}

/* ============================================================
   SITE BODY — sidebar + main
   ============================================================ */
#site-body {
  flex: 1;
  display: flex;
  overflow: hidden; /* children scroll internally */
  min-height: 0;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
#site-sidebar {
  width: 170px;
  flex-shrink: 0;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 10px 8px;
  border-right: 1px solid rgba(0,0,0,0.1);
  background: #c4c0b6;
}

.sidebar-section {
  margin-bottom: 14px;
}

.sidebar-title {
  font-family: 'Caveat', cursive;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2a1f14;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  margin-bottom: 5px;
  padding-bottom: 2px;
}

.sidebar-section p,
.sidebar-section ul,
.sidebar-section blockquote {
  font-size: 11px;
  line-height: 1.5;
  color: #444;
}

.sidebar-section ul {
  padding-left: 14px;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
#content {
  flex: 1;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 14px 16px;
}

section {
  max-width: 100%;
}

h1 { font-family: 'Caveat', cursive; font-size: 1.6rem; color: #2a1f14; margin-bottom: 8px; }
h2 { font-family: 'Caveat', cursive; font-size: 1.3rem; color: #3a2a1a; margin: 14px 0 6px; }
h3 { font-family: 'Caveat', cursive; font-size: 1.1rem; color: #3a2a1a; margin: 12px 0 5px; }
h4, h5, h6 { font-family: 'Caveat', cursive; font-size: 1rem; color: #555; margin: 10px 0 4px; }

p { margin-bottom: 8px; line-height: 1.55; }

a { color: #7a3e1a; text-decoration: none; transition: color 0.2s, letter-spacing 0.2s; }
a:hover { color: #4a1a08; letter-spacing: 0.03em; }
a img { border: 0; }

blockquote {
  border-left: 3px solid #a09488;
  padding: 4px 10px;
  margin: 8px 0;
  color: #555;
  font-style: italic;
}

ul, ol { padding-left: 18px; margin-bottom: 8px; }
li { line-height: 1.6; }

hr { border: none; border-top: 1px solid rgba(0,0,0,0.15); margin: 12px 0; }

pre {
  background: rgba(0,0,0,0.06);
  padding: 8px;
  font-size: 11px;
  overflow-x: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}

code {
  font-family: 'Lucida Console', monospace;
  font-size: 11px;
  background: rgba(0,0,0,0.06);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  flex-shrink: 0;
  background: #b8b4aa;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding: 6px 14px;
  font-size: 10px;
  color: #555;
  text-align: center;
}

/* ============================================================
   SCROLLBARS
   ============================================================ */
#content::-webkit-scrollbar,
#site-sidebar::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}
#content::-webkit-scrollbar-thumb,
#site-sidebar::-webkit-scrollbar-thumb {
  background-color: #a09488;
  border-radius: 3px;
}

/* ============================================================
   CONTENT IMAGES
   ============================================================ */
.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

/* normal .images grid */
.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images:not(.small-row) img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* small-row: pixel art GIFs in a flex row */
.images.small-row {
  width: auto;
  margin: 0 0 8px 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.images.small-row a {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.images.small-row img {
  width: auto;
  height: auto;
  max-height: 80px;
  image-rendering: pixelated;
}

/* two-columns helper */
.two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}



.book {
  border: 7px solid black;
  background-color: white;
  border-radius: 15px;
  padding: 0 4px;
  width: 500px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
}
.pageL,	.pageR {
  height: 100%;
  width: 50%;
  display: inline-block;
  position: relative;
  border-radius: 10px;
}
.pageL {
  border-left: 1px grey solid;
}
.pageR { 
  border-right: 1px grey solid;
}
.seam {
  width: 7px;
  background:
    linear-gradient(to right,
    white, grey, white);
}


.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption, .popovers figcaption {
  font-family: /* set this to have it match the rest of the page */;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 40%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}
.popovers figure:popover-open {
  display: block;
  background: white;
  width: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 80vmin;
  border: 4px rgb(0,0,0,0.55) inset;
}