/* ============================================================
   HIDDEN COURTYARD PRAGUE — shared stylesheet
   Palette:  Forest green #163126 · Warm cream #F3EFE7
             Old gold #C8A15A     · Dark bronze #6B5842
   ============================================================ */

:root{
  --green:      #163126;
  --green-deep: #0F241B;
  --cream:      #F3EFE7;
  --cream-soft: #FAF8F2;
  --gold:       #C8A15A;
  --gold-soft:  #D9BC82;
  --bronze:     #6B5842;
  --ink:        #1E2B24;

  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-script:  "Great Vibes", "Marck Script", cursive;
  --font-body:    "Jost", "Noto Sans", -apple-system, "Segoe UI",
                  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --container: 1160px;
  --shadow: 0 18px 45px rgba(15, 36, 27, .18);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.container{ width:min(var(--container), 92%); margin-inline:auto; }

::selection{ background:var(--gold); color:var(--green-deep); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ---------- ornament: thin lines + gold diamond ---------- */
.ornament{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 26px;
}
.ornament::before,.ornament::after{
  content:""; height:1px; flex:0 0 64px; background:var(--gold);
  opacity:.8;
}
.ornament::after{ flex:0 0 64px; }
.ornament span{
  width:8px; height:8px; background:var(--gold);
  transform:rotate(45deg);
}
.ornament.center{ justify-content:center; }
.ornament.light::before,.ornament.light::after{ background:var(--gold-soft); }

/* ============================ HEADER ============================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--green);
  border-bottom:1px solid rgba(200,161,90,.25);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--cream);
}
.brand img{ height:44px; width:auto; }
.brand-text{ line-height:1.15; }
.brand-name{
  font-family:var(--font-display); font-weight:600;
  font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase;
  display:block; white-space:nowrap;
}
.brand-sub{
  font-size:.62rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); display:block; margin-top:2px;
}

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--cream);
  padding:10px 13px; border-radius:3px;
  transition:color .25s ease;
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--gold-soft); }
.main-nav a.active{ color:var(--gold); }

.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--font-body); font-weight:500;
  font-size:.8rem; letter-spacing:.22em; text-transform:uppercase;
  padding:13px 26px; border-radius:3px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  border:1px solid transparent;
  text-align:center;
}
.btn-gold{ background:var(--gold); color:var(--green-deep); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold-soft); border-color:var(--gold-soft); transform:translateY(-2px); box-shadow:0 10px 24px rgba(200,161,90,.35); }
.btn-outline{ border-color:var(--gold); color:var(--cream); background:transparent; }
.btn-outline:hover{ background:rgba(200,161,90,.14); transform:translateY(-2px); }
.btn-outline-dark{ border-color:var(--green); color:var(--green); background:transparent; }
.btn-outline-dark:hover{ background:var(--green); color:var(--cream); transform:translateY(-2px); }
.nav-book{ margin-left:8px; padding:11px 22px; }

/* --- language switcher --- */
.lang{ position:relative; margin-left:6px; }
.lang-btn{
  background:transparent; border:1px solid rgba(200,161,90,.5);
  color:var(--cream); font-family:var(--font-body);
  font-size:.75rem; letter-spacing:.14em;
  padding:9px 12px; border-radius:3px; cursor:pointer;
  display:flex; align-items:center; gap:7px;
}
.lang-btn:hover{ border-color:var(--gold); color:var(--gold-soft); }
.lang-btn svg{ width:11px; height:11px; transition:transform .2s; }
.lang.open .lang-btn svg{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:var(--green-deep); border:1px solid rgba(200,161,90,.35);
  border-radius:4px; padding:6px; min-width:150px;
  list-style:none; margin:0;
  box-shadow:var(--shadow);
  display:none;
}
.lang.open .lang-menu{ display:block; }
.lang-menu button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--cream); font-family:var(--font-body); font-size:.83rem;
  padding:8px 12px; border-radius:3px; letter-spacing:.03em;
}
.lang-menu button:hover{ background:rgba(200,161,90,.15); color:var(--gold-soft); }
.lang-menu button.current{ color:var(--gold); }

