/* Reset & basics */
    *, *::before, *::after { box-sizing: border-box; }
    .toc-container { height: 100%; margin: 0; font-family: "Morion", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color: #111; background: #f6f7f9; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

    /* TOC overlay: small circular items (no heavy shadows) */
    .toc {
      position: fixed;
      right: 28px;
      top: 28vh;
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 60;
      pointer-events: auto;
    }
    .toc-item {
      --size:56px;
      width: var(--size);
      height: var(--size);
      border-radius: 999px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
      border: 3px solid rgba(0,0,0,0.04);
    }
    .toc-item:hover { transform: translateX(-8px); }
    .toc-item .num { color: #e44949; font-weight: 700; }
    .toc-item .label {
      position: absolute;
      right: calc(100% + 12px);
      background: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 8px 18px rgba(12,18,28,0.06);
      opacity: 0;
      transform: translateX(6px);
      transition: all .16s ease;
      white-space: nowrap;
      color: #111;
    }
    .toc-item:hover .label { opacity: 1; transform: translateX(0); }
    .toc-item svg { width: 100%; height: 100%; transform: rotate(-90deg); position: absolute; inset: 0; pointer-events: none; }

    /* CHAPTER HEADER — split screen like screenshot */
    .chapter-header {
      display: flex;
      width: 100%;
      height: 100vh;
      min-height: 520px;
      align-items: stretch;
      margin: 0;
      overflow: hidden;
    }
    .chapter-header .left {
      flex: 0 0 55%;
      background-size: cover;
      background-position: center;
    }
    .chapter-header .right {
      flex: 1;
      background: #e44949;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 7.5vh 8vw;
    }
    .chapter-title {
      font-size: clamp(36px, 6vw, 36px);
      line-height: 0.95;
      margin: 0;
      font-weight: 800;
    }

    .chapter-header {
      display: flex;
      flex-wrap: wrap;
      min-height: 100vh;
    }

    .chapter-header .left, 
    .chapter-header .right {
      flex: 1 1 50%;
      position: relative;
    }

    .chapter-header .left video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .chapter-header .right {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4rem 2rem;
      background: #e44949;
      color: #fff;
    }

    .chapter-kicker {
      text-transform: uppercase;
      font-size: 0.9rem;
      color: #555;
      margin-bottom: 0.5rem;
    }

    .chapter-kicker { font-weight: 600; opacity: .95; margin-bottom: 12px; }

    iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

    /* CHAPTER CONTENT — centered column, NO card effects */
    .chapter-content {
      max-width: 38rem;        /* the requested width */
      margin: 0 auto;         /* center horizontally */
      padding: 3.25rem 1rem;  /* vertical breathing room */
      background: transparent; /* no cards */
      border-radius: 0;        /* no rounding */
      box-shadow: none;        /* remove box-shadow */
      color: #1f2937;
    }
    .chapter-content h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .chapter-content p { margin: 0 0 1.15rem 0; color: #374151; font-size: 1.2rem; line-height: 1.7; }
    .chapter-content figure { margin: 1.25rem 0; }
    .chapter-content img,
    .chapter-content video {
      width: 100%;
      height: auto;
      display: block;
      margin: 1rem 0;
    }
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.6rem;
      margin-top: 0.85rem;
    }
    .photo-grid img { width: 100%; height: 110px; object-fit: cover; display:block; }

    /* Accessibility helpers */
    :focus { outline: 2px solid #e44949; outline-offset: 3px; }

    /* Responsive */
    @media (max-width: 980px) {
      .chapter-header { flex-direction: column; min-height: 60vh; height: auto; }
      .chapter-header .left { height: 45vh; width: 100%; flex: none; }
      .chapter-header .right { padding: 5vh 6vw; }
      .toc { right: 12px; top: auto; bottom: 18px; flex-direction: row; gap: 10px; }
      .toc-item .label { display:none; } /* conserve space on phone */
      .photo-grid { grid-template-columns: repeat(2, 1fr); }
    }