/* Main layout */

/* Bookmark positions, widths, and colors */
.bookmark:nth-child(1) { top: 0; --w: 100px; background: #5c2a2a; color: #d4c4c0; }
.bookmark:nth-child(2) { top: 56px; --w: 135px; background: #4a2222; color: #cdbcb8; }
.bookmark:nth-child(3) { top: 112px; --w: 80px; background: #3d2b2b; color: #c8b8b4; }
.bookmark:nth-child(4) { top: 168px; --w: 110px; background: #352020; color: #c0b0ac; }
.bookmark:nth-child(5) { top: 224px; --w: 130px; background: #2e2222; color: #b8a8a4; }
.bookmark:nth-child(6) { top: 280px; --w: 80px; background: #282020; color: #b0a09c; }
.bookmark:nth-child(7) { top: 336px; --w: 100px; background: #242020; color: #a89894; }

/* ---- Bookmarks (navigation tabs) ---- */
#bookmarks {
  position: absolute;
  left: -160px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 450px;
  z-index: 5;
}

.bookmark {
  position: absolute;
  right: 0; /* ALL right edges of bookmarks anchored to same position */
  height: 46px;
  padding: 0 20px 0 16px; /* Padding needed */
  display: flex;
  align-items: center;
  justify-content: flex-end;

  border-radius: 5px 0 0 5px;

  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: normal;
  letter-spacing: 0.03em;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;

  width: var(--w);
  cursor: pointer;
  transition: width var(--dur-base) ease-out, filter var(--dur-base) ease-out, box-shadow var(--dur-base) ease-out;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bookmark-text {
  transition: transform var(--dur-base) ease-out;
}

/* Stitching effect */
.bookmark::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  border-right: none;
  border-radius: 3px 0 0 3px;
  pointer-events: none;
}

.bookmark:hover {
  filter: brightness(1.12);
  width: min(calc(var(--w) + 30px), 150px) !important;
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.bookmark:hover .bookmark-text {
  transform: translateX(-4px); /* Move text slightly left on hover */
}

.bookmark.active {
  filter: brightness(1.4) saturate(1.3);
  width: min(calc(var(--w) + 60px), 170px) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.bookmark.active .bookmark-text {
  transform: translateX(-6px); /* Move text more left on active */
}

.bookmark:focus-visible {
  outline: 2px solid var(--color-candle-glow);
  outline-offset: 2px;
}

.bookmark-text {
  display: block;
  white-space: nowrap;
}

/* ---- Desk Background ---- */
#desk {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--color-wood-dark);
}

/* ---- Book Container ---- */
#book {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  width: 950px;
  height: 700px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

/* Burgundy book cover visible behind pages */
#book::before {
  content: '';
  position: absolute;
  inset: -12px;
  background: linear-gradient(145deg, #5c2626 0%, #3d1a1a 100%);
  border-radius: 6px;
  z-index: -1;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.3);
}

/* ---- Left Page Section ---- */

/* "Page stack" for styling */
#page-back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 20px;
  background: linear-gradient(to right, #b8ac96 0%, #c8bcaa 50%, #d0c4ae 100%);
  border-radius: 2px 0 0 2px;
  z-index: 2;
  box-shadow:
    inset 3px 0 8px rgba(0, 0, 0, 0.25),
    -2px 0 0 #b0a490;
}

/* Left page content holder */
#page-left {
  position: relative;
  width: 280px;
  min-width: 200px;
  height: 100%;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  background: var(--color-page);
  border-radius: 1px 0 0 1px;
  border-right: 1px solid #a89a80;
  z-index: 10;
}

/* Logo placeholder */
#page-left-logo {
  margin: 1rem 1.5rem 0;
  height: 40px;
}

#page-left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  gap: 2rem;
}

#section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: normal;
  color: var(--color-ink);
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0;
}

#section-illustration {
  width: 180px;
  height: 180px;
  border-radius: 4px;
}

/* ---- Right Page (content area) ---- */
#page-right {
  flex: 1;
  height: 100%;
  overflow: hidden;
  background: var(--color-page);
  border-radius: 0 1px 1px 0;
  border-left: 1px solid #a89a80;
}

#page-right > .content-parchment {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2.5rem 2rem 2rem;
  animation: pageUnroll 0.3s ease-out forwards;
}

/* Hide main title on right page - shown on left page instead */
#page-right .doc-title,
#page-right .doc-title + .divider {
  display: none;
}

/* ---- Placeholder Utility ---- */
.placeholder {
  background: rgba(107, 68, 35, 0.1);
  border: 2px dashed var(--color-warm-wood);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.placeholder::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-parchment-aged);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  text-align: center;
  padding: 0.25rem;
}

/* ---- Audio Toggle (floating) ---- */
#audio-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  width: 44px;
  height: 44px;
  padding: 0;

  background: rgba(14, 9, 6, 0.85);
  border: 1px solid rgba(212, 160, 96, 0.3);
  border-radius: 50%;

  font-size: 1.2rem;
  color: var(--color-parchment);

  cursor: pointer;
  transition: all var(--dur-base) ease-out;
  backdrop-filter: blur(8px);
}

#audio-toggle:hover {
  background: rgba(42, 21, 8, 0.9);
  border-color: rgba(212, 160, 96, 0.5);
  transform: scale(1.05);
}

#audio-toggle:focus-visible {
  outline: 2px solid var(--color-candle-glow);
  outline-offset: 2px;
}

#audio-toggle[aria-pressed="false"] .icon-sound-on { display: none; }
#audio-toggle[aria-pressed="true"]  .icon-sound-off { display: none; }