/* ============================================================
   Layout
   ============================================================ */
#app{ position:relative; z-index:1; min-height:100%; }

/* header / nav */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(10,6,3,.92), rgba(10,6,3,.7));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
  transition:transform .4s var(--ease-silk);
}
.site-header.hide{ transform:translateY(-100%); }
.brand{ display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-size:1.25rem; color:var(--gold-100); }
.brand .mark{ width:30px; height:30px; }
.nav-row{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.nav-links{ position:relative; display:flex; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:block; padding:22px 14px 20px; font-size:.92rem; color:var(--parchment-dim);
  transition:color .25s;
}
.nav-links a.active, .nav-links a:hover{ color:var(--gold-100); }
.nav-tools{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ink-line); background:transparent; color:var(--parchment); cursor:pointer;
  transition:border-color .25s, transform .2s var(--ease-spring), background .25s;
}
.icon-btn:hover{ border-color:var(--gold-500); color:var(--gold-100); transform:translateY(-2px); }
.icon-btn:active{ transform:scale(.9); }
#themeBtn svg{ transition:opacity .3s var(--ease-silk), transform .4s var(--ease-spring); }
#themeBtn.spin svg{ animation:themeSpin .5s var(--ease-spring); }
@keyframes themeSpin{ from{ transform:rotate(-90deg) scale(.5); opacity:0; } to{ transform:rotate(0) scale(1); opacity:1; } }
.nav-burger{ display:none; }

/* hero */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding-top:var(--nav-h); overflow:hidden; text-align:center;
  perspective:1200px;
}
.hero-stage{ position:relative; width:min(80vw,340px); aspect-ratio:4/3; margin:0 auto 2rem; transform-style:preserve-3d; }
.hero-book{
  position:absolute; inset:0; border-radius:8px;
  background:linear-gradient(160deg,var(--parchment),var(--parchment-dim));
  border:2px solid var(--gold-500); box-shadow:var(--shadow-deep);
  display:flex; align-items:center; justify-content:center;
  transition:transform .1s linear;
}
.hero-book::before{
  content:""; position:absolute; inset:0; border-radius:8px;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.35) 50%, transparent 55%);
  pointer-events:none;
}
.hero-book .ornament{ width:60%; opacity:.7; }
.hero-eyebrow{ margin-bottom:.6em; }
.hero h1{ font-size:clamp(2.4rem,6vw,4.2rem); }
.hero .lede{ max-width:560px; margin:0 auto 1.6rem; font-size:1.05rem; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-scrolldown{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--gold-500); font-size:.75rem; letter-spacing:.2em; opacity:.75;
}
.hero-scrolldown .line{ width:1px; height:34px; background:linear-gradient(var(--gold-500),transparent); animation:lineDraw 2s ease-in-out infinite; }
@keyframes lineDraw{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* sections */
.section{ position:relative; padding:96px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2{ font-size:clamp(1.8rem,4vw,2.6rem); }

/* generic content card */
.card{
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border:1px solid var(--ink-line); border-radius:var(--radius-lg);
  padding:26px; transition:border-color .3s, transform .3s var(--ease-spring), box-shadow .3s;
}
.card:hover{ border-color:rgba(201,162,39,.4); transform:translateY(-4px); box-shadow:var(--shadow-deep); }

/* character grid */
.grid{ display:grid; gap:22px; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.char-card{ text-align:center; cursor:pointer; }
.char-card .zoom-frame{ aspect-ratio:3/4; margin-bottom:12px; }
.char-card .zoom-frame img{ width:100%; height:100%; object-fit:cover; }

/* character detail */
.char-hero{ display:flex; gap:36px; align-items:flex-start; flex-wrap:wrap; }
.char-hero .zoom-frame{ flex:0 0 260px; aspect-ratio:3/4; }
.char-hero .zoom-frame img{ width:100%; height:100%; object-fit:cover; }
.char-hero .info{ flex:1; min-width:260px; }
.char-hero .title-tag{ color:var(--gold-500); font-family:var(--font-display); font-size:1.1rem; margin-bottom:.5em; }

/* parables */
.parable-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; aspect-ratio:4/3; }
.parable-card img{ width:100%; height:100%; object-fit:cover; }
.parable-card .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:20px;
  background:linear-gradient(0deg, rgba(10,6,3,.92), transparent 60%);
  transition:background .3s;
}
.parable-card h3{ font-size:1.2rem; margin:0; }
.parable-card:hover .overlay{ background:linear-gradient(0deg, rgba(10,6,3,.97), rgba(10,6,3,.2) 65%); }

/* verse / interpretation */
.verse-block{ padding:26px; border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--ink-800),var(--ink-900)); border-inline-start:3px solid var(--gold-500); }
.verse-text{ font-family:var(--font-display); font-size:1.4rem; color:var(--parchment); }
.verse-ref{ color:var(--gold-500); font-size:.9rem; }

