/* ==========================================================================
   Греко — базовая дизайн-система
   Подключается первой на любой странице: <link rel="stylesheet" href="css/base.css" />
   Страничные стили (css/<page>.css) используют только токены отсюда.
   Описание и правила: DESIGN-SYSTEM.md, витрина: design-system.html
   ========================================================================== */

@font-face{font-family:Golos;src:url('../assets/golos-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Golos;src:url('../assets/golos-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Golos;src:url('../assets/golos-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/manrope-300.ttf') format('truetype');font-weight:300;font-display:swap}

/* ---------- 1. Токены ---------- */
:root{
  /* Палитра */
  --sand:#c7a36c;
  --sand-deep:#b58e59;
  --sand-soft:#e6d2af;
  --cream:#fffdf2;
  --paper:#f7f4eb;
  --stone:#ebe7dc;
  --yellow:#f3ec83;
  --yellow-hover:#fff9a7;
  --olive:#626e4c;
  --olive-soft:#89927f;
  --dark:#30382b;
  --dark-deep:#1c2019;
  --dark-hover:#48553d;
  --ink:#33372b;
  --muted:#73786a;
  --terracotta:#bb6b3d;
  --line:rgba(51,55,43,.16);

  /* Шрифты */
  --font-sans:Golos,Arial,sans-serif;
  --font-serif:Georgia,'Times New Roman',serif;
  --font-display:Manrope,Arial,sans-serif;

  /* Шкала размеров текста */
  --fs-caption:12px;
  --fs-small:14px;
  --fs-body:16px;
  --fs-lead:18px;
  --fs-h3:22px;
  --fs-h3-serif:clamp(30px,2.6vw,38px);
  --fs-h2:clamp(34px,4vw,52px);
  --fs-h1:clamp(38px,4.4vw,60px);
  --fs-stat:clamp(60px,6vw,84px);

  /* Шкала отступов (всё кратно 4) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:88px;
  --space-10:120px;

  /* Сетка и ритм страницы */
  --container:1200px;                        /* ширина контента */
  --gutter:clamp(20px,4vw,40px);             /* поля по бокам */
  --section-y:clamp(72px,9vw,120px);         /* вертикальный отступ секции */
  --head-gap:clamp(40px,5vw,72px);           /* от шапки секции до контента */
  --grid-gap:clamp(14px,1.6vw,20px);         /* между карточками */
  --card-pad:clamp(24px,2.4vw,32px);         /* внутренний отступ карточки */

  /* Форма */
  --radius-sm:4px;
  --radius:7px;
  --radius-pill:999px;
  --shadow-sm:0 8px 24px rgba(53,48,36,.06);
  --shadow:0 14px 34px rgba(53,48,36,.12);
  --shadow-lg:0 24px 90px rgba(38,37,27,.28);

  /* Движение */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:180ms;
  --dur-slow:420ms;

  /* Контроли */
  --control-h:48px;
  --control-h-sm:40px;
}

/* ---------- 2. Поверхности ----------
   Задают фон и локальные цвета. Всё внутри (текст, акцент em,
   приглушённый текст, контурные кнопки, фокус) подстраивается само. */
.surface-paper,.surface-stone,.surface-cream,.surface-sand,.surface-sand-soft,.surface-yellow,.surface-dark{background:var(--surface-bg);color:var(--surface-fg)}
:root,.surface-paper,.surface-stone,.surface-cream,.surface-sand-soft,.surface-yellow{--surface-bg:var(--paper);--surface-fg:var(--ink);--surface-muted:var(--muted);--surface-accent:var(--olive-soft);--surface-label:var(--terracotta);--surface-line:var(--line);--focus:var(--dark)}
.surface-stone{--surface-bg:var(--stone)}
.surface-cream{--surface-bg:var(--cream)}
.surface-sand-soft{--surface-bg:var(--sand-soft);--surface-fg:var(--dark);--surface-muted:rgba(48,56,43,.75)}
.surface-yellow{--surface-bg:var(--yellow);--surface-fg:var(--dark);--surface-muted:rgba(48,56,43,.72);--surface-accent:var(--olive)}
.surface-sand{--surface-bg:var(--sand);--surface-fg:var(--cream);--surface-muted:rgba(255,253,242,.82);--surface-accent:var(--yellow);--surface-label:var(--cream);--surface-line:rgba(255,253,242,.45);--focus:var(--yellow)}
.surface-dark{--surface-bg:var(--dark);--surface-fg:var(--cream);--surface-muted:rgba(255,253,242,.8);--surface-accent:var(--yellow);--surface-label:rgba(255,253,242,.7);--surface-line:rgba(255,253,242,.35);--focus:var(--yellow)}

/* ---------- 3. Сброс и база ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-5)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
a{color:inherit;text-decoration:none}
button{border:0;background:none;color:inherit;font:inherit;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip-link{position:fixed;z-index:20;top:-100px;left:var(--space-5);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--dark);color:var(--cream)}
.skip-link:focus{top:var(--space-3)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}

/* ---------- 4. Раскладка ---------- */
/* Единая ширина контента: всё, что выравнивается по краю, живёт в .container */
.container{width:min(var(--container),100% - 2 * var(--gutter));margin-inline:auto}
/* Секция: фон на всю ширину, контент внутри .container */
.section{padding-block:var(--section-y)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--flush-top{padding-top:0}

/* Шапка секции: заголовок слева, описание + действие справа */
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:var(--space-8);align-items:start;margin-bottom:var(--head-gap)}
.section-head--end{align-items:end}
.section-head__side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);padding-top:var(--space-1)}

