* { box-sizing: border-box; margin: 0; padding: 0; }
    
    :root {
      --content-max-width: 700px;
    }
    
    html {
      /* Match the current section's background color to fix white areas on iPhone */
      background: var(--onepage-bg, white);
      transition: background-color 800ms ease;
      height: 100%;
      overflow: hidden;
    }
    
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      overflow: hidden;
      /* Match html background instead of fixed color */
      background: var(--onepage-bg, white);
      color: var(--onepage-color, #222);
      transition: background-color 800ms ease, color 800ms ease;
      height: 100%;
      min-height: 100vh;
      /* iOS Safari fix: extend background beyond viewport during overscroll */
      min-height: -webkit-fill-available;
    }

    .container {
      height: 100vh;
      width: 100vw;
      overflow-y: scroll;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    /* Background root: a set of stacked layers that we can cross-fade between
       to animate background-image changes smoothly (CSS can't animate background-image). */
    #onepage-bg-root { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
    #onepage-bg-root .bg-layer {
      position: absolute; inset: 0; background-position: center; background-size: cover;
      background-repeat: no-repeat; opacity: 0; transition: opacity var(--onepage-bg-transition, 0ms) ease;
      will-change: opacity;
    }
    #onepage-bg-root .bg-layer.current { opacity: 1; }

    /* Per-section background layers: make background-image part of the section itself.
       Each section gets an internal `.section-bg` wrapper with `.bg-layer` children for cross-fades. */
    section .section-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    section .section-bg .bg-layer { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity var(--onepage-bg-transition, 0ms) ease; will-change: opacity; }
    section .section-bg .bg-layer.current { opacity: 1; }
    /* ensure section content paints above the bg wrapper */
    section > :not(.section-bg) { position: relative; z-index: 1; }

    section {
      position: relative;
      height: 100vh;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
      gap: 1.5rem;
      text-align: center;
      /* allow per-section background/color via CSS variables for smooth transitions */
      background: var(--onepage-bg, white);
      color: var(--onepage-color, #222);
      transition: background-color 800ms ease, color 800ms ease;
      margin: 0 auto;
    }

    h1 { font-size: 2.2rem; margin-bottom: 1rem; color: #1a1a1a; }
    p { font-size: 1.4rem; max-width: var(--content-max-width); line-height: 1.6; }

    blockquote {
      position: relative;
      font-size: 1.6rem;
      font-style: italic;
      margin: 2rem 0;
      padding: 1rem 2rem;
      border-left: 6px solid #4a90e2;
      background: #eaf2fb;
      border-radius: 8px;
    }

    blockquote::before {
      content: '“';
      font-size: 4rem;
      position: absolute;
      top: -20px;
      left: 10px;
      color: #4a90e2;
    }

    blockquote::after {
      content: '”';
      font-size: 4rem;
      position: absolute;
      bottom: -20px;
      right: 10px;
      color: #4a90e2;
    }

    ol { text-align: left; font-size: 1.4rem; margin-top: 1rem; }
    ol li { margin: 0.5rem 0; }

    img {
      max-width: var(--content-max-width);
      max-height: 80vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      display: block;
      /* avoid vertical auto margins inside flex containers which push text away */
      margin: 0 auto;
      align-self: center;
    }

    .caret {
      margin-top: 2rem;
      font-size: 2.5rem;
      cursor: pointer;
      opacity: 0.6;
      display: inline-block;
      animation: float 2.5s ease-in-out infinite;
      transition: opacity 0.2s;
    }

    .caret:hover { opacity: 1; }

    @keyframes float {
      0% { transform: translateY(0); }
      50% { transform: translateY(8px); }
      100% { transform: translateY(0); }
    }

    /* back to top button styling */
    .back-to-top {
      display: inline-block;
      padding: 0.75rem 1rem;
      background: #1a1a1a;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 1rem;
      box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    }
    .back-to-top:hover { opacity: 0.95; }

    /* link style for text/link elements */
    .onepage-link {
      color: #1e88ff;
      text-decoration: underline;
      font-weight: 500;
    }
    .onepage-link:hover { opacity: 0.92; }

    @media (max-width: 640px) {
      .back-to-top { width: calc(100% - 2rem); max-width: 420px; }
    }

    /* When a section has both text and an image, reduce spacing and constrain image height */
    section.has-media {
      gap: 0.75rem;
    }
    section.has-media img {
      max-height: 50vh;
    }
    section.has-media h1 { margin-bottom: 0.5rem; }
    section.has-media blockquote { margin: 0.5rem 0; }

    /* overlay fade: appended to previous section when a following section uses method: 'fade' as a standalone page */
    .fade-layer {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2rem;
      background: rgba(255,255,255,0.98);
      box-shadow: 0 6px 18px rgba(0,0,0,0.06);
      opacity: 0;
      pointer-events: none;
      transition: opacity 600ms ease;
      z-index: 10;
    }
    .fade-layer.visible { opacity: 1; pointer-events: auto; }
    .fade-layer .fade-content { max-width: var(--content-max-width); text-align: center; }

    /* inline effects: appended inside same section and do NOT cover existing content
       - .effect: common behavior
       - .effect-fade: fade in content below existing section content
       - .effect-slideUp: slide the effect up into view */
    .effect {
      opacity: 0;
      transition: opacity 600ms ease, transform 420ms ease;
      pointer-events: none;
      display: block;
      width: 100%;
      text-align: center;
      z-index: 5;
      margin-top: 0.75rem;
    }
    .effect.visible { opacity: 1; pointer-events: auto; }
    .effect .effect-inner { max-width: var(--content-max-width); margin: 0 auto; }

    .effect-fade { transform: none; }

    .effect-slideUp { transform: translateY(18px); }
    .effect-slideUp.visible { transform: translateY(0); }

    .effect img { max-height: 45vh; border-radius: 8px; display: block; margin: 0 auto; }

    /* Mobile: make images span the full viewport width (edge-to-edge) while keeping text padding */
    @media (max-width: 640px) {
      section img,
      .effect img {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
        object-fit: contain;
        display: block;
      }
      /* Make youtube videos span wide and preserve aspect ratio; centered and big on small screens */
      section .video-frame,
      section .video-ended img {
        width: min(1200px, 100%);
        aspect-ratio: 16 / 9;
        max-height: 80vh;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 8px;
        object-fit: contain;
        background: #000;
      }
    }

    /* General video styles (desktop and mobile) */
    .video-wrapper { width: 100%; text-align: center; }
    .video-frame { width: min(1200px, 100%); aspect-ratio: 16 / 9; max-height: 80vh; height: auto; display: block; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #000; }
    .video-ended { position: relative; display: inline-block; }
    .video-ended img { display:block; width: min(1200px,100%); aspect-ratio: 16/9; border-radius: 8px; }
    /* Video control buttons */
    .video-controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; flex-wrap: wrap; }
    .video-btn { display: inline-block; border: none; border-radius: 6px; cursor: pointer; font-size: 0.95rem; padding: 0.5rem 0.75rem; transition: opacity 0.2s; }
    .video-btn:hover { opacity: 0.9; }

    /* make sections that contain only a video wider */
    section.video-section { max-width: 1200px; }
    section.video-only { max-width: 100vw; padding-left: 0.5rem; padding-right: 0.5rem; }