/* =========================================================
   PIRTS · Tradicionālā Rīgas pirts kopš 1931
   Design tokens, layout, components, motion
   ========================================================= */

:root{
  /* palette — wood, cream, ash, copper */
  --cream:       #F5EEDF;
  --cream-2:     #ECE2CC;
  --paper:       #FBF6EC;
  --wood-1:      #3A2117;     /* deep espresso — primary text */
  --wood-2:      #5A3825;     /* warm walnut */
  --wood-3:      #8C5C36;     /* aged oak */
  --copper:      #B17B4A;     /* CTA */
  --copper-dk:   #8A5C32;
  --gold:        #C99858;     /* VIP accent */
  --gold-soft:   #E2C28D;
  --moss:        #5A6A4A;     /* herb accent */
  --ink:         #1B0E08;
  --ink-soft:    #2B1D14;
  --line:        rgba(58,33,23,.18);
  --line-soft:   rgba(58,33,23,.09);
  --shadow-1:    0 10px 30px -10px rgba(58,33,23,.18);
  --shadow-2:    0 30px 60px -20px rgba(58,33,23,.32);

  /* typography */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, "SF Pro Display", "Helvetica Neue", sans-serif;

  /* rhythm */
  --maxw: 1240px;
  --pad:  clamp(1rem, 2vw, 1.75rem);
  --gap:  clamp(1.5rem, 3vw, 3rem);
  --sec:  clamp(4.5rem, 9vw, 8rem);

  /* radii */
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 18px;

  /* easings */
  --e-out: cubic-bezier(.2,.7,.2,1);
  --e-in-out: cubic-bezier(.6,.05,.2,1);
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
*{ -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; }
}
body{
  font-family: var(--sans);
  font-weight:400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--wood-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg{ display:block; max-width:100%; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--wood-2); color: var(--cream); }
.nowrap{ white-space: nowrap; }

/* Skip-link for keyboard users (WCAG 2.4.1) */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wood-1);
  color: var(--cream);
  padding: .9rem 1.3rem;
  z-index: 100;
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 0 0 8px 0;
}
.skip-link:focus,
.skip-link:focus-visible{
  left: 0;
  top: 0;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============ TYPE ============ */
.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wood-3);
  margin: 0 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before{
  content:"";
  width:2.2rem; height:1px;
  background: var(--wood-3);
  display:inline-block;
  opacity:.7;
}
.eyebrow--gold{ color: var(--gold-soft); }
.eyebrow--gold::before{ background: var(--gold-soft); }

.h2{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--wood-1);
  margin: 0 0 1rem;
}
.h2 em{ font-style: italic; color: var(--copper-dk); font-weight: 500; }
.section--dark .h2{ color: var(--cream); }

.sec-head{ max-width: 720px; margin: 0 auto 3rem; text-align:center; }
.sec-head__lead{ font-size: 1.05rem; color: var(--wood-2); margin: .8rem auto 0; max-width:560px; }
.sec-head__lead--wide{ max-width: 760px; }
.section--dark .sec-head__lead{ color: rgba(245,238,223,.78); }

.section{
  padding: var(--sec) 0;
  position: relative;
}
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.two-col--reverse > :first-child{ order: 2; }
@media (max-width: 880px){
  .two-col{ grid-template-columns: 1fr; gap: 2.5rem; }
  .two-col--reverse > :first-child{ order: 0; }
}

