.section-divider{ width:100%; height:1px; background:var(--accent); opacity:.7; }
html, body { overflow-x: hidden; }

.pidi-section{
  max-width: clamp(320px, 96vw, 1440px);
  margin: 0 auto;
  padding: 32px var(--edge) 48px;
  box-sizing: border-box;
  scroll-margin-top: var(--header-h);

  --book-h: 98vh;
  --page-w: min(1200px, 96vw);
  --radius: 14px;

  --accent: rgb(140,110,68);
  --paper: rgb(242,239,232);

  --edge-ink: rgba(140,110,68,.24);
  --shadow: 0 12px 26px rgba(0,0,0,.07);
  --paper-inset: inset 0 0 0 1px var(--edge-ink),
                 inset 0 24px 30px rgba(255,255,255,.25),
                 inset 0 -16px 18px rgba(0,0,0,.03);

  --spine-w: 28px;
  --anim-ms: 280ms;

  --folio-space: 32px;
  --media-min: 42%;
  --first-nudge-x: 7%;
  --last-nudge-x: 7.5%;
}

.book{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;         
  gap: 0;
  align-items: center;
  justify-items: center;
  width: 100%;
}

.book__spine,
.page--right{ display: none !important; }

.book__nav{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index:5;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid var(--accent);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: var(--accent);
  font-size: 22px; line-height: 1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.book__nav--prev{ left: 8px; }
.book__nav--next{ right: 8px; }
.book__nav:disabled{ opacity:.45; cursor:not-allowed; }

.page__paper{
  position: relative;
  height: var(--book-h);
  width: min(var(--page-w), 100%);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.6), rgba(255,255,255,0)) no-repeat,
    var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--paper-inset);
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto; 
}

.book.is-photo .page__paper{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: var(--book-h) !important;
  width: min(var(--page-w), 100%) !important;
  margin: 0 auto !important;
  overflow: hidden;
}

.book.is-photo .page__content{
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
}

.page{ display:grid; justify-items:center; }
.photo{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo img{
  display: block;
  height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform .2s ease; 
}

@media (min-width: 769px){
  .photo--first img{  transform: translateX(var(--first-nudge-x)); }
  .photo--last  img{  transform: translateX(var(--last-nudge-x));  }
}

.cover__cta{
  appearance:none;
  border:1px solid var(--accent);
  background: rgba(248,247,242,.9);
  color:var(--accent);
  border-radius: 999px;
  padding: 10px 18px;
  font: inherit;
  cursor:pointer;
  position: absolute;
  z-index: 10;
  backdrop-filter: blur(2px);
}
@media (min-width: 769px){
  .photo .cover__cta{ position: absolute; z-index: 2; }
  .photo .cta--center-bottom{ left: 50%; bottom: 8%; transform: translateX(-50%); }
  .photo .cta--center-center{ left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

.page__folio{
  position: absolute;
  bottom: 10px; left: 16px; right: 16px;
  text-align: left;
  font-size: 10px;
  font-style: italic;
  color: rgba(140,110,68,.85);
  pointer-events: none;
  z-index: 2;
}

.book__status{ margin-top: 8px; color: var(--accent); font-size: 14px; opacity: .9; }

.swap-in{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--anim-ms) ease, transform var(--anim-ms) ease;
}
.swap-in.active{
  opacity: 1;
  transform: none;
}
.swap-out-right{
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--anim-ms) ease, transform var(--anim-ms) ease;
}

@media (max-width: 768px){
  .pidi-section{
    padding: 8px var(--edge) 16px;
    --book-h: 72vh;            
    --page-w: 96vw;
  }

  .book{ justify-items: center; }
  .page--left{ justify-self: center; }

  .page__paper{
    width: 100%;               
    height: var(--book-h);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0 auto;
  }

  .page__content{
    display: block;
    height: 100%;
  }

  .photo{
    position: relative;
    width: 100%;
    height: var(--book-h);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photo img{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;        
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
  .photo .cover__cta{ position: absolute; z-index: 2; }
  .photo .cta--center-bottom{
    left: 50%;
    bottom: clamp(16px, 8vh, 44px);
    transform: translateX(-50%);
  }
  .photo .cta--center-center{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 768px){
  .pidi-section{
    --book-h: 40vh;        
    --mobile-book-shift: 17%;
    padding: 8px var(--edge) 16px;
  }

  .page__paper{
    width: 100%;
    height: var(--book-h);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0 auto;
  }
  .page__content{ height: 100%; }

  .photo{
    position: relative;
    width: 100%;
    height: var(--book-h);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photo img{
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + var(--mobile-book-shift)));
    width: 150%;          
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .photo .cover__cta{ position: absolute; z-index: 2; }
  .photo .cta--center-bottom{
    left: 50%;
    bottom: clamp(16px, 8vh, 44px);
    transform: translateX(-50%);
  }
  .photo .cta--center-center{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 768px){
  .pidi-section{
    --book-h: 40vh;
    --mobile-book-shift: 17%;
  }

  .photo img{
    position: relative;
    left: 50%;
    transform: translateX(calc(-50% + var(--mobile-book-shift, 0%) + var(--mobile-slide-shift, 0%)));
    width: 150%;        
    max-width: none;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .photo--first { --mobile-slide-shift: 8%; }  
  .photo--last  { --mobile-slide-shift: 8%; } 

  .book__nav{
    top: auto;
    bottom: clamp(12px, 6vh, 28px);
    transform: none;
    z-index: 3;
    opacity: .95;
  }
  .book__nav--prev{ left: 12px; }
  .book__nav--next{ right: 12px; }
}
@media (max-width: 768px){
  .book__nav{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2px); 
  }
  .book__nav--prev{ left: 12px; }
  .book__nav--next{ right: 12px; }
}
@media (max-width: 768px){
  .book__nav{ display: none !important; }
}
@media (max-width: 768px){
  .cover__cta{
    font-size: 11px;
    padding: 7px 12px;
  }
}
.pidi-section{
  margin-top: 10px;     
  margin-bottom: 10px;  
}

@media (max-width: 768px){
  .pidi-section{
    margin-top: 2px;
    margin-bottom: 10px;
  }
}