/*
 * VisualMethod typography system
 *
 * This file is intentionally loaded after the legacy and Webflow stylesheets.
 * It reduces the active site typography to five core roles plus two deliberate
 * display exceptions, without changing page structure or art direction.
 */

:root {
  --type-family: "Suisse Intl", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --type-meta: 0.75rem;
  --type-secondary: 0.875rem;
  --type-body: 1rem;
  --type-lead: 1.25rem;
  --type-section: clamp(1.75rem, calc(1.35rem + 1.8vw), 3rem);

  --type-display: clamp(2.75rem, calc(1.7rem + 4vw), 5.5rem);
  --type-long-title: clamp(2.25rem, calc(1.8rem + 1.5vw), 3.25rem);
  --type-wordmark: clamp(3.5rem, 12vw, 9.25rem);

  --type-weight-body: 400;
  --type-weight-heading: 500;
  --type-weight-emphasis: 600;
  --type-weight-label: 600;

  --type-leading-meta: 1.4;
  --type-leading-secondary: 1.5;
  --type-leading-body: 1.65;
  --type-leading-lead: 1.5;
  --type-leading-heading: 1.1;
  --type-leading-display: 0.98;

  --type-tracking-body: 0;
  --type-tracking-heading: -0.02em;
  --type-tracking-display: -0.035em;
  --type-tracking-label: 0.06em;

  --motion-text-feedback: 180ms;
  --motion-text-enter: 560ms;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Text-link states: warm brand accent on light surfaces. */
  --link-color-hover: #9d472c;
  --link-color-active: #71301f;
  --link-color-hover-inverse: #f0a07a;
  --link-color-active-inverse: #ffd0ba;
  --link-rule-opacity: 34%;
}

body.site-shell,
body.vm-home-live {
  font-family: var(--type-family);
  font-size: var(--type-body);
  font-weight: var(--type-weight-body);
  font-kerning: normal;
  font-synthesis: none;
  line-height: var(--type-leading-body);
}

body.site-shell :where(h1, h2, h3, h4, h5, h6),
body.vm-home-live :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--type-family);
  font-weight: var(--type-weight-heading);
  text-wrap: balance;
}

body.site-shell h1 {
  font-size: var(--type-display);
  letter-spacing: var(--type-tracking-display);
  line-height: var(--type-leading-display);
}

body.site-shell h2 {
  font-size: var(--type-section);
  letter-spacing: var(--type-tracking-heading);
  line-height: var(--type-leading-heading);
}

body.site-shell h3 {
  font-size: var(--type-lead);
  letter-spacing: var(--type-tracking-heading);
  line-height: 1.2;
}

body.site-shell :where(h4, h5, h6) {
  font-size: var(--type-body);
  letter-spacing: var(--type-tracking-body);
  line-height: 1.3;
}

body.site-shell :where(p, li),
body.vm-home-live :where(p, li) {
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
  text-wrap: pretty;
}

body.site-shell strong,
body.vm-home-live strong {
  font-weight: var(--type-weight-emphasis);
}

/* Long editorial titles remain quieter than short landing-page headlines. */
body.site-shell.page-blog-article .blog-post-hero h1,
body.site-shell.page-portfolio-project .blog-post-hero h1 {
  font-size: var(--type-long-title);
  letter-spacing: var(--type-tracking-heading);
  line-height: 1.08;
}

/* Legacy Webflow compatibility: one shared scale wins over page-local values. */
body.vm-home-live h1 {
  font-size: var(--type-display) !important;
  font-weight: var(--type-weight-heading) !important;
  letter-spacing: var(--type-tracking-display) !important;
  line-height: var(--type-leading-display) !important;
}

body.vm-home-live h2 {
  font-size: var(--type-section) !important;
  font-weight: var(--type-weight-heading) !important;
  letter-spacing: var(--type-tracking-heading) !important;
  line-height: var(--type-leading-heading) !important;
}

