@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root{
  --ink:#141210;
  --ink-2:#1c1712;
  --paper:#f7ecd3;
  --paper-2:#efe0ba;
  --wood:#6b4326;
  --wood-dark:#3c2414;
  --orange:#ffa400;
  --orange-2:#ff8a1e;
  --orange-deep:#e0680a;
  --line:#2a2420;
  --green:#4c7a3b;
  --ia:#2f7dff;
  --shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}

.ia{
  color:var(--ia) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 14px rgba(47,125,255,.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,164,0,.16), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(255,138,30,.12), transparent 45%),
    var(--ink);
  color:var(--paper);
  font-family:'Montserrat',sans-serif;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

img{max-width:100%;display:block;}

/* decorative dotted circuit background, like the flyer's tech motif */
.circuit-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,164,0,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 30%, rgba(255,164,0,.25) 0 3px, transparent 4px),
    radial-gradient(circle at 15% 85%, rgba(255,164,0,.25) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 90%, rgba(255,164,0,.3) 0 3px, transparent 4px);
}

/* ---------- TOPBAR ---------- */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px 16px;
  background:linear-gradient(180deg, rgba(20,18,16,.98), rgba(20,18,16,.9));
  border-bottom:2px solid var(--orange);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand__badge{
  width:38px; height:38px; border-radius:10px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  flex:none; border:2px solid var(--orange);
}
.brand__badge img{width:100%; height:100%; object-fit:contain;}
.brand__text{line-height:1; min-width:0;}
.brand__text .t1{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.5px;
  font-size:19px; color:var(--paper); white-space:nowrap;
}
.brand__text .t1 b{color:var(--orange);}
.brand__text .t2{
  font-size:9.5px; letter-spacing:1.5px; color:var(--orange-2);
  text-transform:uppercase; font-weight:700;
}
.topbar__actions{display:flex; gap:8px; flex:none;}
.pill-btn{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.5px; text-transform:uppercase;
  background:var(--ink-2); color:var(--paper);
  border:1.5px solid var(--orange); border-radius:999px;
  padding:8px 12px; cursor:pointer; white-space:nowrap;
  transition:transform .15s, background .15s;
}
.pill-btn:hover{background:var(--orange); color:var(--ink); transform:translateY(-1px);}
.pill-btn.solid{background:var(--orange); color:var(--ink);}
.pill-btn.solid:hover{background:var(--orange-2);}

/* progress rail */
.progress-rail{
  position:relative; z-index:5;
  height:4px; background:rgba(255,255,255,.08);
}
.progress-rail__fill{
  height:100%; background:linear-gradient(90deg,var(--orange-deep),var(--orange));
  transition:width .5s ease;
}

/* ---------- STAGE ---------- */
.stage{
  position:relative; z-index:2;
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:18px; min-height:0; overflow:hidden;
}

.bunting{
  position:absolute; top:2px; left:0; right:0;
  display:flex; justify-content:center;
  pointer-events:none; z-index:3;
}

