/* ============================================================
   ROCKHILL — Design Tokens & Component Framework
   Извлечено из land.timurocher.com (лендинг «Земли Аджмана»)
   Подключение:
     <link href="https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="tokens.css">
   ============================================================ */

:root{
  /* ── Цвета · светлая тема (страница) ───────────── */
  --white:#FBFAF7;        /* чистый off-white          */
  --sea:#F6F4EF;          /* фон страницы              */
  --seash:#EFEAE0;        /* кремовая поверхность       */
  --ink:#16313A;          /* основной текст / тёмный     */
  --deep:#16313A;         /* тёмные блоки               */
  --deep-2:#0e2630;       /* подвал / самый тёмный       */
  --muted:#6B6760;        /* вторичный текст            */

  /* ── Акценты ───────────────────────────────────── */
  --gold:#B0843A;         /* главный акцент             */
  --gold-lt:#C9A14E;      /* светлый стоп золота        */
  --aqua:#E4C886;         /* шампань (акцент на тёмном)  */
  --atl:#137C8C;          /* бирюза / тил               */

  /* ── Линии и подложки ──────────────────────────── */
  --line:rgba(22,49,57,.12);          /* волосяная линия (свет)   */
  --line-dk:rgba(255,255,255,.10);    /* линия на тёмном          */
  --glass:rgba(255,255,255,.04);      /* стеклянная карточка       */
  --glass-bd:rgba(255,255,255,.10);   /* её граница               */

  /* ── Градиенты ─────────────────────────────────── */
  --grad-gold:linear-gradient(135deg,#C9A14E,#B0843A);
  --grad-dark:linear-gradient(160deg,#1a3b45 0%,#11272f 46%,#0b1c23 100%);

  /* ── Типографика ───────────────────────────────── */
  --font-serif:'Cormorant',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',system-ui,-apple-system,sans-serif;

  /* ── Скругления ────────────────────────────────── */
  --r-sm:7px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:30px;

  /* ── Тени ──────────────────────────────────────── */
  --shadow-soft:0 20px 44px -32px rgba(22,49,57,.24);
  --shadow-gold:0 6px 16px -10px rgba(176,132,58,.28);
  --shadow-btn:0 4px 12px -8px rgba(16,49,58,.3);

  /* ── Ритм ──────────────────────────────────────── */
  --measure:760px;        /* ширина читаемой колонки    */
  --line-body:1.7;        /* интерлиньяж текста         */
}

/* ── База ───────────────────────────────────────── */
body{font-family:var(--font-sans);color:var(--ink);background:var(--sea);line-height:var(--line-body);-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-serif)}

/* ── Типографические классы ─────────────────────── */
.dk-eyebrow{display:inline-block;font:700 12.5px/1.35 var(--font-sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.dk-h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(38px,6vw,64px);line-height:1.03;letter-spacing:-.01em;color:var(--ink)}
.dk-h2{font-family:var(--font-serif);font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.1;letter-spacing:-.005em;color:var(--ink)}
.dk-h3{font-family:var(--font-serif);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.2;color:var(--ink)}
.dk-lead{font-size:20px;color:var(--ink);line-height:1.6}
.dk-lead-line{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:clamp(22px,2.7vw,30px);color:var(--aqua)}
.dk-kicker{font:700 11.5px var(--font-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.dk-muted{color:var(--muted)}

/* ── Кнопки ─────────────────────────────────────── */
.dk-btn{display:inline-flex;align-items:center;gap:11px;padding:18px 42px;border-radius:var(--r-sm);background:var(--grad-gold);color:#fff;font:700 16px var(--font-sans);letter-spacing:.02em;text-decoration:none;box-shadow:none;border:0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.dk-btn:hover{transform:translateY(-2px)}
.dk-btn--dark{background:var(--deep);color:#fff;border:1px solid rgba(176,132,58,.4);box-shadow:var(--shadow-btn);padding:14px 26px;border-radius:var(--r-pill);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.dk-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}

/* ── Бейдж / пилюля ─────────────────────────────── */
.dk-badge{display:inline-block;background:var(--grad-gold);color:#fff;font:700 12.5px var(--font-sans);letter-spacing:.03em;padding:9px 15px;border-radius:var(--r-pill);box-shadow:none}

/* ── Карточка-цитата (P.S.) ─────────────────────── */
.dk-quote{padding:18px 22px;background:var(--white);border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;font-size:15px;line-height:1.56;color:var(--ink)}
.dk-quote b{color:var(--gold);font-weight:700}

/* ── Тёмная нумерованная карточка ───────────────── */
.dk-scard{position:relative;padding:22px 28px 22px 82px;background:var(--glass);border:1px solid var(--glass-bd);border-radius:var(--r-lg)}
.dk-scard .sn{position:absolute;left:24px;top:22px;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(176,132,58,.55);background:linear-gradient(145deg,rgba(176,132,58,.22),rgba(176,132,58,.04));display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;font-size:21px;color:var(--aqua)}
.dk-scard .st{font-family:var(--font-serif);font-weight:700;font-size:clamp(20px,2.2vw,25px);color:#fff;line-height:1.2;display:block;margin-bottom:8px}
.dk-scard p{margin:0;color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.58}
.dk-scard p b{color:var(--aqua);font-weight:600}