body.vm-home-live h3 {
  font-size: var(--type-lead) !important;
  font-weight: var(--type-weight-heading) !important;
  letter-spacing: var(--type-tracking-heading) !important;
  line-height: 1.2 !important;
}

body.vm-home-live :where(h4, h5, h6) {
  font-size: var(--type-body) !important;
  letter-spacing: var(--type-tracking-body) !important;
  line-height: 1.3 !important;
}

body.vm-home-live :where(p, li, .text-size-medium, .vm-main-text-stile) {
  font-size: var(--type-body) !important;
  line-height: var(--type-leading-body) !important;
}

body.vm-home-live .section_header5.hero .text-size-medium {
  font-size: var(--type-lead) !important;
  line-height: var(--type-leading-lead) !important;
}

body.vm-home-live :where(.kakoy-vam-otchet-subheaders, .timeline_date-text, .qa-subheaders) {
  font-size: var(--type-lead) !important;
  line-height: 1.2 !important;
}

body.site-shell.page-mistakes-webflow .webflow-special-main h1,
body.site-shell.page-mistakes-webflow .webflow-special-main h2,
body.site-shell.page-mistakes-webflow .webflow-special-main ._12m-1st-header,
body.site-shell.page-mistakes-webflow .webflow-special-main .white-title {
  font-size: var(--type-section) !important;
  letter-spacing: var(--type-tracking-heading) !important;
  line-height: var(--type-leading-heading) !important;
}

body.site-shell.page-mistakes-webflow .webflow-special-main h3,
body.site-shell.page-mistakes-webflow .webflow-special-main ._12m-h3-heading {
  font-size: var(--type-lead) !important;
  letter-spacing: var(--type-tracking-heading) !important;
  line-height: 1.2 !important;
}

body.site-shell.page-mistakes-webflow .webflow-special-main :where(p, .vm-main-text-stile) {
  font-size: var(--type-body) !important;
  line-height: var(--type-leading-body) !important;
}

/* Semantic roles: metadata, secondary copy, card titles, and editorial text. */
body.site-shell .eyebrow {
  font-size: var(--type-meta);
  font-weight: var(--type-weight-heading);
  letter-spacing: 0.02em;
  line-height: var(--type-leading-meta);
  text-transform: none;
}

body.site-shell :where(
  .blog-mag-kicker,
  .blog-post-hero__eyebrow,
  .blog-post-hero__author-label,
  .blog-compact-card__meta,
  .vm-live-blog-card__badge,
  .vm-live-blog-card__meta,
  .mistake-card__meta,
  .vm-caption,
  .chip
) {
  font-size: var(--type-meta);
  font-weight: var(--type-weight-label);
  letter-spacing: var(--type-tracking-label);
  line-height: var(--type-leading-meta);
}

body.site-shell :where(
  .breadcrumbs,
  .section-nav__label,
  .section-nav__link,
  .post-card__summary,
  .blog-mag-line p,
  .blog-mag-mini p,
  .blog-mag-card__body > p,
  .vm-footer__micro-link,
  .vm-footer__copyright,
  .vm-footer__note
) {
  font-size: var(--type-secondary);
  line-height: var(--type-leading-secondary);
}

body.site-shell :where(
  .post-card__title,
  .blog-compact-card h3,
  .vm-live-blog-card__title h2,
  .vm-portfolio-card__copy h2,
  .mistake-card h3
) {
  font-size: var(--type-lead);
  letter-spacing: var(--type-tracking-heading);
  line-height: 1.2;
}

body.site-shell .report-archive-grid .post-card__title {
  font-size: var(--type-body);
  line-height: 1.25;
}

body.site-shell .report-archive-grid .post-card__summary {
  font-size: var(--type-secondary);
  line-height: var(--type-leading-secondary);
}

body.site-shell .vm-brief-choice span {
  font-size: var(--type-meta);
  letter-spacing: var(--type-tracking-label);
  line-height: var(--type-leading-meta);
}

