/* Brand layer, phone menu fix and automatic dark mode. Loaded after the theme files. */
:root {
  color-scheme: light;
  --card: #fffaf2;
  --m-ink: #1d1814;
  --m-fill: #ffffff;
  --ghost: rgba(106, 79, 211, .10);
  --spray: #1d1814;
}

/* ---------- mascot ---------- */
.bl-m { display: block; overflow: visible; }
.bl-m use { pointer-events: none; }
.bar .logo, .foot-grid .logo { display: inline-flex; align-items: center; gap: 10px; }
.bl-mark { width: 40px; height: 38px; flex: none; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.bar .logo:hover .bl-mark { transform: rotate(-12deg) scale(1.12); }
.foot-grid .bl-mark { width: 40px; height: 38px; }

.bl-h1 { display: inline-block; height: .86em; aspect-ratio: 464 / 449; margin-left: .06em; vertical-align: -.04em; animation: bl-dance 3.2s ease-in-out infinite; transform-origin: 50% 85%; }
.bl-h1-m { width: 100%; height: 100%; }
.bl-spray-color { flood-color: var(--spray); }
@keyframes bl-dance {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  25% { transform: rotate(4deg) translateY(-6%); }
  50% { transform: rotate(-2deg) translateY(0); }
  75% { transform: rotate(6deg) translateY(-4%); }
}

.bl-sep-wrap { display: inline-flex; align-items: center; }
.bl-sep { width: .9em; height: .87em; }
#marquee .bl-sep { --m-ink: #1d1814; --m-fill: #fffaf2; width: 1.3em; height: 1.25em; }
#marquee .bl-sep-wrap:nth-child(4n) .bl-sep { transform: scaleX(-1) rotate(-8deg); }
#partner-strip .bl-sep { width: 1.1em; height: 1.05em; }

.foot-cta { position: relative; }
.bl-foot { position: absolute; right: 0; bottom: -10px; width: clamp(130px, 18vw, 280px); transform: rotate(10deg); }
.bl-foot svg { width: 100%; height: auto; }
.bl-foot:hover svg { animation: bl-dance 1.2s ease-in-out infinite; }

/* scroll runner on the header's bottom edge */
.bl-run { position: absolute; left: var(--pad); right: var(--pad); bottom: -1px; height: 26px; pointer-events: none; opacity: 0; transition: opacity .3s; }
#site-header.scrolled .bl-run { opacity: 1; }
.bl-run-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); border-radius: 2px; }
.bl-run-guy { position: absolute; bottom: -2px; left: 0; width: 26px; margin-left: -13px; transition: left .12s linear; }
.bl-runner { width: 26px; height: 25px; animation: bl-hop .5s ease-in-out infinite alternate; }
@keyframes bl-hop { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-3px) rotate(6deg); } }

/* background ghosts */
.bl-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bl-ghost { position: fixed; top: 0; will-change: transform; }
.bl-ghost .bl-m { width: 100%; height: auto; aspect-ratio: 384 / 369; --m-ink: var(--ghost); --m-fill: transparent; }

/* ---------- card numbers off ---------- */
.idx { display: none; }

/* ---------- phone menu ---------- */
.nav-open #site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); border-color: transparent; }
.nav-open .bl-run { opacity: 0 !important; }
@media (max-width: 820px) {
  .bar .logo { position: relative; z-index: 60; }
  .nav { height: 100vh; height: 100dvh; padding: 96px 24px 40px; overflow-y: auto; z-index: 55; }
  .nav .btn { margin-top: 8px; }
  .hero-light h1 { font-size: clamp(38px, 10.2vw, 200px); }
  .bl-foot { position: static; width: 120px; margin-top: 32px; transform: rotate(8deg); }
  .bl-ghost { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-h1, .bl-runner, .bl-foot:hover svg { animation: none !important; }
}

/* ---------- dark mode (follows the phone / computer setting) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #141210;
    --bg-2: #1c1916;
    --card: #1f1b18;
    --ink: #f3eee6;
    --muted: #a99f95;
    --line: rgba(243, 238, 230, .14);
    --accent: #b9a6ff;
    --lilac: #c9b8ff;
    --m-ink: #f3eee6;
    --m-fill: #141210;
    --ghost: rgba(201, 184, 255, .09);
    --spray: #c9b8ff;
  }
  body { background: var(--bg); color: var(--ink); }
  ::selection { background: var(--lilac); color: #141210; }
  #site-header.scrolled { background: rgba(20, 18, 16, .86); }
  .btn { background: var(--lilac); border-color: var(--lilac); color: #141210; }
  .btn:hover { background: var(--ink); border-color: var(--ink); color: #141210; }
  .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(243, 238, 230, .3); }
  .btn-ghost:hover { background: var(--ink); color: #141210; }
  .hero.hero-light { background: radial-gradient(55% 60% at 88% 0%, rgba(140, 110, 240, .35), transparent 70%), radial-gradient(40% 40% at 0% 30%, rgba(201, 184, 255, .08), transparent 70%); }
  .page-hero { background: radial-gradient(50% 70% at 92% 0%, rgba(140, 110, 240, .3), transparent 70%); }
  .hero-photo { background: var(--bg-2); }
  .marquee:has(#marquee) { background: var(--lilac); color: #141210; }
  .marquee:has(#marquee) .track i { color: #141210; }
  #marquee .bl-sep { --m-ink: #141210; --m-fill: var(--lilac); }
  .next-card { background: radial-gradient(60% 90% at 100% 0%, rgba(140, 110, 240, .35), transparent 70%), var(--card); border-color: var(--line); }
  .partners { background: var(--card); }
  .partner:hover { background: var(--lilac); color: #141210; }
  .partner:hover .p-meta, .partner:hover .arrow { color: #141210; }
  .ph { background: radial-gradient(70% 60% at 80% 10%, rgba(255, 255, 255, .25), transparent 70%), linear-gradient(160deg, #3b3160, #8b74e6); }
  .ph span { color: #fff; }
  .cf, .cf-thanks, .cf-skeleton { background: var(--card); border-color: var(--line); }
  .cf input, .cf select, .cf textarea { background: var(--bg); color: var(--ink); border-color: rgba(243, 238, 230, .2); }
  .cf [aria-invalid="true"], .cf-err { border-color: #ff8a7a; color: #ff8a7a; }
  #site-footer { background: var(--bg-2); }
  .edition-media, .g-item { background: var(--bg-2); }
  .nav-open #site-header { background: var(--bg); }
}
/* ---------- accessibility ---------- */
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 14px/1 var(--sans); transition: top .2s; }
.skip:focus { top: 16px; }
main:focus, main[tabindex]:focus-visible { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cf input, .cf select, .cf textarea { border-color: rgba(29, 24, 20, .5); }
.cf input:focus, .cf select:focus, .cf textarea:focus { box-shadow: 0 0 0 3px rgba(106, 79, 211, .35); }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused; }
@media (max-width: 820px) {
  .nav { visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
  .nav-open .nav { visibility: visible; transition: opacity .3s, visibility 0s; }
}
@media (prefers-color-scheme: dark) {
  .cf input, .cf select, .cf textarea { border-color: rgba(243, 238, 230, .45); }
  .cf input:focus, .cf select:focus, .cf textarea:focus { box-shadow: 0 0 0 3px rgba(185, 166, 255, .4); }
}