/* ==========================================================
   GAYA MENGIKUTI CONTOH KLIEN ("Welcome to JAPAN"):
   gambar penuh layar, header transparen, baris serif kecil di atas
   kata raksasa sans tebal tegak, strip tiga kolom di kaki gambar.
   Dimuat paling akhir (setelah app.css & jepang.css).
   ========================================================== */
@font-face{font-family:"Montserrat";font-weight:100 900;font-display:swap;src:url(../fonts/montserrat.woff2) format("woff2")}
@font-face{font-family:"Playfair";font-weight:400 900;font-display:swap;src:url(../fonts/playfair-display.woff2) format("woff2")}
:root{
  --display:"Montserrat","Zen Kaku",system-ui,sans-serif;
  --serif:"Playfair","Shippori",Georgia,serif;
}

/* Huruf judul: sans tebal, kapital, tegak (tidak miring lagi) */
.slant{transform:none}
.display,.shead h2,.cat h3,.mnav a,.ftr__word,.page-head h1,.buy h1,.order__hero h1,.narrow h1,.empty h2,.cart-empty h3,.score b,.facts b,.count b,.ticker__track span{font-family:var(--display);font-weight:900;letter-spacing:-.01em}
.page-head h1,.narrow h1,.empty h2,.cart-empty h3{text-transform:uppercase}
.buy h1{text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1.05}
.cat h3{text-transform:uppercase;font-size:clamp(24px,2.4vw,36px)}
.ticker__track span{transform:none;text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.ftr__word{transform:none}
.logo__word{font-family:var(--display);font-weight:900;transform:none;letter-spacing:.06em;font-size:18px}
.logo__word small{transform:none}

/* Menu & tautan kecil: serif kapital seperti contoh */
.hdr__nav>a,.hdr__drop>button{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.hdr__nav>a.on::after{transform:scaleX(1)}

/* Judul bagian: baris serif kecil + kata besar */
.ttl{display:grid;gap:2px;margin:0;line-height:1}
.ttl__s{font:500 clamp(20px,1.8vw,28px)/1.1 var(--serif);letter-spacing:0;text-transform:none}
.ttl__b{font:900 clamp(40px,5.4vw,84px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.015em}
.ttl--light{color:var(--moon)}
.ttl--story .ttl__b{font-size:clamp(30px,3.4vw,52px);line-height:1}
.soon__body .ttl__b{font-size:clamp(34px,4.2vw,64px)}
.shead{align-items:flex-end}

/* ---------- HERO "pemandangan" ---------- */
.hero--scene{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;color:#fff;background:#1d2026;overflow:hidden;isolation:isolate}
.hero--scene::after{display:none}
.scene__bg{position:absolute;inset:-50px;z-index:-3}
.scene__bg img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.05) brightness(.7)}
.scene__print{position:absolute;top:0;right:0;height:100%;width:auto;max-width:60%;object-fit:cover;object-position:50% 50%;z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.scene__photo{position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity 1.2s var(--ease)}
.scene__photo.on{opacity:1}
.scene__photo img{width:100%;height:100%;object-fit:cover}
/* gelap tipis supaya tulisan putih terbaca (hanya penutup netral di atas gambar) */
.hero--scene::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,14,18,.62) 0,rgba(12,14,18,.25) 55%,rgba(12,14,18,.1) 100%),linear-gradient(0deg,rgba(12,14,18,.7) 0,rgba(12,14,18,0) 32%)}
.scene__in{align-self:center;padding-top:calc(var(--hdr) + 80px);padding-bottom:80px}
.scene__title{margin:0;display:grid}
.scene__small{font:500 clamp(24px,2.6vw,40px)/1.1 var(--serif);margin-left:.15em}
.scene__big{font:900 clamp(60px,10.5vw,176px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.scene__sub{margin:26px 0 0;max-width:44ch;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.88)}
.scene__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:30px}
.scene__dots{position:absolute;right:clamp(14px,2vw,30px);top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0 0 0 12px;display:flex;flex-direction:column-reverse;gap:22px;border-left:1px solid rgba(255,255,255,.45)}
.scene__dots li{font:500 13px/1 var(--serif);color:rgba(255,255,255,.6);writing-mode:vertical-rl;transform:rotate(180deg)}
.scene__dots li.on{color:#fff}
.scene__tate{position:absolute;right:clamp(12px,1.8vw,28px);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font:800 15px/1 var(--jp);letter-spacing:.42em;color:rgba(255,255,255,.75);margin:0}
@media (prefers-reduced-motion:no-preference){
  .scene__print{animation:printIn 2s var(--ease) both}
  .scene__in>*{animation:riseIn .9s var(--ease) both}
  .scene__in>*:nth-child(2){animation-delay:.1s}
  .scene__in>*:nth-child(3){animation-delay:.2s}
}

/* ---------- Header transparen di atas hero (beranda) ---------- */
.nav-over .hdr--over,.nav-over .hdr--over:not(.is-solid){position:absolute;left:0;right:0;top:38px;background:transparent;color:#fff;border:0}
.nav-over .hdr--over:not(.is-solid) .logo__word{color:#fff}
.nav-over .hdr--over .icon-btn:hover{background:rgba(255,255,255,.15)}
.nav-over .hdr--over.is-solid{position:fixed;top:0;background:var(--paper);color:var(--ink)}
.nav-over:not(:has(.announce)) .hdr--over{top:0}
.nav-over .hdr--over:not(.is-solid)::after{content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;background:rgba(255,255,255,.35)}

@media (max-width:900px){
  .scene__print{max-width:none;width:100%;height:62%;object-position:50% 40%;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)}
  .hero--scene::before{background:linear-gradient(0deg,rgba(12,14,18,.85) 0,rgba(12,14,18,.35) 60%,rgba(12,14,18,.15) 100%)}
  .scene__in{align-self:end;padding-top:46svh}
  .scene__tate,.scene__dots{display:none}
}
@media (max-width:560px){
  .scene__big{font-size:56px}
  .ttl__b{font-size:38px}
}