/* ============================================================
   Frost Science · global chrome
   Utility bar, header, mega menu, drawer, footer, sticky bar.
   ============================================================ */

.fs-page { display: flex; flex-direction: column; min-height: 100dvh; }
.fs-main { flex: 1; }

/* ---------- utility bar ---------- */

.fs-utility {
  background: var(--fs-surface-paper);
  font-size: var(--fs-body-sm);
  border-bottom: 1px solid var(--fs-soldout-border);
}

.fs-utility__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: var(--fs-target-min);
  padding-block: var(--fs-space-2);
}

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

.fs-utility__lang,
.fs-utility__cta {
  font-weight: 700;
  color: var(--fs-link-canvas);
  min-height: var(--fs-target-min);
  display: inline-flex;
  align-items: center;
}

/*
   The storm state. Chartreuse tint with navy ink — 12.4:1 — and it carries a
   word, never a colour alone. It does not retract on scroll; see the header
   rules below, which deliberately do not translate it away.
*/
.fs-utility--storm {
  background: var(--fs-limited-tint);
  border-bottom: 2px solid var(--fs-text);
  font-weight: 500;
}
.fs-utility--storm .fs-utility__cta { color: var(--fs-text); text-decoration: underline; }

/* The member states, applied by the fragment. Purple tint, member ink —
   6.6:1 — and it never overrides the storm state. */
.fs-utility--member,
.fs-utility--lapsing,
.fs-utility--known-non-member { background: var(--fs-member-tint); }
.fs-utility--member .fs-utility__cta,
.fs-utility--lapsing .fs-utility__cta,
.fs-utility--known-non-member .fs-utility__cta { color: var(--fs-member-ink); }

/* ---------- header ---------- */

.fs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fs-surface);
  border-bottom: 1px solid var(--fs-soldout-border);
  transition: box-shadow var(--fs-motion) var(--fs-ease);
}

.fs-header__inner {
  display: flex;
  align-items: center;
  gap: var(--fs-space-5);
  min-height: 84px;
  transition: min-height var(--fs-motion) var(--fs-ease);
}

/* Compressed past 200px and STAYS. It does not hide on scroll-down, because
   a guest scanning a long exhibition page should never scroll up to buy. */
.fs-header.is-compact .fs-header__inner { min-height: 64px; }
.fs-header.is-compact { box-shadow: 0 1px 0 rgb(22 18 63 / .12); }

.fs-header__logo { color: var(--fs-text); text-decoration: none; flex: none; }

.fs-header__wordmark {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  line-height: 1.1;
  display: block;
  max-width: 12ch;
}

.fs-nav { display: none; flex: 1; }
@media (min-width: 1024px) { .fs-nav { display: block; } }

.fs-nav__list { display: flex; gap: var(--fs-space-2); list-style: none; margin: 0; padding: 0; }

.fs-nav__trigger,
.fs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  min-height: var(--fs-target-min);
  padding: var(--fs-space-2) var(--fs-space-3);
  background: none;
  border: 0;
  border-radius: var(--fs-radius-sm);
  font-weight: 500;
  color: var(--fs-text);
  text-decoration: none;
  cursor: pointer;
}

.fs-nav__trigger:hover, .fs-nav__link:hover { background: var(--fs-surface-alt); }
.fs-nav__trigger[aria-expanded='true'] { background: var(--fs-surface-alt); }
.fs-nav__trigger[aria-expanded='true'] .fs-nav__chev { transform: rotate(180deg); }
.fs-nav__chev { transition: transform var(--fs-motion) var(--fs-ease); font-size: .7em; }

/* ---------- mega panel ---------- */

.fs-mega {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--fs-surface);
  border-bottom: 1px solid var(--fs-soldout-border);
  box-shadow: 0 12px 24px -12px rgb(22 18 63 / .25);
}

.fs-mega[hidden] { display: none; }

.fs-mega__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fs-space-4);
  padding-block: var(--fs-space-6);
}

.fs-mega__link {
  display: block;
  padding: var(--fs-space-3);
  border-radius: var(--fs-radius-sm);
  color: var(--fs-text);
  text-decoration: none;
  min-height: var(--fs-target-min);
}
.fs-mega__link:hover { background: var(--fs-surface-alt); color: var(--fs-text); }

