/* Section layouts, in page order. */

/* Header ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.15;
  text-decoration: none;
}

.brand:hover {
  color: var(--navy);
}

.brand__mark {
  flex: none;
  width: 32px;
  height: 32px;
}

/* organizationLogo from content/site.json, in place of the mark */
.brand__logo {
  flex: none;
  width: auto;
  height: 32px;
}

/* Tagline after the name. Shown only where the menu leaves room for it. */
.brand__tagline {
  display: none;
  color: var(--blue);
  font-family: var(--font-body, inherit);
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  .brand__tagline {
    display: inline;
  }
}

.site-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* "Register" is the last nav item, shown as a button */
.site-nav__cta {
  margin-left: var(--space-2);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: 8px;
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* Each label is as wide as its longest translation; centre the shorter ones in it. */
.site-nav__link .i18n-stable {
  justify-items: center;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* The page you are on (readings.html, food.html): underlined as well as blue */
.site-nav__link[aria-current="page"] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-menu__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.lang-switch {
  display: inline-flex;
  padding: 2px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-btn);
}

.lang-switch__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  font-size: var(--fs-meta);
  cursor: pointer;
}

.lang-switch__btn:hover {
  background: var(--ice);
}

.lang-switch__btn[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
}

.nav-toggle .icon {
  width: 26px;
  height: 26px;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* Over the hero photo: js/main.js adds .is-over-hero while the page is at the top
   and the menu is closed. See-through, with white text like the hero below it. */
.site-header.is-over-hero {
  --focus: var(--white);
  background: transparent;
  border-bottom-color: var(--on-navy-line);
}

.is-over-hero .brand,
.is-over-hero .brand:hover,
.is-over-hero .site-nav__link,
.is-over-hero .site-nav__link:hover,
.is-over-hero .site-nav__link:focus-visible,
.is-over-hero .nav-toggle,
.is-over-hero .lang-switch__btn {
  color: var(--white);
}

/* Same ring colour as the footer logo on navy */
.is-over-hero .brand__mark circle {
  stroke: var(--on-navy-link);
}

.is-over-hero .brand__tagline {
  color: var(--white);
}

.is-over-hero .lang-switch {
  border-color: var(--on-navy-muted);
}

.is-over-hero .lang-switch__btn:hover {
  background: var(--on-navy-line);
}

.is-over-hero .lang-switch__btn[aria-pressed="true"] {
  background: var(--white);
  color: var(--navy);
}

@media (max-width: 1079.98px) {
  .brand__name {
    max-width: 10em;
  }
}

@media (max-width: 879.98px) {
  .nav-toggle {
    display: inline-grid;
  }

  .site-menu {
    position: absolute;
    inset: 100% 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-5);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-2) var(--gutter) var(--space-5);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 32px -24px rgb(11 37 81 / 0.3);
  }

  .site-menu.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__cta {
    margin: var(--space-5) 0 0;
  }

  .site-nav__cta .btn {
    width: 100%;
    min-height: 50px;
    font-size: var(--fs-body);
  }

  .site-nav__link .i18n-stable {
    justify-items: start;
  }

  .site-nav__link {
    display: flex;
    min-height: 52px;
    padding-inline: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: var(--fs-body);
    font-weight: 600;
  }

  .site-menu__actions {
    justify-content: flex-start;
  }
}

/* Hero: navy with the ring illustration, or a photo under a flat navy tint ------ */
/* The hero starts under the sticky header (its height plus the 1px border), so the
   navy (or the photo) also fills the see-through header at the top of the page. */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + 1px));
  padding-top: calc(var(--header-h) + 1px + clamp(56px, 2rem + 7vw, 136px));
  padding-bottom: clamp(56px, 2rem + 7vw, 136px);
  background: var(--navy); /* also shows while the photo loads */
  overflow: hidden;
}

