/* Moments of an evening (19.10.2026). Built for the Tangled page and its Corona layer, written in its tokens with
   plain fallbacks so it could serve another page. Pictures keep their own shape: a row is a flex line where every
   picture grows by its aspect ratio, so they share one height and nothing is cropped. Phones get one picture per line
   for wide rows. No glass, no glow on every card: hairline gold, warm light, room to breathe. */
.mo { --mo-gold: var(--c-gold, #f6c453); --mo-cream: var(--c-cream, #fff4dc); --mo-lilac: var(--c-lilac, #eaa7df); --mo-deep: var(--c-deep, #170a30); --mo-royal: var(--c-royal, #5b2a9e);
  position: relative; padding: clamp(70px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); color: var(--mo-cream); isolation: isolate;
  background: radial-gradient(70vmax 40vmax at 80% 0%, rgba(255, 179, 71, 0.12), transparent 70%), radial-gradient(60vmax 50vmax at 0% 60%, rgba(91, 42, 158, 0.28), transparent 70%); }
.mo::before { content: ''; position: absolute; inset: 0 0 auto; height: 36px; background: var(--c-bunting) center top / 64px 36px repeat-x; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); opacity: .95; }
.mo-wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }

.mo-head { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 80px); text-align: center; }
.mo-kicker { display: inline-block; margin: 0 0 12px; padding: 6px 16px 7px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; color: var(--mo-cream);
  background: linear-gradient(90deg, rgba(91, 42, 158, 0.7), rgba(58, 22, 112, 0.55)); box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.5); }
.mo-head h2 { margin: 0 0 14px; font-family: var(--font-hand, cursive); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; color: var(--mo-gold); text-wrap: balance; }
.mo-lead { margin: 0 auto; max-width: 560px; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.7; color: rgba(255, 244, 220, 0.88); text-wrap: pretty; }
.mo-credits { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 18px 0 0; padding: 0; font-size: 0.9rem; color: rgba(255, 244, 220, 0.7); }
.mo-credits li::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px; background: var(--c-sun) center / contain no-repeat; }

/* ---------- an act: a short title, a line, then the pictures ---------- */
.mo-act { margin: 0 0 clamp(64px, 9vw, 120px); }
.mo-act-h { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; max-width: 680px; margin: 0 0 22px; }
.mo-act-1 .mo-act-h { margin-inline-start: auto; }   /* every other act starts from the other side of the page */
.mo-n { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 54px; height: 54px; font: 700 1rem/1 var(--font, sans-serif); color: var(--mo-deep);
  background: var(--c-sun) center / contain no-repeat; }
.mo-act-h h3 { margin: 0; font-family: var(--font-hand, cursive); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; color: var(--mo-cream); }
.mo-act-h p { margin: 6px 0 0; font-size: 1.04rem; line-height: 1.65; color: rgba(255, 244, 220, 0.82); text-wrap: pretty; }

/* ---------- rows: one height, every picture at its own shape ---------- */
.mo-row { display: flex; gap: clamp(8px, 1.2vw, 16px); margin: 0 0 clamp(8px, 1.2vw, 16px); }
.mo-row.mo-start { width: 82%; margin-inline-end: auto; }
.mo-row.mo-end { width: 82%; margin-inline-start: auto; }
.mo-it { position: relative; flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.mo-open { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: zoom-in; background: rgba(255, 244, 220, 0.06);
  box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.28), 0 18px 34px -22px rgba(0, 0, 0, 0.9); -webkit-tap-highlight-color: transparent; }
.mo-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, .9, .24, 1), filter .4s; }
@media (hover: hover) and (pointer: fine) {
  .mo-open:hover img { transform: scale(1.025); }
  .mo-open:hover { box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.7), 0 22px 40px -22px rgba(0, 0, 0, 0.95); }
}
.mo-open:focus-visible { outline: 3px solid var(--mo-gold); outline-offset: 3px; }
.mo-it figcaption { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 3px 10px 4px; border-radius: 4px; font: 400 0.92rem var(--font-hand, cursive); color: var(--mo-cream); background: rgba(23, 10, 48, 0.78); pointer-events: none; }
/* a video: the poster with a lantern-gold play button and its length */
.mo-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2c4, var(--mo-gold) 55%, #d99a1e); box-shadow: 0 0 0 6px rgba(246, 196, 83, 0.22), 0 10px 24px rgba(0, 0, 0, 0.55); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.mo-play svg { width: 28px; height: 28px; fill: var(--mo-deep); margin-left: 4px; }
.mo-open:hover .mo-play { transform: scale(1.08); }
.mo-len { position: absolute; top: 10px; inset-inline-end: 10px; padding: 2px 8px; border-radius: 4px; font: 700 0.8rem var(--font, sans-serif); color: var(--mo-cream); background: rgba(23, 10, 48, 0.8); direction: ltr; }
.is-video .mo-open img { filter: saturate(1.05) brightness(0.92); }

/* appearing on the way down: the site's own reveal (site.js adds .in), nothing extra here */

