/* Page scaffolding (not part of the Osmo resource) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Osmo Supply — Infinite Dome Grid (resource CSS, unchanged) */
.dome-grid {
  --panel-gap: -2em; /* twice the card radius, negative, so the panel's corners hide behind the image */
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: #000;
  width: 100%;
  height: 100svh;
  position: relative;
  overflow: hidden;
}

.dome-grid[data-dragging] {
  cursor: grabbing;
}

.dome-grid__list {
  grid-template-columns: repeat(5, 1fr);
  gap: 2em;
  width: 100%;
  display: grid;
}

.dome-grid__item {
  --slide: 0;
  --dim: 0;
  aspect-ratio: 1;
  transform-origin: 0 0;
  will-change: transform;
  position: relative;
}

.dome-grid__item[data-lifted] {
  z-index: 10;
}

.dome-grid__item[data-active] .dome-grid__caption {
  opacity: 0;
}

.dome-grid__item .dome-grid__content {
  display: none;
}

.dome-grid__panel {
  pointer-events: none;
  transform: translateX(calc((100% + var(--panel-gap)) * var(--slide)));
  background-color: #fff;
  border-radius: 1em;
  position: absolute;
  inset: 0%;
}

.dome-grid__media {
  background-color: #111;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.dome-grid__image {
  pointer-events: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
  transform: scale(1.1);
}