/* The photo slot (npm run content writes a <picture> into it). The tint makes
   white text at least 6.2:1 even on a pure-white patch of any photo. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__media:empty {
  display: none;
}

.hero__media picture,
.hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-scrim);
}

.hero__media .photo-credit {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-3);
  z-index: 1;
  color: var(--white);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

/* With a photo the text gets the full width. Wide enough for the longer English
   date line ("November 12 · Vushtrri", 9.8em of the title size) to stay on one
   line at full size, like the Albanian one. */
.hero__grid:has(> .hero__figure[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.hero__grid:has(> .hero__figure[hidden]) .hero__content {
  max-width: 54rem;
}

.hero__figure {
  justify-self: center;
  width: 100%;
  max-width: 480px;
}

.hero__art {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 959.98px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__figure {
    max-width: 340px;
  }
}

/* On phones the text carries the hero; the illustration would only push it down. */
@media (max-width: 759.98px) {
  .hero__figure {
    display: none;
  }
}

.countdown {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.countdown__clock {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Circle blue square, white number (6.5:1) */
.countdown__days {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--white);
  font-size: 2.125rem;
}

.countdown__text {
  display: grid;
  gap: 2px;
}

.countdown__time {
  letter-spacing: 0.04em;
}

.countdown__live {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
}

.hero__title {
  margin-top: var(--space-6);
}

.hero__title > span {
  display: block;
}

/* No red or Circle blue text on navy. Over the tinted photo the date line uses
   on-navy-muted: 3.7:1 even where the photo is white, enough for display-size text.
   Smaller text in the hero stays white (on-navy-muted would drop below 4.5:1). */
.hero__title-date {
  color: var(--on-navy-muted);
}

.hero__sub {
  max-width: 46rem;
  margin-top: var(--space-5);
}

/* "Ahead of World Diabetes Day, 14 November" */
.hero__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: 1px solid var(--on-navy-line);
}

.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Two-dates strip: our event (ice, blue bar) vs World Diabetes Day (white, navy bar) */
.dates {
  padding-block: var(--space-8);
}

.dates__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.date-card {
  --accent: var(--blue);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(24px, 1rem + 2vw, 40px);
  border-radius: var(--radius-card);
  background: var(--ice);
  overflow: hidden;
}

/* 4px top bar in the accent colour */
.date-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}

.date-card--global {
  --accent: var(--navy);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}

.date-card__ring {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.date-card__title span {
  display: block;
}

.date-card__date {
  color: var(--navy);
  font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  letter-spacing: -0.02em;
}

.date-card__place {
  margin-top: var(--space-1);
}

.date-card__text {
  color: var(--muted);
}

.date-card .btn,
.date-card__link {
  margin-top: auto;
}

.date-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 759.98px) {
  .dates__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Scroll story: the video follows scroll progress ----------------------------- */
/* Hidden until the video files exist. js/story.js sets .is-active on the
   current step. Without JS (no .is-enhanced) or with reduced motion, static. */
.story {
  position: relative;
}

/* About three screens of scrolling on desktop, a little over two on phones. */
.story.is-enhanced {
  height: 300vh;
}

@media (max-width: 767.98px) {
  .story.is-enhanced {
    height: 220vh;
  }
}

.story__stage {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  overflow: hidden;
}

.story.is-enhanced .story__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}

.story__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
}

/* Text overlay: real HTML above the video */
.story__text {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), 960px);
  margin-inline: auto;
  padding-top: var(--space-7);
  text-align: center;
}

.story__steps {
  display: grid;
  gap: var(--space-4);
}

.story__step {
  justify-self: center;
  padding: var(--space-5) var(--space-6);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.85);
}

.story__line {
  max-width: 18em;
  margin-inline: auto;
  color: var(--navy);
}

.story__step .btn {
  margin-top: var(--space-4);
}

/* Scrubbing mode: the steps share one spot and fade/rise between each other. */
.story.is-enhanced .story__steps {
  gap: 0;
}

