/* A quiet, cinematic landing layer for the actual YOKAI LANTERN game. */
html body.yokai-detail .yokai-photo { margin: 0; }
html body.yokai-detail .yokai-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
html body.yokai-detail .yokai-photo figcaption { margin-top: 16px; color: #71685e; font-size: .82rem; }
html body.yokai-detail .yokai-index { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 24px 0; margin-top: 32px; border-block: 1px solid #d8cdbd; }
html body.yokai-detail .yokai-index a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
html body.yokai-detail .yokai-story { display: grid; grid-template-columns: 1fr 1.35fr; gap: 56px; padding: 64px 0; border-bottom: 1px solid #d8cdbd; scroll-margin-top: 110px; }
html body.yokai-detail .yokai-story h2 { margin: 12px 0 24px !important; font-size: clamp(1.6rem, 2.7vw, 2.5rem) !important; line-height: 1.6; letter-spacing: 0; }
html body.yokai-detail .yokai-story h3 { margin: 32px 0 12px; font-size: 1.15rem; }
html body.yokai-detail .yokai-story p { margin-top: 0; }
html body.yokai-detail .yokai-keys { margin: 0 0 24px; }
html body.yokai-detail .yokai-keys > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid #d8cdbd; }
html body.yokai-detail .yokai-keys dd { margin: 0; }
html body.yokai-detail .yokai-device-note { font-size: .88rem; }
@media (max-width: 700px) { html body.yokai-detail .yokai-story { grid-template-columns: 1fr; gap: 16px; padding: 40px 0; } html body.yokai-detail .yokai-index { gap: 4px 20px; } }
/* Keep the cafe introduction aligned with the artwork, clear of the fixed header. */
html body.yokai-detail .page-main { width: min(1180px, calc(100% - 48px)); padding-top: 110px; }
html body.yokai-detail .page-hero { width: min(100%, 1050px); margin: 0 auto; padding: 48px 0 56px !important; }
html body.yokai-detail .page-hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.6rem) !important; line-height: 1.35 !important; }
@media (max-width: 700px) {
  html body.yokai-detail .page-main { padding-top: 90px; }
  html body.yokai-detail .page-hero { padding: 28px 0 36px !important; }
  html body.yokai-detail .page-main > section:not(.page-hero) { width: 100%; padding-top: 36px; }
}
.yokai-detail .page-main { width: min(100%, 1440px); padding-top: 0; }
.yokai-detail .page-hero { min-height: min(780px, 76vw); margin: 0; padding: clamp(150px, 19vw, 330px) clamp(30px, 9vw, 150px) clamp(56px, 7vw, 110px); border: 0; border-radius: 0; background: #101d2a url('/assets/yokai-lantern-gameplay.png?v=20260908-works1') center / cover no-repeat; box-shadow: none; }
.yokai-detail .page-hero::before { background: linear-gradient(90deg, rgba(5,12,20,.88), rgba(5,12,20,.64) 39%, rgba(5,12,20,.12) 75%), linear-gradient(0deg, rgba(5,12,20,.88), transparent 54%); }
.yokai-detail .page-hero .label { color: #e8bd72; }
.yokai-detail .page-hero h1 { font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(4.4rem, 9vw, 8.8rem); color: #fff5df; }
.yokai-detail .page-hero > p:last-of-type { max-width: 36rem; color: #e1e7e1; font-size: 1.06rem; }
.yokai-detail .page-hero .button-primary { border-radius: 5px; background: #e8bd72; border-color: #e8bd72; color: #18202a; }
.yokai-detail .page-main > section:not(.page-hero) { width: min(100% - 48px, 1050px); margin: 0 auto; padding: 86px 0; }
.yokai-detail .page-main > section:not(.page-hero) > img { margin-bottom: 56px; border: 1px solid rgba(232,189,114,.28); box-shadow: 0 24px 60px rgba(0,0,0,.36); }
.yokai-detail .page-main > section:not(.page-hero) h2 { margin-top: 64px; color: #fff5df; font-family: "Noto Serif JP", Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); }
.yokai-detail .page-main > section:not(.page-hero) p, .yokai-detail .page-main > section:not(.page-hero) li { max-width: 760px; color: #bdc7d2; line-height: 2; }
.yokai-detail .page-main > section:not(.page-hero) li::marker { color: #e8bd72; }
@media (max-width: 700px) { .yokai-detail .page-hero { min-height: 680px; padding: 130px 24px 54px; background-position: 58% center; }.yokai-detail .page-hero::before { background: linear-gradient(90deg, rgba(5,12,20,.91), rgba(5,12,20,.56)), linear-gradient(0deg, rgba(5,12,20,.9), transparent 58%); }.yokai-detail .page-hero h1 { font-size: clamp(3.5rem, 19vw, 5.7rem); }.yokai-detail .page-main > section:not(.page-hero) { width: min(100% - 32px, 1050px); padding: 58px 0; } }