.fs-mega__title { display: block; font-weight: 700; }
.fs-mega__desc {
  display: block;
  margin-top: var(--fs-space-1);
  font-size: var(--fs-body-sm);
  color: var(--fs-text-quiet);
  line-height: 1.45;
}

/* ---------- header actions ---------- */

.fs-header__actions { display: flex; align-items: center; gap: var(--fs-space-3); margin-left: auto; }
.fs-header__buy { display: none; }
@media (min-width: 768px) { .fs-header__buy { display: inline-flex; } }

.fs-header__burger {
  width: var(--fs-target-min);
  height: var(--fs-target-min);
  background: none;
  border: 0;
  border-radius: var(--fs-radius-sm);
  cursor: pointer;
  position: relative;
}
@media (min-width: 1024px) { .fs-header__burger { display: none; } }

.fs-header__burger-bars,
.fs-header__burger-bars::before,
.fs-header__burger-bars::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  margin-left: -11px;
  background: var(--fs-text);
  content: '';
}
.fs-header__burger-bars { top: 50%; }
.fs-header__burger-bars::before { top: -7px; margin-left: 0; left: 0; }
.fs-header__burger-bars::after { top: 7px; margin-left: 0; left: 0; }

/* ---------- drawer ---------- */

.fs-drawer { position: fixed; inset: 0; z-index: 200; background: rgb(22 18 63 / .5); }
.fs-drawer[hidden] { display: none; }

.fs-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: min(88vw, 26rem);
  background: var(--fs-surface);
  padding: var(--fs-space-5);
  overflow-y: auto;
  /* Pads for the home indicator, or the last link sits under it. */
  padding-bottom: calc(var(--fs-space-7) + env(safe-area-inset-bottom));
}

.fs-drawer__close {
  min-height: var(--fs-target-min);
  padding-inline: var(--fs-space-4);
  border: var(--fs-control-border) solid var(--fs-text);
  border-radius: var(--fs-radius-pill);
  background: none;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: var(--fs-space-5);
}

.fs-drawer__list, .fs-drawer__sub { list-style: none; margin: 0; padding: 0; }
.fs-drawer__list > li + li { margin-top: var(--fs-space-4); }

.fs-drawer__top {
  display: block;
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--fs-text);
  text-decoration: none;
  min-height: var(--fs-target-min);
}

.fs-drawer__sub { margin-top: var(--fs-space-2); }
.fs-drawer__sub a {
  display: flex;
  align-items: center;
  min-height: var(--fs-target-min);
  color: var(--fs-text-muted);
  text-decoration: none;
}

/* ---------- footer ---------- */

/*
   The footer is navy, and a page whose last block is also navy would meet it
   as one undifferentiated slab — which is the same reader problem the
   "never two adjacent bands" rule exists to prevent, arriving through chrome
   rather than through content.
   A hairline at the join separates them without introducing a new surface.
   It costs nothing on a page that ends on white, because it reads as the
   footer's own top edge.
*/
.fs-site-footer {
  padding-block: var(--fs-space-7);
  border-top: 1px solid rgb(255 255 255 / .18);
}

.fs-site-footer__inner {
  display: grid;
  gap: var(--fs-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .fs-site-footer__inner { grid-template-columns: 1.4fr repeat(3, 1fr); } }

.fs-site-footer__name {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin-bottom: var(--fs-space-3);
}

.fs-site-footer__address, .fs-site-footer__status { font-size: var(--fs-body-sm); }
.fs-site-footer__status { margin-top: var(--fs-space-3); font-weight: 500; }

.fs-site-footer__list { list-style: none; margin: 0; padding: 0; }
.fs-site-footer__list li + li { margin-top: var(--fs-space-1); }
.fs-site-footer__list a {
  display: flex;
  align-items: center;
  min-height: var(--fs-target-min);
  font-size: var(--fs-body-sm);
  color: var(--fs-text-inverse);
  text-decoration: none;
}
.fs-site-footer__list a:hover { text-decoration: underline; }

.fs-site-footer__legal {
  margin-top: var(--fs-space-6);
  padding-top: var(--fs-space-5);
  border-top: 1px solid rgb(255 255 255 / .2);
  font-size: var(--fs-caption);
}

/* ---------- mobile sticky bar ---------- */

.fs-stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  padding: var(--fs-space-3) var(--fs-space-4);
  /* env() keeps it clear of the home indicator. */
  padding-bottom: calc(var(--fs-space-3) + env(safe-area-inset-bottom));
  background: var(--fs-surface);
  border-top: 1px solid var(--fs-soldout-border);
}