.section--cream{ background: var(--cream); }
.section--dark{
  background: linear-gradient(180deg, var(--ink) 0%, #15090A 100%);
  color: var(--cream);
}
.section--warm{
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .04em;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .35s var(--e-out);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .14em;
}
.btn--solid{
  background: var(--wood-1);
  color: var(--cream);
  border-color: var(--wood-1);
}
.btn--solid:hover{
  background: var(--copper);
  border-color: var(--copper);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(177,123,74,.5);
}
.btn--ghost{
  background: transparent;
  border-color: var(--wood-1);
  color: var(--wood-1);
}
.btn--ghost:hover{
  background: var(--wood-1);
  color: var(--cream);
}
.btn--gold{
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.btn--gold:hover{
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(226,194,141,.5);
}

.link{
  font-weight: 500;
  color: var(--copper-dk);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.link:hover{ color: var(--copper); }

/* ============ HEADER ============ */
.hdr{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(251,246,236,.92) 0%, rgba(251,246,236,.7) 70%, rgba(251,246,236,0) 100%);
  transition: background .3s, box-shadow .3s, padding .3s;
  padding-block: .8rem;
}
.hdr.is-scrolled{
  background: rgba(251,246,236,.94);
  box-shadow: 0 1px 20px rgba(58,33,23,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-block: .5rem;
}
.hdr__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}
.hdr__nav{
  display: flex;
  gap: clamp(1.2rem, 2vw, 2.2rem);
  align-items: center;
}
.hdr__nav--right{ justify-content: flex-end; }
.hdr__nav a:not(.btn){
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wood-1);
  position: relative;
  padding: .4rem 0;
  transition: color .25s;
}
.hdr__nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--e-out);
}
.hdr__nav a:not(.btn):hover{ color: var(--copper); }
.hdr__nav a:not(.btn):hover::after{ transform: scaleX(1); transform-origin: left; }

/* Sign sits high near the header strip — only a small overhang for the "hanging" feel */
.hdr__logo{
  display: block;
  position: relative;
  transform: translateY(8%);
  transition: transform .45s var(--e-out);
  filter: drop-shadow(0 10px 14px rgba(58,33,23,.16));
  z-index: 2;
}
.hdr__logo img{
  width: auto;
  height: clamp(110px, 12vw, 160px);
  aspect-ratio: 16 / 9;
  transition: height .35s, transform .45s;
}
.hdr.is-scrolled .hdr__logo{ transform: translateY(2%); }
.hdr.is-scrolled .hdr__logo img{ height: clamp(56px, 5.5vw, 70px); }

@media (max-width: 720px){
  .hdr__logo{ transform: translateY(6%); }
  .hdr__logo img{ height: 86px; }
  .hdr.is-scrolled .hdr__logo{ transform: translateY(0); }
  .hdr.is-scrolled .hdr__logo img{ height: 50px; }
}

.hdr__cta{ padding: .65rem 1.2rem; font-size: .68rem; }

.lang{
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,.4);
}
.lang__btn{
  padding: .35rem .65rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--wood-2);
  border-radius: 999px;
  transition: all .25s;
}
.lang__btn.is-active{
  background: var(--wood-1);
  color: var(--cream);
}
.lang__btn:not(.is-active):hover{ color: var(--wood-1); }
.lang--big{ margin: 1rem auto; }
.lang--big .lang__btn{ padding: .55rem 1rem; font-size: .8rem; }

/* burger */
.hdr__burger{
  display: none;
  width: 44px; height: 44px;
  position: relative;
  justify-self: end;
}
.hdr__burger span{
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--wood-1);
  transition: all .3s var(--e-out);
}
.hdr__burger span:nth-child(1){ top: 16px; }
.hdr__burger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.hdr__burger span:nth-child(3){ bottom: 16px; }
.hdr__burger[aria-expanded="true"] span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3){ bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

@media (max-width: 960px){
  .hdr__nav{ display: none; }
  .hdr__nav--right .hdr__cta, .hdr__nav--right .lang{ display: none; }
  .hdr__burger{ display: inline-flex; }
  .hdr__inner{ grid-template-columns: 1fr auto 1fr; }
}

.mobnav{
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 49;
  padding: 6rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: center;
  transform: translateY(-100%);
  transition: transform .45s var(--e-out);
}
.mobnav[hidden]{ display: none; }
.mobnav.is-open{ transform: translateY(0); }
/* Instant close on anchor click — kills slide-out animation so text doesn't overlay during smooth-scroll */
.mobnav.is-instant{ transition: none !important; }
.mobnav a:not(.btn){
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--wood-1);
}
.mobnav .btn{ margin-top: 1rem; align-self: center; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 0 4rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--wood-1);
}
.hero__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  transform: scale(1.04);
  animation: heroZoom 22s var(--e-in-out) infinite alternate;
}
@keyframes heroZoom{
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.1)  translate3d(-1%, -.5%, 0); }
}

/* Soft fade ensures text legibility on the cream side without darkening the wood image */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, var(--paper) 0%, rgba(251,246,236,.96) 30%, rgba(251,246,236,.55) 50%, rgba(251,246,236,0) 65%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__text{
  max-width: 580px;
}