/* install card */
.install-card{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(140%);
  width:min(94vw,420px); z-index:500;
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border:1px solid var(--gold-700); border-radius:var(--radius-lg);
  padding:20px 22px; box-shadow:var(--shadow-deep);
  transition:transform .55s var(--ease-spring);
}
.install-card.show{ transform:translateX(-50%) translateY(0); }
.install-card .row{ display:flex; gap:14px; align-items:flex-start; }
.install-card .mark{ width:44px; height:44px; flex:none; }
.install-card h3{ font-size:1.05rem; margin-bottom:.25em; }
.install-card p{ font-size:.88rem; margin-bottom:0; }
.install-card .actions{ display:flex; gap:10px; margin-top:14px; }

.ios-sheet{
  position:fixed; inset:0; z-index:600; background:rgba(10,6,3,.72);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.ios-sheet.show{ opacity:1; pointer-events:auto; }
.ios-sheet-panel{
  width:100%; max-width:480px; background:var(--ink-900); border:1px solid var(--gold-700);
  border-radius:22px 22px 0 0; padding:26px 22px 30px; transform:translateY(30px);
  transition:transform .4s var(--ease-spring);
}
.ios-sheet.show .ios-sheet-panel{ transform:translateY(0); }
.ios-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ios-steps li{ display:flex; align-items:center; gap:12px; font-size:.92rem; }
.ios-steps .num{ width:26px; height:26px; border-radius:50%; background:var(--gold-500); color:var(--ink-950); display:flex; align-items:center; justify-content:center; font-weight:700; flex:none; }

/* footer */
.site-footer{ padding:60px 0 40px; text-align:center; border-top:1px solid var(--ink-line); margin-top:60px; }
.site-footer .marks{ opacity:.6; font-size:.82rem; }

/* toast */
.toast{
  position:fixed; top:calc(var(--nav-h) + 14px); left:50%; transform:translateX(-50%) translateY(-20px);
  background:var(--ink-800); border:1px solid var(--gold-700); border-radius:999px; padding:.6em 1.4em;
  font-size:.85rem; opacity:0; z-index:700; transition:opacity .3s, transform .3s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* utility */
.center-text{ text-align:center; }
.muted{ color:var(--parchment-dim); }
.empty-state{ text-align:center; padding:60px 20px; color:var(--parchment-dim); }

/* responsive */
@media (max-width:860px){
  .grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ position:fixed; inset-inline:0; top:var(--nav-h); background:var(--ink-950);
    flex-direction:column; padding:10px 24px 30px; border-bottom:1px solid var(--ink-line);
    transform:translateY(-140%); transition:transform .4s var(--ease-silk); }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:14px 4px; border-bottom:1px solid var(--ink-line); }
  .nav-burger{ display:flex; }
  .nav-indicator{ display:none; }
  .char-hero{ flex-direction:column; align-items:center; text-align:center; }
}
@media (max-width:560px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr 1fr; }
  .section{ padding:64px 0; }
}


/* ============================================================
   MOBILE APP MODE — tuned for phones
   ============================================================ */