@media (min-width: 768px) { .fs-stickybar { display: none; } }

.fs-stickybar__status { font-size: var(--fs-body-sm); font-weight: 500; }
.fs-stickybar__price { display: block; color: var(--fs-text-quiet); }

/* The sticky bar covers the last of the page on mobile. Reserve for it. */
@media (max-width: 767px) {
  .fs-page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ---------- chat launcher ---------- */

.fs-chat-launcher {
  position: fixed;
  right: var(--fs-space-4);
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 95;
  min-height: var(--fs-target-min);
  padding: var(--fs-space-3) var(--fs-space-5);
  border: var(--fs-control-border) solid var(--fs-text);
  border-radius: var(--fs-radius-pill);
  background: var(--fs-surface);
  font-weight: 700;
  cursor: pointer;
}
@media (min-width: 768px) { .fs-chat-launcher { bottom: var(--fs-space-5); } }

/* ---------- breadcrumbs ---------- */

.fs-breadcrumbs { font-size: var(--fs-body-sm); padding-block: var(--fs-space-4); }
.fs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--fs-space-2); list-style: none; margin: 0; padding: 0; }
.fs-breadcrumbs li:not(:last-child)::after { content: '›'; margin-left: var(--fs-space-2); color: var(--fs-text-quiet); }

/* ============================================================
   Site Screens composition
   Lockup, five-section nav, grouped mega panels, sponsor wall,
   four-column footer.
   ============================================================ */

/* ---------- the lockup ---------- */

/*
   Drawn rather than imaged: the dot is the planetarium dome, the drip is the
   aquarium vessel. Both decorative — the wordmark carries the name, and the
   anchor carries an aria-label. Vector sources are still outstanding
   (OPEN-11); when they arrive this is one file.
*/
.fs-lockup {
  display: inline-flex;
  align-items: center;
  gap: .34em;
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--fs-text);
}

.fs-lockup__dot {
  width: .42em;
  height: .42em;
  border-radius: var(--fs-radius-pill);
  background: var(--fs-orange);
  flex: none;
}

.fs-lockup__dot--chartreuse { background: var(--fs-chartreuse); }

.fs-lockup__drip {
  width: .40em;
  height: .52em;
  flex: none;
  background: var(--fs-blue);
  clip-path: path('M7 18C7 18 14 10 14 6.5A7 7 0 1 0 0 6.5C0 10 7 18 7 18Z');
  transform: scale(.55);
  transform-origin: center;
}

.fs-lockup--footer { color: var(--fs-text-inverse); font-size: 1.5rem; }

/* ---------- utility bar ---------- */

/* Navy, not paper. The standing links are chrome above the site rather than
   part of it, and the contrast is 17.61:1. */
.fs-utility {
  background: var(--fs-surface-deep);
  color: var(--fs-text-inverse);
  font-size: var(--fs-body-sm);
  border-bottom: 0;
}

.fs-utility__links { display: flex; flex-wrap: wrap; gap: var(--fs-space-5); }

.fs-utility a,
.fs-utility__login {
  color: var(--fs-text-inverse);
  text-decoration: none;
  min-height: var(--fs-target-min);
  display: inline-flex;
  align-items: center;
}
.fs-utility a:hover { text-decoration: underline; }

/* Chartreuse on navy is 12.27:1 — the one accent that can carry small text
   here, which is why the membership prompt gets it and nothing else does. */
.fs-utility__cta { color: var(--fs-chartreuse); font-weight: 700; }

.fs-utility__sep { opacity: .45; }

@media (max-width: 767px) {
  /* The standing links collapse into the drawer rather than wrapping to three
     rows above the logo. */
  .fs-utility__links { display: none; }
}

/* ---------- header ---------- */

.fs-header__inner { gap: var(--fs-space-6); }

.fs-nav__list { gap: var(--fs-space-1); }

