.marquee {
  /* Everything is tuned from these four values. */
  --marquee-gap: 2rem;        /* space between items                      */
  --marquee-duration: 60s;    /* one full cycle                            */
  --marquee-size: 1.15rem;    /* item text size                            */
  --marquee-pad: 0.4rem;      /* breathing room above and below            */

  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: var(--marquee-pad);
  border-block: 1px solid var(--line, rgba(224, 244, 190, .12));
  background: var(--bg-2, #10150c);

  /* Stops a stray horizontal drag on touch devices. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: var(--marquee-gap);
  width: max-content;
  animation: catalyx-marquee var(--marquee-duration) linear infinite;

  /* Hints the compositor without pinning a very wide layer in memory,
     which is what stalls long marquees on older phones. */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* THE FIX.
   The track holds two copies of the list — 50 items with 49 gaps between
   them. Shifting by -50% lands half a gap short of the seam, so the strip
   jolts 24px once per cycle. Subtracting half a gap cancels it exactly,
   whatever the item widths are. */
@keyframes catalyx-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0); }
}

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--marquee-size);
  line-height: 1.2;
  color: var(--ink-3, #94a382);
  white-space: nowrap;
}

.marquee span::after {
  content: "✦";
  color: var(--accent, #d7f25a);
  font-size: .7em;
}


/* ---------------------------------------------------------------------------
   Tablet and mobile

   The text is smaller here, so the strip is physically shorter — the duration
   comes down with it to hold the reading speed steady rather than crawling.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .marquee {
    --marquee-gap: 2.25rem;
    --marquee-duration: 42s;
    --marquee-size: 1.02rem;
    --marquee-pad: .95rem;
  }
}

@media (max-width: 560px) {
  .marquee {
    --marquee-gap: 1.6rem;
    --marquee-duration: 30s;
    --marquee-size: .95rem;
    --marquee-pad: .85rem;
  }
}


/* ---------------------------------------------------------------------------
   Pausing
   --------------------------------------------------------------------------- */

/* Hovering to read a name, or tabbing into the strip, holds it still. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

/* Add class="is-paused" (the optional script does this) to stop it. */
.marquee.is-paused .marquee-track {
  animation-play-state: paused;
}


/* ---------------------------------------------------------------------------
   Reduced motion

   Someone who has asked their phone or laptop to cut animation gets a strip
   they can swipe through instead — still complete, just not moving on its own.

   If you would rather it always animate, add the class `marquee--always` to
   the element. Think twice: for a visitor with vestibular sensitivity,
   motion sickness from a page is a real symptom, not an inconvenience.
   --------------------------------------------------------------------------- */

 
@media (prefers-reduced-motion: reduce) {
 
  /* Slow drift for everyone who asked for calmer motion. */
  .marquee:not(.marquee--respect-motion) {
    --marquee-duration: 170s;
  }
 
  @media (max-width: 901px) {
    .marquee:not(.marquee--respect-motion) { --marquee-duration: 120s; }
  }
 
  @media (max-width: 560px) {
    .marquee:not(.marquee--respect-motion) { --marquee-duration: 90s; }


/* ---------------------------------------------------------------------------
   Optional extras — add the class to the marquee element to switch on
   --------------------------------------------------------------------------- */

/* Soft fade at both ends, so items appear and vanish rather than being
   sliced off by the edge of the screen. */
.marquee--fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Run it the other way. */
.marquee--reverse .marquee-track {
  animation-direction: reverse;
}

/* Accent-coloured items instead of muted. */
.marquee--accent span {
  color: var(--accent, #d7f25a);
}

/* The pause button the optional script adds. */
.marquee-toggle {
  position: absolute;
  inset-inline-end: .6rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line, rgba(224, 244, 190, .12));
  border-radius: 999px;
  background: var(--bg-2, #10150c);
  color: var(--ink-3, #94a382);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s, color .25s, border-color .25s;
}

.marquee:hover .marquee-toggle,
.marquee:focus-within .marquee-toggle,
.marquee-toggle:focus-visible {
  opacity: 1;
}

.marquee-toggle:hover {
  color: var(--accent, #d7f25a);
  border-color: var(--accent, #d7f25a);
}

@media (hover: none) {
  /* No hover on touch, so keep it visible. */
  .marquee-toggle { opacity: .75; }
}

.mobile-menu {
    position: fixed;
    inset: 0;
}

.mobile-menu.closed {
    display: none;
}
		
		img { max-width: 100%; height: auto; }
		.card { position: relative; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--shadow-lg); opacity: 0;
  transition: opacity .22s var(--ease); pointer-events: none;
}
.card:hover::after { opacity: 1; }
		/* AETHERIS PRODUCTS PAGE ONLY */

#inside .wrap {
    width: min(1500px, calc(100% - 48px));
    max-width: 1500px;
}

#inside .shotpair {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.75fr);
    gap: 70px;
    align-items: center;
}

#inside .shotpair.flip {
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.5fr);
}

#inside .shotwrap {
    width: 100%;
    max-width: none;
}

#inside .shotwrap img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}
		/* Reduce overall page width */
.wrap {
    width: min(100% - 40px, 1200px);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}