/* ==========================================
   DRAGOLMS · CZECH STORYBOOK EMBROIDERY
   ========================================== */

:root {
  --folk-rose: #b72c32;
  --folk-blue: #344c91;
  --folk-green: #416f49;
  --folk-yellow: #e9ac43;
  --folk-ivory: #f0dfc0;
}

/* Cobblestone background is controlled by ceramic-folk.css. */

/* Decorative embroidered side borders */
.page {
  position: relative;
  isolation: isolate;
}

.page::before,
.page::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(38px, 8.3vw, 104px);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

/* Left embroidery */
.page::before {
  left: 0;
  background-image: url('/assets/images/folk-1.svg');
}

/* Right embroidery */
.page::after {
  right: 0;
  background-image: url('/assets/images/folk-2.svg');
  transform: scaleX(-1);
}

/* Keep text above decorations */
.page > .topline,
.page > .site-header,
.page > main,
.page > footer {
  position: relative;
  z-index: 2;
  padding-left: clamp(43px, 8.5vw, 114px) !important;
  padding-right: clamp(43px, 8.5vw, 114px) !important;
}

/* Storybook headings */
.page .hero,
.page .page-heading {
  background: radial-gradient(
    ellipse at 50% 38%,
    #29436d,
    #142640 78%
  );
}

.page .hero h1,
.page .page-heading h1 {
  color: #fff1d9;
  text-shadow: 2px 3px 0 #9a3448;
}

/* Cards */
.page .tile,
.page .paper {
  border-color: #b74b4c;
  box-shadow: 5px 5px 0 #101c33;
}

.page .tile h2,
.page .paper h2 {
  color: #244d70;
}

/* Buttons and ornaments */
.page .ornament,
.page .section-label {
  color: #f2c34d;
}

.page .brand-flower {
  color: #b72c32;
}

.page .button.primary {
  background: #b52b42;
  border-color: #e2b650;
}

/* Embroidery on the prologue */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url('/assets/images/folk-3.svg'),
    url('/assets/images/folk-4.svg');
  background-repeat: repeat-y, repeat-y;
  background-position: left top, right top;
  background-size: clamp(42px, 8vw, 96px) auto;
  opacity: .75;
  z-index: 0;
}

.intro-inner,
.intro-controls {
  position: relative;
  z-index: 2;
}

/* Preserve the navy storybook interior */
.site-header,
footer {
  background: #172b49;
}

.intro {
  background-color: #14263f;
  background-image: radial-gradient(
    ellipse at center,
    #253f67,
    #101c33 82%
  );
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .3em;
}

.brand .brand-flower:last-child {
  margin-left: .1em;
}

/* Mobile */
@media (max-width: 700px) {
  .page::before,
  .page::after {
    width: 26px;
    opacity: .8;
  }

  .page > .site-header,
  .page > .topline,
  .page > main,
  .page > footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .intro::after {
    background-size: 32px auto;
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page::before,
  .page::after,
  .intro::after {
    animation: none !important;
  }
}