/* Шрифты */
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap');



/* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1440,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
:root {
  --step--2: clamp(0.7813rem, 0.775rem + 0.0278vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9167rem + 0.0926vw, 1rem);
  --step-0: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2792rem + 0.3148vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.509rem + 0.4935vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7782rem + 0.7369vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0931rem + 1.0651vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4609rem + 1.5042vw, 3.8147rem);
}


/* Крошечный сброс всего мешающего */
h1,
h2,
h3,
h6,
p,
ul,
li {
  margin: 0;
}

body {
  --key-color: #370F2A;
  --coral-color: #F97068; /* #802361 */
  --blush-color: #FEECEB;
  --bg-color: #ffffff;

  --radius: 0.1rem;

  font-family: "Commissioner", sans-serif;
  
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "FLAR" 0,
    "VOLM" 0;
  
  font-size: var(--step-0);
  line-height: 1.3;
  margin: 0;
  padding: 0 1rem;
  max-width: 1400px;
  margin: 0 auto;
  
  color: var(--key-color);
  background-color: var(--bg-color);
}

img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
}

a {
  color: inherit;
  text-decoration-thickness: 0.5px;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.25em;
  transition: ease-in 0.15s;
}

a:hover {
  color: var(--coral-color);
  transition: ease-in 0s;
}

h1 {
  font-size: var(--step-5);
  line-height: 1.1;
  font-weight: 900;
  margin-bottom: 0.3em;
  margin-top: 0.3em;
}

h2 {
  font-size: var(--step-2);
  font-weight: 900;
}

h3 {
  font-size: var(--step-1);
  font-weight: 900;
}

h6 {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

p {
  font-weight: var(--step-0);
  font-style: normal;
}

b {
  font-weight: 900;
}

p + p,
p + hr,
hr + p,
h2 + p,
h3 + p,
h6 + p {
  margin-top: 0.5em;
}

p.lead {
  margin-bottom: 1em;
}

ul + p,
p + ul,
p + img,
img + p,
ul + img,
img + ul,
img + h2,
img + h3,
ul + h2,
ul + h3,
h2 + ul,
h3 + ul,
div + ul,
div + h1,
div + h2,
div + h3,
h1 + div,
h2 + div,
h3 + div,
div + p,
p + div {
  margin-top: 1em;
}

section {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.5rem;

  &.wide {
    max-width: 72rem;

    p:first-of-type{
      max-width: 52rem;
    }
  }
}

hr {
  border-color: var(--blush-color);
}

img.trip-cover {
  width: 90%;
  rotate: -0.7deg;
}

.tours h3 {
  margin-top: 0.6rem;
}

mark {
  background-color: var(--blush-color);
}

aside {
  background-color: var(--blush-color);
  padding: 0.8rem 1.2rem;
  color: var(--key-color);
  margin: 1rem 0;
}

button {
  display: block;

  cursor: pointer;

  margin: 1rem 0;
  padding: 0.4em 0.8em 0.6em 0.8em;
  
  background-color: transparent;
  color: var(--key-color);
  border-radius: var(--radius);
  border: solid 0.5px var(--key-color);
  
  font-family: "Commissioner", sans-serif;
  font-size: var(--step-0);
  font-weight: 500;
  
  transition: ease-in 0.15s;
}

button:hover {
  color: var(--coral-color);
  background-color: var(--blush-color);
  border: solid 0.5px var(--coral-color);
  transition: ease-in 0s;
}

button.tg::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path transform='translate(8,8) scale(1.4) translate(-8,-8)' d='M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: -0.12em;
  margin-left: 0.35em;
}

button.external::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0z'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: -0.12em;
  margin-left: 0.35em;
}

button.inst::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/></svg>");
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align: -0.12em;
  margin-left: 0.35em;
}

button.small {
  font-size: var(--step--1);
}


.content {
  padding-top: 1rem;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  padding: 0.5em 0;
}

header a, header button {
  pointer-events: auto;
  width: fit-content;
}

.header {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  background-color: var(--bg-color);
  border-bottom: solid 0.5px var(--key-color);

  button.small {
    margin: 0;
    height: fit-content;
  }
}

a.header-logo {
  font-size: var(--step--1);
  font-weight: 900;
  font-variation-settings: "slnt" 0, "FLAR" 0, "VOLM" 100;
  line-height: 1;
  border: none;
  text-decoration: none;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  column-gap: 1em;
  font-size: var(--step--1);
  height: fit-content;

  a, span {
    border: none;
    text-decoration: none;
    width: fit-content;
  }

  span {
    color: var(--coral-color);
  }
}

.nav-social {
  display: flex;
  flex-direction: row;
  gap: 0.75em;
  margin-top: 0.25em;
}

.nav-social .nav-social__icon {
  display: block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transition: ease-in 0.15s;

  &:hover {
    color: var(--coral-color);
    transition: ease-in 0s;
  }

  &.tg {
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path transform='translate(8,8) scale(1.4) translate(-8,-8)' d='M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09'/></svg>");
  }

  &.inst {
    width: 1em;
    height: 1em;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334'/></svg>");
  }
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 auto;
  margin-bottom: 0.5em;

  font-size: var(--step--1);
}

.banner {
  background-color: var(--coral-color);
  padding: 0.8rem 1.2rem;
  margin-top: 1rem;
  color: var(--bg-color);

  button {
    color: var(--bg-color);
    border-color: var(--bg-color);

    &:hover {
      color: var(--coral-color);
    }
  }

  a:hover {
    color: var(--blush-color);
  }
}

.button-row {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-top: 0;
}

.button-note {
  font-size: var(--step--1);
}

.footer {
  margin-top: 5rem;
}