.tap-zone{
  position:absolute; top:0; bottom:0; width:16%; min-width:36px; max-width:120px;
  z-index:6; border:none; background:transparent; margin:0; padding:0;
  cursor:pointer; touch-action:pan-y;
  display:flex; align-items:center;
  color:var(--orange); font-size:18px;
  transition:background .2s, opacity .25s;
}
.tap-zone span{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,16,.6); border:1.5px solid var(--orange);
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  animation:tapPulse 2.2s infinite;
}
.tap-zone--prev{left:0; justify-content:flex-start; padding-left:6px;}
.tap-zone--next{right:0; justify-content:flex-end; padding-right:6px;}
.tap-zone.is-hidden{opacity:0; pointer-events:none;}
.tap-zone--next span{animation-delay:.4s;}
@keyframes tapPulse{
  0%,100%{transform:scale(1); opacity:.85;}
  50%{transform:scale(1.12); opacity:1;}
}
@media (hover:hover){
  .tap-zone--prev:hover{background:linear-gradient(90deg, rgba(255,164,0,.14), transparent);}
  .tap-zone--next:hover{background:linear-gradient(270deg, rgba(255,164,0,.14), transparent);}
  .tap-zone:hover span{background:var(--orange); color:var(--ink); animation-play-state:paused; transform:scale(1.08);}
}
.bunting__row{display:flex; gap:4px; transform:translateY(0);}
.flag{
  width:20px; height:26px;
  clip-path:polygon(0 0,100% 0,50% 100%);
  opacity:.9;
}
.flag:nth-child(6n+1){background:var(--orange);}
.flag:nth-child(6n+2){background:repeating-conic-gradient(#171412 0 90deg, #2c241d 0 180deg) ; background-size:8px 8px;}
.flag:nth-child(6n+3){background:var(--orange-2);}
.flag:nth-child(6n+4){background:repeating-linear-gradient(45deg,#171412 0 4px,#3a2f24 4px 8px);}
.flag:nth-child(6n+5){background:var(--orange-deep);}
.flag:nth-child(6n+6){background:repeating-conic-gradient(#171412 0 90deg, #2c241d 0 180deg); background-size:8px 8px;}

.book-wrap{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:14px; max-width:100%; max-height:100%;
}

.spread{
  position:relative;
  display:flex;
  gap:0;
  perspective:2200px;
  transform-style:preserve-3d;
}
.spread.is-flip{animation:flipBook .52s cubic-bezier(.4,0,.2,1);}
@keyframes flipBook{
  0%{transform:rotateY(0deg) scale(1); filter:brightness(1);}
  48%{transform:rotateY(-9deg) scale(.965); filter:brightness(.75);}
  52%{transform:rotateY(9deg) scale(.965); filter:brightness(.75);}
  100%{transform:rotateY(0deg) scale(1); filter:brightness(1);}
}

.leaf{
  --leaf-w:min(88vw,460px);
  width:var(--leaf-w);
  height:min(78vh,680px);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.5), transparent 40%),
    linear-gradient(160deg, var(--paper), var(--paper-2));
  color:var(--ink);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.spread--double .leaf:first-child{
  border-radius:14px 3px 3px 14px;
  box-shadow: inset -14px 0 24px -20px rgba(0,0,0,.5), var(--shadow);
}
.spread--double .leaf:last-child{
  border-radius:3px 14px 14px 3px;
  box-shadow: inset 14px 0 24px -20px rgba(0,0,0,.5), var(--shadow);
  border-left:none;
}
.spread--single .leaf{border-radius:14px;}

.spread--double::after{
  content:'';
  position:absolute; top:0; bottom:0; left:50%; width:26px; margin-left:-13px;
  background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16));
  z-index:4; pointer-events:none;
}

.leaf__texture{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:multiply; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.3px);
  background-size:3px 3px;
}

.leaf__scroll{
  position:relative; z-index:1;
  flex:1; overflow-y:auto;
  padding:20px 20px 16px;
  scrollbar-width:thin;
}
.leaf__scroll::-webkit-scrollbar{width:6px;}
.leaf__scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2); border-radius:4px;}

.leaf__cornerdeco{
  position:absolute; font-size:26px; opacity:.55; z-index:0; pointer-events:none;
}
.leaf__cornerdeco.tl{top:6px; left:8px; transform:rotate(-12deg);}
.leaf__cornerdeco.br{bottom:6px; right:8px; transform:rotate(10deg);}

/* badge / tag */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--ink); color:var(--orange);
  font-weight:800; font-size:11.5px; letter-spacing:1px;
  padding:6px 12px; border-radius:999px; text-transform:uppercase;
  border:1px solid var(--orange-2);
}

.icon-ring{
  width:56px; height:56px; border-radius:50%;
  background:var(--ink); border:3px solid var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:14px 0 10px;
  box-shadow:0 6px 0 -2px rgba(0,0,0,.15);
}

.page-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(24px,5.5vw,32px);
  line-height:1.05;
  color:var(--wood-dark);
  margin:2px 0 10px;
}
.page-title .accent{color:var(--orange-deep);}

