:root{
  --cream:#ffffff;
  --gold:#ffd54f;
  --gold-glow:rgba(255,213,79,0.35);
  --ink:#050811;
  --panel-bg:rgba(8,14,28,0.88);
}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);height:100%}
body{
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  color:var(--cream);
  background:var(--ink);
  overflow-x:hidden;
  touch-action:manipulation;
}

#progress{
  position:fixed;top:0;left:0;height:4px;width:100%;
  background:linear-gradient(90deg, #ffca28, #ff3d00);
  transform-origin:0 50%;transform:scaleX(0);
  z-index:70;box-shadow:0 0 10px rgba(255,193,7,0.8);
}

/* Dots Nav */
#dots{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:12px;z-index:70;
  padding:8px 4px;
}
#dots a{
  width:10px;height:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.7);background:rgba(0,0,0,0.45);
  transition:transform .3s, background .3s, border-color .3s;
  display:block;touch-action:none;
}
#dots a.on{
  background:var(--gold);border-color:var(--gold);
  transform:scale(1.5);box-shadow:0 0 10px var(--gold);
}

#stage{position:fixed;inset:0;overflow:hidden;background:var(--ink);height:100vh;height:100dvh}
.paper{
  position:fixed;inset:0;z-index:50;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 60%, rgba(5,8,17,0.5) 100%);
}

.scene{
  position:absolute;inset:0;overflow:hidden;
  background:#050811;will-change:transform;height:100vh;height:100dvh;
}
.lyr{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  filter:saturate(1.15) contrast(1.08) brightness(0.95);
  transform:scale(1.03);will-change:transform;
}

.color-grade{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 70% 30%, rgba(255,183,77,0.12) 0%, transparent 60%),
             linear-gradient(180deg, rgba(13,27,42,0.2) 0%, transparent 40%, rgba(5,8,17,0.65) 100%);
  mix-blend-mode:overlay;
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 14vmin rgba(5,8,17,0.75);
}

/* Gradients for readability */
.shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(5,8,17,0.94) 0%, rgba(5,8,17,0.82) 42%, rgba(5,8,17,0.2) 75%, transparent 100%);
}
.scene.r .shade{
  background:linear-gradient(270deg, rgba(5,8,17,0.94) 0%, rgba(5,8,17,0.82) 42%, rgba(5,8,17,0.2) 75%, transparent 100%);
}

.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle, #ffffff, rgba(255,215,0,0.7) 40%, transparent 70%);
  opacity:.7;animation:drift linear infinite;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(35px,-80vh,0)}}

.bignum{
  position:absolute;right:4vw;bottom:-3vh;
  font-family:"Cormorant Garamond",serif;font-weight:700;
  font-size:min(58vh,46vw);line-height:1;color:transparent;
  -webkit-text-stroke:2px rgba(255,224,130,0.55);
  pointer-events:none;user-select:none;will-change:transform;
}
.scene.r .bignum{right:auto;left:3vw}

