/* Shared Michael Scott Hand site shell
   Normalizes the sidebar across index/story pages without touching page-specific layouts. */

.sidebar {
  width: 200px;
  flex: 0 0 200px;
  padding: 20px;
  background: #eee;
  transition: background 0.3s ease;
}

.shrine .sidebar,
body.shrine .sidebar {
  background: #111;
}

/* Freeze the menu's vertical geometry so it does not jump between pages. */
.sidebar h3 {
  margin: 1em 0;
  line-height: normal;
}

.sidebar ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

.sidebar li {
  margin: 0;
  padding: 0;
  line-height: normal;
}

/* Works identically whether the page uses a div or a button. */
#shrineToggle,
.shrine-toggle {
  display: block;
  margin: 40px 0 0 0 !important;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: #333;
  font-family: monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-align: left;
  cursor: pointer;
}

.shrine #shrineToggle,
body.shrine #shrineToggle {
  color: #B22222;
}

.site-credit {
  margin: 20px 0 0 0 !important;
  padding: 0;
  color: #888;
  font-family: monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
}

.shrine .site-credit,
body.shrine .site-credit {
  color: #B22222;
}

/* Former style-shrine-fixes.css, merged here */
/* Shrine mobile viewport + overflow fixes (site-wide) */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
}
body { min-height: 100vh; }
html, body { overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }
/* Common flex child fix so wide content doesn't force overflow */
.content { min-width: 0; overflow-wrap: anywhere; }
/* Gentle mobile layout defaults; safe if classes don't exist */
@media (max-width: 700px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; padding: 16px 20px; }
  .content { padding: 20px; }
  .artwork-wrapper img { max-width: 100%; margin: 24px auto; }
}