:root{
  --forest: #1E3A2C;
  --forest-deep: #142A1F;
  --cream: #F4F0E6;
  --sage: #D9E5DC;
  --ink: #23281F;
  --gold: #C9A24A;
  --gold-soft: #E4CE97;
  --white: #FBFAF6;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --dur: 650ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--forest-deep);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

/* ---------- Top bar ---------- */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  pointer-events:none;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--white);
  pointer-events:auto;
}
.brand-mark{ color: var(--gold-soft); display:flex; }
.brand-text{
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.brand-text em{ font-style: italic; color: var(--gold-soft); }
.brand-tagline{
  margin:0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: .85;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
@media (max-width: 640px){
  .brand-tagline{ display:none; }
}

/* ---------- Split layout ---------- */
.split{
  display:flex;
  width:100%;
  height:100vh;
  min-height: 560px;
}

.panel{
  position:relative;
  flex: 1 1 50%;
  min-width: 0;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
  transition: flex-grow var(--dur) var(--ease);
  cursor:pointer;
  outline-offset: -6px;
}
.panel:focus-visible{
  outline: 2px solid var(--gold-soft);
}

.split:has(.panel--eshop:hover) .panel--eshop{ flex-grow: 1.55; }
.split:has(.panel--eshop:hover) .panel--ubytovna{ flex-grow: 0.65; }
.split:has(.panel--ubytovna:hover) .panel--ubytovna{ flex-grow: 1.55; }
.split:has(.panel--ubytovna:hover) .panel--eshop{ flex-grow: 0.65; }

.panel__media{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform calc(var(--dur) + 250ms) var(--ease), filter var(--dur) var(--ease);
  filter: saturate(.85) brightness(.72);
  z-index:-2;
}
.panel:hover .panel__media,
.panel:focus-visible .panel__media{
  transform: scale(1.0);
  filter: saturate(1) brightness(.62);
}

.panel__veil{
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(20,42,31,.15) 0%, rgba(20,42,31,.35) 55%, rgba(20,42,31,.88) 100%);
  transition: background var(--dur) var(--ease);
}
.panel--eshop .panel__veil{
  background:
          linear-gradient(180deg, rgba(20,42,31,.10) 0%, rgba(20,42,31,.30) 55%, rgba(20,42,31,.90) 100%);
}
.panel--ubytovna .panel__veil{
  background:
          linear-gradient(180deg, rgba(31,20,12,.12) 0%, rgba(31,20,12,.32) 55%, rgba(20,15,9,.90) 100%);
}

.panel__content{
  position:relative;
  padding: 0 clamp(24px, 5vw, 64px) clamp(56px, 9vh, 96px);
  max-width: 620px;
  transition: transform var(--dur) var(--ease);
}
.panel:hover .panel__content,
.panel:focus-visible .panel__content{
  transform: translateY(-6px);
}

.panel__eyebrow{
  display:block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panel:hover .panel__eyebrow,
.panel:focus-visible .panel__eyebrow{
  opacity: 1;
  transform: translateY(0);
}

.panel__title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: .98;
  margin: 0 0 16px;
  color: var(--white);
  text-shadow: 0 6px 30px rgba(0,0,0,.35);
}

.panel__desc{
  margin: 0 0 22px;
  font-size: .98rem;
  line-height: 1.55;
  color: var(--sage);
  max-width: 46ch;
  opacity: .88;
}

.panel__cta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--gold-soft);
  padding: 12px 20px;
  border-radius: 999px;
  transition: gap var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.panel__cta svg{ transition: transform var(--dur) var(--ease); }
.panel:hover .panel__cta,
.panel:focus-visible .panel__cta{
  gap: 14px;
  background: var(--gold);
}
.panel:hover .panel__cta svg,
.panel:focus-visible .panel__cta svg{
  transform: translate(2px,-2px);
}

/* ---------- Center seam ---------- */
.seam{
  position:relative;
  z-index: 10;
  width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.seam__line{
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent, rgba(228,206,151,.55) 20%, rgba(228,206,151,.55) 80%, transparent);
}
.seam__badge{
  flex-shrink:0;
  width: 58px;
  height: 58px;
  margin: 14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--cream);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(228,206,151,.5), 0 8px 24px rgba(0,0,0,.35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  padding: 5px;
}
.seam__badge img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display:block;
}
.panel:hover ~ .seam .seam__badge,
.seam:has(+ .panel:hover) .seam__badge{
  box-shadow: 0 0 0 1px rgba(228,206,151,.7), 0 10px 30px rgba(0,0,0,.45);
}
.split:has(.panel--eshop:hover) .seam__badge{ transform: translateX(-14px) rotate(-8deg); }
.split:has(.panel--ubytovna:hover) .seam__badge{ transform: translateX(14px) rotate(8deg); }

/* ---------- Footer ---------- */
.footer{
  position: fixed;
  bottom: 14px;
  left: 0; right: 0;
  z-index: 15;
  text-align:center;
  pointer-events:none;
}
.footer p{
  margin:0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--sage);
  opacity: .75;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* ---------- Mobile: stacked, no hover-expand ---------- */
@media (max-width: 780px){
  .split{
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }
  .panel{
    flex: none;
    height: 46vh;
    min-height: 340px;
  }
  .panel__media{ transform: scale(1.02); filter: saturate(.92) brightness(.68); }
  .panel__content{ transform:none !important; padding-bottom: 40px; }
  .panel__eyebrow{ opacity:1; transform:none; }
  .split:has(.panel--eshop:hover) .panel--eshop,
  .split:has(.panel--ubytovna:hover) .panel--ubytovna,
  .split:has(.panel--eshop:hover) .panel--ubytovna,
  .split:has(.panel--ubytovna:hover) .panel--eshop{
    flex-grow: initial;
  }
  .seam{
    flex-direction: row;
    width: 100%;
    height: 0;
  }
  .seam__line{ height:1px; width:auto; flex:1; background: linear-gradient(90deg, transparent, rgba(228,206,151,.55) 20%, rgba(228,206,151,.55) 80%, transparent); }
  .seam__badge{ margin: 0 14px; }
  .split:has(.panel--eshop:hover) .seam__badge,
  .split:has(.panel--ubytovna:hover) .seam__badge{ transform:none; }
  .footer{ position: static; padding: 18px 0 26px; }
  .footer p{ text-shadow:none; opacity:.6; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* Fallback for browsers without :has() support */
@supports not (selector(:has(a))){
  .panel:hover{ flex-grow: 1.4; }
}