/* Poster hero: calm editorial type, one schedule row, and a foreground CTA. */
.hero { position:relative; isolation:isolate; min-height:100svh; padding:0; overflow:hidden; color:#fff; background:#10242d; }
.hero .hero-grid { position:static; display:flex; align-items:flex-start; justify-content:center; width:min(1120px,calc(100% - 64px)); min-height:100svh; padding:clamp(110px,20svh,216px) 0 100px; gap:0; }
.hero .hero-copy { position:relative; z-index:2; display:block; width:min(680px,100%); max-width:none; margin-top:24px; padding:0; text-align:center; }
.hero h1 { color:#fff; font-family:"Noto Serif JP",serif; font-size:clamp(48px,4.1vw,60px); font-weight:600; line-height:1.28; letter-spacing:-.04em; white-space:normal; text-shadow:none; }
.hero .hero-line { white-space:nowrap; }
.hero .hero-lead { max-width:600px; margin:14px auto 0; color:rgba(255,255,255,.84); font-size:13px; line-height:1.85; font-weight:400; text-shadow:none; }
.hero .hero-meta { display:grid; grid-template-columns:auto 1fr auto; align-items:center; width:min(460px,100%); gap:16px; margin:18px auto 0; padding:11px 0; border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.18); }
.hero .hero-meta .next-date { display:contents; color:#fff; }
.hero .hero-meta .next-date strong { padding:0; color:rgba(255,255,255,.62); background:none; font-size:11px; line-height:1.5; font-weight:500; white-space:nowrap; }
.hero .hero-meta .next-date > span { font-size:13px; line-height:1.5; font-weight:500; text-align:center; white-space:nowrap; }
.hero .photo-label { position:static; display:block; width:auto; padding:0 0 0 14px; color:#fff; border:0; border-left:1px solid rgba(255,255,255,.28); border-radius:0; background:none; box-shadow:none; transform:none; }
.hero .photo-label b { font:500 14px/1.5 "Noto Sans JP",sans-serif; }
.hero .photo-label span { display:none; }
.hero .hero-actions { position:absolute; z-index:2; isolation:isolate; inset-inline:24px; bottom:max(22px,env(safe-area-inset-bottom)); width:auto; margin:0; align-items:center; flex-direction:column; gap:10px; }
.hero .primary-cta { display:flex; align-items:center; justify-content:center; gap:10px; width:min(380px,100%); min-width:0; min-height:58px; padding:14px 16px; border-radius:18px; background:#ffdf32; color:#102024; font-size:19px; line-height:1.4; font-weight:700; letter-spacing:.01em; white-space:nowrap; box-shadow:none; }
.hero .primary-cta::after { display:none; }
.hero .cta-arrow { margin-left:4px; font-size:18px; }
.hero .cta-line-icon { width:27px; height:27px; }
.hero .hero-note { width:100%; color:rgba(255,255,255,.74); font-size:11px; line-height:1.6; font-weight:400; text-align:center; }
.hero .hero-visual { position:absolute; inset:0; z-index:-1; display:block; min-height:0; height:auto; margin:0; }
.hero .hero-photo { inset:0; border-radius:0; box-shadow:none; }
.hero .hero-photo img { width:100%; object-position:center; }
.hero .hero-photo::after { background:linear-gradient(180deg,rgba(3,20,30,.08),transparent 45%,transparent 70%,rgba(3,20,30,.42) 80%,rgba(3,20,30,.82) 90%,rgba(3,20,30,.99)); }
.hero .hero-tags { display:none; }
.hero .hero-actions::before { content:""; position:absolute; z-index:-1; inset:-72px -24px calc(-1 * max(22px,env(safe-area-inset-bottom))); background:linear-gradient(180deg,rgba(0,0,0,0),#000 60px); pointer-events:none; }

body:not([data-hero-variant="1"]) .site-header .logo-image { filter:brightness(0) invert(1); }
body:not([data-hero-variant="1"]) .site-header .desktop-nav > a:not(.header-cta) { color:#fff; }
body:not([data-hero-variant="1"]) .site-header .menu-button span,
body:not([data-hero-variant="1"]) .site-header .menu-button::before,
body:not([data-hero-variant="1"]) .site-header .menu-button::after { background:#fff; }
body:not([data-hero-variant="1"]).menu-open .site-header { background:#10242d; }

@media (min-width:981px) {
  .hero .hero-grid { padding-top:clamp(82px,10.5svh,114px); }
  .hero h1 { font-size:clamp(42px,3.1vw,48px); line-height:1.22; }
  .hero .hero-lead { margin-top:12px; line-height:1.7; }
  .hero .hero-meta { margin-top:14px; padding-block:9px; }
}
@media (min-width:981px) and (max-height:800px) {
  .hero .hero-grid { padding-top:64px; }
  .hero h1 { font-size:clamp(38px,3.05vw,44px); line-height:1.2; }
  .hero .hero-lead { font-size:11.5px; margin-top:10px; }
  .hero .hero-meta { margin-top:12px; padding-block:7px; }
}
@media (max-width:980px) and (orientation:portrait) {
  .hero .hero-grid { padding-top:clamp(100px,calc(15svh - 12px),138px); }
  .hero h1 { font-size:clamp(40px,6vw,48px); }
}
@media (max-width:720px) {
  .hero .hero-grid { width:calc(100% - 48px); padding:clamp(100px,calc(15svh - 12px),138px) 0 100px; }
  .hero h1 { font-size:clamp(28px,8.8vw,42px); }
  .hero .hero-lead { font-size:clamp(12px,3.1vw,13px); }
  .hero .hero-meta { width:min(260px,calc(100% - 48px)); gap:10px; }
  .hero .hero-meta .next-date > span { font-size:12px; }
  .hero .photo-label { padding-left:10px; }
  .hero .primary-cta { width:100%; font-size:clamp(15px,4.4vw,19px); }
}
@media (max-width:720px) and (max-height:800px) {
  .hero .hero-grid { padding-top:clamp(86px,14svh,112px); }
  .hero .hero-photo img { object-position:center top; }
  .hero h1 { font-size:clamp(28px,8.5vw,32px); }
  .hero .hero-lead { margin-top:12px; font-size:11.5px; }
  .hero .hero-meta { margin-top:14px; padding-block:9px; }
  .hero .primary-cta { min-height:54px; padding-block:12px; }
}
/* Fit the dinner table above the CTA on short phones such as iPhone SE. */
@media (max-width:720px) and (max-height:740px) and (orientation:portrait) {
  .hero .hero-grid { padding-top:clamp(64px,12svh,82px); }
  .hero .hero-copy { margin-top:clamp(0px,calc(35svh - 210px),24px); }
  .hero .hero-photo img { object-position:center 43%; }
  .hero h1 { font-size:clamp(24px,min(7.6vw,4.3svh),28px); line-height:1.2; }
  .hero .hero-lead { margin-top:8px; line-height:1.6; }
  .hero .hero-meta { margin-top:8px; padding-block:6px; }
  .hero .hero-actions::before { top:-48px; background:linear-gradient(180deg,transparent,#000 36px); }
}
@media (max-width:720px) and (max-height:600px) and (orientation:portrait) {
  .hero .hero-grid { padding-top:56px; }
  .hero .hero-photo img { object-position:center 57%; }
}
@media (max-width:360px) {
  .hero .primary-cta { gap:8px; padding-inline:12px; }
}

@media (max-width:720px) and (orientation:portrait) {
  .hero .hero-lead, .hero .hero-meta { margin-top:clamp(14px,2.4svh,22px); }
}