/* ============================================================================
   Metamodern Brand System — токены.
   Снято измерением живого metamodern.studio 2026-07-30:
   computed styles через playwright + доминирующие цвета по пикселям hero.
   Тёмная тема: повторное измерение живого Studio 2026-09-14 и сверка с
   src/styles/global.css проекта metamodern-portfolio.
   Значения не подобраны на глаз. Меняя их, приложи новое измерение.
   ========================================================================== */

:root {
  color-scheme: light;
  /* --- Поверхности ------------------------------------------------------- */
  /* Фон страницы = цвет мрамора. Не чистый белый: холодный сдвиг в синь. */
  --mm-surface:        oklch(0.967 0.001 286.375);  /* ~#F4F4F5 — измерено и в CSS, и в пикселях */
  --mm-surface-raised: oklch(1 0 0);                /* белые карточки поверх фона */
  --mm-hairline:       oklch(0.92 0.004 286.32);    /* самый частый цвет на странице: линии и рамки */

  /* --- Чернила ----------------------------------------------------------- */
  --mm-ink:        oklch(0.141 0.005 285.823);      /* основной текст, почти чёрный с холодным сдвигом */
  --mm-ink-soft:   oklch(0.141 0.005 285.823/ 0.65);
  --mm-ink-faint:  oklch(0.141 0.005 285.823 / 0.4);

  /* --- Золото. Единственный цвет в системе ------------------------------- */
  /* Золото студии. Контраст к --mm-surface = 4.44:1 — пересчитано 2026-07-30.
     По WCAG это проходит для КРУПНОГО текста (>=24px, порог 3:1) и НЕ проходит
     для мелкого (порог 4.5:1). Студия им набирает курсив 24px — там всё честно. */
  --mm-gold-ink:   #936A00;   /* измерено на курсиве «Modern solutions for post-reality problems» */
  /* Для текста МЕЛЬЧЕ 24px брать это: 4.89:1, проходит AA. */
  --mm-gold-ink-sm: #8A6400;
  /* Светлое золото — ДЛЯ ГРАФИКИ: венки, тонкие линии, прожилки. Для текста НЕ годится. */
  --mm-gold-line:  #CEBC9A;   /* измерено на лавровых венках */
  --mm-gold-glow:  #CEBC9A33; /* мягкое свечение/подложка под акцент */

  /* --- Мрамор в изображениях --------------------------------------------- */
  --mm-marble-lit:    #F4F4F5;  /* освещённая масса камня */
  --mm-marble-shadow: #EFEFEF;  /* собственная тень камня — разница мала, камень мягкий */

  /* --- Типографика ------------------------------------------------------- */
  --mm-font-display: "Instrument Serif", Georgia, serif;
  --mm-font-text:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* КИРИЛЛИЦА. Измерено 2026-07-30 по Google Fonts API: у Instrument Serif и
     Instrument Sans подмножества только latin и latin-ext — кириллицы НЕТ.
     Русский текст, набранный эталоном, молча упадёт на Georgia/Arial.
     Пара выбрана Иваном по отрисованному сравнению трёх кандидатов. */
  --mm-font-display-cyr: "Playfair Display", Georgia, serif;
  --mm-font-text-cyr:    "Onest", ui-sans-serif, system-ui, sans-serif;

  /* Крупный заголовок: вес 400 (НЕ жирный) и отрицательный трекинг.
     Без отрицательного трекинга заголовок читается как чужой. */
  --mm-h1-size:     72px;
  --mm-h1-line:     0.9;      /* 64.8 / 72 — измерено */
  --mm-h1-tracking: -0.05em;  /* -3.6px при 72px — измерено */
  --mm-h1-weight:   400;

  --mm-h2-size: 24px;  --mm-h2-line: 1.333;
  --mm-h3-size: 30px;  --mm-h3-line: 1.625;
  --mm-body-size: 16px; --mm-body-line: 1.6;   /* 25.6 / 16 — измерено */

  /* --- Движение ---------------------------------------------------------- */
  /* Длительность зацикленного клипа. Hero студии = 5.05 с — держим этот порядок:
     короче ощущается как дёрганая гифка, длиннее весит зря. */
  --mm-loop-seconds: 5;
  /* Переход между состояниями проигрывается системой, а не скрабится. */
  --mm-transition-seconds: 1;
  --mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Studio dark theme. System preference applies unless the theme is explicit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mm-surface: oklch(0.141 0.005 285.823);
    --mm-surface-raised: oklch(0.21 0.006 285.885);
    --mm-hairline: oklch(1 0 0 / 0.1);
    --mm-ink: oklch(0.985 0 0);
    --mm-ink-soft: oklch(0.705 0.015 286.067);
    --mm-ink-faint: oklch(0.705 0.015 286.067);
    --mm-gold-ink: oklch(0.8 0.05 83.25);
    --mm-gold-ink-sm: oklch(0.8 0.05 83.25);
  }
}
:root[data-theme="dark"], :root.dark:not([data-theme="light"]) {
  color-scheme: dark;
  --mm-surface: oklch(0.141 0.005 285.823);
  --mm-surface-raised: oklch(0.21 0.006 285.885);
  --mm-hairline: oklch(1 0 0 / 0.1);
  --mm-ink: oklch(0.985 0 0);
  --mm-ink-soft: oklch(0.705 0.015 286.067);
  --mm-ink-faint: oklch(0.705 0.015 286.067);
  --mm-gold-ink: oklch(0.8 0.05 83.25);
  --mm-gold-ink-sm: oklch(0.8 0.05 83.25);
}

