/* ==========================================================================
   MoMoZen shared stylesheet — tokens, type, header, footer, accessibility
   Load after a page's own <style> so shared components win.
   ========================================================================== */

:root {
  /* Brand color */
  --mz-navy: #0d1221;
  --mz-navy-2: #111827;
  --mz-navy-3: #1a2035;
  --mz-gold: #c9a961;
  --mz-gold-deep: #a88a3e;
  --mz-gold-light: #d4b86a;
  --mz-sage: #7a8b76;
  --mz-terracotta: #c85a3c;
  --mz-text: #eceef2;
  --mz-text-2: #bec3ce;
  --mz-text-3: #8d95a5;
  --mz-line: rgba(201, 169, 97, 0.18);
  --mz-line-strong: rgba(201, 169, 97, 0.35);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace;
  --font-jp: 'Noto Sans JP', sans-serif;

  --fs-label: 12px;   /* floor for any text on the site */
  --fs-small: 14px;
  --fs-ui: 15px;
  --fs-body: 18px;

  --mz-header-h: 72px;
}

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--mz-gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}
.mz-skip {
  position: absolute; left: 16px; top: -60px; z-index: 2000;
  background: var(--mz-gold); color: var(--mz-navy);
  font: 500 var(--fs-small)/1 var(--font-ui);
  padding: 12px 16px; border-radius: 2px; text-decoration: none;
}
.mz-skip:focus { top: 12px; }
.mz-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Header ---------- */
.mz-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  background: linear-gradient(to bottom, rgba(13, 18, 33, 0.92), rgba(13, 18, 33, 0));
  transition: background-color 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.mz-header.is-scrolled,
.mz-header.is-open {
  background: rgba(13, 18, 33, 0.96);
  border-bottom-color: var(--mz-line);
}
.mz-header.is-open { background: var(--mz-navy); }
.mz-header__inner {
  max-width: 1200px; margin: 0 auto; height: var(--mz-header-h); box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 32px;
}
.mz-header__inner > .mz-brand { justify-self: start; }
.mz-header__inner > .mz-actions { justify-self: end; }
.mz-brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0;
}
.mz-brand img { height: 36px; width: auto; }
.mz-brand__word {
  font: 500 15px/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mz-gold);
}
.mz-nav { display: flex; align-items: center; gap: 4px; }
.mz-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mz-nav__item { position: relative; }
.mz-nav__link,
.mz-nav__toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 14px; border: 0; background: none; cursor: pointer;
  font: 400 var(--fs-ui)/1 var(--font-ui); letter-spacing: 0.03em;
  color: var(--mz-text-2); text-decoration: none; transition: color 0.2s;
}
.mz-nav__link:hover, .mz-nav__toggle:hover,
.mz-nav__link[aria-current="page"], .mz-nav__toggle[aria-expanded="true"] { color: var(--mz-gold-light); }
.mz-nav__toggle svg { width: 10px; height: 10px; transition: transform 0.2s; }
.mz-nav__toggle.is-current { color: var(--mz-gold); }
.mz-menu a[aria-current="page"] { background: rgba(201, 169, 97, 0.1); }
.mz-menu a[aria-current="page"] .mz-menu__name { color: var(--mz-gold-light); }
.mz-panel a[aria-current="page"] { color: var(--mz-gold-light); }
.mz-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mz-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px;
  background: var(--mz-navy-2); border: 1px solid var(--mz-line-strong); border-radius: 4px;
  padding: 8px; list-style: none; margin: 0;
}
.mz-menu[hidden] { display: none; }
.mz-menu a {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 12px;
  padding: 10px 12px; border-radius: 3px; text-decoration: none; color: var(--mz-text);
}
.mz-menu a:hover, .mz-menu a:focus-visible { background: rgba(201, 169, 97, 0.08); }
.mz-menu__kanji { font: 400 18px/1 var(--font-jp); color: var(--mz-gold); text-align: center; }
.mz-menu__name { font: 400 var(--fs-ui)/1.3 var(--font-ui); }
.mz-menu__desc { grid-column: 2; font: 400 13px/1.4 var(--font-ui); color: var(--mz-text-3); }
.mz-menu__all { border-top: 1px solid var(--mz-line); margin-top: 6px; padding-top: 6px; }
.mz-menu__all a { display: block; font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--mz-gold); }