.hero .eyebrow{ color: var(--copper-dk); margin-bottom: 1.4rem; }
.hero .eyebrow::before{ background: var(--copper-dk); }

.hero__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -.005em;
  margin: 0 0 1.5rem;
  color: var(--wood-1);
}
.hero__title span{ display: block; }
.hero__title em{ font-style: italic; color: var(--copper-dk); }

.hero__sub{
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  color: var(--wood-2);
  max-width: 44ch;
  margin: 0 0 2.4rem;
}

.hero__cta{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero__scroll{
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--wood-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  opacity: .95;
}
.hero__scroll-line{
  display: inline-block;
  width: 1px; height: 56px;
  background: linear-gradient(180deg, transparent 0%, var(--copper) 50%, transparent 100%);
  background-size: 100% 200%;
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{
  0%{ background-position: 0% 100%; }
  100%{ background-position: 0% -100%; }
}

@media (max-width: 720px){
  .hero{ min-height: auto; padding: 7rem 0 3rem; }
  .hero__bg img{ object-position: 75% center; }
  .hero::before{
    background: linear-gradient(180deg, rgba(251,246,236,.95) 0%, rgba(251,246,236,.7) 60%, rgba(251,246,236,.4) 100%);
  }
  .hero__scroll{ display: none; }
}

/* ============ ABOUT ============ */
.about__media{
  position: relative;
}
.about__photo{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2);
}
.about__photo img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--e-out);
}
.about__media:hover .about__photo img{ transform: scale(1.04); }

/* ============ HISTORY SECTION ============ */
.history{
  background:
    radial-gradient(120% 60% at 30% 20%, rgba(177,123,74,.08), rgba(177,123,74,0) 60%),
    linear-gradient(180deg, #1B0E08 0%, #15090A 100%);
  color: var(--cream);
  overflow: hidden;
}
.history__media{ position: relative; }
.history__figure{
  position: relative;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  background:
    linear-gradient(135deg, rgba(245,238,223,.04) 0%, rgba(245,238,223,.01) 100%);
  border: 1px solid rgba(245,238,223,.08);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(245,238,223,.06);
}
.history__figure img{
  width: 100%;
  height: auto;
  display: block;
  filter: contrast(1.05);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* hand-drawn corner accents */
.history__corner{
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(226,194,141,.6);
  border-style: solid;
  border-width: 0;
}
.history__corner--tl{ top: 12px; left: 12px; border-left-width: 1px; border-top-width: 1px; }
.history__corner--tr{ top: 12px; right: 12px; border-right-width: 1px; border-top-width: 1px; }
.history__corner--bl{ bottom: 12px; left: 12px; border-left-width: 1px; border-bottom-width: 1px; }
.history__corner--br{ bottom: 12px; right: 12px; border-right-width: 1px; border-bottom-width: 1px; }

.history__caption{
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  letter-spacing: .02em;
  color: rgba(245,238,223,.6);
  text-align: center;
}

.history__text .h2{ color: var(--cream); }
.history__lead{
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(245,238,223,.92);
  margin: 0 0 1.2rem;
  font-family: var(--serif);
  font-style: italic;
}
.history__p{
  margin: 0 0 2rem;
  color: rgba(245,238,223,.78);
  font-size: 1rem;
  line-height: 1.75;
}

/* timeline */
.timeline{
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(226,194,141,.25);
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.timeline li{
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  position: relative;
}
.timeline li::before{
  content: "";
  position: absolute;
  left: -1.85rem;
  top: .55rem;
  width: 9px; height: 9px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(201,152,88,.18);
}
.timeline__y{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}
.timeline__t{
  color: rgba(245,238,223,.85);
  font-size: .98rem;
  line-height: 1.5;
}

@media (max-width: 540px){
  .timeline__y{ font-size: 1.15rem; }
  .timeline li{ grid-template-columns: 4.5rem 1fr; gap: .9rem; }
}

.about__p p{ margin: 0 0 1rem; color: var(--wood-2); font-size: 1.05rem; line-height: 1.7; }
.about__p p:last-child{ margin: 0; }

/* ============ OFFER ============ */
.offer__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 880px){ .offer__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .offer__grid{ grid-template-columns: 1fr; } }

.offer__card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  padding: 2rem 1.8rem;
  transition: transform .4s var(--e-out), box-shadow .4s, border-color .4s;
  position: relative;
}
.offer__card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
  border-color: var(--copper);
}
.offer__card .ico-img{
  width: 78px; height: 78px;
  object-fit: contain;
  margin-bottom: 1.2rem;
  transition: transform .4s var(--e-out);
}
.offer__card:hover .ico-img{
  transform: scale(1.05) translateY(-2px);
}
.offer__card h3{
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0 0 .6rem;
  color: var(--wood-1);
}
.offer__card p{ margin: 0; color: var(--wood-2); font-size: .95rem; }