.fs-nav__trigger,
.fs-nav__link { font-size: var(--fs-ui); font-weight: 500; }

.fs-header__status {
  display: none;
  align-items: center;
  gap: var(--fs-space-2);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--fs-available-ink);
}
.fs-header__status[data-state='closed'],
.fs-header__status[data-state='closed-for-day'],
.fs-header__status[data-state='closure'] { color: var(--fs-text-muted); }

@media (min-width: 1024px) { .fs-header__status { display: inline-flex; } }

/* ---------- mega panel ---------- */

.fs-mega__inner {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: var(--fs-space-7);
  align-items: start;
}

.fs-mega__question {
  font-size: var(--fs-body-sm);
  color: var(--fs-text-quiet);
  margin-bottom: var(--fs-space-4);
  font-style: italic;
}

.fs-mega__links > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fs-space-2) var(--fs-space-5);
}

/* The single live promotional slot. Driven by the availability read, so it
   cannot go stale the way a hand-typed banner does. */
.fs-mega__promo {
  padding: var(--fs-space-5);
  border-radius: var(--fs-radius-md);
  background: var(--fs-surface-paper);
}

.fs-mega__promo-head { font-weight: 700; margin-top: var(--fs-space-2); }
.fs-mega__promo-date { font-size: var(--fs-body-sm); color: var(--fs-text-quiet); }

.fs-mega__promo-price {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.1;
  margin-block: var(--fs-space-2);
  font-variant-numeric: var(--fs-numeric);
}

.fs-mega__promo-link { font-weight: 700; font-size: var(--fs-body-sm); color: var(--fs-link-canvas); }

/* ---------- drawer utility ---------- */

.fs-drawer__utility {
  list-style: none;
  margin: var(--fs-space-6) 0 0;
  padding: var(--fs-space-5) 0 0;
  border-top: 1px solid var(--fs-soldout-border);
}
.fs-drawer__utility a {
  display: flex;
  align-items: center;
  min-height: var(--fs-target-min);
  font-size: var(--fs-body-sm);
  color: var(--fs-text-muted);
  text-decoration: none;
}

/* ---------- sponsor wall ---------- */

.fs-sponsors { padding-block: var(--fs-space-7); text-align: center; }
.fs-sponsors__heading { margin-bottom: var(--fs-space-5); color: var(--fs-text-quiet); }

.fs-sponsors__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-6);
}

/*
   Greyscale by default so no single funder's brand colour dominates the row,
   full colour on hover. Opacity stays high enough that the marks remain
   legible — a wall nobody can read is not recognition.
*/
.fs-sponsors__logos img {
  max-width: 150px;
  height: auto;
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--fs-motion) var(--fs-ease), opacity var(--fs-motion) var(--fs-ease);
}
.fs-sponsors__logos li:hover img { filter: none; opacity: 1; }

/* ---------- footer ---------- */

.fs-site-footer__inner { grid-template-columns: 1fr; }
@media (min-width: 768px) { .fs-site-footer__inner { grid-template-columns: 1.5fr repeat(3, 1fr); } }

.fs-site-footer__legal-name { font-weight: 700; margin-top: var(--fs-space-4); }
.fs-site-footer__col .fs-eyebrow { margin-bottom: var(--fs-space-3); }

.fs-site-footer__rule { margin-block: var(--fs-space-6); opacity: .35; }

.fs-site-footer__base {
  display: grid;
  gap: var(--fs-space-5);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) { .fs-site-footer__base { grid-template-columns: minmax(0, 3fr) auto; } }

/* The funder statement is a condition of the grants that pay for the field
   trips, so it is a field rather than template copy. */
.fs-site-footer__funders { font-size: var(--fs-caption); line-height: 1.6; max-width: 68ch; }

.fs-site-footer__accred {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-3);
}
.fs-site-footer__accred li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 52px;
  padding: var(--fs-space-2);
  border: 1px dashed rgb(255 255 255 / .35);
  border-radius: var(--fs-radius-sm);
  font-size: var(--fs-caption);
  text-align: center;
  line-height: 1.2;
}

.fs-site-footer__copyright { margin-top: var(--fs-space-5); font-size: var(--fs-caption); opacity: .8; }