.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--stack,var(--space-4))}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--space-3))}

/* ---------- 5. Типографика ---------- */
.kicker{font-size:var(--fs-caption);letter-spacing:1.2px;line-height:1.4;text-transform:uppercase;color:var(--surface-fg)}
.kicker--label{color:var(--surface-label)}
.h1,.h2,.h3-serif{font-family:var(--font-serif);color:inherit}
.h1{font-size:var(--fs-h1);letter-spacing:-.035em;line-height:1.08}
.h2{font-size:var(--fs-h2);letter-spacing:-.042em;line-height:1.08}
.h3-serif{font-size:var(--fs-h3-serif);letter-spacing:-.036em;line-height:1.08}
.h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.5px;line-height:1.2}
.h1 em,.h2 em,.h3-serif em{font-style:italic;color:var(--surface-accent)}
.stat{font-family:var(--font-serif);font-size:var(--fs-stat);font-variant-numeric:tabular-nums;letter-spacing:-.042em;line-height:.95}
.lead{font-size:var(--fs-lead);line-height:1.6}
.text{font-size:var(--fs-body);line-height:1.65}
.text-muted{color:var(--surface-muted)}
.text-small{font-size:var(--fs-small);line-height:1.55}
.kicker + .h1,.kicker + .h2{margin-top:var(--space-5)}

/* ---------- 6. Кнопки ----------
   Одна форма (pill), одна высота, один вес. Варианты различаются только цветом.
   <a|button class="btn btn--primary">Текст <span class="btn__icon" aria-hidden="true">→</span></a> */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-5);min-height:var(--control-h);padding:0 var(--space-5);border:1px solid transparent;border-radius:var(--radius-pill);font-size:var(--fs-body);font-weight:500;line-height:1;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.btn:active{transform:scale(.96)}
.btn__icon{font-size:19px;font-weight:400;line-height:1;transition:transform var(--dur) var(--ease)}
.btn:hover .btn__icon{transform:translateX(3px)}
.btn--primary{background:var(--yellow);color:var(--dark)}
.btn--primary:hover{background:var(--yellow-hover)}
.btn--dark{background:var(--dark);color:var(--cream)}
.btn--dark:hover{background:var(--dark-hover)}
.btn--light{background:var(--cream);color:var(--dark)}
.btn--light:hover{background:var(--yellow)}
.btn--ghost{border-color:var(--surface-line);background:transparent;color:inherit}
.btn--ghost:hover{border-color:currentColor;background:color-mix(in srgb,currentColor 8%,transparent)}
.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-4);gap:var(--space-3)}
.btn--block{width:100%}

/* Текстовая ссылка со стрелкой */
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid currentColor;font-size:var(--fs-body);transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.link-arrow:hover{color:var(--surface-accent);transform:translateY(-2px)}
.link-arrow span{font-size:18px;line-height:1}

/* ---------- 7. Карточки ---------- */
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow:hidden;padding:var(--card-pad);border-radius:var(--radius);background:var(--surface-bg);color:var(--surface-fg)}
.card--paper{--surface-bg:var(--cream);border:1px solid var(--line)}
.card__label{font-size:var(--fs-caption);letter-spacing:1px;line-height:1.4;text-transform:uppercase;color:var(--surface-label)}
.card__title{margin-top:var(--space-4)}
.card__body{max-width:340px;margin-top:auto;padding-top:var(--space-5);color:var(--surface-muted);line-height:1.6}
.card__footer{margin-top:auto;padding-top:var(--space-5)}

/* Карточка-фото: картинка на фоне, затемнение, контент поверх */
.card--media{--surface-bg:var(--dark);--surface-fg:var(--cream);--surface-muted:rgba(255,253,242,.8);--surface-accent:var(--yellow);--surface-label:rgba(255,253,242,.7);--surface-line:rgba(255,253,242,.35);--focus:var(--yellow)}
.card--media>.card__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.card--media::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,32,25,.86) 0%,rgba(28,32,25,.45) 50%,rgba(28,32,25,.8));content:''}
.card--media>:not(.card__media){position:relative;z-index:1}
.card--media:hover>.card__media{transform:scale(1.04)}

/* Угловая метка — фирменная деталь карточек */
.card--notch::before{position:absolute;top:0;right:0;width:44px;height:44px;border-bottom-left-radius:var(--radius);background:var(--notch-bg,var(--paper));content:''}
.card--paper.card--notch::before{top:-1px;right:-1px}
.card--notch::after{position:absolute;top:14px;right:14px;width:12px;height:12px;background:var(--notch,var(--dark));content:''}

/* Иконка в плашке */
.icon-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--olive);color:var(--cream)}

/* ---------- 8. Адаптив ---------- */
@media (max-width:1050px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{gap:var(--space-7)}
}
@media (max-width:760px){
  .grid--2,.grid--3{grid-template-columns:1fr}
  .section-head{grid-template-columns:1fr;gap:var(--space-5)}
  .section-head__side{padding-top:0}
}