/* ---------- Tokens ---------- */
:root{
  --brand:      #654E12;   /* AstroChitra gold-brown wordmark colour   */
  --ink:        #2E2308;   /* near-black warm ink for body copy        */
  --ink-soft:   #5C4E2E;
  --thread:     #8C1D2B;   /* red stitching lifted from the scroll bg  */
  --thread-dk:  #6E1522;
  --cream:      #FBF4E3;
  --card:       rgba(251,244,227,0.90);
  --card-line:  rgba(101,78,18,0.28);
  --shadow:     0 14px 30px -12px rgba(46,35,8,0.45);
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  height:100%;
  margin:0;
  overflow:hidden;             /* no-scroll page, by design */
  overscroll-behavior:none;
}
body{
  background:
    linear-gradient(180deg, rgba(46,35,8,0.06), rgba(46,35,8,0.10)),
    url("assets/bg-body.png") center top / cover no-repeat;
  color:var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
a{ text-decoration:none; }

/* ---------- Custom display face ---------- */
@font-face{
  font-family:"AstroChitra";
  src: url("assets/AstroChitra.ttf") format("truetype");
  font-weight:400;
  font-display:swap;
}

/* ---------- Stage: everything fits one viewport ---------- */
.stage{
  position:relative;
  height:100dvh;
  width:100%;
  max-width:480px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:
    max(14px, env(safe-area-inset-top))
    18px
    max(14px, env(safe-area-inset-bottom))
    18px;
  gap:6px;
}

/* ambient sun/moon glow, echoes the logo mark */
.glow{
  position:absolute;
  top:-10%;
  right:-18%;
  width:60vw;
  height:60vw;
  max-width:320px;
  max-height:320px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(255,221,150,0.55), rgba(140,29,43,0) 70%);
  pointer-events:none;
  z-index:0;
}

/* ---------- Header ---------- */
.head{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.head__logo{
  width:clamp(46px,12vh,66px);
  height:auto;
  flex-shrink:0;
}
.head__title{
  margin:0;
  font-family:"AstroChitra", Georgia, serif;
  letter-spacing:-0.1em;
  color:var(--brand);
  font-size:clamp(22px, 5.5vh, 34px);
  line-height:1.02;
  font-weight:400;
}

/* ---------- Step panel ---------- */
.panel{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.frame{
  position:relative;
  width:100%;
  height:clamp(260px, 56dvh, 420px);
  border-radius:20px;
  padding:6px;
  background:linear-gradient(160deg,#3a2c0f,#1c1505);
  box-shadow:var(--shadow);
}
.frame__notch{
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  width:34%; height:5px;
  background:#0f0a02;
  border-radius:4px;
  z-index:3;
}
.frame__shots{
  position:relative;
  width:100%; height:100%;
  border-radius:14px;
  overflow:hidden;
  background:#111;
}
.frame__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity .35s ease;
}
.frame__img.is-active{ opacity:1; }

.frame__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px; height:30px;
  border-radius:50%;
  background:var(--cream);
  color:var(--brand);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,0.35);
}
.frame__nav--prev{ left:-13px; }
.frame__nav--next{ right:-13px; }

.steptext{
  text-align:center;
  min-height:0;
}
.steptext__eyebrow{
  display:inline-block;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--thread);
  font-weight:700;
  margin-bottom:2px;
}
.steptext__title{
  margin:0 0 2px;
  color:var(--brand);
  font-weight:700;
  font-size:clamp(15px, 3.4vh, 18px);
}
.steptext__body{
  margin:0 auto;
  max-width:32ch;
  color:var(--ink-soft);
  font-size:clamp(12px, 2.5vh, 13.5px);
  line-height:1.3;
}

.dots{
  display:flex;
  gap:7px;
  justify-content:center;
}
.dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--card-line);
}
.dot.is-active{
  background:var(--thread);
  width:18px;
  border-radius:5px;
}
.dot, .dot.is-active{ transition:all .25s ease; }

/* ---------- CTA ---------- */
.cta{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  text-align:center;
}
.cta__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(180deg, var(--thread), var(--thread-dk));
  color:#FBF4E3;
  font-family:"AstroChitra", Georgia, serif;
  letter-spacing:-0.05em;
  font-size:clamp(17px, 3.8vh, 21px);
  box-shadow:0 10px 22px -8px rgba(110,21,34,0.65);
  border:1px solid rgba(255,255,255,0.15);
}
.cta__btn:active{ transform:translateY(1px); }
.cta__arrow{ font-family:-apple-system,sans-serif; }
.cta__note{
  margin:8px 0 0;
  font-size:11.5px;
  color:var(--ink-soft);
}
.cta__note strong{ color:var(--brand); }

/* ---------- Small-height phones ---------- */
@media (max-height:640px){
  .stage{ gap:3px; }
  .head__sub{ display:none; }
  .frame{ height:clamp(180px, 45dvh, 300px); }
}
@media (max-height:560px){
  .head__logo{ width:38px; }
  .cta__note{ display:none; }
}