
.mo-hd {
  --mm-bg: #fbf6ee;
  --mm-text: #2e1065;
  --mm-primary: #2d2a7a;
  --mm-overlay-bg: rgba(30, 26, 63, 0.5);
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 4em;
  padding: 0 var(--space-2);
  background: rgba(251, 246, 238, 0.97);
  border-bottom: var(--border-width) solid var(--color-line);
  box-shadow: var(--shadow-sm);
}
.mo-in {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  max-width: var(--wrap);
  margin: 0 auto;
}
.lg-a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--color-ink);
  text-decoration: none;
  flex-shrink: 0;
}
.lg-a:hover { text-decoration: none; }
.lg-im {
  width: 2.5em;
  height: 2.5em;
}
.lg-tx {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.3em;
  letter-spacing: 0.01em;
}
.lg-tx b {
  color: var(--color-rust);
  font-weight: 700;
}
.nv-tg {
  margin-left: auto;
  min-width: 2.75em;
  min-height: 2.75em;
  align-items: center;
  border-radius: var(--radius-sm);
}
.nv-tg span {
  border-radius: 0.125em;
}
.nv-x {
  min-width: 2.75em;
  min-height: 2.75em;
}
.nv-ls { font-family: var(--font-head); font-weight: 600; }
.nv-a {
  color: var(--color-ink);
}
.nv-a:hover { text-decoration: none; }
.nv-it .nv-cta {
  color: var(--accent);
  font-weight: 700;
}


.mg-bt {
  display: none;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75em;
  padding: 0.5em 1em;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-ink);
  border-radius: var(--radius-sm);
}
.mg-bt::after {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
}
.mg-pn {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.mg-h {
  font-family: var(--font-head);
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-rust);
  margin-bottom: 0.2em;
}
.mg-pn .mg-ls {
  display: grid;
  gap: 0;
}
.mg-pn .mg-ln {
  display: block;
  padding: 0.55em 0;
  font-weight: 400;
  font-family: var(--font-body);
  color: var(--color-ink);
  border-bottom: none;
}
.mg-pr { display: none; }
.mg-pr .bt-pr {
  color: var(--color-white);
  padding: 0.6em 1.2em;
  border-bottom: none;
}
.ft-tx { padding: 0.3em 0; }

@media (min-width: 768px) {
  .mo-hd { padding: 0 var(--space-2); font-size: 0.94em; }
  .nv { margin-left: auto; }
  .nv-ls { flex-wrap: nowrap; }
  .nv-it .nv-a { padding: 0.5em 0.7em; }
  .nv-mg { position: static; }
  .mg-bt { display: inline-flex; }
  .mg-pn {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) max(var(--space-4), calc((100% - var(--wrap)) / 2 + var(--space-4)));
    background: var(--color-white);
    border-bottom: 3px solid var(--color-apricot);
    box-shadow: var(--shadow-md);
  }
  .nv-mg.is-open .mg-pn { display: grid; }
  .nv-mg.is-open .mg-bt::after { transform: translateY(0.1em) rotate(225deg); }
  .mg-pn .mg-ln { padding: 0.35em 0; }
  .mg-pn .mg-ln:hover { color: var(--accent); text-decoration: underline; }
  .mg-pr {
    display: block;
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--bg-secondary);
  }
  .mg-pr p { font-size: 0.95em; margin-bottom: 0.8em; }
}
@media (min-width: 1024px) {
  .mo-hd { padding: 0 var(--space-4); font-size: 1em; }
  .nv-it .nv-a { padding: 0.5em 1em; }
}


.mo-ft .side {
  background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  color: var(--color-ink);
}
.side-gr {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.fl-ls {
  counter-reset: fl;
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.fl-it {
  counter-increment: fl;
  position: relative;
  padding-left: 3em;
}
.fl-it::before {
  content: counter(fl);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1em;
  height: 2.1em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--color-white);
  font-family: var(--font-head);
  font-weight: 700;
}
.fl-it strong { display: block; }
.side-pr {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2em 0.6em;
  font-family: var(--font-head);
}
.side-pr strong { font-size: 1.8em; }
.of {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-2);
}
.of h3 { margin-bottom: 0.1em; }


.ft-bd {
  background: var(--color-night);
  color: var(--color-night-text);
  padding: 3em 0 1.5em;
}
.ft-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2em;
}
.ft-br p { font-size: 0.95em; margin-top: var(--space-2); }
.ft-bd .lg-a { color: var(--color-white); }
.ft-bd .lg-tx b { color: var(--color-night-link); }
.ft-h {
  font-family: var(--font-head);
  font-size: 1em;
  color: var(--color-white);
  margin-bottom: 0.7em;
}
.ft-ls { display: grid; gap: 0.1em; }
.ft-ln {
  display: inline-block;
  padding: 0.3em 0;
  color: var(--color-night-link);
}
.ft-ln:hover { color: var(--color-white); }
.ft-nt {
  margin-top: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid rgba(233, 228, 245, 0.18);
  font-size: 0.9em;
}
.ft-bt {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em 1.5em;
  margin-top: var(--space-2);
  font-size: 0.88em;
}
.ft-bt .ft-ln { padding: 0.6em 0; }

@media (min-width: 768px) {
  .side-gr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
  .of { padding: var(--space-4); }
  .ft-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .ft-cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}


.sk-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.6em var(--space-2);
  background: var(--color-night);
  color: var(--color-night-text);
  box-shadow: 0 -0.4em 1.2em rgba(30, 26, 63, 0.18);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.sk-bar.is-off {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.sk-tx {
  font-size: 0.9em;
  line-height: 1.35;
  min-width: 0;
}
.sk-tx strong {
  display: block;
  color: var(--color-white);
  font-family: var(--font-head);
  font-size: 1.1em;
}
@media (min-width: 768px) {
  .sk-bar { justify-content: center; gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-bar { transition: none; }
}

.mg-cl { min-width: 0; }
.nv-ov { cursor: pointer; }
