/* Warm botanical palette for the home page and photographic albums. */
:root {
  color-scheme: light;
  --ink: #44362b;
  --muted: #66513d;
  --paper: #eee0cd;
  --panel: #e2cfb7;
  --line: rgba(105, 78, 54, .2);
  --accent: #855c3d;
  --boho-cream: #f4e7d4;
  --boho-sand: #dfc8ab;
  --boho-olive: #696a50;
}
body { background: var(--paper); color: var(--ink); }
.hero-band, .about-band, .gallery, .contact, .album-intro, .photo-gallery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.hero-band, .album-intro {
  background: radial-gradient(ellipse at 78% 24%, #f6e9d7 0, transparent 66%), linear-gradient(115deg, #e4d0b6, #efe0cb 62%, #e8d6bd);
}
.gallery, .photo-gallery {
  background: radial-gradient(ellipse at 12% 10%, rgba(172, 128, 81, .23), transparent 42%), linear-gradient(140deg, #f2e4d1, #dfc9ae 58%, #efe0ca);
  color: var(--ink);
  border-color: var(--line);
}
.about-band { background: linear-gradient(125deg, #e3cfb5, #ede0cd 68%, #ddc7aa); }
.contact { background: linear-gradient(130deg, #efe1cd, #e3ceb4 76%, #ead8c1); }

/* Existing transparent floral artwork stays at the edges, behind all content. */
.hero-band::before, .about-band::before, .gallery::before, .contact::before,
.album-intro::before, .photo-gallery::before,
.hero-band::after, .about-band::after, .gallery::after, .contact::after,
.album-intro::after, .photo-gallery::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 1160px;
  height: 1160px;
  background: url('/graphics/kwiaty-boho.webp') center / contain no-repeat;
  pointer-events: none;
  user-select: none;
}
.hero-band::before, .about-band::before, .gallery::before, .contact::before,
.album-intro::before, .photo-gallery::before {
  top: -130px;
  left: -700px;
  transform: rotate(82deg);
  opacity: .23;
}
.hero-band::after, .about-band::after, .gallery::after, .contact::after,
.album-intro::after, .photo-gallery::after {
  right: -690px;
  bottom: -165px;
  transform: rotate(-82deg);
  opacity: .18;
}
.gallery::before, .photo-gallery::before {
  width: 1480px;
  height: 1480px;
  top: 200px;
  left: -900px;
  opacity: .36;
}
.gallery::after, .photo-gallery::after {
  width: 1480px;
  height: 1480px;
  right: -900px;
  bottom: 50px;
  opacity: .32;
}
.contact::before { top: 30px; }

/* Let the existing camera illustration read as a full boho artwork in Contact. */
.contact-art {
  width: min(100%, 360px);
  height: clamp(360px, 33vw, 420px);
  margin-top: 28px;
  border-color: rgba(112, 83, 57, .3);
  background: #eee0cd;
  box-shadow: 0 12px 30px rgba(67, 49, 33, .12);
}
.contact-art img {
  object-fit: cover;
  object-position: 50% 66%;
  transform: scale(1.1);
  transform-origin: 50% 66%;
}

.hero p, .hero .text-link, .hero-portrait figcaption,
.about-copy, .album-intro p { color: var(--muted); }
.eyebrow, .gallery .eyebrow, .album-hint { color: var(--accent); }
.gallery .section-head p { color: var(--muted); }
.about-studio { border-color: #eee2d1; }
.button { border-color: var(--accent); }
.button:hover, .button:focus-visible { background: var(--accent); color: #fffaf2; }
.tile { background: var(--panel); }
.tile-link:focus-visible, .photo-open:focus-visible { outline-color: var(--accent); }
.photo-card { background: var(--panel); }
.back, .bottom-nav { color: var(--muted); }
.back:hover, .back:focus-visible, .bottom-nav a:hover, .bottom-nav a:focus-visible { color: var(--ink); }
.topbar { border-color: var(--line); }

.contact h2, .contact-booking, .contact-arrow { color: var(--accent); }
.contact-card {
  background: linear-gradient(135deg, rgba(255, 251, 243, .62), rgba(242, 230, 213, .72));
  border-color: rgba(112, 83, 57, .24);
  color: var(--ink);
}
.contact-card:hover, .contact-card:focus-visible {
  border-color: rgba(112, 83, 57, .6);
  background: #faf3e8;
}
.contact-label { color: var(--muted); }
.contact-icon { color: var(--accent); border-color: rgba(112, 83, 57, .32); }
.contact-map { background: linear-gradient(105deg, #dddcc9, #eae2d3 76%); border-color: rgba(98, 101, 78, .3); }
.contact-map .contact-icon { background: rgba(98, 101, 78, .07); }
.contact-art { border-color: rgba(112, 83, 57, .24); }
footer { color: var(--muted); }
:focus-visible { outline-color: var(--accent); }

/* The enlarged photograph keeps a quiet, dark surround and light controls. */
.lightbox { color-scheme: dark; }
.lightbox button:focus-visible { outline-color: #e6dbc4; }
@media (max-width: 760px) {
  .hero-band::before, .about-band::before, .gallery::before, .contact::before,
  .album-intro::before, .photo-gallery::before {
    left: -560px;
    opacity: .09;
  }
  .hero-band::after, .about-band::after, .gallery::after, .contact::after,
  .album-intro::after, .photo-gallery::after {
    right: -580px;
    opacity: .07;
  }
  .gallery::before, .photo-gallery::before {
    left: -610px;
    opacity: .15;
  }
  .gallery::after, .photo-gallery::after {
    right: -615px;
    opacity: .13;
  }
  .contact-art {
    height: 350px;
    width: min(100%, 330px);
    margin-top: 24px;
  }
}