/* MyKyiv design tokens — копія :root з redesign/home-photos.html:11-43 1:1 */
:root{
  /* Ink & paper */
  --ink:#0e0e0f;
  --ink-2:#1b1b1d;
  --ink-3:#2b2b2e;
  --paper:#faf7f0;
  --paper-2:#f2ecdd;
  --paper-3:#e8e0cb;
  --line:rgba(14,14,15,.12);
  --line-strong:rgba(14,14,15,.28);
  --muted:#6b6458;
  --muted-2:#8a8378;

  /* MyKyiv brand colors — yellow + red, from my-kiev.com visual DNA */
  --yellow:#ffd400;
  --yellow-soft:#fff4a8;
  --yellow-deep:#f4c100;
  --red:#e5322a;
  --red-soft:#ffd8d4;
  --red-deep:#b3261e;
  --tg:#2aabee;
  --green:#2a7b3a;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;

  --shadow-1: 0 1px 0 rgba(14,14,15,.04), 0 2px 6px rgba(14,14,15,.05);
  --shadow-2: 0 4px 18px rgba(14,14,15,.08);
  --shadow-3: 0 10px 36px rgba(14,14,15,.10);

  --header-h: 64px;
  --quick-h: 56px;
}

/* Dark theme tokens — активується body[data-theme="dark"] (UI-перемикача наразі немає). */
body[data-theme="dark"]{
  --ink:#f6f1e4; --ink-2:#e9e3d3; --ink-3:#cfc9b9;
  --paper:#0f0f10; --paper-2:#17171a; --paper-3:#20202a;
  --line:rgba(246,241,228,.10); --line-strong:rgba(246,241,228,.26);
  --muted:#a9a294; --muted-2:#847d70;
  --yellow-soft: rgba(255,212,0,.18); --red-soft: rgba(229,50,42,.22);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; overflow-x: clip; max-width: 100%; }
body{
  font-family:'Manrope', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--header-h) + var(--quick-h));
  transition: padding-top .25s cubic-bezier(.2,.8,.3,1);
}
body.is-scrolled{
  --header-h: 52px;
  --quick-h: 44px;
}

img, svg{ max-width: 100%; }
img{ display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }

.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px){ .wrap{ padding: 0 16px; } }

/* Lock scroll while drawer / modal is open */
html.locked, body.locked{ overflow: hidden; }

/* Screen-reader-only helper */
.screen-reader-text{
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; word-wrap: normal !important;
}