:root {
  --bg: #0b1315;
  --gold: #c9ab81;
  --gold-dark: #715b3e;
  --gold-line: #9c7c57;
  --grid-line: #21221e;
  --white: #fff;
  --grid: 1100px;
  --frame: 110px;
  --f-body: 'Josefin Sans', sans-serif;
  --f-poiret: 'Poiret One', sans-serif;
  --f-title: 'Ubuntu', sans-serif;
  --f-script: 'Great Vibes', cursive;
  --f-btn: 'Open Sans Condensed', 'Open Sans', sans-serif;
}
@media (min-width: 1520px) { :root { --grid: 1200px; } }
@media (min-width: 1590px) { :root { --grid: 1300px; } }
@media (max-width: 1200px) { :root { --grid: 950px; } }
@media (max-width: 1024px) { :root { --grid: 768px; } }
@media (max-width: 768px) { :root { --grid: 600px; } }
@media (max-width: 680px) { :root { --grid: calc(100% - 40px); } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font: 300 19px/29px var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }
::selection { color: #000; background: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0 0 25px; }
.grid { width: var(--grid); max-width: 100%; margin: 0 auto; position: relative; }
.center { text-align: center; }

/* ---------- frame & grid lines ---------- */
.frame-line {
  position: fixed; top: 0; bottom: 0; width: 0;
  border-left: 1px solid var(--gold-dark);
  z-index: 109; pointer-events: none;
}
.frame-line-left { left: var(--frame); }
.frame-line-right { right: var(--frame); }
.page, .site-footer { position: relative; }
.grid-lines {
  position: absolute; top: 0; bottom: 0; left: var(--frame); right: var(--frame);
  display: flex; z-index: -1; pointer-events: none;
}
.grid-lines span { flex: 1; }
.grid-lines span + span { border-left: 1px solid var(--grid-line); }
main { position: relative; z-index: 1; }

/* ---------- header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 110;
  height: 110px; padding: 0 2% 0 0;
  border-bottom: 1px solid var(--gold-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: block; width: 100px; height: 100px; }
.logo img { width: 100px; height: 100px; }
.main-nav { position: absolute; left: 50%; top: 43px; transform: translateX(-50%); }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav a {
  display: block; padding: 0 27px;
  font: 300 14px/23px var(--f-poiret); letter-spacing: .36em; text-transform: uppercase;
  color: var(--white);
}
.main-nav a span { position: relative; display: inline-block; }
.main-nav a span::after {
  content: ''; position: absolute; left: 0; right: 0; top: calc(100% + 3.8px); height: 5px;
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.main-nav a:hover { color: var(--white); }
.main-nav a:hover span::after, .main-nav a.current span::after { transform: scaleX(1); }
.side-opener {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 37px; height: 35px; position: relative; top: 5px;
}
.menu-opener { width: 37px; height: 25px; overflow: visible; }
.menu-opener line, .menu-closer line { stroke: var(--gold); stroke-miterlimit: 10; fill: none; transition: transform .3s ease; }
.side-opener:hover .menu-opener line:nth-child(odd) { transform: translateX(4px); }
.side-opener:hover .menu-opener line:nth-child(even) { transform: translateX(-4px); }

/* ---------- side area ---------- */
.side-area {
  position: fixed; top: 0; right: 0; height: 100vh; width: 370px; z-index: 9999;
  background: var(--bg); padding: 100px 40px 30px; overflow-y: auto; text-align: center;
  transform: translateX(100%); transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  border-left: 1px solid var(--gold-dark);
}
.side-open .side-area { transform: none; }
.side-overlay {
  position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
.side-open .side-overlay { opacity: 1; visibility: visible; }
.side-closer { position: absolute; top: 40px; right: 40px; width: 18px; height: 18px; padding: 0; background: none; border: 0; cursor: pointer; }
.menu-closer { width: 18px; height: 18px; display: block; }
.side-logo { width: 160px; height: 160px; margin: 0 auto 18px; }
.side-nav { display: none; }
.side-info { font-family: var(--f-poiret); line-height: 36px; margin: 0 0 4px; }
.side-links, .footer-social { list-style: none; margin: 0; padding: 0; font-family: var(--f-poiret); }
.side-links li { margin: 14px 0; }

/* double underline links (footer social, side area) */
.side-links a, .footer-social a { position: relative; display: inline; line-height: 29px; padding-bottom: 10px; }
.line-1, .line-2 { position: absolute; left: 0; width: 100%; height: 1px; background: var(--gold); transition: transform .3s ease; transform-origin: right; }
.line-1 { top: 28px; }
.line-2 { top: 32px; }
.footer-social a:hover .line-1, .side-links a:hover .line-1 { transform: scaleX(0); }

/* ---------- section titles ---------- */
.section-title { text-align: center; margin: 0 auto; }
.section-title.narrow { width: 510px; max-width: 100%; }
.st-tagline {
  display: block; margin: 0 0 13px;
  font: 400 19px/28px var(--f-script); letter-spacing: .04em; color: var(--gold);
}
.st-title-holder { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; }
.st-title {
  font: 400 36px/1.27 var(--f-title); letter-spacing: .23em; text-transform: uppercase; color: var(--gold);
}
.page-home .taste .st-title, .menu-intro .st-title { font-size: 48px; letter-spacing: .22em; }
.st-title { white-space: nowrap; }
.decor { flex: none; width: 41px; height: 9px; position: relative; top: -1px; }
.st-title-holder .decor:first-child { left: -30px; }
.st-title-holder .decor:last-child { left: 20px; }
.st-text { margin: 19px 0 0; font: 300 19px/29px var(--f-poiret); color: var(--white); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; position: relative;
  padding: 9px 39px; border: 1px solid var(--gold);
  font: 300 14px/28px var(--f-btn); letter-spacing: .36em; text-transform: uppercase; color: var(--white);
  transition: color .3s ease, background-color .3s ease;
}
.btn::before, .btn::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--gold); transform: scaleY(0); transition: transform .4s ease; }
.btn::before { left: 45px; }
.btn::after { right: 45px; }
.btn:hover::before, .btn:hover::after { transform: scaleY(1); }
.btn:hover { color: var(--gold); }