.hero > * {
  margin-left: auto;
  margin-right: auto;
}

section.hero h1 {
  font-size: var(--step-5);
  font-weight: 900;
  font-variation-settings: "slnt" 0, "FLAR" 0, "VOLM" 100;
  text-align: center;
  line-height: 1.1;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

section.hero img {
  width: 80%;
  rotate: -0.7deg;
  margin-top: 0;
}

section.hero p {
  text-align: center;
  margin-bottom: 1.5rem;
}


p.img-caption {
  font-size: var(--step--1) !important;
  margin-top: 0.5em;
}

.grid {
  display: grid;
  gap: 1.3rem;
  margin-bottom: 1rem;

  &.XXL {
    grid-template-columns: 1fr;
  }

  &.XL {
    grid-template-columns: 1fr 1fr;
  }

  &.L {
    grid-template-columns: 1fr 1fr 1fr;
  }

  &.M {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  &.S {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}


.grid.tours a {
  text-decoration: none;
}

.grid.border > .grid-card {
  box-sizing: border-box;
  border-width: 0.5px;
  border-radius: var(--radius);
  border-style: solid;
  border-color: var(--key-color);
  padding: 0 1rem;
}

.grid.tours a.grid-card > h3 {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.25em;
}

.grid.tours ul {
  list-style: none;
  padding-left: 0;
}

.tag {
  display: block;
  width: fit-content;
  padding: 0.3rem 0.6rem;
  background-color: var(--blush-color);
  font-size: var(--step--2);
  font-weight: 500;
}


.inline-note__trigger {
  cursor: pointer;
  margin-left: 0.2em;
  margin-right: 0.2em;
  opacity: 0.5;
  padding-bottom: 0.1em;
  user-select: none;
  transition: ease-in 0.15s;
}

.inline-note__trigger:hover {
  color: var(--coral-color);
  opacity: 1;
  transition: ease-in 0s;
}

.inline-note__text {
  display: none;
}

.inline-note.open .inline-note__text {
  display: inline;
}

.inline-note.open .inline-note__trigger {
  display: none;
}

.inline-note__close {
  cursor: pointer;
  opacity: 0.4;
  margin-left: 0.2em;
  user-select: none;
}

.inline-note__close:hover {
  opacity: 1;
}




span.bulletpoint,
.coral {
  color: var(--coral-color);
}

.noto {
  font-family: 'Noto Emoji', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

ul {
  list-style: none;
  padding-left: 0;
}

ul li::before {
  content: "●";
  color: var(--coral-color);
  margin-right: 0.4em;
}

li + li {
  margin-top: 1rem;
}

span.infopoint {
  color: var(--coral-color);
  font-weight: 900;
  font-size: var(--step-2);
}

div.trip-page section {
  margin-bottom: 2rem;
}

.blog-post {
  .breadcrumbs {
    font-size: var(--step--2);
    margin-bottom: 1.5rem;

    a {
      text-decoration: none;
    }

    span[aria-hidden] {
      margin: 0 0.2em;
    }
  }

  .blog-post__date {
    margin-bottom: 0.4rem;
    font-size: var(--step--2) !important;
  }

  .blog-post__body {
    h1 {
      font-size: var(--step-4);
      line-height: 1;
      margin-top: 1rem;
      margin-bottom: 1.4rem;
    }

    h2 {
      font-size: var(--step-3);
      line-height: 1;
      margin-top: 3rem;
      margin-bottom: 1.4rem;
    }

    h3 {
      font-size: var(--step-2);
      line-height: 1;
      margin-top: 3rem;
      margin-bottom: 1.4rem;
    }

    p {
      font-size: var(--step-0);
      line-height: 1.3;
      margin-bottom: 1rem;
    }

    hr {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    img {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    figure {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;

      img {
        margin-top: 0;
        margin-bottom: 0;
      }
    }

    figcaption {
      display: block;
      font-size: var(--step--1);
    }
  }
}


.marginnote-wrap {
  position: relative;
}

.lead {
  font-size: var(--step-1);
}

.marginnote {
  margin: 0.5rem 0 0;
}

div.stack {
  &.XS {
    margin-bottom: 0.5rem;
  }
  &.S {
    margin-bottom: 1rem;
  }
  &.M {
    margin-bottom: 2rem;
  }
  &.L {
    margin-bottom: 3rem;
  }
}

@media (max-width: 768px) {
  header {
    position: static;
    padding: 0.5em 0;
  }

  .header {
    height: auto;
    flex-direction: row;
    align-items: center !important;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .nav-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--key-color);
    pointer-events: auto;
  }

  .nav {
    display: none;
    flex-direction: column;
    column-gap: 0;
    row-gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
  }

  .header.nav-open .nav {
    display: flex;
  }

  .header > button.tg {
    display: none;
  }

  .header.nav-open > button.tg {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
  }

  section.hero img {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  section img:first-child {
    margin-top: 1rem;
  }

  .grid {
    &.XL, &.L {
      grid-template-columns: 1fr;
    }

    &.M, &.S {
      grid-template-columns: 1fr 1fr;
    }
  }

  .button-row {
    flex-direction:column;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: 0;

    button + button {
      margin-top: 0;
    }
  }

  .grid.tours .grid-card:nth-child(odd) img {
    rotate: -0.7deg;
  }

  .grid.tours .grid-card:nth-child(even) img {
    rotate: 0.7deg;
  }

  .banner {
    padding: 0.5rem 1rem 1rem 1rem;
  }

  img.trip-cover {
    width: 100%;
  }

  .desktop-only {
    display: none;
  }

}

@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }

  .marginnote {
    position: absolute;
    left: calc(100% + 2rem);
    top: 0;
    width: 9rem;
    margin: 0;
  }
}