/* =========================================================
MALEA · 09 · Mobile refinements — PHONES ONLY (≤760px)
---------------------------------------------------------
Also holds the .live__heading desktop/mobile visibility
toggle (global, not inside the media query).
========================================================= */
/* ---------- Live heading: mobile vs desktop visibility ---------- */
/* The mobile heading (.live__heading--mobile) sits before .live__media
in the DOM; the desktop heading stays inside .live-text-left.
Only one is visible at a time — the other is display:none so
IntersectionObserver and [data-reveal] are inert on the hidden copy. */
.live__heading--mobile { display: none; } /* hidden on desktop */
.live__heading--desktop { display: block; } /* shown on desktop */
/* =========================================================
MALEA · 09 · Mobile refinements — PHONES ONLY (≤760px)
---------------------------------------------------------
Self-contained mobile-only polish layer, loaded LAST so it
wins purely by cascade order (no !important needed).
► TO ROLL BACK: delete this file's in index.html
(or comment it out). Nothing else references it and no
existing rule was edited — removing the link restores
the previous mobile layout exactly.
Scope is strictly max-width:760px. Desktop, landscape
tablets (07) and portrait tablets (08) are NOT touched.
Audit items applied (P1 + P2), mobile only:
· Section headings → left-aligned, slightly smaller,
looser leading (lighter multi-line headings)
· Even vertical rhythm: #art / #reviews padding pulled
onto the standard mobile value; pull-quote screens
shortened (were a near-full empty screen each)
· Formats: image & copy share one left edge (the running
number becomes a kicker above the title)
· Micro labels 10→11px; body 15→16px (readability)
========================================================= */
@media (max-width: 760px) {
/* ---------- Type scale (token overrides, mobile only) ---------- */
:root {
/* was clamp(36px, 4.2vw, 60px) → 36 floor on every phone.
Now ~31px at 390px, never larger than the old 36. */
--fs-section: clamp(30px, 8vw, 36px);
/* was clamp(10px, .78vw, 12px) → 10px floor — too small on phones */
--fs-micro: 11px;
/* Body was 16px (bare minimum → read "очень мелко"). 17px reads
comfortably and keeps a clear step under the 19px gold subtitle.
One token → all body text scales uniformly; grid/rhythm are px-based
and unaffected. */
--fs-body: 17px;
/* Heading→content / media→text gap. Desktop token stays clamp(72,8vh,120)
= 72px on phones — too airy. Tighten so headings sit with their content. */
--vr-dense: clamp(30px, 4vh, 48px);
}
/* ---------- Section headings: left-aligned ---------- */
/* Override the per-section centring so every section header shares
one left edge with its body/list/cards on the narrow column. */
#musicians .shead,
#formats .shead,
#why .shead,
#portfolio .shead,
.player__head,
.egypt__header,
.live__heading,
.slots__head { text-align: left; }
/* Looser leading so the 3–4 line headings breathe at the smaller size. */
.shead__title,
.slots__head,
.player__heading,
.live__heading,
.final__heading,
.egypt__header .heading,
.philo__heading { line-height: 1.12; }
/* ---------- Even, tighter vertical rhythm between sections ---------- */
/* Phones were at 84px top+bottom → ~168px between sections (and #art/#reviews
even escaped that via ID+token). Pull EVERY section onto one tighter value
so the page reads as a continuous flow, not isolated screens with voids.
~51px each side → ~102px between sections (vs 168). */
.pad-block,
#art,
#reviews,
#philosophy { padding-block: clamp(44px, 6vh, 64px); }
/* identity in the opening-deck gets --vr-standard (~100-180px) from
13-opening-desktop.css → override to match the uniform mobile rhythm. */
html.js-opening #opening >#identity.op-layer {
padding-block: clamp(44px, 6vh, 64px);
}
/* Pull-quotes & Philosophy are LOW-DENSITY blocks (a one-line quote, a short
statement). At the standard section padding their own air stacks with the
neighbours' → ~100–120px around very little content = looks gigantic. Give
them one shared, tighter padding so they sit inside the flow as an accent,
not a floating block. (Both use --vr-block below.) */
:root { --vr-block: clamp(20px, 3vh, 30px); }
/* Quotes keep their original CENTRED Cormorant-italic look (left-aligned /
enlarged read worse). They only needed breathing room: give them
section-level padding so the last quote isn't jammed against the
image-led "Создать опыт" section right below it. */
.quote-screen { min-height: 0; padding-block: clamp(40px, 6vh, 56px); }
/* ---------- Philosophy: normal-flow section, aligned to the margin ---------- */
/* Was a 100svh full screen with ~400px of voids; on a scrolled phone that
pause is just dead space. Drop the full height and let it flow.
.philo__inner sits INSIDE .wrap yet also carried its own
padding:var(--page-x) (content inset twice, ~56px). Zero the inner
horizontal padding so heading/text line up at the standard 28px margin
(the existing then resolves the heading to a clean 2 lines), and
give it the standard section rhythm via padding-block. */
#philosophy { min-height: 0; }
#philosophy .philo__inner { padding-inline: 0; padding-block: 0; }
/* ---------- Reviews heading: tidy the wrap ---------- */
/* The desktop hard break (музыка и…) re-wraps on the narrow column
into 4 ragged lines with single-word orphans. Drop the forced break
on phones and let the browser balance it into clean lines. (The
desktop stays; a trailing space before it lets the words rejoin
without gluing «музыка»+«и».) */
#reviews .shead__title br { display: none; }
#reviews .shead__title { text-wrap: balance; }
/* ---------- Formats: image and copy share the left edge ---------- */
/* Drop the hanging-number gutter (image was flush at the margin while
the copy was indented ~56px). The number becomes a small kicker
above the title, so image + number + copy all align at the margin. */
#formats .fmt__line-content { grid-template-columns: 1fr; }
#formats .fmt__line-num { padding-top: 0; margin-bottom: var(--s-2); }
/* Tighten the card-to-card gap (was 42/42 → ~84px between cards). */
.fmt__line { padding-block: clamp(22px, 3vw, 28px); }
/* ---------- Final CTA: centre to match the other mobile buttons ---------- */
#final-experience .final__text > div:last-child { text-align: center; }
/* ---------- Live: kill the doubled gap before "Подходит для:" ---------- */
/* Stacked, the inner grid already separates the lede from the formats
block via its row-gap (~42px). The lede paragraph ALSO carried
margin-bottom:var(--s-6) (48px), so the two stacked into ~90px of void
and broke the rhythm. Zero the paragraph margin → only the row-gap
remains as the separator. */
#live .live__text { margin-bottom: 0; }
/* ---------- Final: trim the oversized top image ~10% ----------
The image-led Final screen used min-height:60vh → it dominated the phone.
Pull it back ~10% (54vh). With object-position 50% 65% the crop lands
mostly on the top, so the subject stays framed. */
#final-experience .final__media { min-height: 46vh; }
/* Kill the 1px "pixel line" at the photo's bottom edge.
.final__media has a fractional height (46vh), so at dpr 2–3 its bottom
edge lands on a half-device-pixel → the clipped bottom row renders
semi-transparent. The fixed .site-atmosphere overlay (a blue radial
pinned to the bottom of the viewport) showed THROUGH that translucent
row as a faint, scroll-flickering seam ("просвечивается сквозь фон").
Paint the section + media with the solid field colour so there is no
transparency behind the edge for the atmosphere to bleed through.
--bg-deep == the body field, so this is visually identical to the
unified background — no new seam. */
#final-experience { background: var(--bg-deep); }
#final-experience .final__media { background: var(--bg-deep); }
/* Raise the photo ~10% within the frame (show a slightly lower slice of the
portrait): object-position Y 65% → 75%. Remove transform:scale() because
it creates a GPU compositor layer that can leave a 1px sub-pixel seam
against the ::after overlay at the bottom edge. Without scale, the photo
fills exactly 100% of the container — same visual crop, no seam. */
/* overflow must stay VISIBLE so .final__media::after can extend below the box
(see the bottom-cap overlay in 05-screens.css). The img is sized inset:0 to
the box, so nothing else overflows. */
#final-experience .final__media { overflow: visible; }
#final-experience .final__media img {
object-position: 50% 75%;
transform: none;
}
/* The text block kept the desktop 14vh (~118px) block padding → an ~111px
void between the photo and the "Создать опыт" heading, out of step with the
mobile rhythm. Pull it onto the standard mobile section padding. */
#final-experience .final__text { padding-block: clamp(44px, 6vh, 64px); }
/* ---------- Reviews: tighten the gap before the states list ---------- */
/* When the states list drops below the lede (stacked), 05-screens gives it
margin-top:var(--s-7) (72px) → an oversized jump before "Соединение с
собой". Pull it onto the standard mobile dense gap so it reads in rhythm. */
#reviews .rev__states { margin-top: var(--vr-dense); }
/* ---------- Pull-quotes · Direction A (editorial accent) ----------
On phones the quote fell to the 22px clamp floor (barely above the 17px
body) and the byline sat 48px adrift, so the "moment" read as an orphan
paragraph. Restore presence: larger quote, tight byline, and a short gold
rule above as an anchor (the same gold-line language used elsewhere). */
/* font-weight 300 = genuinely light Cormorant (now imported); a hair of
positive tracking opens the italic serif up for a more couture, airy read. */
.bigquote__text { font-size: 26px; line-height: 1.26; font-weight: 300; letter-spacing: .015em; }
.bigquote__attr { margin-top: clamp(14px, 2vh, 18px); font-size: 17px; letter-spacing: .2em; }
.bigquote::before {
content: "";
display: block;
width: 40px; height: 1px;
margin: 0 auto clamp(20px, 3vh, 26px);
background: var(--gold-soft);
}
/* (b) The quote sat at max-width:300px → ~45px side margins on a 390 phone,
so it read "squeezed". Widen to ~86vw (≈27px margins, matching the page
rhythm) so the line measure breathes. */
.bigquote { max-width: 86vw; }
.quote-screen--wide .bigquote { max-width: 90vw; }
/* (a) The last quote (--wide) sits between Portfolio (which has its OWN ~51px
padding-bottom) and the image-led Final screen (padding-top:0, photo flush).
With symmetric quote padding the CONTENT-to-content gap was ~123px above vs
~72px below → the quote looked pressed to the photo. Rebalance with
ASYMMETRIC padding: small top (Portfolio's padding already supplies the gap
above) + larger bottom (replaces the Final's missing top padding). Result:
even air before/after the quote. No margins. */
.quote-screen--wide { margin-block: 0; padding-top: clamp(6px, 1.1vh, 12px); padding-bottom: clamp(60px, 9vh, 86px); }
/* ---------- Live: heading above image (mobile only) ---------- */
/* Hide the desktop heading, show the mobile one placed before .live__media */
.live__heading--desktop { display: none; }
.live__heading--mobile { display: block; }
/* Hide the gold rule below the image on mobile (it's between heading and text) */
.live-rule { display: none; }
}