/* --- burger --- */
.burger{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.burger span{
  display:block; width:24px; height:2px; background:var(--gold);
  margin:5px 0; transition:.3s;
}

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:88vh;
  display:flex; align-items:center;
  background:var(--green-deep);
  isolation:isolate;
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center 30%;
  transform:scale(1.04);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{ to{ transform:scale(1.1) translateY(-1.5%); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(10,25,18,.82) 0%, rgba(10,25,18,.45) 45%, rgba(10,25,18,.15) 75%),
    linear-gradient(to top, rgba(10,25,18,.55), transparent 40%);
}
.hero-content{ padding:120px 0 100px; max-width:640px; color:var(--cream); }
.hero-script{
  font-family:var(--font-script);
  font-size:clamp(2rem, 4vw, 2.9rem);
  color:var(--gold-soft);
  display:block; margin-bottom:4px;
}
.hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.6rem, 6.2vw, 4.6rem);
  line-height:1.04; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 20px; color:#fff;
  text-wrap:balance;
}
.hero-sub{
  font-size:1.06rem; font-weight:300; max-width:46ch;
  color:rgba(243,239,231,.92);
  margin:0 0 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================ WELCOME ============================ */
.welcome{ background:var(--cream); padding:96px 0; position:relative; }
.welcome-grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:70px; align-items:start;
}
.welcome-copy{ position:relative; padding-left:34px; }
.welcome-copy::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(var(--gold), transparent);
}
h2.section-title{
  font-family:var(--font-display); font-weight:600;
  color:var(--green);
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing:.08em; text-transform:uppercase;
  line-height:1.2; margin:0;
}
.welcome-copy p{ color:var(--green); font-size:1.02rem; max-width:44ch; }
.signature{
  font-family:var(--font-script); color:var(--gold);
  font-size:2.2rem; margin-top:34px; line-height:1;
}
.signature .heart{
  display:inline-block; color:var(--gold);
  font-size:1.2rem; transform:translateY(-6px); margin-left:6px;
}

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.card{
  background:var(--green); color:var(--cream);
  border-radius:6px; padding:34px 28px 28px;
  text-decoration:none; display:flex; flex-direction:column;
  border:1px solid rgba(200,161,90,.18);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(200,161,90,.55); }
.card svg{ width:40px; height:40px; stroke:var(--gold); margin-bottom:18px; }
.card h3{
  font-family:var(--font-display); font-weight:600;
  color:var(--gold); font-size:1.28rem;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 10px;
}
.card p{ font-size:.92rem; margin:0 0 22px; color:rgba(243,239,231,.85); flex:1; }
.card-cta{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-soft); display:flex; align-items:center; gap:8px;
}
.card-cta::after{ content:"→"; transition:transform .25s; }
.card:hover .card-cta::after{ transform:translateX(5px); }

/* ============================ INFO BAR ============================ */
.info-bar{ background:var(--green); color:var(--cream); padding:56px 0; }
.info-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:34px;
  text-align:center;
}
.info-item svg{ width:30px; height:30px; stroke:var(--gold); margin:0 auto 12px; }
.info-item h4{
  font-family:var(--font-body); font-weight:500;
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.info-item p{ font-size:.86rem; margin:2px 0; color:rgba(243,239,231,.88); }
.info-item a{ color:inherit; text-decoration:none; }
.info-item a:hover{ color:var(--gold-soft); }

/* ============================ WHY / REVIEWS ============================ */
.why{ background:var(--cream-soft); padding:96px 0 88px; }
.why-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.why-list{ list-style:none; padding:0; margin:26px 0 34px; }
.why-list li{
  position:relative; padding-left:34px; margin-bottom:15px;
  color:var(--green); font-size:1rem;
}
.why-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:16px; height:16px;
  background:var(--gold);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity:.9;
}
.gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.gallery img{
  width:100%; aspect-ratio:3/4.4; object-fit:cover; border-radius:4px;
  filter:saturate(.96);
  transition:transform .4s ease;
}
.gallery img:hover{ transform:scale(1.035); }
.gallery img:nth-child(even){ transform:translateY(16px); }
.gallery img:nth-child(even):hover{ transform:translateY(16px) scale(1.035); }