/* ============ SCHEDULE ============ */
.schedule__wrap{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: stretch;
}
.schedule__wrap--single{
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 880px){ .schedule__wrap{ grid-template-columns: 1fr; max-width: 580px; margin: 0 auto; } }

.sch-table{
  background: var(--cream);
  border-radius: var(--r-3);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--line-soft);
  position: relative;
}
.sch{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
}
.sch th, .sch td{
  text-align: left;
  padding: 1rem .6rem;
  font-weight: 500;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 1.05rem;
  color: var(--wood-2);
  vertical-align: middle;
}
.sch tr:last-child th,
.sch tr:last-child td{ border-bottom: 0; }
.sch th{
  font-family: var(--serif);
  font-weight: 500;
  color: var(--wood-1);
}
.sch td{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .03em;
  font-size: 1.02rem;
  color: var(--wood-1);
  white-space: nowrap;
}
.sch__closed td{ color: var(--wood-3); font-style: italic; }
.sch__closed th{ color: var(--wood-3); }

.sch__ladies{
  background: linear-gradient(90deg, rgba(177,123,74,.07) 0%, rgba(177,123,74,0) 100%);
  position: relative;
}
.sch__ladies th, .sch__ladies td{
  border-bottom-color: rgba(177,123,74,.25);
  color: var(--copper-dk);
}
.sch__tag{
  display: inline-block;
  margin-left: .9rem;
  padding: .3rem .7rem;
  background: var(--copper);
  color: var(--ink);
  font-family: var(--sans);
  font-style: normal;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  font-weight: 700;
}

.sch-table__note{
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .85rem;
  color: var(--wood-3);
  font-style: italic;
  line-height: 1.5;
}

