/* ---------- type: one family, one scale ----------
   Google Sans everywhere (headings 500, text 400); the words that carry the feeling switch to the italic
   Cormorant, a touch larger so both share one optical size. Every heading on the page takes its size from one of
   four steps below, so the sections read as one voice. Loaded last: it overrides the sizes the sections set. */
:root {
  --fs-display: clamp(44px, 6.6vw, 108px);  /* the big statement of a chapter */
  --fs-h2:      clamp(34px, 5vw, 80px);   /* a section heading */
  --fs-h3:      clamp(22px, 2.3vw, 36px); /* a card, a step, a caption */
  --fs-lead:    clamp(17px, 1.3vw, 20px); /* the paragraph under a heading */
  --fs-body: 16px; --fs-small: 14px; --fs-eyebrow: 12px;
}
@media (max-width: 760px) {
  :root { --fs-display: clamp(38px, 10.6vw, 48px); --fs-h2: clamp(30px, 8.4vw, 38px); --fs-h3: clamp(21px, 5.8vw, 24px); --fs-lead: 16px; }
}

/* the accent */
h1 em, h2 em, h3 em, .unbox__say b em, .turn__title em, .wall__title em, .px__title em, .ax__title em, .fx__title em,
.ax__big em, .st__title em, .still-hero h1 em, .calm__title em, .where__title em, .day__frame h2 em, .day__line h3 em, .xray__say b em {
  font-family: Cormorant, "Times New Roman", serif; font-style: italic; font-weight: 500;
  font-size: 1.1em; letter-spacing: -.01em; line-height: .9;
}

/* every heading: one weight, one tracking */
.still-hero h1, .stop__title, .stop--intro .stop__title, .unbox__say b, .inside__title, .inside__layers h3, .inside__end h3,
.where__title, .where__row b, .where__card b, .wall__title, .wall__facts dd, .wall__facts dd b, .xray__say b, .px__title, .px__sub,
.bn__c > b, .ax__title, .ax__big, .fx__title, .calm__title, .turn__title, .st__title, .st__cap b, .day__frame h2, .day__line h3,
.day__clock, .viz__big, .px__faq summary {
  font-family: var(--display); font-weight: 500; letter-spacing: -.03em;
}

/* display */
.turn__title, .ax__title, .calm__title, .day__frame h2, .still-hero h1 { font-size: var(--fs-display); line-height: 1; }
.wall__facts dd b { font-size: var(--fs-display); line-height: 1; letter-spacing: -.04em; }
/* h2 */
.stop__title, .stop--intro .stop__title, .unbox__say b, .inside__title, .inside__layers, .inside__end h3, .where__title,
.wall__title, .px__title, .fx__title, .st__title { font-size: var(--fs-h2); line-height: 1.04; }
.inside__layers h3 { font-size: 1em; line-height: 1.04; }
/* the scene captions share a narrow column with the 3D: the same step, capped */
.stop__title, .stop--intro .stop__title, .unbox__say b, .inside__title, .inside__layers, .inside__end h3 { font-size: min(var(--fs-h2), 60px); }
/* h3 */
.day__line h3, .xray__say b, .st__cap b, .px__sub, .where__card b, .where__row b, .ax__big { font-size: var(--fs-h3); line-height: 1.15; }
.bn__c > b { font-size: var(--fs-h3) !important; letter-spacing: -.03em !important; font-weight: 500 !important; line-height: 1.15; }
.ax__big { font-size: var(--fs-h3); line-height: 1.32; font-weight: 400; letter-spacing: -.015em; }
/* lead */
.stop__text, .where__lead, .wall__lead, .px__lead, .st__cap span { font-size: var(--fs-lead); font-weight: 400; }
/* numbers in the day's clock keep their own size, only the face changes */
.day__clock, .day__clock .col i b { font-weight: 400; letter-spacing: -.02em; }

@media (max-width: 760px) {
  .stop--intro .stop__title { font-size: clamp(28px, 7.8vw, 34px); }
  .wall__facts dd b { font-size: clamp(44px, 12vw, 56px); }
}
/* inside a paragraph the serif's small x-height reads smaller than the sans around it */
.ax__big em { font-size: 1.06em; line-height: 1; }

/* ---------- legibility (UI audit, 2026-10-19) ----------
   The rose #c97e6e reads at 2.6:1 on the cream — under even the 3:1 large text needs. On a light page the accent
   words, the numbers and the small capitals take a deeper rose (4.2:1); on the dark pages the light rose stays.
   The quiet text (notes, captions, labels) was 11–13px at 40–55% ink: it comes up to 13–14px at 62–75%. */
:root { --rose-ink: #a65a4a; }
.wall__title em, .px__title em, .ax__title em, .ax__big em, .still-hero h1 em,
.px__facts li i, .where__eyebrow, .wall__eyebrow, .eyebrow, .px__steps i { color: var(--rose-ink); }
.foot-x .eyebrow, .st__head .eyebrow, .turn__eyebrow { color: #f0b6a8; }
.px__steps li.is-on i { background: var(--rose-ink); border-color: var(--rose-ink); color: #fff; }

.nav__links a { opacity: .86; }
.wall__note, .px__note { font-size: 13px; color: rgba(35, 28, 38, .62); }
.px__form label > span { font-size: 14px; color: rgba(35, 28, 38, .72); }
.px__steps span, .px__grid span { font-size: 16px; color: rgba(35, 28, 38, .72); }
.where__lead, .wall__lead, .px__lead, .px__facts li > div > span, .px__faq details p { color: rgba(35, 28, 38, .74); }
.fx__bottom { font-size: 14px; color: rgba(241, 235, 227, .7); }
/* «Почему EKKA»: the clock's ends, the place, the chart's labels */
.day__bar b { font-size: 12px; color: rgba(var(--ink), .6); }
.day__where { color: rgba(var(--ink), .7); }
.viz-race__row span, .viz-cal__legend { color: rgba(var(--ink), .74); }
.viz-race__end span { font-size: 12px; color: rgba(var(--ink), .6); }
.viz-race .r2 u { font-size: 12px; }
.day__line p, .day__frame p { color: rgba(var(--ink), .76); }
/* «Где работает»: the list of places on the right */
.st__nav li { font-size: 15px; color: rgba(244, 237, 230, .66); }
.st__nav li.is-on { color: #fff; }

@media (max-width: 760px) {
  .viz-race .r2 u { font-size: 11px; }
  .viz-cal__legend { font-size: 13px; }
  .day__where { font-size: 12px; }
  .day__line p { font-size: 16px; }
}