/* =========================================================================
     THE FLIP — a self-contained HTML/CSS/JS magazine flipbook.
     - No external files, fonts, or libraries required. Just upload this
       single .html file to any web server (or open it locally) and it works.
     - Page-turn sound is synthesized live with the Web Audio API — no mp3s
       to host.
     - To customize: scroll down to the big "PAGES" array in the <script>
       section near the bottom and edit the titles/text/colors/images.
       Each entry can optionally use an "img" field with any image URL.
     ========================================================================= */

  :root{
    --paper:      #151310;
    --paper-dark: #151310;
    --ink:        #241f18;
    --accent:     #b5442e;
    --accent-2:   #2f5233;
    --gold:       #a9822f;
    --spine:      #16130f;
    --shadow:     rgba(0,0,0,.45);
    --book-aspect: 1.6; /* width/height of the open two-page spread; JS overrides this once it measures your actual page images */
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0; padding:0; width:100%; height:100%;
    background:
      radial-gradient(ellipse at center, #2a2622 0%, #100e0b 75%);
    color:var(--ink);
    font-family: Georgia, 'Times New Roman', serif;
    overflow:hidden;
  }

  .app{
    position:relative;
    width:100%; height:100%;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }

  /* ---------------- Top bar ---------------- */
  .topbar{
    position:absolute; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px;
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    color:#d8cfc0;
    z-index:50;
    pointer-events:none;
  }
  .topbar *{ pointer-events:auto; }
  .brand{
    letter-spacing:3px; font-size:13px; text-transform:uppercase; opacity:.75;
  }
  .controls{ display:flex; gap:10px; align-items:center; }
  .btn{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#efe7d8;
    width:36px; height:36px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    font-size:15px;
    transition:background .15s ease, transform .1s ease;
    user-select:none;
  }
  .btn:hover{ background:rgba(255,255,255,.18); }
  .btn:active{ transform:scale(.92); }
  .btn.wide{ width:auto; padding:0 16px; border-radius:18px; font-size:12px; letter-spacing:1px; text-transform:uppercase; }

  /* ---------------- Book stage ---------------- */
  .stage{
    position:relative;
    width:min(94vw, 1180px);
    height:min(80vh, 720px);
    display:flex; align-items:center; justify-content:center;
    perspective: 3200px;
  }

  .side-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);
    color:#efe7d8;
    font-size:22px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:80;
    padding:0;
    transition:background .15s ease, opacity .2s ease, transform .1s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .side-nav:hover{ background:rgba(255,255,255,.2); }
  .side-nav:active{ transform:translateY(-50%) scale(.92); }
  .side-nav.disabled{ opacity:.25; pointer-events:none; }
  .side-nav-left{ left:4px; }
  .side-nav-right{ right:4px; }
  @media (max-width:760px){
    .side-nav{ width:36px; height:36px; font-size:17px; }
    .side-nav-left{ left:2px; }
    .side-nav-right{ right:2px; }
  }

  .book{
    position:relative;
    transform-style:preserve-3d;
    box-shadow: 0 30px 60px var(--shadow);
    border-radius:6px;
    /* width/height are set in pixels by JS (fitBookToStage) to exactly
       match your page images' real aspect ratio — CSS aspect-ratio alone
       doesn't work here because both dimensions need to be pixel-precise
       for the 3D page-flip math to line up. */
  }

  /* spine shadow strip down the middle */
  .spine{
    position:absolute; top:0; bottom:0; left:50%;
    width:24px; margin-left:-12px;
    background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%);
    z-index:30; pointer-events:none;
  }

  .cover-base{
    position:absolute; top:0; bottom:0;
    width:50%;
    background:var(--paper-dark);
    box-shadow: inset 0 0 40px rgba(0,0,0,.08);
  }
  .cover-base.left{ left:0; border-radius:6px 0 0 6px; }
  .cover-base.right{ right:0; border-radius:0 6px 6px 0; }

  .sheet{
    position:absolute; top:0; right:0;
    width:50%; height:100%;
    transform-style:preserve-3d;
    transform-origin:left center;
    cursor:pointer;
    will-change: transform;
  }
  .sheet.flipped{ transform: rotateY(-180deg); }

  .face{
    position:absolute; top:0; left:0; width:100%; height:100%;
    backface-visibility:hidden;
    overflow:hidden;
    background:var(--paper);
    box-shadow: inset 0 0 30px rgba(0,0,0,.06);
    border-radius: 0 6px 6px 0;
    transform: translateZ(0);
  }
  .face.img-page{
    background:#151310;
    box-shadow:none;
  }
  .flip-shade{
    position:absolute; inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    z-index:5;
  }
  .face.back{
    transform: rotateY(180deg);
    border-radius: 6px 0 0 0 6px;
    border-radius: 6px 0 0 6px;
  }

  /* subtle curl / shading overlay while flipping */
  .face::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.14));
    pointer-events:none;
  }
  .face.back::after{
    background:linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.10));
  }

  .page-content{
    position:relative; width:100%; height:100%;
    padding: 34px 30px 40px;
    display:flex; flex-direction:column;
    background-size:cover; background-position:center;
  }
  .page-content.has-img{ padding:0; background:transparent; }
  .page-content.has-img .img-fill{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:contain; display:block;
    background:transparent;
  }
  .page-content.has-img .overlay-text{
    position:relative; z-index:2; margin-top:auto;
    padding: 26px 26px 30px;
    background:linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0));
    color:#f5efe2;
  }

  .kicker{
    font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size:11px; letter-spacing:3px; text-transform:uppercase;
    color:var(--accent); font-weight:bold; margin-bottom:6px;
  }
  .headline{
    font-size:26px; line-height:1.15; margin:0 0 10px;
    font-family: 'Palatino Linotype', Georgia, serif;
    color:var(--ink);
  }
  .dek{
    font-style:italic; color:#5c5346; margin:0 0 14px; font-size:14px;
  }
  .body-copy{
    font-size:13.5px; line-height:1.6; color:#33301f;
    column-count:1;
  }
  .body-copy p{ margin:0 0 10px; }
  .pull-quote{
    font-family:'Palatino Linotype', Georgia, serif;
    font-style:italic; font-size:18px; color:var(--accent);
    border-left:3px solid var(--accent);
    padding-left:14px; margin:14px 0;
  }

  /* Cover styling */
  .cover-page{
    height:100%; width:100%;
    display:flex; flex-direction:column; justify-content:space-between;
    background: linear-gradient(160deg, #1c1a16, #2b241c 55%, #3a2e20);
    color:#f3ead9;
    padding:40px 34px;
    position:relative;
  }
  .cover-page::before{
    content:""; position:absolute; inset:10px;
    border:1px solid rgba(230,210,170,.35);
    pointer-events:none;
  }
  .cover-title{
    font-size:44px; letter-spacing:2px; line-height:1.05;
    font-family:'Palatino Linotype', Georgia, serif;
    text-transform:uppercase;
  }
  .cover-sub{ font-size:13px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); margin-top:10px; }
  .cover-issue{ font-family:'Trebuchet MS', sans-serif; font-size:11px; letter-spacing:2px; opacity:.7; }
  .cover-teaser{ font-size:13px; line-height:1.6; opacity:.85; max-width:80%; }

  .backcover-page{
    height:100%; width:100%;
    background:linear-gradient(160deg,#20160f,#2a1c12);
    color:#e7dcc7;
    display:flex; align-items:center; justify-content:center;
    text-align:center; padding:30px;
    font-family:'Trebuchet MS', sans-serif;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    opacity:.75;
  }

  /* Click zones hint */
  .book{
    opacity:0;
    transition: opacity .5s ease;
  }
  .book.ready{ opacity:1; }

  .book-loader{
    position:absolute; inset:0; z-index:60;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px;
    color:#cabfa8;
    font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size:11px; letter-spacing:2px; text-transform:uppercase;
    transition:opacity .5s ease;
    pointer-events:none;
  }
  .book-loader.hidden{ opacity:0; }
  .spinner{
    width:32px; height:32px; border-radius:50%;
    border:2px solid rgba(255,255,255,.15);
    border-top-color:var(--gold);
    animation:spin .9s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .hint{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    font-family:'Trebuchet MS', sans-serif; font-size:11px; letter-spacing:1.5px;
    color:#cabfa8; opacity:.6; text-transform:uppercase;
    pointer-events:none; z-index:50;
    transition:opacity .4s ease;
  }

  .progress-wrap{
    position:absolute; bottom:0; left:0; right:0; height:4px;
    background:rgba(255,255,255,.08); z-index:50;
  }
  .progress-bar{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--accent), var(--gold));
    transition:width .5s ease;
  }

  @media (max-width:700px){
    .headline{ font-size:19px; }
    .body-copy{ font-size:12px; }
    .cover-title{ font-size:30px; }
    .btn.wide span{ display:none; }
  }