/* ============================================================================
   WINE BAR & RESTAURANT ČARMAN — shared design system
   Warm editorial elegance · cream canvas · bordo + gold accents
   ============================================================================ */

:root{
  --bordo:#4a1c1c;  --bordo-l:#6b2c2c;  --bordo-d:#2d1010;
  --krem:#f7f1e6;   --krem-l:#fdf9f1;   --krem-d:#efe5d3;
  --zlata:#c9a84c;  --zlata-l:#e8c87a;  --zlata-d:#a8862f;
  --rjava:#2d1810;  --tdark:#1a0f0a;    --muted:#8a6a5a;  --soft:#5a3a2a;
  /* lake accent — pulled from Bled's water */
  --jezero:#1d5e66; --jezero-l:#33848d; --jezero-d:#123f45;
  --maxw:1240px;
  --ease:cubic-bezier(.16,.7,.3,1);
  --nav-h:74px;
}

/* ---- seamless page-transition curtain (cross-browser, JS-driven) ---- */
.cm-curtain{position:fixed;inset:0;z-index:9998;background:linear-gradient(180deg,#3a2014,#2d1810);
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-100%);pointer-events:none;will-change:transform;}
.cm-curtain .cm-kicker{font-family:'EB Garamond',serif;font-size:clamp(.6rem,1.6vw,.86rem);letter-spacing:4px;
  text-transform:uppercase;color:var(--zlata);margin-bottom:.45rem;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s var(--ease);}
.cm-curtain .mark{font-family:'Caveat',cursive;font-size:clamp(3.4rem,9vw,5.8rem);color:var(--zlata-l);line-height:.9;
  opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s var(--ease);}
html.cm-leaving .cm-curtain{transform:translateY(0);transition:transform .55s var(--ease);pointer-events:all;}
html.cm-leaving .cm-curtain .cm-kicker{opacity:1;transform:none;transition-delay:.08s;}
html.cm-leaving .cm-curtain .mark{opacity:1;transform:none;transition-delay:.12s;}
html.cm-entering .cm-curtain{transform:translateY(0);}            /* set pre-paint on arrival */
html.cm-reveal .cm-curtain{transform:translateY(100%);transition:transform .65s var(--ease);}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:17.5px;}
body{
  font-family:'EB Garamond',Georgia,serif;color:var(--tdark);background:var(--krem);
  font-size:1.04rem;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--zlata);color:var(--rjava);}

/* ---------- type helpers ---------- */
.serif{font-family:'Cormorant Garamond',serif;}
.script{font-family:'Caveat',cursive;}
.tag{font-size:.76rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--zlata-d);font-weight:600;}
.h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5.6vw,4.4rem);color:var(--bordo);line-height:1.06;font-weight:600;letter-spacing:0;}
.h2 em{font-style:italic;color:var(--zlata-d);}
.h2.on-dark em{color:var(--zlata-l);}
.lead{font-size:clamp(1.08rem,1.6vw,1.26rem);color:var(--soft);font-weight:400;line-height:1.8;max-width:60ch;text-wrap:pretty;}
.divider{width:54px;height:2px;background:linear-gradient(90deg,var(--zlata),var(--zlata-l));transform-origin:left;}

/* gold draw-in divider tied to reveal */
.js .divider{transform:scaleX(0);transition:transform 1.1s var(--ease) .15s;}
.js .reveal.in .divider,.js .divider.in{transform:scaleX(1);}

/* ---------- reveal (no-JS safe: hidden state only applies once .js is set) ---------- */
.reveal{transition:opacity 1s var(--ease),transform 1s var(--ease);}
.js .reveal{opacity:0;transform:translateY(34px);}
.js .reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;}.d2{transition-delay:.16s;}.d3{transition-delay:.24s;}
.d4{transition-delay:.32s;}.d5{transition-delay:.4s;}

/* ---------- buttons ---------- */
.btn,.btn-o{display:inline-block;font-size:.74rem;letter-spacing:3px;text-transform:uppercase;
  font-weight:600;padding:1rem 2.4rem;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .35s;}