body.site-shell .prose :where(p, li, blockquote, td, th),
body.site-shell .prose--blog :where(p, li, blockquote, td, th) {
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
}

body.site-shell .prose :where(p, li, blockquote) {
  max-width: 72ch;
}

body.site-shell .prose :where(h2, h3, h4) {
  max-width: 30ch;
}

/* Global header/footer roles and their deliberately decorative wordmark. */
body.site-shell .site-global-header .navbar1_logo,
body.vm-home-live .site-global-header .navbar1_logo {
  font-size: var(--type-lead) !important;
  font-weight: var(--type-weight-emphasis) !important;
  letter-spacing: var(--type-tracking-heading) !important;
}

body.site-shell .site-global-header .text-block-30,
body.vm-home-live .site-global-header .text-block-30 {
  font-size: var(--type-secondary) !important;
  line-height: var(--type-leading-secondary) !important;
}

body.site-shell .site-global-header .home-nav-link,
body.vm-home-live .site-global-header .home-nav-link {
  font-size: var(--type-meta) !important;
  font-weight: var(--type-weight-label) !important;
  letter-spacing: var(--type-tracking-label) !important;
  line-height: 1 !important;
  transition: color var(--motion-text-feedback) var(--ease-out-quart),
    background-color var(--motion-text-feedback) var(--ease-out-quart),
    border-color var(--motion-text-feedback) var(--ease-out-quart),
    transform var(--motion-text-feedback) var(--ease-out-quart) !important;
}

body.site-shell .vm-footer__wordmark,
body.vm-home-live .vm-footer__wordmark {
  font-size: var(--type-wordmark) !important;
  font-weight: var(--type-weight-heading) !important;
  letter-spacing: -0.02em !important;
  line-height: 0.9 !important;
}

body.site-shell :where(.vm-footer__text-link, .vm-footer__micro-link),
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link) {
  font-size: var(--type-secondary);
  line-height: var(--type-leading-secondary);
}

/* Text contrast corrections for small copy. */
body.site-shell :where(.vm-footer__note, .vm-footer__copyright),
body.vm-home-live :where(.vm-footer__note, .vm-footer__copyright) {
  color: rgba(255, 255, 255, 0.68);
}

body.site-shell :where(.breadcrumbs, .blog-compact-card__meta, .vm-live-blog-card__meta) {
  color: rgba(0, 0, 0, 0.68);
}

body.vm-home-live :where(.vm-home-media-badge, .vm-home-media-read, .vm-home-gallery-caption, .tags, .vm-small-text, .vm-small-captions) {
  font-size: var(--type-meta) !important;
  font-weight: var(--type-weight-label) !important;
  letter-spacing: var(--type-tracking-label) !important;
  line-height: var(--type-leading-meta) !important;
}

body.vm-home-live .vm-home-media-read {
  color: rgba(22, 42, 52, 0.74) !important;
}

/*
 * Text links use one fine two-layer rule across articles, navigation, home,
 * and footer. The quiet rule remains visible at rest; the accent sweeps in.
 */
.text-link,
body.site-shell .prose a,
body.site-shell .hero-copy a,
body.site-shell .link-underline,
body.site-shell .external-link-text,
body.site-shell :where(
  .vm-footer__text-link,
  .vm-footer__micro-link,
  .section-nav__link,
  .breadcrumbs a,
  .vm-live-blog-card__read,
  .blog-mag-section-head > a,
  .mistakes-hero__links a,
  .mistake-article-related__head > a,
  .vm-blog-sidebar-links a,
  .vm-brief__intro a,
  .vm-portfolio-hero a
),
body.site-shell :where(p, li, blockquote, figcaption) > a:not(.button):not(.button-base):not(.w-button),
body.vm-home-live .vm-main-text-stile a,
body.vm-home-live .link-underline,
body.vm-home-live .external-link-text,
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link) {
  color: inherit;
  text-decoration: none;
  background-image:
    linear-gradient(var(--link-color-hover), var(--link-color-hover)),
    linear-gradient(currentColor, currentColor);
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 0 1px, 100% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--motion-text-feedback) var(--ease-out-quart),
    background-size 240ms var(--ease-out-quint);
}