/* ============ PRICES — vintage menu-board ============ */
.menu-board{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(177,123,74,.05), rgba(177,123,74,0) 60%),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
  position: relative;
  box-shadow:
    0 1px 0 var(--line) inset,
    0 30px 60px -40px rgba(58,33,23,.18);
}
/* двойная декоративная рамка как у вывески */
.menu-board::before,
.menu-board::after{
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.menu-board::before{ inset: 10px; }
.menu-board::after{ inset: 18px; border-color: rgba(58,33,23,.05); }

/* grid */
.menu-board__grid{
  display: grid;
  grid-template-columns: 1fr auto 1.05fr auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: stretch;
  position: relative;
  z-index: 1;
}
/* вертикальные «ниточные» разделители между колонками */
.menu-board__grid::before,
.menu-board__grid::after{
  content: "";
  display: block;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
  align-self: stretch;
}
.menu-board__grid > .menu-col:nth-child(1){ grid-column: 1; }
.menu-board__grid > .menu-col:nth-child(2){ grid-column: 3; }
.menu-board__grid > .menu-col:nth-child(3){ grid-column: 5; }
.menu-board__grid::before{ grid-column: 2; grid-row: 1; }
.menu-board__grid::after{ grid-column: 4; grid-row: 1; }

@media (max-width: 880px){
  .menu-board{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .menu-board::before,
  .menu-board::after{ display: none; }
  .menu-board__grid{
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .menu-board__grid::before,
  .menu-board__grid::after{
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  }
  .menu-board__grid > .menu-col:nth-child(1){ grid-column: 1; grid-row: 1; }
  .menu-board__grid::before{ grid-column: 1; grid-row: 2; }
  .menu-board__grid > .menu-col:nth-child(2){ grid-column: 1; grid-row: 3; }
  .menu-board__grid::after{ grid-column: 1; grid-row: 4; }
  .menu-board__grid > .menu-col:nth-child(3){ grid-column: 1; grid-row: 5; }

  /* mobile: drop dotted-leader bg trick (was hiding line behind text with paper bg
     — but on cream section it reads as a lighter stripe) */
  .menu-list > div::after{ display: none; }
  .menu-list dt,
  .menu-list dd{ background: transparent; }
}

.menu-col{
  display: flex;
  flex-direction: column;
  text-align: left;
}
.menu-col__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: .01em;
  color: var(--wood-1);
  margin: 0 0 .25rem;
  text-align: center;
}
.menu-col__sub{
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood-3);
  text-align: center;
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
  font-style: italic;
}
.menu-col__sub-title{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: .95rem;
  color: var(--wood-2);
  margin: 1.4rem 0 .8rem;
  text-align: center;
  letter-spacing: .04em;
}
.menu-col__note{
  margin: 1.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .82rem;
  color: var(--wood-3);
  font-style: italic;
  line-height: 1.55;
}
.menu-col__note--center{ text-align: center; border-top: 0; padding-top: .5rem; }

/* ledger style with dotted leaders */
.menu-list{ margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.menu-list > div{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: .5rem;
  padding: .55rem 0;
  position: relative;
}
/* vintage menu-board ledger leaders */
.menu-list > div::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .9rem;
  border-bottom: 1px dotted rgba(58,33,23,.32);
  z-index: 0;
}
.menu-list dt,
.menu-list dd{ position: relative; z-index: 1; background: var(--paper); }
.menu-list dt{
  font-size: .95rem;
  color: var(--wood-2);
  font-weight: 400;
  padding-right: .5rem;
  line-height: 1.35;
}
.menu-list dd{
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.55rem;
  color: var(--wood-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
  padding-left: .5rem;
}
.menu-list > div{ padding: .8rem 0; }
.menu-list dt{ font-size: 1rem; }
.menu-list__free{
  font-style: italic;
  font-size: 1.2rem!important;
  color: var(--copper-dk)!important;
}
.menu-list--mini > div{ padding: .55rem 0; }
.menu-list--mini dt{ font-size: .94rem; color: var(--wood-2); }
.menu-list--mini dd{ font-size: 1.2rem; }

.menu-col__sub-note{
  margin: .8rem 0 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  color: var(--wood-3);
  letter-spacing: .02em;
}

/* центральная колонка — featured без «card» вида, только акцент типографикой */
.menu-col--feature{
  background:
    radial-gradient(80% 80% at 50% 30%, rgba(201,152,88,.08), rgba(201,152,88,0) 70%);
  padding: 0 1rem;
  align-items: center;
  text-align: center;
  position: relative;
}
.menu-col--feature .menu-col__sub{ border-bottom: 0; padding-bottom: 0; margin-bottom: 1.4rem; }
.menu-col__stamp{
  font-family: var(--sans);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper);
  border: 1px solid var(--copper);
  padding: .35rem .9rem;
  border-radius: 2px;
  margin: 0 auto 1.2rem;
  display: inline-block;
}

.menu-col__hero-price{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .2rem;
  margin: .8rem 0 1.4rem;
  color: var(--wood-1);
}
.hp-currency{
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--copper-dk);
  margin-top: .5rem;
}
.hp-amount{
  font-family: var(--serif);
  font-size: clamp(4.8rem, 9vw, 7rem);
  font-weight: 500;
  line-height: .85;
  color: var(--wood-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hp-unit{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--wood-3);
  align-self: flex-end;
  margin-bottom: .7rem;
}

.link--strong{
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: normal;
  color: var(--wood-1);
  border-bottom: 1px solid var(--copper);
  padding-bottom: 4px;
  margin-top: 1rem;
  letter-spacing: .02em;
  display: inline-block;
}
.link--strong:hover{ color: var(--copper-dk); }

/* footer board */
.menu-board__foot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  position: relative;
  z-index: 1;
}
.menu-board__seal{
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--wood-3);
  letter-spacing: .02em;
  white-space: nowrap;
}
.menu-board__ornament-line{
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--line) 80%, transparent 100%);
  max-width: 200px;
}

@media (max-width: 540px){
  .menu-board__foot{ flex-direction: column; }
  .menu-board__foot .menu-board__seal{ white-space: normal; text-align: center; }
  .menu-board__ornament-line{ width: 80%; max-width: 80%; }
  .hp-amount{ font-size: 5.2rem; }
}

