/* Tema LP Jepang: warna ukiyo-e dan font mincho, dimuat setelah lp.css */
:root {
  --blue: #1c2f5e;      /* ai, indigo */
  --blue-deep: #131f42;
  --blue-mid: #2a4a86;
  --sky: #7f9cbd;
  --sky-soft: #efe6d2;  /* kinari, krem kain */
  --orange: #c9341f;    /* shu, merah vermilion */
  --orange-deep: #a8291a;
  --lime: #e3b64f;      /* kincha, emas */
  --grey: #f3ecdd;
  --ink: #1f2430;
  --muted: #5c5a55;
  --line: #e3dac8;
  --radius: 12px;
  --serif: "Shippori Mincho B1", "Noto Serif JP", Georgia, serif;
  --display: "Shippori Mincho B1", "Noto Serif JP", Georgia, serif;
  --body: "Zen Kaku Gothic New", system-ui, sans-serif;
}

body { background: #fbf8f1; font-weight: 500; }
.btn { border-radius: 6px; box-shadow: 0 8px 20px rgb(201 52 31 / .28); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline-color: var(--orange); }
.on-blue a:focus-visible, .on-blue button:focus-visible, .hero a:focus-visible, .closing a:focus-visible { outline-color: var(--lime); }
.title { font-weight: 700; letter-spacing: .01em; }
.status, .levels span, .rank { border-radius: 4px; }
.cal { border-radius: 0 0 var(--radius) var(--radius); }
.st-closed { background: #e8e2d6; }

/* Label section: titik matahari dan kanji */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; border-radius: 0; background: none; color: var(--orange); letter-spacing: 1.4px; }
.eyebrow::before { content: ""; width: 11px; height: 11px; flex: none; border-radius: 50%; background: var(--orange); }
.kanji { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 2px; opacity: .78; }
.on-blue .eyebrow { color: var(--lime); }

/* Header */
.nav a { border-radius: 4px; }
.burger { border-radius: 6px; }
.header.stuck { background: #fbf8f1; }
.arrows button { border-radius: 6px; }
.tabs button { border-radius: 4px; }

/* Key visual */
.hero { padding-bottom: 210px;
  background:
    linear-gradient(90deg, rgb(19 31 66 / .62) 0%, rgb(19 31 66 / 0) 58%),
    url("assets/jepang-hero.svg") right bottom / cover no-repeat,
    var(--blue-deep); }
.hero h1 { max-width: 690px; font-weight: 800; font-size: clamp(36px, 4.5vw, 58px); line-height: 1.22; }
.hero p { max-width: 600px; font-weight: 500; }
.badge { border-radius: 4px; }
.btn-ghost { background: rgb(19 31 66 / .72); box-shadow: inset 0 0 0 2px #f4ecd8; }
.btn-ghost:hover { background: rgb(244 236 216 / .18); }
.tategaki { position: absolute; top: 236px; right: clamp(24px, 3.4vw, 64px); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #f4ecd8; }
.tategaki b { font: 700 42px/1.08 var(--serif); letter-spacing: .12em; writing-mode: vertical-rl; }
.tategaki i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 4px; background: var(--orange); color: #fff; font: 700 15px/1 var(--serif); font-style: normal; letter-spacing: 1px; writing-mode: vertical-rl; }

/* Section gelap dengan motif ombak */
.on-blue, .closing { background: url("assets/seigaiha-ai.svg") 0 0 / 80px 40px, var(--blue); }

/* Foto penutup di depan matahari */
.closing-photo::before { content: ""; position: absolute; left: 50%; bottom: 40px; width: min(100%, 400px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translateX(-50%); }

@media (min-width: 1001px) {
  .header:not(.stuck) .nav a { background: rgb(19 31 66 / .55); box-shadow: inset 0 0 0 1px rgb(244 236 216 / .4); }
  .header:not(.stuck) .nav a:hover { background: var(--orange); }
}
@media (max-width: 1000px) {
  .header:not(.stuck) .burger { background: rgb(19 31 66 / .6); box-shadow: inset 0 0 0 1px rgb(244 236 216 / .4); }
  .closing-photo::before { bottom: 20px; width: 300px; }
}

/* Layar lebar: hero mengikuti rasio ilustrasi supaya sakura tidak terpotong */
@media (min-width: 1101px) {
  .hero { min-height: min(56.25vw, 1180px); }
}

/* Layar sempit: ilustrasi turun ke bawah teks supaya salju Fuji tidak menimpa judul */
@media (max-width: 1100px) {
  .hero { padding-bottom: 620px; background: url("assets/jepang-hero.svg") right bottom / auto 640px no-repeat, var(--blue-deep); }
  .hero h1, .hero p { max-width: 720px; }
  .tategaki { display: none; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 430px; background-size: auto 430px; }
  .kanji { font-size: 14px; }
}