.text-link:visited,
body.site-shell .prose a:visited,
body.site-shell .hero-copy a:visited,
body.site-shell .link-underline:visited,
body.site-shell .external-link-text:visited,
body.site-shell :where(p, li, blockquote, figcaption) > a:visited:not(.button):not(.button-base):not(.w-button),
body.vm-home-live .vm-main-text-stile a:visited,
body.vm-home-live .link-underline:visited,
body.vm-home-live .external-link-text:visited {
  color: inherit;
}

.text-link:hover,
.text-link:focus-visible,
body.site-shell .prose a:hover,
body.site-shell .prose a:focus-visible,
body.site-shell .hero-copy a:hover,
body.site-shell .hero-copy a:focus-visible,
body.site-shell .link-underline:hover,
body.site-shell .link-underline:focus-visible,
body.site-shell .external-link-text:hover,
body.site-shell .external-link-text:focus-visible,
body.site-shell :where(
  .vm-footer__text-link,
  .vm-footer__micro-link,
  .section-nav__link,
  .breadcrumbs a,
  .vm-live-blog-card__read,
  .blog-mag-section-head > a,
  .mistakes-hero__links a,
  .mistake-article-related__head > a,
  .vm-blog-sidebar-links a,
  .vm-brief__intro a,
  .vm-portfolio-hero a
):hover,
body.site-shell :where(
  .vm-footer__text-link,
  .vm-footer__micro-link,
  .section-nav__link,
  .breadcrumbs a,
  .vm-live-blog-card__read,
  .blog-mag-section-head > a,
  .mistakes-hero__links a,
  .mistake-article-related__head > a,
  .vm-blog-sidebar-links a,
  .vm-brief__intro a,
  .vm-portfolio-hero a
):focus-visible,
body.site-shell :where(p, li, blockquote, figcaption) > a:hover:not(.button):not(.button-base):not(.w-button),
body.site-shell :where(p, li, blockquote, figcaption) > a:focus-visible:not(.button):not(.button-base):not(.w-button),
body.vm-home-live .vm-main-text-stile a:hover,
body.vm-home-live .vm-main-text-stile a:focus-visible,
body.vm-home-live .link-underline:hover,
body.vm-home-live .link-underline:focus-visible,
body.vm-home-live .external-link-text:hover,
body.vm-home-live .external-link-text:focus-visible,
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link):hover,
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link):focus-visible {
  color: var(--link-color-hover);
  background-size: 100% 1px, 0 1px;
}

.text-link:active,
body.site-shell .prose a:active,
body.site-shell .hero-copy a:active,
body.site-shell .link-underline:active,
body.site-shell .external-link-text:active,
body.site-shell :where(
  .vm-footer__text-link,
  .vm-footer__micro-link,
  .section-nav__link,
  .breadcrumbs a,
  .vm-live-blog-card__read,
  .blog-mag-section-head > a,
  .mistakes-hero__links a,
  .mistake-article-related__head > a,
  .vm-blog-sidebar-links a,
  .vm-brief__intro a,
  .vm-portfolio-hero a
):active,
body.site-shell :where(p, li, blockquote, figcaption) > a:active:not(.button):not(.button-base):not(.w-button),
body.vm-home-live .vm-main-text-stile a:active,
body.vm-home-live .link-underline:active,
body.vm-home-live .external-link-text:active,
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link):active {
  color: var(--link-color-active);
  background-size: 100% 2px, 0 1px;
  transition-duration: 70ms;
}