/* ============ GALLERY ============ */
.gallery__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 1rem;
}
.gal-tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2);
  padding: 0;
  cursor: zoom-in;
  background: var(--wood-1);
  isolation: isolate;
}
.gal-tile--tall{ grid-row: span 2; }
.gal-tile img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--e-out), filter .5s;
  filter: saturate(.95) brightness(.92);
}
.gal-tile::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,10,5,0) 60%, rgba(20,10,5,.45) 100%);
  opacity: 0;
  transition: opacity .4s;
}
.gal-tile:hover img{ transform: scale(1.06); filter: saturate(1.05) brightness(1); }
.gal-tile:hover::after{ opacity: 1; }
.gal-tile:focus-visible{ outline: 2px solid var(--copper); outline-offset: 3px; }

@media (max-width: 880px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
}
@media (max-width: 540px){
  .gallery__grid{ grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .gal-tile--tall{ grid-row: span 1; }
}

/* ============ NEW SAUNA — VIP ============ */
.newsauna{ position: relative; }
.newsauna::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.newsauna__media{
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
  position: relative;
}
.newsauna__media img{ width:100%; height:100%; object-fit: cover; transition: transform 1.2s; }
.newsauna__media:hover img{ transform: scale(1.04); }
.newsauna__media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(58,33,23,0) 60%, rgba(58,33,23,.18) 100%);
  pointer-events: none;
}

.newsauna__text .h2{ color: var(--wood-1); }
.newsauna__lead{ color: var(--wood-2); font-size: 1.05rem; margin: 0 0 2rem; line-height: 1.7; }

.vip-feats{ list-style:none; margin:0 0 2rem; padding:0; display: flex; flex-direction: column; gap: .8rem; }
.vip-feats li{
  display: flex; align-items: center; gap: .9rem;
  color: var(--wood-2); font-size: 1rem;
}
.vip-feats svg{ width: 22px; height: 22px; color: var(--copper-dk); flex-shrink: 0; }

.newsauna__cta{
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.newsauna__price{
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--wood-3);
}
.newsauna__price b{
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--copper-dk);
  margin-right: .25rem;
}

.newsauna .eyebrow{ color: var(--copper-dk); }
.newsauna .eyebrow::before{ background: var(--copper-dk); }
.newsauna .eyebrow--gold{ color: var(--copper-dk); }
.newsauna .eyebrow--gold::before{ background: var(--copper-dk); }

/* ============ HOW IT WORKS ============ */
.steps{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  counter-reset: step;
}
@media (max-width: 880px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px){ .steps{ grid-template-columns: 1fr; } }
.steps li{
  padding: 2rem 1.8rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-3);
  background: var(--paper);
  position: relative;
}
.steps__n{
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--copper);
  display: block;
  line-height: 1;
  margin-bottom: 1rem;
}
.steps li h3{
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 .4rem;
  color: var(--wood-1);
}
.steps li p{ margin: 0; color: var(--wood-2); font-size: .92rem; }

/* ============ CONTACT ============ */
.contact__map{
  border-radius: var(--r-3);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-1);
  background: var(--cream-2);
}
.contact__map iframe{ width:100%; height:100%; border:0; display:block; }

.contact__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1.4rem;
  margin: 2rem 0;
}
.contact__list div{ display: flex; flex-direction: column; }
.contact__list dt{
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wood-3);
  margin-bottom: .3rem;
}
.contact__list dd{
  margin: 0;
  font-size: 1rem;
  color: var(--wood-1);
  line-height: 1.5;
}
.contact__list dd a{ color: var(--copper-dk); border-bottom: 1px solid currentColor; }
@media (max-width: 540px){ .contact__list{ grid-template-columns: 1fr; } }

/* ============ FOOTER ============ */
.ftr{
  background: var(--wood-1);
  color: rgba(245,238,223,.78);
  padding: 4rem 0 1.5rem;
  font-size: .92rem;
}
.ftr__inner{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 880px){ .ftr__inner{ grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px){ .ftr__inner{ grid-template-columns: 1fr; } }
.ftr__brand img{
  width: 140px;
  height: auto;
  margin-bottom: 1.2rem;
  border-radius: 6px;
  opacity: .95;
}
.ftr__brand p{ color: rgba(245,238,223,.65); max-width: 28ch; line-height: 1.6; margin: 0; }
.ftr__col h4{
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--gold-soft);
  margin: 0 0 1rem;
}
.ftr__col p, .ftr__col a{
  display: block;
  margin: 0 0 .4rem;
  color: rgba(245,238,223,.7);
  font-size: .9rem;
  transition: color .25s;
}
.ftr__col a:hover{ color: var(--gold-soft); }

