/* =====================================================
   CHECKPOINT JOURNEYS: HANOI
   The background is the CSS gradient .bg-hanoi below.
   ===================================================== */
:root{
  --hanoi-dark:   #493733;
  --hanoi-bright: #c54f34;
  /* how big the pin is, as a fraction of the wordmark's font size */
  --pin-scale: .2;

  /* below the hero the page uses the hero's own palette instead of grey: the same dark brown
     the gradient falls to, with warm light tints for text (each >= 4.5:1 on the ground) */
  --ground:    #493733;
  --ground-up: #3e2f2b;
  --rule:      rgba(255,255,255,.16);
  --ink-mute:  #d2c2bd;
  --ink-faint: #b9a39d;
}
.closer{
  background-image:radial-gradient(ellipse 85% 130% at 50% 122%, rgba(197,79,52,.34) 0%, rgba(197,79,52,0) 66%);
}

/* The Hanoi background, pure CSS: two colours, no image. Put the class on any
   full-bleed element. tests/test_hanoi_gradient.py checks it against the design export. */
.bg-hanoi{
  background-color:#493733;
  background-image:
    radial-gradient(57% 150% at 89.6% 75.8%, rgba(73,55,51,.384) 0%, rgba(73,55,51,.062) 50%, rgba(73,55,51,0) 100%),
    radial-gradient(47.7% 46.9% at 0% 0%, rgba(197,79,52,1) 0%, rgba(197,79,52,.56) 50%, rgba(197,79,52,0) 100%),
    radial-gradient(58.5% 49.8% at 48.1% 33%, rgba(197,79,52,.839) 0%, rgba(197,79,52,.612) 50%, rgba(197,79,52,0) 100%),
    linear-gradient(to bottom, rgba(197,79,52,.768) 0%, rgba(197,79,52,.518) 35%, rgba(197,79,52,.253) 65%, rgba(197,79,52,.038) 100%);
}

.hero-hanoi .lockup{ --wm:clamp(3.1rem, 13vw, 15rem); }
.hero-hanoi .wordmark{ font-size:var(--wm); }
.hanoi-pin{
  display:block; height:auto;
  width:calc(var(--wm) * var(--pin-scale));
  margin-bottom:clamp(.85rem, 2.2vw, 2.25rem);
}
.hero-hanoi .event-meta{ font-size:clamp(.95rem, 1.6vw, 1.2rem); }
.hero-hanoi .lockup-suffix{ font-size:clamp(1.15rem, 2.5vw, 2.3rem); color:var(--ink); }
.hero-hanoi .btn{ border-color:rgba(255,255,255,.75); }
.hero-hanoi .btn-quiet{ color:var(--ink); border-color:rgba(255,255,255,.4); }
@media (max-width: 620px){
  .hero-hanoi .lockup{ --wm:clamp(2.9rem, 15.5vw, 5rem); }
  .hanoi-pin{ margin-inline:auto; width:calc(var(--wm) * .3); }
}

.sp-rows .what:empty{ display:none; }
.sp-rows li:has(.what:empty){ grid-template-columns:1fr; }