.story.is-enhanced .story__step {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.story.is-enhanced .story__step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .story.is-enhanced {
    height: auto;
  }

  .story.is-enhanced .story__stage {
    position: relative;
    top: 0;
    height: calc(100vh - var(--header-h));
  }

  .story.is-enhanced .story__steps {
    gap: var(--space-3);
  }

  .story.is-enhanced .story__step {
    grid-area: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Stats band -------------------------------------------------------------- */
.stats {
  padding-block: var(--band-y);
  background: var(--ice);
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
  text-align: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  color: var(--white);
}

/* Navy and Circle blue only: crimson is reserved for action */
.stat--navy .stat__circle {
  background: var(--navy);
}

.stat--blue .stat__circle {
  background: var(--blue);
}

.stat__value {
  display: block;
  font-size: 2.75rem;
  letter-spacing: -0.02em;
}

/* The counting number keeps the width of its final value (js/counters.js). */
.stat__count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* "1 in 9": nine people, one in Circle blue, in the same 172px height as the circles. */
.stat__people {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 172px;
  color: var(--navy);
}

.stat__row {
  display: flex;
  gap: 6px;
}

.stat__person {
  width: 24px;
  height: 40px;
  fill: var(--on-navy-link);
}

.stat__person--one {
  fill: var(--blue);
}

/* Shown one by one once the stat is in view; the highlighted one last. */
.stat__row.is-waiting .stat__person {
  opacity: 0;
}

.stat__row.is-shown .stat__person {
  opacity: 1;
  transition: opacity 300ms ease-out calc(var(--i) * 70ms);
}

.stat__row.is-shown .stat__person--one {
  transition-delay: 760ms;
}

.stat__unit {
  display: block;
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.3;
}

.stat__caption {
  max-width: 17em;
  margin-top: var(--space-4);
}

.stats__source {
  margin-top: var(--space-7);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 759.98px) {
  .stats__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Generic section + section header ------------------------------------------ */
.section {
  padding-block: var(--section-y);
}

.section--soft {
  background: var(--ice);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--space-4) var(--space-7);
  margin-bottom: clamp(48px, 2rem + 3vw, 80px);
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--navy);
}

.section-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section-label__num {
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.section-head .t-lead {
  margin-top: var(--space-5);
  color: var(--muted);
}

.section-head__theme {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.section-head__theme .icon {
  color: var(--blue);
}

@media (max-width: 759.98px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-label {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-3);
  }
}

/* Sub-sections inside a section */
.sub + .sub {
  margin-top: var(--sub-gap);
}

.sub__head {
  margin-bottom: var(--space-6);
}

.sub__intro {
  margin-top: var(--space-3);
  color: var(--muted);
}

/* Ruled content columns ------------------------------------------------------ */
.ruled-cols {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--space-7) var(--space-6);
}

.ruled-cols--4 {
  --cols: 4;
}

.ruled-cols--2 {
  --cols: 2;
}

.ruled-col {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.ruled-col .t-body {
  margin-top: var(--space-2);
  color: var(--muted);
}

.ruled-col__icon {
  margin-bottom: var(--space-4);
  color: var(--blue);
}

/* App features: icons on ice tiles */
.app .ruled-col__icon {
  box-sizing: content-box;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ice);
}

@media (max-width: 959.98px) {
  .ruled-cols--4 {
    --cols: 2;
  }
}

@media (max-width: 759.98px) {
  .ruled-cols,
  .ruled-cols--4,
  .ruled-cols--2 {
    --cols: 1;
  }
}

/* Numbered circle (event cards) */
.num-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 1.625rem;
}

/* About: types of diabetes explainer (type 1 and 2 as lock and key, then the
   other specific types) ------------------------------------------------------ */
