/* ============================================================
   Belajar Sejarah Jepang Lewat Cerita — style.css
   Diekstrak dari prototipe Bab 1 (bab-01-izanagi-izanami.html).
   Bagian INDEX/TIMELINE ditambahkan untuk katalog.
   ============================================================ */

:root{
  --washi:#f4ebdc;
  --washi-2:#efe4d2;
  --ink:#241f1a;
  --ink-soft:#4a4138;
  --shu:#a8322a;          /* vermilion */
  --shu-deep:#7e241d;
  --gold:#b0832f;
  --rule:#d8c7ab;
  --n5:#2e7d4f; --n4:#2f7d8f; --n3:#c08a2e; --n2:#c2632a; --n1:#a8322a; --name:#6b5b8a;
  --reader-scale:1;       /* dikendalikan tombol zoom A− / A＋ */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(176,131,47,.06), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(168,50,42,.05), transparent 45%),
    var(--washi);
  font-family:"EB Garamond", Georgia, serif;
  font-size:1.12rem; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
/* subtle paper grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 22px 80px;}

/* ---------- HEADER ---------- */
header.hero{padding:54px 0 26px; text-align:center;}
.kicker{font-family:"Shippori Mincho",serif; letter-spacing:.5em; font-size:.78rem; color:var(--shu); text-transform:uppercase; margin:0 0 18px;}
.era-badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Shippori Mincho",serif; font-size:.82rem; letter-spacing:.18em;
  color:#fff; background:var(--shu-deep);
  padding:5px 14px; border-radius:2px; margin-bottom:22px;
  box-shadow:0 2px 0 rgba(126,36,29,.35);
}
h1.jp-title{font-family:"Shippori Mincho",serif; font-weight:800; font-size:clamp(2.1rem,7vw,3.1rem); margin:.1em 0 .15em; letter-spacing:.04em; line-height:1.2;}
.id-title{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(1.1rem,4vw,1.5rem); color:var(--ink-soft); margin:0;}
.ornament{width:70px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:26px auto 0;}

