/* =========================================================
   EKKA — the free page (?free → html.free; lib/util.js FREE)
   Nothing holds the scroll but the machine's x-ray. The opening keeps its 3D story, shorter and without the
   pager; «Почему EKKA» flows down the page (day.js flow()); «Где работает» is a row of rooms to swipe
   (motion/stage.js strip()).
   ========================================================= */

/* the opening and the pad: the same story in fewer screens */
.free .film--hero { height: 720vh; }
.free .inside { height: 340vh; }

/* ---------- «Почему EKKA» as a flow ---------- */
.free .day { height: auto; }
.day--flow .day__pin { position: relative; top: 0; height: auto; overflow: hidden;
  padding: clamp(110px, 16vh, 190px) var(--gutter) clamp(110px, 16vh, 190px); }
.day--flow .day__sun, .day--flow .day__top, .day--flow .day__layout { display: none; }
.day--flow .day__flow { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(110px, 18vh, 200px); }
.day--flow .day__frame, .day--flow .day__line, .day--flow .day__viz { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }
.day--flow .day__frame { padding: 0; }
.day--flow .day__moment { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.day--flow .day__moment.is-flip .day__say { order: 2; }
.day--flow .day__say { text-align: left; }
.day--flow .day__stamp { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; }
.day--flow .day__stamp span { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(var(--ink), .7); }
.day--flow .day__stamp b { order: -1; font-family: var(--display); font-weight: 400; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums; }
.day--flow .day__line h3 { text-align: left; }
.day--flow .day__line p { margin: 16px 0 0; text-align: left; text-wrap: pretty; }
.day--flow .day__viz { width: 100%; max-width: 620px; justify-self: center; will-change: auto; }
.day--flow .day__moon { position: absolute; left: auto; right: 4%; top: -40px; }

@media (max-width: 860px) {
  .day--flow .day__flow { gap: clamp(88px, 14vh, 130px); }
  .day--flow .day__moment { grid-template-columns: 1fr; gap: 34px; }
  .day--flow .day__moment.is-flip .day__say { order: 0; }
  .day--flow .day__stamp { margin-bottom: 14px; }
  .day--flow .day__stamp b { font-size: 40px; }
  .day--flow .day__moon { width: 52px; height: 52px; top: -30px; right: 2%; }
}

/* ---------- «Где работает» as a row ---------- */
.free .st { height: auto; }
.st--strip .st__pin { position: relative; top: 0; height: auto; overflow: visible; padding: clamp(110px, 16vh, 180px) 0 clamp(90px, 14vh, 160px); }
.st--strip .st__world, .st--strip .st__shade, .st--strip .st__ring, .st--strip .st__caps, .st--strip .st__nav { display: none; }
.st--strip .st__head { position: relative; inset: auto; max-width: none; margin: 0 var(--gutter); text-shadow: none;
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 24px; }
.st--strip .st__head .eyebrow { grid-column: 1 / -1; }
.st__arrows { display: flex; gap: 10px; }
.st__arrows button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(244, 237, 230, .28); background: none; color: #f4ede6;
  display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s, opacity .3s; }
.st__arrows button:hover:not(:disabled) { background: rgba(244, 237, 230, .1); border-color: rgba(244, 237, 230, .6); }
.st__arrows button:disabled { opacity: .3; cursor: default; }
.st__arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.st__strip { display: flex; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(32px, 5vh, 56px); padding: 0 var(--gutter) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.st__strip::-webkit-scrollbar { display: none; }
.st__card { flex: 0 0 min(66vw, 980px); margin: 0; scroll-snap-align: start; color: #f4ede6; }
.st__shot { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #2a2220; }
.st__shot > picture { position: absolute; inset: 0; opacity: 1; visibility: visible; }
.st__shot > .st__shadow, .st__shot > .st__ekka { inset: auto; }
.st__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st__shot > .st__shadow img, .st__shot > .st__ekka img { object-fit: fill; }
.st__card figcaption { display: grid; gap: 6px; padding: 20px 4px 0; }
.st__card figcaption i { font-style: normal; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; color: var(--m-rose-2); }
.st__card figcaption b { font-family: var(--display); font-weight: 500; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.03em; }
.st__card figcaption span { font-size: var(--fs-lead); color: rgba(244, 237, 230, .72); }

/* the same switch as the pictures' <source>: a tall screen gets the tall frames, their boxes from data-bm */
@media (max-aspect-ratio: 4/5) {
  .st__card { flex-basis: 72vw; }
  .st__shot { aspect-ratio: 9 / 16; border-radius: 18px; }
}
@media (max-width: 860px) {
  .st__arrows { display: none; }
  .st--strip .st__head { display: block; }
}