.explainer__controls {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.explainer__controls[hidden] {
  display: none;
}

.explainer__other {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.explainer__other-label,
.explainer__group-title {
  color: var(--blue);
}

/* Segmented toggle: a group of pressed/unpressed buttons, like the language switch. */
.explainer__toggle {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-btn);
}

.explainer__option {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.explainer__option .i18n-stable {
  place-items: center;
}

.explainer__option:hover {
  background: var(--ice);
}

.explainer__option[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.explainer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6) var(--space-8);
}

.explainer__scene {
  display: block;
  width: 100%;
  height: auto;
}

.explainer__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
  color: var(--muted);
}

.explainer__legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.explainer__legend svg {
  width: auto;
  height: 16px;
}

/* Without JS every panel shows; with JS only the chosen one. */
.explainer__panel + .explainer__panel {
  margin-top: var(--space-6);
}

.explainer.is-enhanced .explainer__panel + .explainer__panel {
  margin-top: 0;
}

.explainer__group {
  margin-top: var(--space-7);
}

.explainer__group-title {
  margin-bottom: var(--space-2);
}

.explainer.is-enhanced .explainer__group {
  margin-top: 0;
}

.explainer__panel .t-h4 {
  margin-bottom: var(--space-3);
}

/* The scene. Each sugar dot carries its own --wait and --in offsets. */
.explainer__sugar,
.explainer__key,
.explainer__hole {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}

.explainer__sugar {
  transition-delay: calc(var(--i) * 40ms);
}

.explainer__key {
  transform-box: view-box;
}

[data-state="none"] .explainer__sugar,
[data-state="t15"] .explainer__sugar--few,
[data-state="t2"] .explainer__sugar--few {
  transform: var(--in);
}

[data-state="t1"] .explainer__sugar,
[data-state="t15"] .explainer__sugar:not(.explainer__sugar--few),
[data-state="t2"] .explainer__sugar:not(.explainer__sugar--few) {
  transform: var(--wait);
}

/* Keys: in but not turning, in and turned (open), or not there at all. */
[data-state="t2"] .explainer__key {
  transform: translateX(44px);
}

[data-state="none"] .explainer__key,
[data-state="t15"] .explainer__key--turns,
[data-state="t2"] .explainer__key--turns {
  transform: rotate(-90deg) translateX(44px);
}

[data-state="t1"] .explainer__key,
[data-state="t15"] .explainer__key:not(.explainer__key--turns) {
  opacity: 0;
  transform: translateX(-16px);
}

[data-state="none"] .explainer__hole,
[data-state="t15"] .explainer__lock--opens .explainer__hole,
[data-state="t2"] .explainer__lock--opens .explainer__hole {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .explainer__sugar,
  .explainer__key,
  .explainer__hole {
    transition: none;
  }
}

/* The other types' scenes are drawn in their final state. Each shown scene
   (display: none → block) replays its keyframes, from the start state they
   give; with reduced motion there are none. */
.explainer__lost {
  opacity: 0.2;
}

.explainer__beam {
  transform-box: view-box;
  transform-origin: 360px 300px;
  transform: rotate(12deg);
}

@media (prefers-reduced-motion: no-preference) {
  .explainer__pop {
    transform-box: fill-box;
    transform-origin: center;
    animation: explainer-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.2s + var(--d, 0s)) backwards;
  }

  .explainer__lost {
    animation: explainer-fade 0.8s ease 0.8s backwards;
  }

  .explainer__dose {
    animation: explainer-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 120ms) backwards;
  }

  .explainer__extra {
    animation: explainer-appear 0.5s ease calc(0.8s + var(--i) * 80ms) backwards;
  }

  .explainer__level {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: explainer-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s backwards;
  }

  .explainer__beam {
    animation: explainer-tilt 1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards;
  }
}

@keyframes explainer-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes explainer-fade {
  from {
    opacity: 1;
  }
}

@keyframes explainer-drop {
  from {
    opacity: 0;
    transform: var(--from);
  }
}

@keyframes explainer-appear {
  from {
    opacity: 0;
  }
}

@keyframes explainer-rise {
  from {
    transform: scaleY(0.47);
  }
}