.btn{background:var(--zlata);color:var(--rjava);border-color:var(--zlata);}
.btn:hover{background:var(--zlata-l);border-color:var(--zlata-l);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(201,168,76,.6);}
.btn-o{background:transparent;color:var(--krem);border-color:rgba(245,237,224,.5);}
.btn-o:hover{border-color:var(--zlata);color:var(--zlata);transform:translateY(-2px);}
.btn-dark{background:var(--bordo);color:var(--krem);border-color:var(--bordo);}
.btn-dark:hover{background:var(--bordo-l);border-color:var(--bordo-l);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(74,28,28,.45);}

.section{padding:clamp(4.5rem,9vw,8rem) clamp(1.3rem,5vw,2rem);}
.wrap{max-width:var(--maxw);margin:0 auto;}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.3rem,5vw,2.6rem);
  transition:background .4s,box-shadow .4s,height .4s;}
.nav.solid{background:rgba(247,241,230,.985);backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 8px 30px -18px rgba(45,16,16,.55),0 1px 0 rgba(74,28,28,.06);}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-family:'Caveat',cursive;font-size:2.3rem;font-weight:700;line-height:1;
  color:var(--krem);transition:color .4s;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.nav-logo .emblem{width:42px;height:42px;display:block;flex:none;transition:opacity .3s;}
.nav-logo .emblem-bordo{display:none;}
.nav.solid .nav-logo{color:var(--bordo);text-shadow:none;}
.nav.solid .nav-logo .emblem-cream{display:none;}
.nav.solid .nav-logo .emblem-bordo{display:block;}
.nav-logo .nl-text{display:flex;flex-direction:column;justify-content:center;line-height:1;}
.nav-logo .nl-kicker{font-family:'EB Garamond',serif;font-size:.5rem;letter-spacing:2.5px;white-space:nowrap;
  text-transform:uppercase;font-weight:600;line-height:1;margin-bottom:5px;opacity:.92;}
.nav-logo .nl-name{font-family:'Caveat',cursive;font-size:2.1rem;line-height:.9;}
.nav-links{display:flex;align-items:center;gap:2.1rem;}
.nav-links a{font-size:.8rem;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  color:rgba(245,237,224,.9);position:relative;transition:color .3s;}
.nav.solid .nav-links a{color:var(--soft);}
.nav-links a:after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--zlata);transition:width .3s var(--ease);}
.nav-links a:hover:after,.nav-links a.active:after{width:100%;}
.nav.solid .nav-links a:hover{color:var(--bordo);}
.nav-cta{padding:.62rem 1.45rem !important;font-size:.72rem !important;font-weight:600 !important;}
/* keep the reserve CTA cream-on-bordo even when the nav goes solid (cream) on scroll */
.nav.solid .nav-links a.nav-cta,.nav.solid .nav-links a.nav-cta:hover{color:var(--krem);}
.nav-right{display:flex;align-items:center;gap:1.4rem;}
.lang{display:flex;gap:.2rem;font-size:.66rem;letter-spacing:1px;font-weight:700;}
.lang button{background:none;border:none;cursor:pointer;color:rgba(245,237,224,.6);padding:.3rem .35rem;font-family:inherit;font-weight:700;transition:color .3s;}
.nav.solid .lang button{color:var(--muted);}
.lang button.on{color:var(--zlata-l);}
.nav.solid .lang button.on{color:var(--bordo);}
.nav-burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px;}
.nav-burger span{width:24px;height:2px;background:var(--krem);transition:background .4s,transform .3s,opacity .3s;}
.nav.solid .nav-burger span{background:var(--bordo);}

/* =========================================================================
   FOOTER (shared)
   ========================================================================= */