@media (max-width: 860px){
  :root{
    --nav-h:60px;
  }
  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    min-width:0;
    overflow-x:hidden;
    overscroll-behavior-x:none;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .container{
    width:100%;
    max-width:none;
    padding-inline:16px;
  }

  .site-header{
    height:calc(var(--nav-h) + env(safe-area-inset-top));
    padding-top:env(safe-area-inset-top);
    background:rgba(10,6,3,.94);
    backdrop-filter:blur(18px);
  }
  :root[data-theme="light"] .site-header{
    background:rgba(246,241,226,.94);
  }
  .nav-row{
    height:var(--nav-h);
  }
  .brand{
    min-width:0;
    font-size:1.05rem;
    gap:.45rem;
  }
  .brand .mark{
    width:27px;
    height:27px;
  }
  .nav-tools{
    gap:6px;
  }
  .nav-tools .icon-btn{
    width:38px;
    height:38px;
  }

  /* Compact mobile drawer */
  .nav-links{
    top:calc(var(--nav-h) + env(safe-area-inset-top));
    max-height:calc(100svh - var(--nav-h) - env(safe-area-inset-top));
    overflow:auto;
    padding:8px 16px calc(18px + env(safe-area-inset-bottom));
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
  }
  .nav-links a{
    padding:13px 6px;
    font-size:.98rem;
  }

  .hero{
    min-height:calc(100svh - env(safe-area-inset-top));
    padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 18px);
    padding-bottom:48px;
  }
  .hero-stage{
    width:min(78vw,310px);
    margin-bottom:1.25rem;
  }
  .hero h1{
    font-size:clamp(2rem,10vw,3rem);
    line-height:1.15;
  }
  .hero .lede{
    font-size:.93rem;
    line-height:1.8;
    max-width:92vw;
  }
  .hero-actions{
    width:100%;
    gap:9px;
  }
  .hero-actions .btn{
    flex:1 1 150px;
    justify-content:center;
  }
  .hero-scrolldown{
    bottom:16px;
  }

  .section{
    padding:52px 0;
  }
  .section-head{
    margin-bottom:2rem;
    padding-inline:6px;
  }
  .section-head h2{
    font-size:clamp(1.7rem,8vw,2.25rem);
    line-height:1.3;
  }
  .section-head p{
    font-size:.9rem;
  }

  .grid,
  .grid.cols-3,
  .grid.cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .card{
    min-width:0;
    padding:15px;
    border-radius:16px;
  }
  .char-card{
    padding:10px;
  }
  .char-card .zoom-frame{
    margin-bottom:8px;
  }
  .char-card h3{
    font-size:1rem;
    line-height:1.35;
  }
  .char-card p{
    font-size:.76rem;
    line-height:1.65;
  }

  .parable-card{
    border-radius:16px;
    aspect-ratio:1/1.05;
  }
  .parable-card .overlay{
    padding:12px;
  }
  .parable-card h3{
    font-size:.98rem;
    line-height:1.35;
  }

  .char-hero{
    gap:20px;
    align-items:stretch;
    text-align:right;
  }
  .char-hero .zoom-frame{
    width:min(72vw,260px);
    flex:0 0 auto;
    margin-inline:auto;
  }
  .char-hero .info{
    min-width:0;
    width:100%;
  }

  .verse-block{
    padding:18px;
    border-radius:15px;
  }
  .verse-text{
    font-size:1.12rem;
    line-height:1.9;
  }

  .install-card{
    width:calc(100vw - 24px);
    max-width:none;
    bottom:calc(10px + env(safe-area-inset-bottom));
    padding:16px;
    border-radius:18px;
  }
  .install-card .row{
    gap:10px;
  }
  .install-card .mark{
    width:38px;
    height:38px;
  }
  .install-card h3{
    font-size:.98rem;
  }
  .install-card p{
    font-size:.78rem;
    line-height:1.7;
  }
  .install-card .actions{
    gap:8px;
  }
  .install-card .actions .btn{
    flex:1;
    justify-content:center;
    padding:.72em .8em;
    font-size:.82rem;
  }

  .ios-sheet-panel{
    padding:22px 18px calc(24px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
  }

  .toast{
    top:calc(var(--nav-h) + env(safe-area-inset-top) + 10px);
    width:max-content;
    max-width:calc(100vw - 28px);
    text-align:center;
    line-height:1.5;
    white-space:normal;
    border-radius:14px;
    padding:.65em 1em;
  }

  /* Touch devices: remove hover lift that can cause layout jumps. */
  .card:hover,
  .icon-btn:hover{
    transform:none;
  }
  button,
  a{
    -webkit-tap-highlight-color:transparent;
  }
}

@media (max-width:380px){
  .container{ padding-inline:12px; }
  .grid,.grid.cols-3,.grid.cols-2{ gap:9px; }
  .card{ padding:12px; }
  .hero-stage{ width:76vw; }
  .brand span{ max-width:125px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}