@keyframes explainer-tilt {
  from {
    transform: rotate(0deg);
  }
}

@media (max-width: 879.98px) {
  .explainer__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .explainer__figure {
    max-width: 520px;
  }
}

.deflist > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}

.deflist dt {
  padding-top: 1px;
}

.deflist dd {
  color: var(--muted);
}

@media (max-width: 959.98px) {
  .explainer__other,
  .explainer__toggle--other {
    width: 100%;
    max-width: 560px;
  }

  .explainer__toggle--other {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559.98px) {
  .explainer__toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .explainer__toggle--other {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .explainer__option {
    padding: var(--space-2);
    line-height: 1.2;
  }
}

@media (max-width: 479.98px) {
  .deflist > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* About: early warning signs (navy block) ------------------------------------ */
.signs {
  padding: clamp(32px, 1.5rem + 3vw, 64px);
  border-radius: var(--radius-band);
  background: var(--navy);
}

.signs__intro {
  margin-top: var(--space-3);
  color: var(--on-navy-muted);
}

.signs__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin-top: var(--space-6);
}

.signs__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--on-navy-line);
}

.signs__item .icon {
  color: var(--on-navy-link);
}

.signs__item .t-h4 {
  text-wrap: pretty;
}

.signs__advice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-7);
  margin-top: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--on-navy-line);
}

.signs__advice .t-lead {
  font-weight: 600;
}

.signs__children {
  display: flex;
  gap: var(--space-3);
  color: var(--on-navy-muted);
}

.signs__children .icon {
  margin-top: 3px;
}

@media (max-width: 959.98px) {
  .signs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signs__advice {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 559.98px) {
  .signs__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* About: risk-test band (Circle blue; white text only, white button) -------- */
.risk {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5) var(--space-7);
  padding: clamp(32px, 1.5rem + 3vw, 56px);
  border-radius: var(--radius-band);
  background: var(--blue);
  overflow: hidden;
}

.risk__text,
.risk .btn {
  position: relative;
}

.risk__text .t-body {
  margin-top: var(--space-3);
}

.risk__ring {
  position: absolute;
  top: 50%;
  right: -70px;
  width: 260px;
  height: 260px;
  transform: translateY(-50%);
}

@media (max-width: 759.98px) {
  .risk {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .risk__ring {
    top: auto;
    bottom: -150px;
    transform: none;
  }
}

/* Event ------------------------------------------------------------------- */
.event-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  margin-bottom: var(--space-7);
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}

.event-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
}

.event-facts__list dt {
  color: var(--muted);
}

.event-facts__list dd {
  margin-top: var(--space-1);
}

.event-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.event-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--white);
  overflow: hidden;
}

/* 4:3 for the photo; the drawings (2:1) sit centred on the same ice background. */
.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ice);
}

.event-card__media svg {
  display: block;
  width: 100%;
  height: 100%;
}

.event-card__photo-slot {
  position: absolute;
  inset: 0;
}

.event-card__photo-slot:empty {
  display: none;
}

.event-card__photo-slot picture,
.event-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-credit {
  margin: 0;
}

.event-card__photo-slot .photo-credit {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: 6px;
  background: var(--hero-scrim);
  color: var(--white);
}

.event-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(24px, 1rem + 2vw, 40px);
}

.event-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.event-card__text {
  margin-top: var(--space-4);
  color: var(--muted);
}

.notes {
  margin-top: var(--space-5);
}

.notes > div {
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
}

.notes dt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.notes dt .icon {
  color: var(--blue);
}

.notes dd {
  margin-top: 2px;
  padding-left: calc(20px + var(--space-3));
  color: var(--muted);
}

/* "On the day" tips in the walk card */
.tips li {
  position: relative;
  padding-left: 14px;
}

.tips li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.event-card__actions {
  margin-top: auto;
  padding-top: var(--space-6);
}

@media (max-width: 879.98px) {
  .event-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* App ---------------------------------------------------------------------- */
/* Phone mockup under the section label column, features under the heading. */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-7) clamp(48px, 7vw, 128px);
}