.mo-more { margin: 0 auto; max-width: 640px; text-align: center; }
.mo-more p { margin: 0 0 14px; color: rgba(255, 244, 220, 0.8); }
.mo-more-l { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mo-more-a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 20px; border-radius: 999px; font-weight: 700; color: var(--mo-cream); text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(246, 196, 83, 0.6); }
.mo-more-a:hover { background: rgba(246, 196, 83, 0.14); }

/* ---------- phones: one picture per line for wide rows, pairs stay pairs ---------- */
@media (max-width: 700px) {
  .mo-wrap { width: calc(100% - 24px); }
  .mo-row.mo-start, .mo-row.mo-end { width: 100%; }
  .mo-row.mo-split { flex-direction: column; }
  .mo-row.mo-split .mo-it { flex: none; }
  .mo-row.mo-split .mo-open { aspect-ratio: var(--ar); max-height: 78svh; }
  /* a tall picture alone on a line stays inside the screen and keeps its shape */
  .mo-row.mo-split .mo-it[style*="--ar:0."] { width: min(100%, calc(78svh * var(--ar))); margin-inline: auto; }
  .mo-act-h { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .mo-n { width: 44px; height: 44px; font-size: 0.9rem; }
  .mo-play { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
}

/* ---------- the viewer ---------- */
.mo-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: var(--mo-cream); background: rgba(12, 5, 26, 0.97); overflow: hidden; }
.mo-lb::backdrop { background: rgba(12, 5, 26, 0.9); }
.mo-lb[open] { animation: mo-in .25s ease both; }
@keyframes mo-in { from { opacity: 0; } }
.mo-lb-stage { position: absolute; inset: calc(56px + env(safe-area-inset-top, 0px)) 0 calc(64px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; touch-action: pan-y pinch-zoom; }
.mo-lb-stage > * { grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .28s ease, transform .35s cubic-bezier(.22, .9, .24, 1); }
.mo-lb-stage > .out-next { opacity: 0; transform: translateX(-6%); }
.mo-lb-stage > .out-prev { opacity: 0; transform: translateX(6%); }
.mo-lb-stage > .from-next { opacity: 0; transform: translateX(6%); transition: none; }
.mo-lb-stage > .from-prev { opacity: 0; transform: translateX(-6%); transition: none; }
.mo-lb-stage video { background: #000; border-radius: 4px; }
.mo-lb-top { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; }
.mo-lb-n { margin: 0; font: 700 0.95rem var(--font, sans-serif); color: rgba(255, 244, 220, 0.8); direction: ltr; }
.mo-lb-b { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 244, 220, 0.1); color: var(--mo-cream); font: 400 1.5rem/1 var(--font, sans-serif); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.4); -webkit-tap-highlight-color: transparent; }
.mo-lb-b:hover { background: rgba(246, 196, 83, 0.2); }
.mo-lb-b:focus-visible { outline: 3px solid var(--mo-gold); outline-offset: 2px; }
.mo-lb-prev, .mo-lb-next { position: absolute; top: 50%; translate: 0 -50%; font-size: 2.2rem; }
.mo-lb-prev { inset-inline-start: 12px; } .mo-lb-next { inset-inline-end: 12px; }
.mo-lb-cap { position: absolute; inset: auto 0 0; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 64px; display: grid; align-content: center; text-align: center; font-size: 0.98rem; line-height: 1.45; color: rgba(255, 244, 220, 0.92); }
.mo-lb-cap small { display: block; font-size: 0.8rem; color: rgba(255, 244, 220, 0.6); }
@media (max-width: 700px) {
  /* phones: the arrows sit at the bottom corners, under the thumb, and the picture gets the width */
  .mo-lb-prev, .mo-lb-next { top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); translate: none; font-size: 1.9rem; }
  .mo-lb-cap { padding-inline: 70px; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-open img, .mo-play, .mo-lb-stage > * { transition: none !important; }
  .mo-lb[open] { animation: none; }
}
/* the caption never takes a tap from the arrows above it */
.mo-lb-cap { pointer-events: none; }
.mo-lb-b, .mo-lb-top { z-index: 2; }
/* a quiet ground under the photos: the kingdom's painting stays above and below, not behind the pictures */
.mo { background: radial-gradient(70vmax 40vmax at 80% 0%, rgba(255, 179, 71, 0.10), transparent 70%), radial-gradient(60vmax 50vmax at 0% 60%, rgba(91, 42, 158, 0.30), transparent 70%), linear-gradient(180deg, rgba(23, 10, 48, 0.86), rgba(23, 10, 48, 0.96) 12%, rgba(23, 10, 48, 0.96) 88%, rgba(23, 10, 48, 0.86)); }
/* the act mark: the sun of Corona alone, no number on it */
.mo-n { width: 40px; height: 40px; margin-top: 4px; }
/* a picture alone on its row never grows taller than the screen */
.mo-solo .mo-it { flex: none; width: min(100%, calc(82svh * var(--ar))); margin-inline: auto; }
@media (max-width: 700px) {
  /* portraits pair up two by two; an odd one out stays half width in the middle */
  .mo-row.mo-ports { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
  .mo-row.mo-ports .mo-it { flex: 0 0 calc(50% - 4px); }
  /* a portrait that shares a row with a wide picture keeps a modest size on its own line */
  .mo-row.mo-split .mo-it.mo-port { width: 72%; margin-inline: auto; }
}