/* ---------- CONTROLS ---------- */
.controls{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:12px; margin:20px 0 34px; background:rgba(244,235,220,.86); backdrop-filter:blur(6px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.seg{display:inline-flex; border:1px solid var(--shu); border-radius:3px; overflow:hidden;}
.seg button{font-family:"Shippori Mincho",serif; font-size:.82rem; padding:7px 13px; border:0; background:transparent; color:var(--shu); cursor:pointer; transition:.15s;}
.seg button:not(:last-child){border-right:1px solid var(--shu);}
.seg button.active{background:var(--shu); color:#fff;}
.seg button:disabled{opacity:.32; cursor:default;}
.toggle-ruby{font-family:"Shippori Mincho",serif; font-size:.82rem; padding:7px 13px; border:1px solid var(--gold); border-radius:3px; background:transparent; color:var(--gold); cursor:pointer; transition:.15s;}
.toggle-ruby.off{background:var(--gold); color:#fff;}
/* zoom font (A− / A＋) — pakai tampilan .seg */
.seg.zoom button{font-weight:700; min-width:40px; font-size:.92rem;}

/* ---------- STORY ---------- */
.story .para{margin:0 0 30px;}
.jp{font-family:"Shippori Mincho",serif; font-weight:400; font-size:calc(1.22rem * var(--reader-scale)); line-height:2.15; text-align:justify; margin:0 0 8px;}
.id{color:var(--ink-soft); font-size:calc(1.12rem * var(--reader-scale)); text-align:justify; margin:0; padding-left:16px; border-left:2px solid var(--rule);}
ruby rt{font-family:"Shippori Mincho",serif; font-size:.52em; color:var(--shu-deep); font-weight:400; letter-spacing:0;}
/* hide furigana mode (keeps layout) */
body.ruby-off ruby rt{visibility:hidden;}
/* view modes */
body.mode-jp .id{display:none;}
body.mode-id .jp{display:none;}

/* ---------- SECTION TITLES ---------- */
h2.sec{font-family:"Shippori Mincho",serif; font-weight:700; font-size:1.5rem; margin:54px 0 6px; display:flex; align-items:baseline; gap:.6em;}
h2.sec .en{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:400; font-size:1rem; color:var(--gold);}
h2.sec::before{content:""; display:inline-block; width:12px; height:22px; background:var(--shu); margin-right:2px; transform:translateY(3px);}
.sec-rule{height:1px; background:var(--rule); margin:0 0 22px;}

/* ---------- VOCAB ---------- */
table.vocab{width:100%; border-collapse:collapse; font-size:calc(.98rem * var(--reader-scale));}
table.vocab th{font-family:"Shippori Mincho",serif; text-align:left; font-size:.8rem; letter-spacing:.08em; color:var(--ink-soft); border-bottom:2px solid var(--rule); padding:8px 6px;}
table.vocab td{padding:9px 6px; border-bottom:1px solid var(--rule); vertical-align:top;}
.word{font-family:"Shippori Mincho",serif; font-size:calc(1.12rem * var(--reader-scale)); white-space:nowrap;}
.reading{font-family:"Shippori Mincho",serif; color:var(--ink-soft); font-size:calc(.92rem * var(--reader-scale));}
.lv{display:inline-block; min-width:30px; text-align:center; font-family:"Shippori Mincho",serif; font-size:.72rem; font-weight:700; color:#fff; padding:2px 7px; border-radius:3px;}
.lv.N5{background:var(--n5);} .lv.N4{background:var(--n4);} .lv.N3{background:var(--n3);} .lv.N2{background:var(--n2);} .lv.N1{background:var(--n1);} .lv.NM{background:var(--name);}
.legend{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.78rem; color:var(--ink-soft); margin:14px 0 0;}
.legend span{display:inline-flex; align-items:center; gap:5px;}
.legend i{width:14px; height:14px; border-radius:3px; display:inline-block;}

/* ---------- COMMENTARY ---------- */
.commentary p{margin:0 0 16px; font-size:calc(1.12rem * var(--reader-scale));}
.commentary ruby rt{color:var(--shu-deep);}
.myth-tag{font-family:"Shippori Mincho",serif; font-size:.72rem; letter-spacing:.1em; color:#fff; background:var(--gold); padding:2px 9px; border-radius:3px;}
.didyouknow{background:var(--washi-2); border:1px solid var(--rule); border-left:4px solid var(--gold); padding:18px 20px; margin:24px 0; border-radius:0 4px 4px 0;}
.didyouknow h3{font-family:"Shippori Mincho",serif; font-size:1rem; margin:0 0 8px; color:var(--shu-deep);}
.didyouknow p{margin:0 0 10px; font-size:calc(1rem * var(--reader-scale));}
.didyouknow p:last-child{margin:0;}

/* ---------- FOOTER ---------- */
footer{margin-top:60px; padding-top:22px; border-top:1px solid var(--rule); font-size:.86rem; color:var(--ink-soft);}
footer .src{font-family:"Shippori Mincho",serif;}
.proto{font-size:.78rem; color:var(--gold); font-style:italic; margin-top:14px;}
a{color:var(--shu);}

/* ---------- CHAPTER NAV (prev/next, kembali) ---------- */
.chap-nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin:48px 0 0;}
.chap-nav a{
  font-family:"Shippori Mincho",serif; font-size:.84rem; text-decoration:none;
  color:var(--shu); border:1px solid var(--rule); border-radius:3px;
  padding:8px 14px; background:var(--washi-2); transition:.15s;
}
.chap-nav a:hover{background:var(--shu); color:#fff; border-color:var(--shu);}
.chap-nav .home{margin:0 auto;}
.chap-nav .disabled{visibility:hidden;}

/* ============================================================
   INDEX / TIMELINE (katalog bab)
   ============================================================ */
.index-hero{padding:64px 0 18px; text-align:center;}
.index-hero h1{font-family:"Shippori Mincho",serif; font-weight:800; font-size:clamp(2rem,6vw,2.8rem); margin:.1em 0 .25em; letter-spacing:.03em;}
.index-hero .sub{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:clamp(1rem,3.5vw,1.35rem); color:var(--ink-soft); margin:0;}
.index-hero .lede{max-width:620px; margin:22px auto 0; color:var(--ink-soft); font-size:1rem;}

/* filter bar */
.filters{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:12px; margin:26px 0 8px; background:rgba(244,235,220,.86); backdrop-filter:blur(6px);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.filters .chip{font-family:"Shippori Mincho",serif; font-size:.78rem; padding:6px 12px; border:1px solid var(--shu);
  border-radius:14px; background:transparent; color:var(--shu); cursor:pointer; transition:.15s;}
.filters .chip.active{background:var(--shu); color:#fff;}
.filters .chip.gold{border-color:var(--gold); color:var(--gold);}
.filters .chip.gold.active{background:var(--gold); color:#fff;}

/* era group heading on timeline */
.era-group{margin:46px 0 0;}
.era-group > h2{font-family:"Shippori Mincho",serif; font-weight:700; font-size:1.4rem; margin:0 0 4px;
  display:flex; align-items:baseline; gap:.6em;}
.era-group > h2::before{content:""; display:inline-block; width:11px; height:20px; background:var(--shu); transform:translateY(3px);}
.era-group .era-rule{height:1px; background:var(--rule); margin:0 0 18px;}

/* card grid */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.card{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--washi-2); border:1px solid var(--rule); border-radius:5px; padding:18px 18px 16px;
  transition:transform .15s, box-shadow .15s, border-color .15s;}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(126,36,29,.12); border-color:var(--shu);}
.card .no{font-family:"Shippori Mincho",serif; font-size:.72rem; letter-spacing:.12em; color:var(--shu); text-transform:uppercase;}
.card .jp{font-family:"Shippori Mincho",serif; font-weight:700; font-size:1.18rem; line-height:1.5; margin:6px 0 4px; text-align:left;}
.card .id{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:.98rem; color:var(--ink-soft);
  border:0; padding:0; margin:0;}
.card .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.card .tag{font-family:"Shippori Mincho",serif; font-size:.66rem; letter-spacing:.06em; padding:2px 8px; border-radius:3px;
  background:var(--washi); border:1px solid var(--rule); color:var(--ink-soft);}
.card .star{position:absolute; top:12px; right:14px; color:var(--gold); font-size:1rem;}
.card.is-soon{opacity:.6;}
.card.is-soon:hover{transform:none; box-shadow:none; border-color:var(--rule);}
.card .status{font-size:.66rem; font-style:italic; color:var(--gold); margin-top:8px;}

.index-foot{margin-top:60px; padding-top:22px; border-top:1px solid var(--rule); font-size:.84rem; color:var(--ink-soft);}
.index-foot .proto{font-style:italic; color:var(--gold);}

/* ============================================================
   RESPONSIF
   ============================================================ */
@media (max-width:600px){
  body{font-size:1.04rem; line-height:1.7;}
  .wrap{padding:0 16px 60px;}
  header.hero{padding:40px 0 18px;}
  .controls{gap:8px; padding:10px 8px;}
  .seg button, .toggle-ruby{padding:7px 11px; font-size:.78rem;}
  .jp{line-height:2; text-align:left;}
  .id{text-align:left;}
  /* kosakata: izinkan kata panjang membungkus agar tak meluber */
  .word{white-space:normal;}
  table.vocab th, table.vocab td{padding:8px 4px;}
  h2.sec{font-size:1.3rem; margin:42px 0 6px;}
  .index-hero{padding:44px 0 14px;}
  .cards{grid-template-columns:1fr; gap:13px;}
  .chap-nav{gap:8px;}
  .chap-nav a{padding:7px 11px; font-size:.8rem;}
}
@media (max-width:380px){
  .seg button, .toggle-ruby{padding:6px 9px; font-size:.74rem;}
  .seg.zoom button{min-width:34px;}
}
/* hormati preferensi reduce-motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .card{transition:none;}
}