.quotes{
  margin-top:70px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.quote{
  background:#fff; border:1px solid rgba(107,88,66,.16);
  border-radius:6px; padding:26px 26px 22px; position:relative;
}
.quote::before{
  content:"“"; font-family:var(--font-display);
  position:absolute; top:-6px; left:16px;
  font-size:3.4rem; color:var(--gold); opacity:.55; line-height:1;
}
.quote p{ margin:14px 0 0; color:var(--green); font-size:.95rem; font-style:italic; }
.quotes-src{
  grid-column:1/-1; text-align:center; margin-top:8px;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze);
}
.quotes-src .star{ color:var(--gold); letter-spacing:.1em; }

/* ============================ FOOTER ============================ */
.site-footer{
  background:var(--cream); border-top:1px solid rgba(107,88,66,.18);
  padding:64px 0 30px; text-align:center;
}
.site-footer .lantern{ height:74px; width:auto; margin:0 auto 8px;
  filter:drop-shadow(0 4px 10px rgba(200,161,90,.25)); }
.footer-thanks{
  max-width:52ch; margin:18px auto 30px; color:var(--green); font-size:.98rem;
}
.footer-actions{
  display:flex; justify-content:center; align-items:center; gap:26px; flex-wrap:wrap;
  margin-bottom:36px;
}
.socials{ display:flex; gap:12px; align-items:center; }
.socials span{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); }
.socials a{
  width:38px; height:38px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.socials a svg{ width:16px; height:16px; stroke:var(--green); }
.socials a:hover{ background:var(--gold); }
.footer-legal{
  border-top:1px solid rgba(107,88,66,.15); padding-top:22px;
  font-size:.78rem; color:var(--bronze); letter-spacing:.04em;
}

/* ============================ STUB PAGES ============================ */
.page-hero{
  background:var(--green); color:var(--cream);
  padding:110px 0 90px; text-align:center;
}
.page-hero h1{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing:.1em; text-transform:uppercase; margin:0;
}
.stub{ padding:90px 0 110px; text-align:center; }
.stub h2{
  font-family:var(--font-script); font-weight:400; text-transform:none;
  color:var(--gold); font-size:clamp(2rem,4vw,2.8rem); letter-spacing:0; margin:0 0 18px;
}
.stub p{ max-width:52ch; margin:0 auto 36px; color:var(--green); font-size:1.02rem; }
.stub .actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================ REVEAL ANIMATION ============================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1080px){
  .main-nav a{ padding:10px 9px; font-size:.72rem; letter-spacing:.14em; }
}
@media (max-width: 940px){
  .burger{ display:block; }
  .main-nav{
    position:fixed; inset:69px 0 auto 0;
    background:var(--green-deep);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:18px 6%; display:none;
    border-bottom:1px solid rgba(200,161,90,.3);
    box-shadow:var(--shadow);
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ font-size:.86rem; padding:14px 8px; border-bottom:1px solid rgba(200,161,90,.12); }
  .nav-book{ margin:14px 0 4px; text-align:center; }
  .welcome-grid,.why-grid{ grid-template-columns:1fr; gap:48px; }
  .info-grid{ grid-template-columns:repeat(2,1fr); text-align:left; }
  .info-item svg{ margin:0 0 10px; }
  .quotes{ grid-template-columns:1fr; }
  .hero-content{ padding:96px 0 80px; }
}
@media (max-width: 560px){
  .brand-name{ font-size:.88rem; letter-spacing:.1em; }
  .brand img{ height:36px; }
  .cards{ grid-template-columns:1fr; }
  /* mobile: cards collapse to icon + title + arrow (wife's spec) */
  .card{ flex-direction:row; align-items:center; gap:16px; padding:20px 22px; }
  .card svg{ margin:0; flex:0 0 32px; width:32px; height:32px; }
  .card h3{ margin:0; flex:1; font-size:1.05rem; }
  .card p{ display:none; }
  .card-cta{ font-size:0; }
  .card-cta::after{ font-size:1.1rem; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery img:nth-child(even){ transform:translateY(10px); }
  .info-grid{ grid-template-columns:1fr; gap:26px; }
  .hero{ min-height:76vh; }
}