/* Токены тем, базовые элементы, каркас страницы и анимации. */

/* Точки перелома, ими же заданы sizes у фотографий в разметке:
   до 560px  одна колонка в сетках, шапка в два ряда, фото на всю ширину;
   до 880px  две колонки в галерее, три в блоке Recently на Home;
   до 1000px прячется подсказка Scroll в первом экране;
   от 1440px контейнер перестаёт расти, фото в галерее шириной 460px. */


:root {
  color-scheme: light;
  --accent: #A8492B;
  --paper: #F2EEE7;
  --paper-rgb: 242 238 231;
  --panel: #E9E3D9;
  --band: #16130F;
  --ink: #16130F;
  --ink-rgb: 22 19 15;
  --ink-soft: #4A443C;
  --ink-mute: #6A635B;
  --ink-faint: #A79E92;
  /* Палитра тёмных полос: она одинаковая в обеих темах. */
  --band-text: #F2EEE7;
  --band-text-rgb: 242 238 231;
  --band-bright: #F7F4EF;
  --band-inverse: #16130F;
  /* Затемнение поверх фотографии первого экрана, тоже одно в обеих темах. */
  --shade-rgb: 18 15 12;
  --serif: 'Instrument Serif',Georgia,serif;
  --sans: 'Instrument Sans',system-ui,sans-serif;
  --ease-out: cubic-bezier(.2,.75,.2,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #c17f6b;
  --paper: #14110D;
  --paper-rgb: 20 17 13;
  --panel: #1E1A15;
  --band: #221D17;
  --ink: #F2EEE7;
  --ink-rgb: 242 238 231;
  --ink-soft: #C9C1B6;
  --ink-mute: #9C9488;
  --ink-faint: #847C70;
}


*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Кнопки интерфейса выглядят как текст или картинка, поэтому сброс стоит один раз здесь. */
button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Ссылки на сайте это меню, кнопки и карточки. Подчёркивание включает inline-link. */
a {
  color: var(--accent);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  outline-offset: 4px;
}

.section-dark :focus-visible {
  outline-color: var(--band-bright);
}


.container {
  width: min(1440px, 100% - clamp(40px, 6vw, 96px));
  margin-inline: auto;
}

.site-shell {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
}


.page {
  animation: fade-in .4s ease both;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

img {
  max-width:100%;
}


@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll-cue {
  0%, 100% {
    transform: scaleY(.35);
    opacity: .4;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}