.woodsign{
  background:linear-gradient(160deg,#7a4b28,#4f2f18);
  color:var(--paper);
  border-radius:10px;
  padding:10px 14px;
  font-family:'Bebas Neue',sans-serif;
  font-size:18px; letter-spacing:.5px;
  box-shadow:0 6px 14px rgba(0,0,0,.3), inset 0 0 0 2px rgba(255,255,255,.08);
  margin:4px 0 14px;
  display:inline-block;
}

.body-text{font-size:14px; line-height:1.55; margin:0 0 12px; color:#2a231b;}
.body-text b{color:var(--wood-dark);}
.body-text.small{font-size:12.5px; color:#4a4033;}

.checklist{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px;}
.checklist li{display:flex; gap:8px; align-items:flex-start; font-size:13.5px; line-height:1.4;}
.checklist li .ico{flex:none; width:20px; text-align:center;}
.checklist li.ok .ico{color:var(--green); font-weight:900;}
.checklist li.no .ico{color:#b3341f; font-weight:900;}

.route-cards{display:flex; flex-direction:column; gap:8px; margin:0 0 14px;}
.route-card{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(0,0,0,.05); border:1px dashed var(--wood);
  border-radius:10px; padding:9px 12px;
}
.route-card .lbl{font-weight:700; font-size:12.5px;}
.route-card .time{
  font-family:'Bebas Neue',sans-serif; font-size:17px; color:var(--orange-deep);
}

.callout{
  background:rgba(224,104,10,.1); border-left:4px solid var(--orange-deep);
  border-radius:6px; padding:10px 12px; font-size:12.5px; margin:0 0 14px; color:#4a2a10;
}
.callout.danger{background:rgba(179,52,31,.1); border-left-color:#b3341f; color:#5a1c10;}

.timeline{display:flex; flex-direction:column; gap:0; margin:10px 0 14px;}
.timeline .step{display:flex; gap:10px; align-items:flex-start; position:relative; padding-bottom:14px;}
.timeline .step::before{
  content:''; position:absolute; left:5px; top:16px; bottom:-2px; width:2px;
  background:repeating-linear-gradient(180deg,var(--orange-deep) 0 4px, transparent 4px 8px);
}
.timeline .step:last-child::before{display:none;}
.timeline .dot{width:12px;height:12px;border-radius:50%;background:var(--orange-deep); flex:none; margin-top:3px; box-shadow:0 0 0 3px rgba(224,104,10,.2);}
.timeline .txt b{display:block; font-size:13px;}
.timeline .txt span{font-size:11.5px; color:#5c5142;}

.emoji-divider{text-align:center; font-size:16px; letter-spacing:8px; opacity:.75; margin:6px 0 4px;}

.hero-photo{
  width:100%; height:170px; border-radius:10px; overflow:hidden; margin-bottom:12px;
  background:#000;
}
.hero-photo img{width:100%; height:100%; object-fit:cover;}
.hero-photo.scene{height:auto;}
.hero-photo.scene img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center;}

/* cover leaf */
.leaf--cover{
  background:
    radial-gradient(circle at 80% 0%, rgba(255,164,0,.25), transparent 55%),
    linear-gradient(165deg,#1c1712,#0f0d0b);
  color:var(--paper);
}
.leaf--cover .leaf__scroll{display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:space-between; padding:26px 20px;}
.cover__top{display:flex; flex-direction:column; align-items:center; gap:6px;}
.cover__badge{width:74px; height:74px; border-radius:16px; background:var(--paper); padding:8px; border:3px solid var(--orange);}
.cover__eyebrow{font-size:11px; letter-spacing:3px; color:var(--orange-2); font-weight:800;}
.cover__title{
  font-family:'Bebas Neue',sans-serif; font-size:clamp(30px,8vw,46px);
  line-height:1; margin:6px 0 0;
}
.cover__title span{color:var(--orange);}
.cover__sub{font-size:12.5px; color:#d8c7a0; margin-top:8px; max-width:280px;}
.cover__photo{
  width:min(70%,220px); border-radius:14px; overflow:hidden; margin:10px auto;
  box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.cover__photo img{aspect-ratio:1/1; object-fit:cover; object-position:center;}
.cover__cta{
  font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:2px;
  color:var(--ink); background:var(--orange); border-radius:999px; padding:10px 22px;
  border:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:pulse 1.8s infinite;
}
.cover__cta:hover{background:var(--orange-2);}
@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
.cover__foot{font-size:10.5px; color:#8a7c60; letter-spacing:1px;}

/* final leaf (page 9) */
.leaf--final{
  background:linear-gradient(165deg,#1c1712,#0f0d0b);
  color:var(--paper);
}
.leaf--final .leaf__scroll{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:24px 20px; justify-content:center;}
.final__bot{
  width:64px; height:64px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:32px;
  box-shadow:0 0 0 6px rgba(255,164,0,.15);
}
.final__title{font-family:'Bebas Neue',sans-serif; font-size:clamp(24px,6vw,34px); margin:4px 0;}
.final__title span{color:var(--orange);}
.final__msg{font-size:13px; color:#d8c7a0; max-width:280px; line-height:1.5;}
.qr-box{
  background:var(--paper); padding:14px; border-radius:14px; margin-top:6px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.qr-box #qrcode{display:flex; align-items:center; justify-content:center;}
.qr-box #qrcode img{border-radius:6px;}
.qr-caption{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange-2); font-weight:800; margin-top:8px;}
.qr-link{font-size:11px; color:#a3937a; text-decoration:underline; margin-top:2px; display:inline-block;}

/* ---------- BOTTOM NAV ---------- */
.bottombar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:12px 16px 16px;
  background:linear-gradient(0deg, rgba(20,18,16,.98), rgba(20,18,16,.85));
  border-top:1px solid rgba(255,164,0,.25);
}
.nav-arrow{
  width:42px; height:42px; border-radius:50%; flex:none;
  background:var(--ink-2); border:2px solid var(--orange);
  color:var(--orange); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s;
}
.nav-arrow:hover:not(:disabled){background:var(--orange); color:var(--ink); transform:scale(1.06);}
.nav-arrow:disabled{opacity:.3; cursor:not-allowed;}
.page-indicator{min-width:120px; text-align:center;}
.page-indicator .lbl{font-size:11px; letter-spacing:1.5px; color:var(--orange-2); text-transform:uppercase; font-weight:800;}
.dots{display:flex; gap:5px; justify-content:center; margin-top:5px;}
.dot-i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25);}
.dot-i.active{background:var(--orange); width:16px; border-radius:4px;}

/* ---------- INDEX OVERLAY ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(10,8,6,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:50;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.overlay.open{opacity:1; pointer-events:auto;}
.overlay__panel{
  background:var(--paper); color:var(--ink); border-radius:16px; width:min(90vw,360px);
  max-height:80vh; overflow-y:auto; padding:18px; box-shadow:0 30px 60px rgba(0,0,0,.5);
  border:3px solid var(--orange);
}
.overlay__panel h3{font-family:'Bebas Neue',sans-serif; font-size:22px; margin:0 0 10px; color:var(--wood-dark);}
.overlay__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.overlay__list button{
  width:100%; text-align:left; background:rgba(0,0,0,.05); border:1px solid rgba(0,0,0,.1);
  border-radius:8px; padding:9px 10px; font-size:13px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; gap:8px; color:var(--ink);
}
.overlay__list button:hover{background:var(--orange); color:var(--ink);}
.overlay__close{
  margin-top:12px; width:100%; padding:10px; border-radius:8px; border:none;
  background:var(--ink); color:var(--orange); font-weight:800; cursor:pointer; text-transform:uppercase; font-size:12px; letter-spacing:1px;
}

@media (max-width:560px){
  .brand__text .t1{font-size:16px;}
  .icon-ring{width:48px;height:48px;font-size:22px; margin:10px 0 8px;}
  .leaf{height:min(80vh,640px);}
}