@supports (color: color-mix(in srgb, black 50%, transparent)) {
  .text-link,
  body.site-shell .prose a,
  body.site-shell .hero-copy a,
  body.site-shell .link-underline,
  body.site-shell .external-link-text,
  body.site-shell :where(
    .vm-footer__text-link,
    .vm-footer__micro-link,
    .section-nav__link,
    .breadcrumbs a,
    .vm-live-blog-card__read,
    .blog-mag-section-head > a,
    .mistakes-hero__links a,
    .mistake-article-related__head > a,
    .vm-blog-sidebar-links a,
    .vm-brief__intro a,
    .vm-portfolio-hero a
  ),
  body.site-shell :where(p, li, blockquote, figcaption) > a:not(.button):not(.button-base):not(.w-button),
  body.vm-home-live .vm-main-text-stile a,
  body.vm-home-live .link-underline,
  body.vm-home-live .external-link-text,
  body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link) {
    background-image:
      linear-gradient(var(--link-color-hover), var(--link-color-hover)),
      linear-gradient(
        color-mix(in srgb, currentColor var(--link-rule-opacity), transparent),
        color-mix(in srgb, currentColor var(--link-rule-opacity), transparent)
      );
  }
}

/* The same state language stays legible on black and near-black surfaces. */
body.site-shell :where(
  .site-footer,
  .blog-post-hero,
  .mistakes-hero,
  .blog-mag-reading__panel--dark,
  [data-theme="dark"]
),
body.vm-home-live :where(.site-footer, [data-theme="dark"]) {
  --link-color-hover: var(--link-color-hover-inverse);
  --link-color-active: var(--link-color-active-inverse);
  --link-rule-opacity: 46%;
}

.text-link--arrow,
.text-link--external {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
}

.text-link--arrow::after,
.text-link--external::after {
  display: inline-block;
  transition: transform var(--motion-text-feedback) var(--ease-out-quint);
}

.text-link--arrow::after {
  content: "→";
}

.text-link--external::after {
  content: "↗";
}

.text-link--arrow:hover::after,
.text-link--arrow:focus-visible::after {
  transform: translateX(0.22em);
}

.text-link--external:hover::after,
.text-link--external:focus-visible::after {
  transform: translate(0.16em, -0.16em);
}

/* Replace legacy one-off rules so standalone links share the same hairline. */
body.site-shell :where(
  .blog-mag-section-head > a,
  .mistake-article-related__head > a,
  .vm-live-blog-card__read,
  .vm-blog-sidebar-links a
) {
  border-bottom: 0;
}

body.site-shell :where(.section-nav__link, .vm-blog-sidebar-links a) {
  width: fit-content;
}

body.site-shell :where(.vm-footer__text-link, .vm-footer__micro-link),
body.vm-home-live :where(.vm-footer__text-link, .vm-footer__micro-link) {
  width: fit-content;
  max-width: 100%;
}

body.site-shell .vm-blog-sidebar-links a {
  padding-bottom: 2px;
}

/*
 * Links that own a card, chip, filter, or media surface keep that component's
 * shape, but use the same color timing and pressed-state language.
 */
body.vm-home-live :where(
  .media-item,
  .home-page-last-article-link,
  .vm-home-gallery-link
) {
  text-decoration: none !important;
}

body.vm-home-live :where(.media-item, .vm-home-gallery-link) {
  color: inherit !important;
}

body.vm-home-live .home-page-last-article-link {
  color: #ffffff !important;
}

body.site-shell :where(
  .panel-link,
  .post-card__title a,
  .blog-compact-card__body h3 a,
  .card-body h3 a,
  .mistake-card h3 a,
  .blog-mag-card h3 a,
  .blog-mag-mini h3 a,
  .blog-mag-tag-story > a,
  .vm-live-blog-card__title,
  .vm-blog-featured,
  .vm-portfolio-card > a,
  .vm-portfolio-filter a,
  .chip,
  .vm-blog-tag-links a
),
body.vm-home-live .vm--link-on-white:not(.text-link),
body.vm-home-live .vm-home-media-read,
body.vm-home-live .media-item h4,
body.vm-home-live .home-page-last-article-link h3 {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-text-feedback) var(--ease-out-quart);
}

