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

    body {
      min-height: 100vh;
      background: #b8a48a;
      background-image: url('img/home/desk.jpg');
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Georgia', serif;
      padding: 40px 20px;
    }

    /* ── NOTEBOOK WRAPPER ── */
    .notebook {
      position: relative;
      width: min(820px, 96vw);
      min-height: 580px;
      display: flex;
      filter: drop-shadow(4px 8px 32px rgba(0,0,0,0.45));
    }

    /* ── SPINE ── */
    .spine {
      width: 28px;
      background: linear-gradient(180deg, #1a0c06 0%, #2e1608 40%, #1a0c06 100%);
      border-radius: 6px 0 0 6px;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }
    .spine::after {
      content: '';
      position: absolute;
      top: 18px; bottom: 18px; left: 50%;
      transform: translateX(-50%);
      width: 1px;
      background: linear-gradient(180deg, transparent, #5a3a20 20%, #5a3a20 80%, transparent);
      border-left: 1px dashed #4a2a10;
    }

    /* ── LEFT COVER (slightly visible) ── */
    .cover-left {
      width: 12px;
      background: linear-gradient(90deg, #2a1608, #3a1e0a);
      flex-shrink: 0;
    }

    /* ── PAGE ── */
    .page {
      flex: 1;
      background: linear-gradient(90deg, #ede6d4 0%, #f5f0e4 40%, #f5f0e4 100%);
      border-radius: 0 6px 6px 0;
      position: relative;
      padding: 48px 56px 80px 50px;
      overflow: hidden;
    }

    /* red margin line */
    .page::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 72px;
      width: 1px;
      background: rgba(220, 100, 90, 0.45);
    }

    /* ruled lines */
    .page::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 31px,
        rgba(180, 170, 148, 0.55) 31px,
        rgba(180, 170, 148, 0.55) 32px
      );
      pointer-events: none;
    }

    /* right page-edge stack */
    .page-edge {
      position: absolute;
      top: 6px; right: -10px; bottom: 6px;
      width: 10px;
      background: linear-gradient(90deg, #ddd4be, #c4bcaa);
      border-radius: 0 3px 3px 0;
    }
    .page-edge::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 5px,
        rgba(0,0,0,0.06) 5px,
        rgba(0,0,0,0.06) 6px
      );
    }

    /* ── CONTENT (above the ::after pseudo) ── */
    .content {
      position: relative;
      z-index: 1;
    }

    /* date */
    .entry-date {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #a09080;
      margin-bottom: 10px;
    }

    /* title */
    .entry-title {
      font-size: 22px;
      color: #3a2e22;
      font-style: italic;
      line-height: 1.3;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(180,170,148,0.6);
      padding-bottom: 14px;
    }

    /* body text */
    .entry-body {
      font-size: 15px;
      line-height: 2.0;
      color: #4a3e30;
      white-space: pre-wrap;
    }

    /* page number */
    .page-num {
      position: absolute;
      bottom: 28px;
      right: 56px;
      font-size: 11px;
      color: #a09080;
      font-style: italic;
      z-index: 1;
    }

    /* ── NAV ── */
    nav {
      position: absolute;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 24px;
      z-index: 2;
    }
    .nav-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #8a7860;
      font-size: 22px;
      font-family: Georgia, serif;
      transition: color 0.2s, transform 0.2s;
      padding: 4px 8px;
      line-height: 1;
    }
    .nav-btn:hover { color: #3a2e22; transform: scale(1.2); }
    .nav-btn:disabled { opacity: 0.2; cursor: default; transform: none; }
    .nav-counter {
      font-size: 11px;
      letter-spacing: 0.15em;
      color: #a09080;
      font-style: italic;
    }

    /* ── BACK LINK ── */
    .back {
      position: fixed;
      top: 20px; left: 24px;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(60,40,20,0.55);
      text-decoration: none;
      font-family: Georgia, serif;
      transition: color 0.2s;
    }
    .back:hover { color: rgba(60,40,20,0.9); }
    .back::before { content: '← '; }

    /* bookmark ribbon */
    .bookmark {
      position: absolute;
      top: 0; right: 80px;
      width: 18px;
      height: 64px;
      background: linear-gradient(180deg, #c03030, #a02020);
      border-radius: 0 0 9px 9px;
      z-index: 2;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.25);
    }
    .bookmark::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 0;
      border-left: 9px solid #c03030;
      border-right: 9px solid #c03030;
      border-bottom: 10px solid transparent;
    }