.mz-actions { display: flex; align-items: center; gap: 8px; }
.mz-signin {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px;
  border: 1px solid var(--mz-line-strong); border-radius: 2px;
  font: 400 var(--fs-small)/1 var(--font-ui); letter-spacing: 0.06em;
  color: var(--mz-gold); text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.mz-signin:hover { border-color: var(--mz-gold); color: var(--mz-gold-light); }

.mz-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--mz-line-strong); border-radius: 2px; cursor: pointer;
  color: var(--mz-gold);
}
.mz-burger svg { width: 20px; height: 20px; }

/* Mobile panel */
.mz-panel {
  display: none; border-top: 1px solid var(--mz-line); background: var(--mz-navy);
  max-height: calc(100vh - var(--mz-header-h)); overflow-y: auto;
  padding: 8px 24px 28px;
}
.mz-panel__group { padding: 16px 0; border-bottom: 1px solid var(--mz-line); }
.mz-panel__group:last-child { border-bottom: 0; }
.mz-panel__heading {
  font: 500 var(--fs-label)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mz-text-3); margin: 0 0 8px;
}
.mz-panel ul { list-style: none; margin: 0; padding: 0; }
.mz-panel a {
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  font: 400 17px/1.2 var(--font-ui); color: var(--mz-text); text-decoration: none;
}
.mz-panel a .mz-menu__kanji { width: 24px; }
.mz-panel .mz-signin { margin-top: 12px; justify-content: center; min-height: 48px; }

@media (max-width: 960px) {
  .mz-header__inner { padding: 0 20px; height: 64px; grid-template-columns: 1fr auto; }
  :root { --mz-header-h: 64px; }
  .mz-nav, .mz-actions .mz-signin { display: none; }
  .mz-burger { display: inline-flex; }
  .mz-header.is-open .mz-panel { display: block; }
}
@media (max-width: 340px) {
  .mz-header .mz-brand__word { display: none; }
}

/* ---------- Shared page components: phone fixes ---------- */
@media (max-width: 600px) {
  .transit-footer-line { flex-wrap: wrap; gap: 8px 16px; }
  .transit-footer-line > * { min-width: 0; }
}

/* ---------- Page sub-navigation (e.g. poster pages) ---------- */
.mz-subnav {
  margin-top: var(--mz-header-h);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px;
  padding: 16px 20px 28px;
}
.mz-subnav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--mz-line-strong); border-radius: 2px;
  font: 400 var(--fs-small)/1 var(--font-ui); letter-spacing: 0.04em;
  color: var(--mz-gold); text-decoration: none; transition: border-color 0.2s, color 0.2s;
}
.mz-subnav a:hover { border-color: var(--mz-gold); color: var(--mz-gold-light); }

/* ---------- Print: shared chrome never prints ---------- */
@media print {
  .mz-skip, .mz-header, .mz-footer, .mz-subnav { display: none !important; }
}

/* ---------- Footer ---------- */
.mz-footer {
  border-top: 1px solid var(--mz-line); margin-top: 48px;
  padding: 56px 0 32px; color: var(--mz-text-2);
}
.mz-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.mz-footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
}
.mz-footer__brand p {
  font: 300 italic 20px/1.4 var(--font-display); color: var(--mz-text-2); margin: 16px 0 0; max-width: 28ch;
}
.mz-footer h2 {
  font: 500 var(--fs-label)/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mz-gold); margin: 0 0 16px;
}
.mz-footer ul { list-style: none; margin: 0; padding: 0; }
.mz-footer li + li { margin-top: 4px; }
.mz-footer a {
  display: inline-flex; align-items: center; min-height: 32px;
  font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--mz-text-2); text-decoration: none;
  transition: color 0.2s;
}
.mz-footer a:hover { color: var(--mz-gold-light); }
.mz-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--mz-line);
  font: 400 13px/1.6 var(--font-ui); color: var(--mz-text-3);
}
.mz-footer__legal p { margin: 0; max-width: 70ch; }
.mz-footer__policies a { min-height: 0; font-size: 13px; color: var(--mz-text-2); }
@media (max-width: 860px) {
  .mz-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mz-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .mz-footer { padding: 40px 0 28px; }
  .mz-footer__inner { padding: 0 20px; }
}