/* Типографические заготовки — чтобы не переписывать значения в каждом проекте. */
.mm-display {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-h1-weight);
  font-size: var(--mm-h1-size);
  line-height: var(--mm-h1-line);
  letter-spacing: var(--mm-h1-tracking);
  color: var(--mm-ink);
}
/* Акцентный курсив под заголовком — единственное место, где текст золотой. */
.mm-lede {
  font-family: var(--mm-font-display);
  font-style: italic;
  font-size: 24px;
  color: var(--mm-gold-ink);
}
/* Русские страницы берут кириллическую пару автоматически — по атрибуту lang.
   Ставить руками в компоненте нельзя: забудут на одной странице из десяти. */
:lang(ru) .mm-display,
:lang(ru) .mm-lede { font-family: var(--mm-font-display-cyr); }
:lang(ru) body.mm,
body.mm:lang(ru)   { font-family: var(--mm-font-text-cyr); }

body.mm {
  background: var(--mm-surface);
  color: var(--mm-ink);
  font-family: var(--mm-font-text);
  font-size: var(--mm-body-size);
  line-height: var(--mm-body-line);
}

/* Уважать просьбу выключить движение: показываем постер, снимаем автозапуск. */
@media (prefers-reduced-motion: reduce) {
  .mm-loop video { display: none; }
  .mm-loop { background-size: cover; background-position: center; }
}

/* September review. Values come from the canonical brand tokens prepended by build. */
.hero-tagline,.hero-mobile-tagline{color:var(--mm-gold-line)}
/* Keep the first frame visible before hydration and while playback is suspended. */
.hero-video-frame,.hero-mobile-video-frame{--hero-poster:url('/video/hero-poster-w.jpg')}
:root.dark .hero-video-frame,:root.dark .hero-mobile-video-frame{--hero-poster:url('/video/hero-poster-d.jpg')}
.hero-video-frame{background-image:var(--hero-poster);background-position:center;background-size:contain;background-repeat:no-repeat}
.hero-mobile-video-frame:before{content:"";position:absolute;bottom:0;left:50%;translate:-50% 0;width:100vw;height:115%;background-image:var(--hero-poster);background-position:center;background-size:contain;background-repeat:no-repeat}
.hero-video-element,.hero-mobile-video-element{opacity:1;filter:none}
#hero video.hero-playback-fallback{opacity:0}
astro-island[component-export="NavigationMenu"] .text-gold{color:var(--mm-gold-line)}
/* A transformed button wrapper must not become the fixed menu's containing block. */
.site-nav,.site-entered .site-nav,.site-nav-visible{transform:none;transition:opacity var(--duration-normal) ease}
.studio-menu-panel{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
section.w-full.py-2.border-t.overflow-hidden>.container:before{content:"Selected project work"}
.loading-catchphrase{font-family:var(--mm-font-display);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1.1;letter-spacing:-.015em}
.loading-cta-ready{font-family:var(--mm-font-display);font-weight:400;letter-spacing:.16em;text-indent:.16em;background:var(--mm-gold-line);animation:studioCtaGlow 2s ease-in-out infinite}
.loading-cta-ready:hover{box-shadow:0 0 12px var(--mm-gold-glow),0 0 26px var(--mm-gold-glow)}
@keyframes studioCtaGlow{0%,100%{box-shadow:0 0 8px var(--mm-gold-glow),0 0 18px var(--mm-gold-glow)}50%{box-shadow:0 0 12px var(--mm-gold-glow),0 0 24px var(--mm-gold-glow)}}
@media(prefers-reduced-motion:reduce){.loading-cta-ready{animation:none;box-shadow:0 0 12px var(--mm-gold-glow)}}

/* Contact and navigation icon strokes use the same canonical gold as the menu mark. */
astro-island[component-export="Footer"] a[title] svg,
astro-island[component-export="NavigationMenu"] svg{color:var(--mm-gold-line)}
/* Touch browsers must composite the video background just like desktop. */
#hero .hero-mobile-video-container,#hero .hero-right-col{mix-blend-mode:darken}
:root.dark #hero .hero-mobile-video-container,:root.dark #hero .hero-right-col{mix-blend-mode:lighten}
@media(max-width:1023px){
  #hero{min-height:0}
  .hero-mobile-container{flex:none;padding-bottom:24px}
  .hero-mobile-video-container{flex:none}
  .hero-mobile-video-frame{aspect-ratio:4/5;min-height:0}
}
@media(hover:none),(pointer:coarse){
  .studio-menu-panel,.studio-menu-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .studio-menu-panel{background:var(--background)}
}
/* One composed first screen: flexible media between heading and partner marks. */
@media(max-width:1023px){
  #hero{min-height:100svh}
  .hero-mobile-container{flex:1;min-height:100svh;padding-bottom:24px}
  .hero-mobile-video-container{flex:1;min-height:0;align-items:center}
  .hero-mobile-video-frame{width:100%;max-width:20rem;aspect-ratio:3/4;min-height:0}
}
@media(max-width:1023px){
  .hero-mobile-container{height:100svh;min-height:660px}
  .hero-mobile-video-container{flex:1 1 0;min-height:220px;position:relative}
  .hero-mobile-video-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto}
  .hero-mobile-video-element{width:100%;height:100%;left:0;translate:none;object-fit:contain}
  .hero-mobile-video-frame:before{width:100%;height:100%;left:0;translate:none}
}

