/* Jakarta ABC — warna diambil dari ilustrasi */
:root{
  --paper:#FBF5E9;
  --paper-2:#F4EAD6;
  --ink:#1E1A16;
  --ink-soft:#5A5148;
  --terracotta:#C95C4E;
  --mustard:#E2B23F;
  --teal:#3F7E8F;
  --sage:#7A8A5A;
  --sky:#8FCBE0;
  --line:#1E1A16;
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Shantell Sans",ui-rounded,system-ui,sans-serif;
  font-size:17px;line-height:1.6;
}
img{max-width:100%;height:auto;display:block}
/* Latar putih ilustrasi menyatu dengan kertas krem */
main img{mix-blend-mode:multiply}
a{color:inherit}

/* Bahasa: tampilkan hanya bahasa aktif */
html[data-lang="id"] [lang="en"]{display:none}
html[data-lang="en"] [lang="id"]{display:none}
html[data-lang] > body [lang]{ } /* no-op */

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Header */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:20px;
  padding:12px 24px;background:rgba(251,245,233,.92);
  backdrop-filter:blur(6px);border-bottom:2px solid var(--line);
}
.brand{font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.5px}
.nav{display:flex;gap:18px;margin-left:auto}
.nav a{text-decoration:none;font-weight:600;font-size:15px}
.nav a:hover{text-decoration:underline wavy var(--terracotta) 2px;text-underline-offset:5px}
.lang{display:flex;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{
  font:inherit;font-weight:700;font-size:13px;border:0;background:transparent;
  padding:4px 12px;cursor:pointer;color:var(--ink);
}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:56px 24px 24px;text-align:center}
.wordmark{width:min(100%,980px);margin:0 auto}
.tagline{font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.15;margin:28px 0 10px;letter-spacing:-.5px}
.lede{max-width:620px;margin:0 auto;color:var(--ink-soft);font-size:18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}
.btn{
  display:inline-block;padding:11px 22px;border:2px solid var(--line);border-radius:999px;
  background:var(--terracotta);color:#fff;font-weight:700;text-decoration:none;
  box-shadow:3px 3px 0 var(--line);transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.btn.ghost{background:var(--paper);color:var(--ink)}

/* Cuplikan */
.peek{
  max-width:var(--max);margin:24px auto 0;padding:0 24px;
  display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:end;
}
figure{margin:0}
figcaption{font-size:14px;color:var(--ink-soft);margin-top:6px;text-align:center}
.peek-a img{transform:rotate(-1.5deg)}
.peek-b img{transform:rotate(1deg)}

/* Bagian umum */
.section{max-width:var(--max);margin:0 auto;padding:88px 24px 24px}
.section-head{max-width:680px;margin-bottom:32px}
.section-head p{color:var(--ink-soft);margin:0}
.kicker{font-weight:800;color:var(--terracotta)!important;letter-spacing:1px}
h2{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:4px 0 12px;letter-spacing:-1px}
h3{font-size:22px;margin:0 0 8px;line-height:1.2}
.center{text-align:center;margin-top:28px}

/* Grid A–Z */
.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;
}
.card{
  background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 10px;display:flex;flex-direction:column;
}
.card .art{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.card .art{position:relative}
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.card p{margin:8px 0 0;font-size:14px;line-height:1.3}
.card p b{font-size:18px;margin-right:4px}
.card.soon{background:var(--paper-2);border-style:dashed}
.card.soon p{color:var(--ink-soft)}
.big-letter{font-size:96px;font-weight:800;line-height:1;opacity:.85}
.c-terracotta{color:var(--terracotta)} .c-mustard{color:var(--mustard)}
.c-teal{color:var(--teal)} .c-sage{color:var(--sage)} .c-sky{color:var(--sky)}

/* Stories */
.wide{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:20px}

/* Buku & merch */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{border:2px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;left:0;top:0;right:0;height:10px}
.t-terracotta::before{background:var(--terracotta)}
.t-mustard::before{background:var(--mustard)}
.t-teal::before{background:var(--teal)}
.tile p{color:var(--ink-soft);margin:0}
.sticker{margin:10px 0 14px}

/* Kolaborasi */
.collab{padding-bottom:64px}
.offer{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer li{background:var(--paper-2);border-radius:var(--radius);padding:20px;color:var(--ink-soft)}
.offer b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}

/* Footer */
.footer{border-top:2px solid var(--line);padding:32px 24px 40px;text-align:center;background:var(--paper-2)}
.footer p{margin:4px 0}
.small{font-size:13px;color:var(--ink-soft)}

/* Ponsel */
@media (max-width:760px){
  body{font-size:16px}
  .topbar{padding:10px 16px;gap:12px}
  .nav{display:none}
  .lang{margin-left:auto}
  .hero{padding:36px 16px 8px}
  .peek{grid-template-columns:1fr;padding:0 16px}
  .section{padding:64px 16px 16px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .big-letter{font-size:72px}
  .cards3,.offer{grid-template-columns:1fr}
  .wide{padding:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}