/* ---------- pricing ---------- */
.pricing-item { margin: 0 0 37px; }
.pricing-main { display: table; width: 100%; }
.pricing-title, .pricing-lines, .pricing-price { display: table-cell; vertical-align: bottom; }
.pricing-title {
  padding-right: 5px; white-space: nowrap;
  font: 200 17px/26.86px var(--f-title); letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.pricing-lines { width: 100%; position: relative; top: -8px; border-bottom: 1px solid var(--gold-dark); }
.pricing-lines::before { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; border-bottom: 1px solid var(--gold-dark); }
.pricing-price {
  padding-left: 15px; white-space: nowrap;
  font: 700 19px/28.88px var(--f-poiret); letter-spacing: .03em; text-transform: uppercase; color: var(--gold);
}
.pricing-desc { margin: 4px 0 0; font: 300 19px/29px var(--f-poiret); color: var(--white); }

/* ---------- reveal animation ---------- */
.reveal { overflow: hidden; }
.js .reveal > img, .js img.reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.63, .25, .25, 1); }
.js .reveal.in > img, .js img.reveal.in { clip-path: inset(0 0 0 0); }

/* ---------- home: hero ---------- */
.hero {
  position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.hero-content { position: relative; z-index: 2; padding: 36px 20px 0; max-width: 1100px; }
.hero-tagline { margin: 0 0 20px; font: 400 43px/60px var(--f-script); color: var(--gold); }
.hero-title { margin: 0 0 12px; font: 400 120px/145px var(--f-script); letter-spacing: 28px; color: var(--gold); }
.hero-text { max-width: 701px; margin: 0 auto 65px; font: 400 23px/33px var(--f-poiret); color: var(--white); }
.btn-large { padding: 11px 50px; }

.hero-ornament { position: absolute; top: calc(50% - 42px); width: 56px; height: auto; z-index: 2; }
.hero-ornament-left { left: calc(50% - 668px); }
.hero-ornament-right { left: calc(50% + 616px); }

/* ---------- home: taste ---------- */
.taste { padding: 160px 0 0; }
.taste-images { display: flex; justify-content: space-between; align-items: flex-start; padding: 65px 0 0; }
.taste-images > .reveal { width: 33.4%; }
.taste-images img { width: 100%; aspect-ratio: 367 / 550; object-fit: cover; }
.taste-pattern-holder { width: 22%; padding-top: 43px; }
.taste-pattern { display: block; width: 100%; height: 465px; }

/* ---------- home: offers & lunch ---------- */
.offers { padding: 114px 0 276px; }
.specials { padding: 78px 0 0 42px; }
.lunch { padding-top: 188px; }
#obedno-menu, #za-hranata { scroll-margin-top: -80px; }
@media (max-width: 1024px) { #obedno-menu, #za-hranata { scroll-margin-top: -100px; } }
.lunch-date { margin: 20px 0 0; text-align: center; font: 400 19px/19px var(--f-poiret); letter-spacing: .23em; text-transform: uppercase; color: var(--gold); }
.lunch-cols { display: flex; justify-content: space-between; gap: 84px; padding-top: 78px; }
.lunch-col { flex: 1; min-width: 0; }
.lunch-group + .lunch-group { padding-top: 20px; }
.offers .center { padding-top: 88px; position: relative; left: -21px; }

/* ---------- inner page banner ---------- */
.page-banner {
  position: relative; overflow: hidden; height: 530px; padding-top: 110px;
  display: flex; align-items: center; justify-content: center; background: var(--bg);
}
.page-banner-bg { position: absolute; inset: 0; background: center / cover no-repeat; will-change: transform; }
.page-banner-inner { position: relative; z-index: 1; }
.page-banner-title { font: 400 48px/1.27 var(--f-title); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.page-banner .st-title-holder .decor:first-child, .page-banner .st-title-holder .decor:last-child { left: 0; }

/* ---------- menu page ---------- */
.menu-intro { padding: 160px 0 105px; }
.menu-intro .section-title { width: 550px; }
.menu-intro .st-title { white-space: normal; max-width: 468px; }
.menu-cat { padding: 74px 0 0; }
.menu-intro + .menu-cat { padding-top: 76px; }
.menu-cat-side + .menu-cat-wide { padding-top: 124px; }
.menu-cat-wide .two-cols { margin-right: -44px; }
.menu-cat .st-title { font-size: 28px; line-height: 38.92px; letter-spacing: .23em; }
.menu-cat-wide .section-title { margin-bottom: 90px; }
.two-cols { display: flex; gap: 44px; }
.two-cols > div { flex: 1; min-width: 0; }
/* static, full width, the whole photo visible (height follows the 1920x1000 photo) */
.menu-band { width: 100%; aspect-ratio: 1920 / 1000; background: 50% 50% / cover no-repeat; }
.menu-band + .menu-cat { padding-top: 228px; }
.menu-photo { padding: 57px 0 114px; }
.menu-photo + .menu-cat { padding-top: 57px; }
.menu-photo { position: relative; }
.menu-photo-img { margin: 0 -20px; position: relative; z-index: 2; }
.menu-photo-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pattern-side.pattern-photo { right: calc((var(--grid) - 100vw) / 2); left: auto; top: 480px; bottom: auto; width: 292px; z-index: 3; }
.menu-photo .ornament { position: absolute; left: -134px; top: 19px; z-index: 1; width: auto; }
.menu-cat-side .grid { display: flex; align-items: center; gap: 44px; }
.menu-cat-side.image-right .grid { flex-direction: row-reverse; }
.menu-cat-image { flex: 0 0 50%; display: flex; justify-content: flex-end; padding: 118px 60px 19px 0; }
.menu-cat-side.image-right .menu-cat-image { justify-content: flex-start; padding: 118px 0 19px 4px; }
.menu-cat-figure { position: relative; width: 360px; max-width: 100%; }
.menu-cat-side.image-right .menu-cat-figure { width: 383px; }
.menu-cat-figure .dish { position: relative; z-index: 2; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.menu-cat-figure .ornament { position: absolute; z-index: 1; left: -108px; top: 64px; width: auto; max-width: none; }
.menu-cat-side.image-right .menu-cat-figure .ornament { left: 161px; top: 150px; }
.menu-cat-body { flex: 1; min-width: 0; }
.menu-cat-side .section-title { margin-bottom: 65px; }
.menu-allergens { padding: 152px 0 144px; text-align: center; }
.menu-note { font: 300 19px/29px var(--f-poiret); color: var(--white); margin: 0 0 144px; }
.menu-allergens .st-title { font-size: 28px; line-height: 38.92px; letter-spacing: .23em; }
.allergen-text { max-width: 760px; margin: 22px auto 26px; font: 300 19px/29px var(--f-poiret); white-space: pre-line; }
/* ---------- about page ---------- */
.title-md .st-title { font-size: 42px; line-height: 54px; letter-spacing: .22em; }
.about-intro { padding: 160px 0 0; }
.about-intro-grid { display: grid; grid-template-columns: 1fr 270px 1fr; align-items: start; }
.about-intro-left { padding: 458px 0 0 13px; }
.about-intro-left img { width: 303px; max-width: none; }
.about-intro-right { padding-top: 392px; justify-self: end; width: 330px; }
.about-intro-right img { width: 330px; }
.about-intro-body { text-align: center; }
.about-intro-body .section-title { width: 352px; margin-left: -41px; }
.about-intro-text { margin: 10px 0 51px; font: 300 19px/29px var(--f-poiret); }
.about-intro-text p { margin: 0 0 42px; text-align: center; }
.btn-link {
  position: relative; display: inline-block; margin-top: -10px; padding: 4px 0 10px;
  font: 300 14px/22px var(--f-btn); letter-spacing: .36em; text-transform: uppercase; color: var(--white);
}
.btn-link:hover { color: var(--gold); }
.btn-link .line-1, .btn-link .line-2 { background: var(--gold); }
.about-belief { padding: 416px 0 0; }
.about-belief-grid { display: flex; justify-content: space-between; align-items: flex-start; }
.about-belief-text { width: 509px; margin-left: 20px; padding-top: 148px; text-align: center; }
.script-quote { font: 300 54px/70px var(--f-script); color: var(--gold); margin: 0 0 64px; }
.about-belief-images { position: relative; width: 535px; height: 534px; margin-right: -26px; flex: none; }
.about-belief-images img { position: absolute; }
.about-belief-images .img-back { right: 0; top: 0; width: 446px; z-index: 1; }
.about-belief-images .img-front { left: 0; top: 89px; width: 446px; z-index: 2; }
.about-belief-images .img-frame { position: absolute; left: 85px; top: 89px; width: 400px; z-index: 0; }
.about-belief-images .img-frame svg { display: block; width: 100%; height: auto; }
.about-comfort { padding: 206px 0 0; }
.comfort-title { width: 1080px; max-width: 100%; }
.comfort-title .st-title { font-size: 48px; line-height: 61px; letter-spacing: .22em; }
.about-features { display: grid; grid-template-columns: repeat(3, 300px); justify-content: center; column-gap: 63px; padding-top: 113px; text-align: center; }
.feature img { margin: 0 auto 44px; width: auto; height: 78px; }
.feature h5 { font: 400 17px/23px var(--f-title); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.about-gallery { padding: 214px 0 0; text-align: center; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 108px 0 30px; }
.tab {
  background: transparent; border: 1px solid var(--gold); padding: 14px 40px; cursor: pointer;
  font: 700 13.33px/20px var(--f-poiret); color: var(--white); transition: background-color .3s ease, color .3s ease;
}
.tab:hover { color: var(--gold); }
.tab.active { background: var(--gold); color: var(--white); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 1040px; max-width: 100%; margin: 0 auto; align-items: start; }
.gallery-item { display: block; overflow: hidden; }
.gallery-item img { width: 100%; height: auto; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.04); }
.about-thanks { padding: 202px 0 255px; text-align: center; }
.thanks h2 { font: 300 72px/90px var(--f-script); color: var(--gold); transform: rotate(-8deg); }
.thanks h2.second { transform: translateX(88px) rotate(-8deg); margin-top: 0; }
.closing { margin: 112px auto 0; max-width: 760px; }
.lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(5, 9, 10, .94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 88vw; max-height: 86vh; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--gold); font: 300 48px/1 var(--f-poiret); cursor: pointer; padding: 20px; }
.lightbox-close { top: 10px; right: 20px; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* ---------- text pages ---------- */
.text-page { padding: 57px 0 100px; }
.rich-text { font: 300 19px/29px var(--f-poiret); margin: 0 -10px; }
.rich-text p { margin: 0 0 25px; }
.rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5 {
  font: 400 19px/28.88px var(--f-poiret); letter-spacing: .23em; text-transform: uppercase; color: var(--gold); margin: 25px 0;
}
.rich-text strong { font-weight: 400; }
.rich-text a { color: var(--gold); text-decoration: underline; }
.rich-text ul, .rich-text ol { padding-left: 24px; margin: 0 0 25px; }
.rich-text table { width: 100%; border-collapse: collapse; margin: 0 0 25px; }
.rich-text td, .rich-text th { border: 1px solid #877d6f; padding: 8px 12px; vertical-align: middle; }
/* ---------- pattern & footer ---------- */
.pattern-side { position: absolute; bottom: -112px; width: 378px; z-index: 2; pointer-events: none; }
.pattern-side svg { display: block; width: 100%; height: auto; will-change: transform; }
.pattern-left { left: -142px; }
.pattern-right { right: -142px; }
.site-footer { border-top: 1px solid var(--gold-dark); text-align: center; }
.footer-inner { width: var(--grid); max-width: 100%; margin: 0 auto; padding: 149px 0 129px; font-family: var(--f-poiret); }
.footer-logo { margin: 0 auto; width: 500px; position: relative; left: -20px; }
.footer-sep { height: 1px; margin: 0 0 74px; }
.footer-sep-2 { height: 2px; margin: 25px 0 28px; }
.site-footer p { margin: 0 0 25px; line-height: 19px; }
.site-footer p:nth-of-type(2) { line-height: 29px; }
.site-footer p:nth-of-type(3) { margin-bottom: 0; }
.footer-social li { margin: 0 0 18px; line-height: 31px; }


.back-to-top {
  position: fixed; right: 33px; bottom: 33px; z-index: 105; width: 43px; height: 43px;
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .4s ease;
}
.back-to-top.on { opacity: 1; visibility: visible; transform: none; }
.back-to-top svg .popout { transition: r .3s ease; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  :root { --frame: 0px; }
  .frame-line, .grid-lines { display: none; }
  .site-header { position: fixed; height: 80px; padding: 0 4% 0 2%; background: var(--bg); }
  .logo, .logo img { width: 80px; height: 80px; }
  .main-nav { display: none; }
  .side-nav { display: block; margin: 0 0 24px; }
  .side-nav ul { list-style: none; margin: 0; padding: 0; }
  .side-nav a { display: block; padding: 8px 0; font: 300 15px/23px var(--f-poiret); letter-spacing: .36em; text-transform: uppercase; }
  .side-nav a.current { color: var(--gold); }
  .hero-title { font-size: 90px; line-height: 110px; letter-spacing: 18px; }
  .taste-images { flex-wrap: wrap; }
  .lunch-cols, .two-cols { gap: 50px; }
  .menu-cat-side .grid { gap: 40px; }
  .page-banner { height: 32vh; min-height: 260px; padding-top: 80px; margin-top: 0; }
}

@media (max-width: 767px) {
  .side-area { width: 100%; border-left: 0; }
  .hero-content { padding: 70px 38px 0; }
  .hero-tagline { display: none; }
  .hero-title { font-size: 42px; line-height: 50px; letter-spacing: 12px; margin: 0 -38px 81px; white-space: nowrap; }
  .hero-text { font-size: 23px; line-height: 33px; margin-bottom: 34px; }
  .btn-large { padding: 9px 39px; }
  .hero-ornament { display: none; }
  .st-title, .page-home .taste .st-title, .menu-intro .st-title, .page-banner-title { font-size: 28px; line-height: 36px; letter-spacing: .18em; }
  .st-title { white-space: normal; }
  .st-title-holder .decor:first-child { left: -14px; }
  .st-title-holder .decor:last-child { left: 14px; }
  .taste { padding-top: 100px; }
  .taste-images { padding-top: 50px; gap: 20px 0; }
  .taste-images > .reveal { width: 100%; }
  .taste-pattern-holder { display: none; }
  .offers { padding: 90px 0 160px; }
  .specials { padding: 50px 0 0; }
  .lunch-cols, .two-cols { flex-direction: column; gap: 0; }
  .lunch-col + .lunch-col { margin-top: 20px; }
  .pricing-title { white-space: normal; font-size: 18px; font-weight: 400; letter-spacing: .12em; }
  .pricing-price { font-size: 17px; font-weight: 400; }
  .menu-intro { padding: 90px 0 30px; }
  .menu-cat { padding-top: 70px; }
  .menu-cat-side .grid, .menu-cat-side.image-right .grid { flex-direction: column; gap: 30px; }
  .menu-cat-image { flex: none; width: 100vw; max-width: none; margin: 0 -20px; }
  .menu-cat-image .dish { height: 230px; width: 100%; object-fit: cover; object-position: 50% 70%; }
  .menu-cat-image .ornament { display: none; }
  .menu-cat .section-title, .menu-cat-side .section-title { margin-bottom: 40px; }
  .about-intro-grid, .about-comfort-grid { flex-direction: column; }
  .about-intro-pattern { display: none; }
  .about-intro-image, .about-comfort-images { flex: none; width: 100%; }
  .script-quote { font-size: 40px; }
  .about-features { flex-direction: column; gap: 40px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .thanks h2 { font-size: 43px; }
  .footer-logo { width: 76%; left: 0; }
  .footer-inner { width: 100%; padding-left: 10px; padding-right: 10px; }
  .pattern-side { display: none; }
  .footer-social li { margin: 18px 0; }
  .text-page { padding: 150px 0 160px; }
}

@media (max-width: 1024px) {
  .site-header { position: relative; height: 70px; padding: 0 15px 0 8px; background: transparent; overflow: visible; }
  .logo, .logo img { width: 80px; height: 80px; }
  .logo { position: relative; top: 5px; }
  .hero { height: calc(100vh - 70px); }
  .page-banner { padding-top: 0; }
  .text-page { padding-top: 120px; }
}

@media (max-width: 680px) {
  :root { --grid: 80%; }
  .st-title, .page-home .taste .st-title, .menu-intro .st-title { font-size: 22px; line-height: 31px; letter-spacing: .23em; }
  .lunch-date { font-size: 16px; line-height: 16px; }
  .pricing-item { text-align: center; }
  .pricing-main { display: block; }
  .pricing-title { display: inline-block; padding: 0; white-space: normal; font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: .22em; }
  .pricing-lines { display: none; }
  .pricing-price { display: block; padding: 0; margin: 2px 0 7px; font-size: 17px; line-height: 25.84px; font-weight: 400; }
  .pricing-desc { text-align: center; }
  .specials { padding-left: 0; }
  .offers .center { left: 0; }
}

/* ---------- mobile: menu & about ---------- */
@media (max-width: 1024px) {
    .page-banner { height: 32vh; min-height: 220px; }

  .menu-cat-side .grid { gap: 30px; }
  .menu-cat-image, .menu-cat-side.image-right .menu-cat-image { padding: 0; justify-content: center; }
  .menu-cat-figure, .menu-cat-side.image-right .menu-cat-figure { width: 100%; }
  .menu-cat-figure .dish { aspect-ratio: auto; height: 420px; object-fit: contain; }
  .menu-cat-figure .ornament { display: none; }
  .about-intro-grid { grid-template-columns: 1fr; justify-items: center; gap: 40px; }
  .about-intro-left { display: none; }
  .about-intro-body { max-width: 420px; }
  .about-intro-body .section-title { width: auto; margin-left: 0; }
  .about-intro-right { padding-top: 0; justify-self: center; }
  .about-belief { padding-top: 140px; }
  .about-belief-grid { flex-direction: column; align-items: center; gap: 60px; }
  .about-belief-text { margin: 0; padding: 0; width: auto; max-width: 509px; }
  .about-belief-images { margin: 0; }
  .about-features { grid-template-columns: 1fr; row-gap: 50px; }
  .about-comfort, .about-gallery { padding-top: 140px; }
  .about-thanks { padding-top: 160px; }
}
@media (max-width: 767px) {

  .menu-cat-image { flex: none; width: 125%; max-width: none; margin: 0 -12.5%; }
  .menu-cat-figure .dish { height: 230px; object-fit: cover; object-position: 50% 70%; }
  .menu-photo-img { margin: 0; }
  .menu-photo .ornament { display: none; }
  .menu-allergens { padding-top: 100px; }
  .menu-note { margin-bottom: 80px; }
  .about-intro { padding-top: 90px; }
  .about-intro-right, .about-intro-right img { width: 100%; }
  .about-belief-images { width: 100%; height: auto; aspect-ratio: 535 / 534; }
  .about-belief-images .img-back { width: 83%; }
  .about-belief-images .img-front { width: 83%; top: 16.6%; }
  .about-belief-images .img-frame { width: 75%; left: 16%; top: 16.6%; }
  .script-quote { font-size: 40px; line-height: 52px; margin-bottom: 40px; }
  .comfort-title .st-title, .title-md .st-title { font-size: 22px; line-height: 31px; }
  .tabs { gap: 6px; }
  .tab { padding: 10px 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .thanks h2 { font-size: 43px; line-height: 56px; }
  .thanks h2.second { transform: translateX(30px) rotate(-8deg); }
  .closing { margin-top: 70px; }
  .about-thanks { padding-bottom: 160px; }
}

/* ---------- effects ---------- */
:root { --ease-p2: cubic-bezier(.455, .03, .515, .955); --ease-p3: cubic-bezier(.645, .045, .355, 1); }
.js .draw path, .js .draw line, .js .draw polyline { stroke-dasharray: var(--dash); stroke-dashoffset: var(--dash); transition: stroke-dashoffset 2s; }
.js .draw.in path, .js .draw.in line, .js .draw.in polyline { stroke-dashoffset: 0; }
.js .decor-anim .decor path { stroke-dasharray: 57; stroke-dashoffset: 57; }
.js .decor-anim.in .decor path { animation: draw-decor 1.2s ease forwards; }
.decor-anim .st-title-holder .decor:last-child { transform: rotate(180deg); }
@keyframes draw-decor { to { stroke-dashoffset: 0; } }

.hero-bg { position: absolute; inset: 0; background: center / cover no-repeat; animation: fade-in 1s var(--ease-p2) both; will-change: transform; }
.hero-tagline { animation: rise-86 1s var(--ease-p2) .19s both; }
.hero-title span { display: inline-block; animation: grow-in 1.2s var(--ease-p2) .26s both; }
.hero-title span + span { animation-delay: .36s; }
.hero-ornament-left { animation: grow-in 1s var(--ease-p3) .44s both; }
.hero-ornament-right { animation: grow-in 1s var(--ease-p3) .51s both; }
.hero-text { animation: rise-50 1.3s var(--ease-p2) .58s both; }
.hero .btn { animation: rise-50 1.3s var(--ease-p2) .75s both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes rise-86 { from { opacity: 0; transform: translateY(86px); } to { opacity: 1; transform: none; } }
@keyframes rise-50 { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px) { .pattern-side.pattern-photo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .draw path, .js .draw line, .js .draw polyline, .js .decor-anim .decor path { stroke-dashoffset: 0; }
  .js .reveal > img, .js img.reveal { clip-path: none; }
}
/* hero arrows (as on the original slider) */
.hero-arrow {
  position: absolute; top: calc(50% - 20px); z-index: 3; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--gold); cursor: pointer; animation: fade-in 1s var(--ease-p2) .6s both;
}
.hero-arrow-prev { left: 30px; }
.hero-arrow-next { right: 30px; }
.hero-arrow svg { width: 25px; height: 35px; overflow: visible; }
.hero-arrow-next svg { transform: scaleX(-1); }
.hero-arrow polyline { fill: none; stroke: currentColor; stroke-miterlimit: 10; }
.hero-arrow .popout {
  stroke-dasharray: 43; stroke-dashoffset: 43; transform: rotateX(180deg); transform-origin: center;
  transition: stroke-dashoffset .5s cubic-bezier(.48, .57, .33, .89);
}
.hero-arrow:hover .popout, .hero-arrow:focus-visible .popout { stroke-dashoffset: 0; }
@media (max-width: 767px) { .hero-arrow { display: none; } }
/* ---------- cookie consent (styled like the original CookieYes banner) ---------- */
.cky-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; }
.cky-bar {
  background: var(--bg); border: 1px solid #2a2a2a; padding: 16.5px 24px; color: #d0d0d0;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .2);
}
.cky-title { margin: 0 0 12px; font: 700 18px/24px var(--f-poiret); letter-spacing: .23em; text-transform: uppercase; color: var(--gold); }
.cky-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cky-text { margin: 0; font: 300 20px/24px var(--f-poiret); color: #d0d0d0; max-width: 1080px; }
.cky-text a { color: var(--gold); text-decoration: underline; }
.cky-btns { display: flex; gap: 8px; flex: none; }
.cky-btn {
  height: 44px; padding: 8px 27px; border: 2px solid #926f3f; border-radius: 2px; background: #926f3f; color: #fff; cursor: pointer;
  font: 600 14px/24px var(--f-poiret); letter-spacing: .18em; white-space: nowrap; transition: opacity .2s;
}
.cky-btn:hover { opacity: .85; }
.cky-btn-outline { background: transparent; border-color: #d0d0d0; color: #d0d0d0; }
.cky-btn-light { background: var(--gold); border-color: var(--gold); }
.cky-overlay { position: fixed; inset: 0; z-index: 9995; background: rgba(0, 0, 0, .4); }
.cky-modal {
  position: fixed; left: 50%; top: 50%; z-index: 9996; transform: translate(-50%, -50%);
  width: 845px; max-width: calc(100% - 32px); max-height: calc(100vh - 40px); display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid #2a2a2a; border-radius: 6px; color: #d0d0d0; font-family: var(--f-body);
}
.cky-modal[hidden], .cky-overlay[hidden], .cky-banner[hidden], .cky-revisit[hidden] { display: none; }
.cky-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid #2a2a2a; }
.cky-modal-head h2 { font: 700 18px/24px var(--f-body); color: #d0d0d0; }
.cky-close { background: none; border: 0; color: #d0d0d0; font: 300 30px/1 var(--f-body); cursor: pointer; padding: 0 4px; }
.cky-modal-body { padding: 18px 24px; overflow-y: auto; font-size: 14px; line-height: 24px; }
.cky-modal-body > p { margin: 0 0 12px; }
.cky-cat { border-top: 1px solid #2a2a2a; padding: 14px 0; }
.cky-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cky-cat-toggle { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; color: #d0d0d0; font: 700 16px/24px var(--f-body); cursor: pointer; text-align: left; }
.cky-chevron { display: inline-block; font-size: 20px; transition: transform .2s; }
.cky-cat-toggle[aria-expanded="true"] .cky-chevron { transform: rotate(90deg); }
.cky-cat-text { margin: 10px 0 0 22px; }
.cky-always { color: #04b745; font: 600 14px/24px var(--f-body); }
.cky-switch { position: relative; width: 44px; height: 24px; flex: none; cursor: pointer; }
.cky-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cky-switch span { position: absolute; inset: 0; border-radius: 12px; background: #d0d5d2; transition: background .2s; pointer-events: none; }
.cky-switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.cky-switch input:checked + span { background: var(--gold); }
.cky-switch input:checked + span::after { transform: translateX(20px); }
.cky-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.cky-modal-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid #2a2a2a; }
.cky-revisit {
  position: fixed; left: 15px; bottom: 15px; z-index: 9989; width: 45px; height: 45px; padding: 10px; border: 0; border-radius: 50%;
  background: var(--gold); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.cky-revisit svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1024px) {
  .cky-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .cky-text { font-size: 16px; line-height: 22px; }
  .cky-btns { flex-wrap: wrap; }
  .cky-btns .cky-btn { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .cky-bar { padding: 14px 16px; }
  .cky-title { font-size: 15px; letter-spacing: .15em; }
  .cky-btns { flex-direction: column; }
  .cky-modal-foot .cky-btn { flex: 1 1 100%; }
}

/* ---------- page transitions: a soft cross-fade between pages (browsers without support just switch) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .28s ease both; }
::view-transition-new(root) { animation: page-in .38s ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}