/* Shared footer: deliberate 1 / 2 / 1 rhythm, with all services in two columns. */
.site-footer.site-footer--balanced .site-footer-in{width:min(100%,1280px);margin-inline:auto;padding:56px 48px 32px}
.site-footer.site-footer--balanced nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.site-footer--balanced .site-footer-studio{display:grid;gap:30px}
.site-footer.site-footer--balanced .site-footer-h{font-family:inherit;font-size:10px;font-weight:500;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--foreground);margin:0 0 15px}
.site-footer.site-footer--balanced ul{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.site-footer.site-footer--balanced li{margin:0}
.site-footer--balanced .site-footer-service-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.site-footer--balanced .site-footer-all{margin-bottom:14px}
.site-footer.site-footer--balanced nav a{display:inline-block;font-size:13px;line-height:1.55;color:var(--muted-foreground);padding-block:4px;text-decoration:none;overflow-wrap:anywhere}
.site-footer.site-footer--balanced nav a:hover{color:var(--foreground);text-decoration:underline;text-underline-offset:4px}
.site-footer--balanced a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.site-footer--balanced .site-footer-bottom{margin-top:36px;padding-top:22px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;justify-content:space-between}
.site-footer.site-footer--balanced .site-footer-note,.site-footer--balanced .site-footer-rights{font-size:11px;line-height:1.7;color:var(--muted-foreground);margin:0;padding:0;border:0}
.site-footer--balanced .site-footer-rights{white-space:normal}
@media(max-width:1100px){.site-footer.site-footer--balanced .site-footer-in{padding-inline:32px}.site-footer.site-footer--balanced nav{gap:28px}.site-footer--balanced .site-footer-service-columns{gap:20px}}
@media(max-width:800px){.site-footer.site-footer--balanced nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.site-footer--balanced .site-footer-services{grid-column:1/-1;grid-row:2}.site-footer--balanced .site-footer-service-columns{gap:32px}.site-footer.site-footer--balanced nav a{padding-block:6px}}
@media(max-width:639px){.site-footer.site-footer--balanced .site-footer-in{padding:40px 24px 28px}.site-footer--balanced .site-footer-bottom{margin-top:28px}.site-footer.site-footer--balanced nav{gap:28px 20px}.site-footer--balanced .site-footer-service-columns{gap:20px}}

/* All columns share a heading baseline and four consistently spaced link rows. */
.site-footer.site-footer--balanced nav{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2fr);column-gap:48px}
.site-footer.site-footer--balanced .site-footer-h a{display:block;font:inherit;letter-spacing:inherit;color:inherit;padding:0;line-height:inherit}
.site-footer--balanced .site-footer-service-columns{column-gap:32px}
.site-footer--balanced .site-footer-bottom{display:grid;grid-template-columns:1fr;gap:8px;margin-top:32px}
@media(max-width:800px){.site-footer.site-footer--balanced nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.site-footer--balanced .site-footer-services{grid-column:1/-1;grid-row:2}}