body.site-shell :where(
  .panel-link,
  .post-card__title a,
  .blog-compact-card__body h3 a,
  .card-body h3 a,
  .mistake-card h3 a,
  .blog-mag-card h3 a,
  .blog-mag-mini h3 a,
  .blog-mag-tag-story > a,
  .vm-live-blog-card__title,
  .vm-blog-featured,
  .vm-portfolio-card > a,
  .vm-portfolio-filter a,
  .chip,
  .vm-blog-tag-links a
):hover,
body.site-shell :where(
  .panel-link,
  .post-card__title a,
  .blog-compact-card__body h3 a,
  .card-body h3 a,
  .mistake-card h3 a,
  .blog-mag-card h3 a,
  .blog-mag-mini h3 a,
  .blog-mag-tag-story > a,
  .vm-live-blog-card__title,
  .vm-blog-featured,
  .vm-portfolio-card > a,
  .vm-portfolio-filter a,
  .chip,
  .vm-blog-tag-links a
):focus-visible,
body.vm-home-live .vm--link-on-white:not(.text-link):hover,
body.vm-home-live .vm--link-on-white:not(.text-link):focus-visible {
  color: var(--link-color-hover);
}

body.vm-home-live .media-item:hover .vm-home-media-read,
body.vm-home-live .media-item:focus-visible .vm-home-media-read,
body.vm-home-live .media-item:hover h4,
body.vm-home-live .media-item:focus-visible h4 {
  color: var(--link-color-hover) !important;
}

body.vm-home-live .home-page-last-article-link:hover h3,
body.vm-home-live .home-page-last-article-link:focus-visible h3 {
  color: var(--link-color-hover-inverse) !important;
}

body.site-shell :where(
  .panel-link,
  .post-card__title a,
  .blog-compact-card__body h3 a,
  .card-body h3 a,
  .mistake-card h3 a,
  .blog-mag-card h3 a,
  .blog-mag-mini h3 a,
  .blog-mag-tag-story > a,
  .vm-live-blog-card__title,
  .vm-blog-featured,
  .vm-portfolio-card > a,
  .vm-portfolio-filter a,
  .chip,
  .vm-blog-tag-links a
):active,
body.vm-home-live .vm--link-on-white:not(.text-link):active {
  color: var(--link-color-active);
  transition-duration: 70ms;
}

body.vm-home-live .media-item:active .vm-home-media-read {
  color: var(--link-color-active) !important;
  transition-duration: 70ms !important;
}

body.vm-home-live .media-item:active h4 {
  color: var(--link-color-active) !important;
  transition-duration: 70ms !important;
}

body.vm-home-live .home-page-last-article-link:active h3 {
  color: var(--link-color-active-inverse) !important;
  transition-duration: 70ms !important;
}

body.site-shell a:focus-visible,
body.vm-home-live a:focus-visible,
body.site-shell button:focus-visible,
body.vm-home-live button:focus-visible,
body.site-shell input:focus-visible,
body.vm-home-live input:focus-visible,
body.site-shell textarea:focus-visible,
body.vm-home-live textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* One restrained text entrance per page; copy remains visible throughout. */
@keyframes vm-text-settle {
  from {
    opacity: 0.72;
    filter: blur(3px);
    transform: translateY(0.18em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.text-reveal,
body.site-shell .hero h1,
body.site-shell .article-hero h1,
body.site-shell .blog-post-hero h1,
body.site-shell .mistakes-hero h1,
body.site-shell .vm-live-blog-hero h1,
body.site-shell .vm-brief__intro h1,
body.site-shell .vm-portfolio-hero h1,
body.vm-home-live .section_header5.hero h1 {
  animation: vm-text-settle var(--motion-text-enter) var(--ease-out-expo) both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body.site-shell *,
  body.site-shell *::before,
  body.site-shell *::after,
  body.vm-home-live *,
  body.vm-home-live *::before,
  body.vm-home-live *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .text-link--arrow::after,
  .text-link--external::after {
    transform: none !important;
  }
}