.dome-grid__caption {
  z-index: 1;
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  pointer-events: none;
  color: #fff;
  transform-style: preserve-3d;
  background-image: linear-gradient(#fff0 40%, #0009);
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.25em;
  transition-property: opacity;
  transition-duration: .35s;
  transition-timing-function: ease-out;
  display: flex;
  position: absolute;
  inset: 0%;
  transform: translateZ(0);
}

.dome-grid__text {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  line-height: 1.2;
}

.dome-grid__text.is--faded {
  opacity: .6;
}

.dome-grid__dim {
  z-index: 1;
  pointer-events: none;
  opacity: var(--dim);
  transform-style: preserve-3d;
  background-color: #000;
  position: absolute;
  inset: 0%;
  transform: translateZ(0);
}

.dome-grid__content {
  grid-row-gap: 1.5em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
  padding: 2.5em;
  display: flex;
}

.dome-grid__title {
  letter-spacing: -.02em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.dome-grid__shade {
  --fx: 50%;
  --fy: 50%;
  opacity: .7;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 25%, #000 75%);
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 25%, #000 75%);
  background-color: #000;
  position: absolute;
  inset: 0%;
}

.dome-grid__cover {
  z-index: 20;
  pointer-events: none;
  background-color: #000;
  transition: opacity .3s ease-out;
  position: absolute;
  inset: 0%;
}

.dome-grid[data-loaded] .dome-grid__cover  {
  opacity: 0;
  pointer-events: none;
}

.dome-grid__lightbox {
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  color: #201d1d;
  top: 50%;
  left: calc(50% + var(--lightbox-gap, 0px) / 2);
  width: var(--lightbox-size, 70vh);
  height: var(--lightbox-size, 70vh);
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: ease-out;
  display: block;
  position: absolute;
  transform: translateY(-50%);
}

.dome-grid__lightbox[data-open] {
  opacity: 1;
  transition: opacity 0.35s ease-out 0.15s;
}

.dome-grid__lightbox-inner {
  top: 0%;
  bottom: 0%;
  right: 0%;
  left: calc(0px - var(--lightbox-gap, 0px));
  overscroll-behavior: contain;
  touch-action: none;
  position: absolute;
  overflow-y: auto;
}

.dome-grid__lightbox[data-open] .dome-grid__lightbox-inner {
  pointer-events: auto;
}

.dome-grid__meta {
  opacity: .6;
  margin-top: 0;
  margin-bottom: 0;
  font-size: .75em;
  line-height: 1.2;
}

.dome-grid__meta.is--faded {
  opacity: .6;
}

@media (orientation: portrait) {
  .dome-grid__panel {
    transform: translateY(calc((100% + var(--panel-gap)) * var(--slide)));
  }

  .dome-grid__lightbox {
    top: calc(50% + var(--lightbox-gap, 0px) / 2);
    left: 50%;
    width: var(--lightbox-size, 80vw);
    height: var(--lightbox-size, 80vw);
    transform: translateX(-50%);
  }

  .dome-grid__lightbox-inner {
    left: 0;
    top: calc(0px - var(--lightbox-gap, 0px));
  }

  .dome-grid__content {
    padding: 2em;
  }
}

@media (max-width: 767px) {
  .dome-grid__item .dome-grid__text.is--faded {
    display: none;
  }
}

/* Page fit (not part of the Osmo resource) */
html, body { height: 100%; background: #000; }
.dome-grid { height: 100vh; height: 100dvh; }

/* The stage can never be scrolled (not part of the Osmo resource): find in page, a text link or a screen reader bringing
   a caption into view would otherwise scroll it and leave every card drawn off by that much (browsers without
   overflow: clip keep the overflow: hidden above) */
.dome-grid {
  overflow: clip;
}

/* High contrast modes keep the dark grid and splash as designed (not part of the Osmo resource) */
.dome-grid,
.splash {
  forced-color-adjust: none;
}

/* A picture with text near its edge (Grassroots' own logo, bottom left) keeps still in its card (script.js) and so needs
   none of the 1.1 scale that hides the card's edge while the others drift: at 1.1 the logo would be cut (not part of
   the Osmo resource) */
.dome-grid__item[data-dome-grid-still] .dome-grid__image {
  transform: none;
}

/* The cards' dates (not part of the Osmo resource): a date that needs two lines breaks after its dash and keeps to the
   card's right edge. The Grassroots card carries its own logo bottom left, so on a card too narrow for the date beside
   it the date sits just above it instead (the logo's top is 15.6 % of the card above its foot). */
.dome-grid__meta {
  text-align: right;
}

.dome-grid__item[data-dome-grid-still] .dome-grid__media {
  container-type: inline-size;
}

@container (max-width: 16em) {
  .dome-grid__item[data-dome-grid-still] .dome-grid__caption {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: calc(15.6% + .5em);
  }

  .dome-grid__item[data-dome-grid-still] .dome-grid__meta {
    text-align: left;
  }
}

/* Smooth motion (not part of the Osmo resource): while the grid moves fast the light opens up around its own centre
   (script.js scales the shade) */
.dome-grid__shade {
  transform-origin: var(--fx) var(--fy);
}

/* A darker background (not part of the Osmo resource): deeper dark edges around a stronger spotlight (was .7) */
.dome-grid__shade {
  opacity: .85;
}

/* Opening and closing a card (not part of the Osmo resource): its text fades in only once the panel has slid out and
   goes at once when it closes, so it never hangs outside the panel */
.dome-grid__lightbox {
  transition-duration: 0s;
}

.dome-grid__lightbox[data-open] {
  transition: opacity .3s ease-out .35s;
}

/* The card's text panel (not part of the Osmo resource): no scrollbar, which on Windows (or a Mac set to always show
   them) would take room from the text; fitText() in script.js makes the text fit, and a wheel still scrolls it */
.dome-grid__lightbox-inner {
  scrollbar-width: none;
}

.dome-grid__lightbox-inner::-webkit-scrollbar {
  display: none;
}

/* On phones a card's small note goes under its title on one line (not part of the Osmo resource): side by side they
   wrapped as "Identity," over "2026" on a card this narrow */
@media (max-width: 767px) {
  .dome-grid__caption {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: .2em;
  }

  .dome-grid__meta {
    font-size: .8em;
    text-align: left;
  }

  /* (here every date sits bottom left, so the Grassroots one always goes above that card's logo) */
  .dome-grid__item[data-dome-grid-still] .dome-grid__caption {
    padding-bottom: calc(15.6% + .5em);
  }
}

/* An opened card's words can be scrolled with a finger when they are longer than the panel (not part of the Osmo
   resource, which never needed it) */
.dome-grid__lightbox-inner {
  touch-action: pan-y;
}