/* Information Glass Card */
.panel{
  position:absolute;left:clamp(20px,6vw,100px);top:50%;transform:translateY(-50%);
  width:min(660px,calc(100vw - 70px));
  padding:clamp(20px,3.2vh,36px) clamp(20px,2.8vw,40px);
  background:var(--panel-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-left:4px solid var(--gold);border-radius:8px;
  max-height:86vh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 24px 60px rgba(0,0,0,0.75), 0 0 30px rgba(255,213,79,0.12);
  z-index:10;
}
.scene.r .panel{left:auto;right:clamp(20px,6vw,100px);border-left:0;border-right:4px solid var(--gold)}

.eyebrow{
  font-size:clamp(.72rem,1.4vh + .25rem,.88rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  font-weight:500;margin-bottom:.65em;line-height:1.4;
}
.eyebrow b{font-family:"Cormorant Garamond",serif;font-size:1.6em;margin-right:.45em;letter-spacing:0}

.ttl{
  font-family:"Cormorant Garamond",serif;font-weight:700;line-height:1.15;
  font-size:clamp(1.6rem,4vh + .6rem,3rem);color:#fff;margin-bottom:.55em;
}
.hero .ttl{font-size:clamp(1.9rem,5.5vh + .8rem,4rem)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.w>span{display:inline-block;will-change:transform}

.chunks{display:grid}
.chunk{
  grid-area:1/1;opacity:0;
  font-size:clamp(.92rem,1.7vh + .3rem,1.15rem);
  line-height:1.68;color:var(--cream);font-weight:300;
}
.chunk b{font-weight:600;color:#ffe082}
.v{margin-top:1em}

.flow{display:flex;flex-wrap:wrap;gap:.5em .4em}
.flow span{
  padding:.32em .75em;border:1px solid rgba(255,213,79,0.7);
  border-radius:99px;font-size:.85em;background:rgba(227,184,102,0.18);
  color:#fff;font-weight:500;
}
.flow span+span::before{content:"→ ";color:var(--gold)}

.tl{list-style:none;display:grid;gap:.6em}
.tl.row{grid-auto-flow:column;grid-auto-columns:1fr}
.tl li{border-left:2px solid var(--gold);padding-left:.8em;display:flex;flex-direction:column}
.tl li b{font-family:"Cormorant Garamond",serif;font-size:1.45em;color:#ffd98a}
.tl li span{font-size:.85em;color:rgba(255,255,255,0.9)}

.big{display:flex;flex-direction:column}
.big .count{font-family:"Cormorant Garamond",serif;font-size:clamp(2.8rem,9vh,5rem);color:#ffd98a;font-weight:700;line-height:1}
.big small{font-size:.82em;letter-spacing:.1em;text-transform:uppercase}

.stats{display:flex;gap:1.6em}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:"Cormorant Garamond",serif;font-size:clamp(2.5rem,8vh,4.6rem);line-height:1;color:#ffd98a}
.stats span{font-size:.84em}

.lv{padding-left:1.2em;display:grid;gap:.5em;font-size:.9em}

.dotsp{display:flex;gap:6px;margin-top:1.2em}
.dotsp i{height:3px;flex:1;background:rgba(255,255,255,0.25);border-radius:2px;overflow:hidden}
.dotsp u{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}

.hint{
  position:absolute;bottom:3.5vh;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  z-index:20;background:rgba(0,0,0,0.5);padding:6px 14px;border-radius:20px;
  backdrop-filter:blur(6px);white-space:nowrap;
}

/* =========================================================
   MOBILE & TABLET RESPONSIVE OPTIMIZATIONS
   ========================================================= */
@media (max-width: 820px) {
  /* Dynamic vertical gradient: text on bottom half, artwork visible on top */
  .shade, .scene.r .shade{
    background: linear-gradient(180deg, 
      rgba(5,8,17,0.15) 0%, 
      rgba(5,8,17,0.4) 40%, 
      rgba(5,8,17,0.92) 65%, 
      rgba(5,8,17,0.98) 100%);
  }

  /* Card positions comfortably at bottom on mobile */
  .panel, .scene.r .panel{
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: none;
    width: auto;
    max-height: 68vh;
    padding: 16px 16px 20px 18px;
    border-radius: 12px;
    border-left: 3.5px solid var(--gold);
    border-right: none;
    background: rgba(6,10,22,0.92);
    box-shadow: 0 16px 40px rgba(0,0,0,0.85);
  }

  .ttl{
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
    margin-bottom: .45em;
  }
  .hero .ttl{
    font-size: clamp(1.65rem, 6.8vw, 2.3rem);
  }

  .chunk{
    font-size: clamp(.88rem, 3.8vw, 1.02rem);
    line-height: 1.58;
  }

  .eyebrow{
    font-size: .74rem;
    margin-bottom: .45em;
  }
  .eyebrow b{
    font-size: 1.35em;
  }

  .tl.row{
    grid-auto-flow: row;
    gap: .5em;
  }
  .stats{
    gap: 1.2em;
  }
  .stats b{
    font-size: 2.2rem;
  }
  .big .count{
    font-size: 2.6rem;
  }

  .flow span{
    font-size: .8rem;
    padding: .28em .65em;
  }

  /* Compact navigation dots on mobile - move to bottom or right subtle bar */
  #dots{
    right: 6px;
    gap: 7px;
    padding: 4px 2px;
  }
  #dots a{
    width: 6px;
    height: 6px;
    border-width: 1.5px;
  }
  #dots a.on{
    transform: scale(1.4);
  }

  .bignum{
    font-size: min(38vh, 50vw);
    right: 2vw;
    bottom: 22vh;
    opacity: 0.25;
  }
  .scene.r .bignum{
    left: auto;
    right: 2vw;
  }

  .hint{
    bottom: 1.5vh;
    font-size: .65rem;
    padding: 4px 10px;
  }
}

/* Extra small screens (iPhone SE, smaller Androids) */
@media (max-width: 400px) {
  .panel, .scene.r .panel{
    left: 8px;
    right: 8px;
    padding: 14px 14px 16px 15px;
    max-height: 72vh;
  }
  .ttl{
    font-size: 1.3rem;
  }
  .chunk{
    font-size: .85rem;
  }
}