/* avip.my.id, Prototipe Fase 1
   Arah visual: dunia OUR HERO milik Avip sendiri (langit biru cerah, pulau melayang,
   papan penunjuk kayu, panel krem). Palet inti: biru langit + krem + cokelat kayu.
   Empat warna atap (merah, lumut, biru, ungu) dipakai hanya sebagai penanda tiap tempat,
   meniru papan rumah di dalam dunianya. Tipografi serif untuk judul karena dunia ini
   bergaya buku cerita; badan teks sans sistem agar cepat dan terbaca di HP. */

:root{
  --sky-top:#2f9be8;
  --sky-bottom:#cdeffb;
  --ink:#2b2118;
  --ink-soft:#5d4c3a;
  --cream:#fff9ef;
  --cream-dim:#fdf3e0;
  --wood:#7a4a21;
  --wood-dark:#5d3717;
  --line:#e5d3ae;
  --roof-red:#c24936;
  --roof-moss:#5e8c3a;
  --roof-blue:#2e6fb7;
  --roof-purple:#7e57c2;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bottom) 340px,var(--cream) 341px,var(--cream) 100%);
  line-height:1.6;
}
:focus-visible{outline:3px solid var(--wood);outline-offset:2px}

.wrap{max-width:880px;margin:0 auto;padding:0 20px}

.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;color:#fff;
}
.brand{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.15rem;color:#fff;text-decoration:none}
.topbar nav a{color:#fff;text-decoration:none;margin-left:18px;font-size:.95rem;border-bottom:2px solid transparent}
.topbar nav a:hover{border-bottom-color:#fff}

.hero{padding:26px 0 8px;color:#fff}
.hero h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.6rem,8vw,4.6rem);
  line-height:1.02;margin:0 0 6px;font-weight:700;letter-spacing:.5px;
}
.hero .role{font-size:clamp(1.05rem,3vw,1.3rem);font-weight:600;margin:0 0 14px}
.hero p{max-width:56ch;margin:0;color:#eef8ff}

/* Papan penunjuk: motif identitas dari dunia OUR HERO */
.signpost{margin:34px 0 8px;display:grid;gap:14px}
.sign{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(180deg,#8a5a2b,var(--wood));
  color:#fff;text-decoration:none;
  padding:16px 20px;border-radius:10px;border:2px solid var(--wood-dark);
  box-shadow:0 3px 0 var(--wood-dark);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sign:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--wood-dark)}
.sign .chip{flex:0 0 auto;width:16px;height:16px;border-radius:4px;border:2px solid rgba(255,255,255,.65)}
.sign .txt{flex:1 1 auto}
.sign .name{font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;font-weight:700;display:block;line-height:1.2}
.sign .desc{font-size:.92rem;color:#ffeecd}
.sign .go{font-weight:700;font-size:1.1rem}
.chip.red{background:var(--roof-red)} .chip.moss{background:var(--roof-moss)}
.chip.blue{background:var(--roof-blue)} .chip.purple{background:var(--roof-purple)}
.sign.world{background:linear-gradient(180deg,#3d3d55,#2c2c40);border-color:#1e1e2e;box-shadow:0 3px 0 #1e1e2e}
.sign.world .desc{color:#cfd2ff}

main{padding:26px 0 10px}
.ledger{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:8px 22px}
.ledger h2{font-family:Georgia,"Times New Roman",serif;font-size:1.4rem;margin:14px 0 4px}
.ledger dl{margin:0}
.ledger .row{display:flex;gap:18px;padding:12px 0;border-top:1px dashed var(--line)}
.ledger .row:first-of-type{border-top:none}
.ledger dt{flex:0 0 128px;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.25rem;color:var(--wood-dark)}
.ledger dd{margin:0;color:var(--ink-soft)}

footer{padding:28px 0 40px;color:var(--ink-soft);font-size:.9rem}
footer a{color:var(--wood-dark)}

/* Halaman tempat */
.pagehead{padding:10px 0 4px;color:#fff}
.pagehead .back{color:#fff;text-decoration:none;font-size:.95rem;border-bottom:2px solid rgba(255,255,255,.5)}
.pagehead h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,6vw,3rem);margin:10px 0 4px}
.pagehead p{margin:0;max-width:58ch;color:#eef8ff}
.panel{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:6px 22px 14px;margin:18px 0}
.panel h2{font-family:Georgia,"Times New Roman",serif;font-size:1.3rem;margin:16px 0 6px;color:var(--wood-dark)}
.panel p{color:var(--ink-soft);margin:6px 0}
.panel ul{margin:8px 0 8px 18px;padding:0;color:var(--ink-soft)}
.panel li{margin:5px 0}
.panel li b{color:var(--ink)}
.entry{padding:14px 0;border-top:1px dashed var(--line)}
.entry:first-of-type{border-top:none}
.entry h3{margin:0 0 2px;font-size:1.08rem}
.entry .meta{font-size:.9rem;color:var(--wood-dark);font-weight:600}
.entry p{margin:6px 0}
.tag{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid var(--wood);color:var(--wood-dark);margin-left:8px;vertical-align:2px}
.places-nav{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.places-nav a{
  text-decoration:none;color:var(--wood-dark);font-weight:600;font-size:.95rem;
  border:1.5px solid var(--wood);border-radius:8px;padding:9px 14px;background:var(--cream-dim);
}
.places-nav a:hover{background:var(--cream)}

@media (max-width:560px){
  .ledger .row{flex-direction:column;gap:2px}
  .ledger dt{flex-basis:auto}
  .sign .name{font-size:1.15rem}
  .topbar nav a{margin-left:12px}
}