.footer{background:var(--rjava);color:rgba(245,237,224,.6);padding:clamp(3.5rem,7vw,5rem) clamp(1.3rem,5vw,2rem) 2rem;}
.footer-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;}
.footer .brand-kicker{display:block;font-family:'EB Garamond',serif;font-size:.6rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--zlata);font-weight:600;margin-bottom:.15rem;}
.footer .brand{font-family:'Caveat',cursive;color:var(--zlata-l);font-size:2.5rem;font-weight:700;line-height:1;margin-bottom:.6rem;}
.footer .tagline{font-size:.86rem;line-height:1.85;font-weight:300;color:rgba(245,237,224,.45);max-width:34ch;}
.footer h4{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--zlata);margin-bottom:1.1rem;}
.footer ul{list-style:none;}
.footer li{margin-bottom:.6rem;}
.footer a{font-size:.86rem;color:rgba(245,237,224,.55);transition:color .3s,padding-left .3s;}
.footer a:hover{color:var(--zlata-l);padding-left:4px;}
.footer-bot{max-width:var(--maxw);margin:2.6rem auto 0;padding-top:1.8rem;border-top:1px solid rgba(201,168,76,.15);
  display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;font-size:.72rem;color:rgba(245,237,224,.3);}

/* =========================================================================
   RESPONSIVE (shared)
   ========================================================================= */
@media(max-width:860px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;
    background:rgba(45,16,16,.98);backdrop-filter:blur(10px);padding:1rem 0;
    transform:translateY(-120%);transition:transform .45s var(--ease);}
  .nav-links.open{transform:translateY(0);}
  .nav-links a{color:var(--krem) !important;padding:1rem 2rem;width:100%;letter-spacing:3px;}
  .nav-links a:after{display:none;}
  .nav-burger{display:flex;}
  .footer-in{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .footer-in{grid-template-columns:1fr;}
}

/* =========================================================================
   DYNAMIC: marquee ribbon · rotating seal · directional reveals
   ========================================================================= */
.marquee{background:linear-gradient(180deg,var(--bordo-d),var(--bordo));overflow:hidden;display:flex;width:100%;
  border-top:1px solid rgba(201,168,76,.22);border-bottom:1px solid rgba(201,168,76,.22);}
.marquee-track{display:flex;align-items:center;flex-shrink:0;white-space:nowrap;animation:marq 60s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .it{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.92rem,1.5vw,1.18rem);
  letter-spacing:.6px;color:rgba(245,237,224,.82);padding:.95rem 0;display:inline-flex;align-items:center;}
.marquee .it::after{content:'❧';margin:0 2.9rem;color:var(--zlata-d);font-size:.5em;font-style:normal;opacity:.85;transform:translateY(-1px);}
@keyframes marq{to{transform:translateX(-100%);}}

.stamp{position:absolute;width:116px;height:116px;z-index:4;pointer-events:none;}
.stamp .disc{position:absolute;inset:0;border-radius:50%;background:var(--krem-l);border:1px solid var(--zlata);box-shadow:0 12px 26px -12px rgba(74,28,28,.5);}
.stamp svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite;}
.stamp .ctr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--zlata-d);}
.stamp .ctr img{width:48px;height:48px;display:block;}
.stamp-txt{font-family:'EB Garamond',sans-serif;font-size:9px;letter-spacing:1.4px;font-weight:600;fill:var(--bordo);text-transform:uppercase;}
@keyframes spin{to{transform:rotate(360deg);}}

.js .reveal.rl{transform:translateX(-46px);}
.js .reveal.rr{transform:translateX(46px);}
.js .reveal.rl.in,.js .reveal.rr.in{transform:none;}

/* scallop / chevron divider (delicate, refined) */
.scallop{height:14px;width:100%;opacity:.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M3 3 L13 12 L23 3' fill='none' stroke='%23c9a84c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center;}

@media(max-width:560px){ .stamp{width:88px;height:88px;} }

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none !important;}
  .stamp svg{animation:none !important;}
  *{animation:none !important;}
  .js .reveal{opacity:1 !important;transform:none !important;}
  .js .divider{transform:scaleX(1) !important;}
  html{scroll-behavior:auto;}
}