/* ============================================================
   Phone preview (< 768 px + touch). Text is a fixed size for
   legibility; the image strip is sized in vw so the crops keep
   their proportions from the 390 px design frame.
   1 design px = (100/390)vw = 0.2564vw
   ============================================================ */

.mob { display: none; }

html.is-mobile body.home .hdr,
html.is-mobile body.home .contacts,
html.is-mobile body.home .canvas,
html.is-mobile body.home .wip,
html.is-mobile body.home .loader { display: none !important; }

html.is-mobile body.home { min-height: 0 !important; }
html.is-mobile .mob { display: block; }

/* ---------- welcome screen ---------- */

.mwelcome {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 28px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  transition: opacity 0.45s ease;
}
.mwelcome.is-gone { opacity: 0; pointer-events: none; }

.mwelcome__head { width: 190px; height: 190px; object-fit: contain; }

.mwelcome__text {
  margin-top: 8px;
  max-width: 300px;
  font-size: 13px;
  line-height: 1.45;
}

.mwelcome__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(34px + env(safe-area-inset-bottom));
  font-size: 13px;
  line-height: 1.3;
}

.mwelcome__btn {
  font: inherit;
  color: #000;
  background: none;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.mwelcome__btn.is-on { opacity: 1; }
.mwelcome__pct { transition: opacity 0.25s ease; }
.mwelcome__pct.is-off { opacity: 0; }

/* the percentage turns into the button in the same spot */
.mwelcome__slot { position: relative; display: inline-block; min-height: 34px; }
.mwelcome__slot > * { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }

/* ---------- head block ---------- */

.mhead { padding: 0 20px; }

.mhead__wip {
  font-size: 55.6vw;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 0.8;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 -20px;
  padding-top: 6vw;
}

.mhead__note {
  position: relative;
  margin: 26px auto 0;
  max-width: 240px;
  font-size: 20px;
  line-height: 1.1;
  text-align: center;
}
.mhead__note .br--l { position: absolute; left: -14px; top: 0; }
.mhead__note .br--r { position: absolute; right: -14px; top: 0; }

.mhead__name { margin-top: 42px; font-size: 20px; font-weight: normal; line-height: 1.1; }

.mhead__row { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; }
.mhead__row p { font-size: 10px; line-height: 1.3; }
.mhead__col--r { text-align: right; white-space: nowrap; }
.mhead__col--r p + p { margin-top: 10px; }
.mhead__col p + p { margin-top: 10px; }

.mhead__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  row-gap: 4px;
  margin-top: 40px;
  font-size: 10px;
  line-height: 1.3;
}
.mhead__grid > :nth-child(even) { text-align: right; }

/* ---------- image strip ---------- */

.mstrip {
  position: relative;
  margin-top: min(48vw, 190px);
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

.mtile {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
}
.mtile + .mtile { margin-top: 17.44vw; }

.mtile img,
.mtile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mtile img { touch-action: pan-y; }

/* ---------- long-press magnifier ---------- */

.mzoom {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  overflow: hidden;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mzoom.is-on { opacity: 1; }
.mzoom img {
  position: absolute;
  object-fit: cover;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.is-zooming, html.is-zooming body { overflow: hidden; touch-action: none; }
html.is-welcoming, html.is-welcoming body { overflow: hidden; }

/* ---------- contacts pinned to the bottom ---------- */

.mcontacts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 16px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  font-size: 10px;
  line-height: 1.3;
  pointer-events: none;
}
.mcontacts > * { pointer-events: auto; background: #fff; }
.mcontacts__arrow { flex: none; }
.mcontacts__item { display: flex; flex-direction: column; }
.mcontacts__item a { color: #000; text-decoration: none; }