.ftr__bottom{
  border-top: 1px solid rgba(245,238,223,.12);
  padding: 1.5rem var(--pad) 0;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .78rem;
  color: rgba(245,238,223,.62);
}

/* ============ LIGHTBOX ============ */
.lb{
  border: 0;
  padding: 0;
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  background: rgba(15,8,4,.94);
  color: var(--cream);
}
.lb::backdrop{ background: rgba(15,8,4,.94); }
.lb[open]{ display: flex; align-items: center; justify-content: center; }
.lb__img{ max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.lb__close{
  position: fixed;
  top: 1.5rem; right: 1.5rem;
  width: 48px; height: 48px;
  font-size: 2rem;
  color: var(--cream);
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  transition: background .25s;
  z-index: 2;
}
.lb__close:hover{ background: rgba(255,255,255,.2); }
.lb__nav{
  position: fixed;
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  font-size: 2.2rem;
  color: var(--cream);
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  transition: background .25s;
  z-index: 2;
}
.lb__nav:hover{ background: rgba(255,255,255,.2); }
.lb__nav--prev{ left: 1.5rem; }
.lb__nav--next{ right: 1.5rem; }
@media (max-width: 540px){
  .lb__nav, .lb__close{ width: 44px; height: 44px; font-size: 1.5rem; }
  .lb__nav--prev{ left: .5rem; } .lb__nav--next{ right: .5rem; }
  .lb__close{ top: 1rem; right: 1rem; }
}

/* ============ REVEAL ANIMATIONS ============ */
.reveal,
.reveal-up{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
  transition-delay: var(--rev-delay, 0ms);
}
.reveal{ transform: translateY(40px); }
.is-visible.reveal,
.is-visible.reveal-up,
.reveal.is-visible,
.reveal-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hero reveals — chain */
.hero .reveal:nth-of-type(1){ --rev-delay: 80ms; }
.hero .reveal:nth-of-type(2){ --rev-delay: 280ms; }
.hero .reveal:nth-of-type(3){ --rev-delay: 480ms; }
.hero .reveal:nth-of-type(4){ --rev-delay: 680ms; }

/* Stagger by sibling order (offer + steps + gallery) */
.offer__card.reveal-up:nth-child(1){ --rev-delay: 80ms; }
.offer__card.reveal-up:nth-child(2){ --rev-delay: 160ms; }
.offer__card.reveal-up:nth-child(3){ --rev-delay: 240ms; }
.offer__card.reveal-up:nth-child(4){ --rev-delay: 80ms; }
.offer__card.reveal-up:nth-child(5){ --rev-delay: 160ms; }
.offer__card.reveal-up:nth-child(6){ --rev-delay: 240ms; }

.steps li.reveal-up:nth-child(1){ --rev-delay: 80ms; }
.steps li.reveal-up:nth-child(2){ --rev-delay: 200ms; }
.steps li.reveal-up:nth-child(3){ --rev-delay: 320ms; }
.steps li.reveal-up:nth-child(4){ --rev-delay: 440ms; }

.gal-tile.reveal-up:nth-child(1){ --rev-delay: 60ms; }
.gal-tile.reveal-up:nth-child(2){ --rev-delay: 120ms; }
.gal-tile.reveal-up:nth-child(3){ --rev-delay: 180ms; }
.gal-tile.reveal-up:nth-child(4){ --rev-delay: 60ms; }
.gal-tile.reveal-up:nth-child(5){ --rev-delay: 120ms; }
.gal-tile.reveal-up:nth-child(6){ --rev-delay: 180ms; }

.vip-feats li.reveal-up:nth-child(1){ --rev-delay: 80ms; }
.vip-feats li.reveal-up:nth-child(2){ --rev-delay: 160ms; }
.vip-feats li.reveal-up:nth-child(3){ --rev-delay: 240ms; }
.vip-feats li.reveal-up:nth-child(4){ --rev-delay: 320ms; }

/* Focus visibility */
:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero__bg img{ animation: none; transform: none; }
  .reveal, .reveal-up{ opacity: 1; transform: none; }
}
