/* ====================================================================
   Dzapig shared chrome.
   The bar, the ticker and the buttons, used by BOTH the front page and
   the characters and lore page, so the two cannot drift apart.
   Interiors are free to differ: the front page is a bright cutlist, the
   lore page keeps its watercolour village.

   Palette is taken from the logo, which is the Armenian tricolour.
   ==================================================================== */
:root {
  --dz-red:    #F01818;
  --dz-blue:   #0840A8;
  --dz-orange: #F89800;
  --dz-yellow: #FFD640;
  --dz-cream:  #FEF4DC;
  --dz-ink:    #12203A;

  --dz-display: "Fredoka", system-ui, sans-serif;
  --dz-text:    "Nunito", system-ui, sans-serif;

  --bar-h: 68px;
}

/* one fixed block: bar + ticker. Its height is measured at runtime and
   published as --chrome-h, because it wraps to two rows on narrow screens
   and a hardcoded offset puts headings underneath it. */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: 60; }

.bar {
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1rem;
  padding: 0 clamp(0.75rem, 2.5vw, 1.5rem);
  background: var(--dz-blue);
  border-bottom: 4px solid var(--dz-ink);
}
.bar__brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.bar__brand img { width: 44px; height: 44px; border-radius: 12px; display: block; }
.bar__brand b {
  font-family: var(--dz-display); font-weight: 600; font-size: 1.3rem;
  color: #fff; letter-spacing: -0.01em;
}

.bar__cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.05rem; border-radius: 999px;
  background: var(--dz-red); color: #fff; text-decoration: none;
  border: 3px solid #fff;
  font-family: var(--dz-display); font-weight: 600; font-size: 1.05rem;
  white-space: nowrap;
}
.bar__cta:hover { background: #fff; color: var(--dz-red); border-color: var(--dz-red); }

/* the lore page puts section links where the front page collects the gang */
.bar__nav { display: flex; align-items: center; justify-content: center; gap: 0.3rem; flex-wrap: wrap; }
.bar__nav a {
  font-family: var(--dz-display); font-weight: 500; font-size: 1rem;
  color: #fff; text-decoration: none;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 2px solid transparent;
}
.bar__nav a:hover,
.bar__nav a[aria-current="true"] { border-color: #fff; background: rgb(255 255 255 / 0.14); }

/* the marquee of little words */
.ticker {
  background: var(--dz-yellow); border-bottom: 4px solid var(--dz-ink);
  overflow: hidden; height: 38px;
}
.ticker__run {
  display: flex; gap: 2.2rem; white-space: nowrap;
  padding: 0.35rem 0;
  font-family: var(--dz-display); font-weight: 600; font-size: 1rem;
  color: var(--dz-ink);
  animation: dz-run 26s linear infinite;
  will-change: transform;
}
.ticker__run span { flex: none; }
@keyframes dz-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the button, shared so a CTA looks the same on both pages */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; border-radius: 999px;
  font-family: var(--dz-display); font-weight: 600; font-size: 1.15rem;
  text-decoration: none; border: 4px solid var(--dz-ink);
  background: var(--dz-red); color: #fff;
  box-shadow: 0 6px 0 var(--dz-ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--dz-ink); }
.btn--y { background: var(--dz-yellow); color: var(--dz-ink); }
.btn--w { background: #fff; color: var(--dz-ink); }

@media (max-width: 760px) {
  :root { --bar-h: 60px; }
  .bar { grid-template-columns: auto 1fr; row-gap: 0.4rem; height: auto; padding-block: 0.5rem; }
  .bar__cta { padding: 0.5rem 0.85rem; font-size: 0.95rem; }
  .bar__nav { order: 3; grid-column: 1 / -1; justify-content: flex-start; }
  .bar__nav a { font-size: 0.9rem; padding: 0.3rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__run { animation: none; }
}