.app__phone {
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-top: -48px;
}

.app__notes {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--ice);
}

.app__notes p {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.app__notes .icon {
  color: var(--blue);
}

.app__disclaimer {
  color: var(--muted);
}

/* Links to the SweetPal pages */
.app__tools {
  margin-top: var(--space-6);
}

.app__tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 959.98px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .app__phone {
    max-width: 300px;
    margin-top: 0;
  }
}

@media (max-width: 759.98px) {
  .app__phone {
    margin-inline: auto;
  }
}

/* Registration ------------------------------------------------------------ */
.register__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--space-7) clamp(40px, 6vw, 96px);
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--navy);
}

.register__intro .section-label {
  margin-bottom: var(--space-6);
}

.register__intro .t-lead {
  margin-top: var(--space-5);
  color: var(--muted);
}

.perks {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.perks .icon {
  margin-top: 4px;
  color: var(--blue);
}

.form-card {
  padding: clamp(24px, 1rem + 3vw, 48px);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.form {
  display: grid;
  gap: var(--space-5);
}

.form__intro .t-small {
  margin-top: var(--space-1);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-5);
}

.form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Full width */
.form__submit {
  justify-self: stretch;
}

.form-success {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

.form-success__icon {
  width: 56px;
  height: 56px;
  color: var(--blue);
}

.form-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

@media (max-width: 959.98px) {
  .register__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Partners ------------------------------------------------------------------ */
.partners__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-2);
}

.partners__heading .partners__group-title {
  margin-bottom: 0;
}

.partners__group-title {
  margin-bottom: var(--space-4);
}

.partners__note {
  margin-bottom: var(--space-5);
  color: var(--muted);
}

.partners__idf {
  max-width: 46rem;
}

.partners__event {
  margin-bottom: var(--space-7);
}

.partners__static {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.marquee-toggle .marquee-toggle__play,
.marquee-toggle[aria-pressed="true"] .marquee-toggle__pause {
  display: none;
}

.marquee-toggle[aria-pressed="true"] .marquee-toggle__play {
  display: block;
}

/* Global row. Without JS, and with reduced motion, a static wrapped grid. */
.marquee {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding-block: var(--space-3);
}

.marquee__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Copies exist only for the moving loop. */
.marquee__list > [aria-hidden="true"],
.marquee__list[aria-hidden="true"] {
  display: none;
}

.marquee__list .partner-card {
  width: 100%;
}

/* Moving (js/partners.js adds .is-moving, never with reduced motion): one list
   repeated to fill the width, then that whole list twice in one track; moving
   the track by -50% loops without a jump. */
.marquee.is-moving {
  --marquee-duration: 40s;
  width: auto;
  max-width: 1600px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee.is-moving .marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee.is-moving .marquee__list {
  display: flex;
  padding-right: var(--space-4);
}

.marquee.is-moving .marquee__list > [aria-hidden="true"],
.marquee.is-moving .marquee__list[aria-hidden="true"] {
  display: flex;
}

.marquee.is-moving .partner-card {
  width: 220px;
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.partner-card {
  display: grid;
  place-items: center;
  width: 220px;
  height: 112px;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.partner-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Text tile while there is no logo file: grey, blue on hover like the logos. */
.partner-card__name {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  text-align: center;
  transition: color 0.25s ease;
}

a.partner-card:hover,
a.partner-card:focus-visible {
  border-color: var(--blue);
  transform: translateY(-2px);
}

a.partner-card:hover img,
a.partner-card:focus-visible img {
  filter: none;
  opacity: 1;
}

a.partner-card:hover .partner-card__name,
a.partner-card:focus-visible .partner-card__name {
  color: var(--blue);
}

/* Touch screens have no hover: show colour while the logo is tapped. */
@media (hover: none) {
  a.partner-card:active img,
  a.partner-card:focus img {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 759.98px) {
  .marquee.is-moving {
    --marquee-duration: 30s;
  }

  .marquee__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partner-card,
  .marquee.is-moving .partner-card {
    width: 160px;
    height: 88px;
    padding: var(--space-3) var(--space-4);
  }

  .marquee__list .partner-card {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee.is-moving .marquee__track {
    animation: none;
  }
}

/* Footer (navy) ------------------------------------------------------------ */
.site-footer {
  padding-block: var(--space-9) var(--space-6);
  background: var(--navy);
}

/* White links, underlined on hover and focus (all are standalone list items) */
.site-footer a:not(.social__link) {
  text-decoration: none;
}

.site-footer a:not(.social__link):hover,
.site-footer a:not(.social__link):focus-visible {
  text-decoration: underline;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
}

.footer__brand .brand {
  color: var(--white);
}

/* Same tagline as the header, always shown here, in white on navy */
.footer__brand .brand__tagline {
  display: inline;
  color: var(--white);
  white-space: normal; /* may wrap here: at 320px the footer is narrower than the tagline */
}

.footer__mission {
  max-width: 20em;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  text-wrap: balance;
}

.footer__heading {
  margin-bottom: var(--space-3);
  color: var(--white);
}

.footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.footer__contact .icon {
  color: var(--on-navy-muted);
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-btn);
}

.social__link:hover {
  border-color: var(--white);
  background: var(--white);
}

.on-dark .social__link:hover {
  color: var(--navy);
}

.footer__bottom {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-navy-line);
}

.footer__disclaimer {
  max-width: 62em;
  color: var(--on-navy-muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  color: var(--on-navy-muted);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--fs-small);
}

@media (max-width: 879.98px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559.98px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Privacy & conditions page (privacy.html) ---------------------------------- */
/* Both languages are in the HTML. Its inline script adds .js and sets <html lang>,
   and only the matching text is shown; without JS both show, one after the other. */
html.js[lang="sq"] [data-legal-lang="en"],
html.js[lang="en"] [data-legal-lang="sq"] {
  display: none;
}

html:not(.js) .legal-header .lang-switch {
  display: none;
}

/* Both languages of "Main page" share one cell, so the link keeps its width when
   the language changes. Without JS both are shown: "Faqja kryesore / Main page". */
html:not(.js) .legal-back__label > [data-legal-lang="en"]::before {
  content: " / ";
}

html.js .legal-back__label {
  display: inline-grid;
}

html.js[lang] .legal-back__label > [data-legal-lang] {
  display: block;
  grid-area: 1 / 1;
}

html.js[lang="sq"] .legal-back__label > [data-legal-lang="en"],
html.js[lang="en"] .legal-back__label > [data-legal-lang="sq"] {
  visibility: hidden;
}

.legal-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--fs-small);
}

.legal {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
}

.legal-intro {
  padding-block: var(--space-8) var(--space-7);
  background: var(--ice);
}

.legal-intro .t-lead {
  margin-top: var(--space-4);
  color: var(--muted);
}

.legal-intro__updated {
  margin-top: var(--space-3);
  color: var(--muted);
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.legal__body {
  padding-block: var(--space-7) var(--space-9);
}

.legal__part + .legal__part {
  margin-top: var(--space-8);
}

.legal__part > h2 {
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--navy);
}

.legal__body h3 {
  margin-top: var(--space-6);
}

.legal__body p,
.legal__body ul {
  margin-top: var(--space-3);
}

.legal__body ul {
  padding-left: 1.25em;
  list-style: disc;
}

.legal__body li + li {
  margin-top: var(--space-2);
}

.legal__body li::marker {
  color: var(--blue);
}

.legal-contact {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--ice);
}

.site-footer--slim {
  padding-block: var(--space-6);
}

@media (max-width: 559.98px) {
  /* The logo already links home, so the text link goes on small screens. */
  .legal-back {
    display: none;
  }
}