:root{
  --green:#1d5245; --green-2:#2f7a63; --green-soft:#e4efe9;
  --terra:#c4553a; --cream:#faf6ef; --sand:#f1e9dc;
  --ink:#1f2522; --muted:#5f6b66; --line:#e3dccf; --white:#fff;
  --radius:18px; --shadow:0 10px 30px rgba(20,40,32,.10);
  --booking:#003b95;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 Inter,system-ui,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:Fraunces,Georgia,"Songti SC","Noto Serif SC",serif;line-height:1.15;margin:0 0 .5em;font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.35rem}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:88px 0}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:600;margin-bottom:.8em}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}


/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:.85em 1.4em;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:.98rem;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-book{background:var(--booking);color:#fff;box-shadow:0 6px 18px rgba(0,59,149,.28)}
.btn-book:hover{background:#00296b}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5);backdrop-filter:blur(6px)}
.btn-line{background:transparent;border:1.5px solid var(--green);color:var(--green)}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .25s,box-shadow .25s}
header.solid{background:rgba(250,246,239,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{font-family:Fraunces,serif;font-weight:700;font-size:1.35rem;text-decoration:none;color:#fff;white-space:nowrap}
header.solid .logo{color:var(--green)}
.logo{display:flex;align-items:center;gap:10px;line-height:1}
.logo .mark{width:42px;height:36px;flex:none;background:currentColor;-webkit-mask:url(img/brand/papuca.png) center/contain no-repeat;mask:url(img/brand/papuca.png) center/contain no-repeat}
.logo small{display:block;font:600 .6rem Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-top:3px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a.on{text-decoration:underline;text-underline-offset:6px}
.nav ul a{text-decoration:none;color:#fff;font-weight:500;font-size:.95rem;opacity:.92}
header.solid .nav ul a{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang{appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .75em center;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;font:600 .8rem Inter,sans-serif;padding:.45em 2em .45em .9em;cursor:pointer}
header.solid .lang{border-color:var(--line);color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231f2522' stroke-width='1.6'/%3E%3C/svg%3E")}
.lang option{color:#1f2522}
.nav .btn{padding:.6em 1.1em;font-size:.88rem}
@media (max-width:900px){
  .nav{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:8px;row-gap:6px}
  .nav ul{order:3;width:100%;justify-content:center;gap:22px}
  .nav ul a{font-size:.88rem}
}
@media (max-width:520px){.nav .btn-book span{display:none}}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;padding:0 0 9vh;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,25,20,.45) 0%,rgba(10,25,20,.05) 35%,rgba(10,25,20,.7) 100%)}
.hero h1{font-size:clamp(2.8rem,8vw,6rem);margin-bottom:.15em;letter-spacing:-.01em}
.hero p{font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;margin:0 0 1.6em;opacity:.95}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.score{display:inline-flex;align-items:center;gap:.6em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);padding:.4em .9em .4em .4em;border-radius:999px;margin-bottom:1.2em;font-size:.92rem}
.score b{background:var(--booking);border-radius:999px 999px 999px 4px;padding:.25em .6em;font-size:.95rem}

/* highlights */
.highlights{background:var(--white);padding:0;border-bottom:1px solid var(--line)}
.hl-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.hl{padding:28px 22px;border-right:1px solid var(--line)}
.hl:last-child{border-right:0}
.hl .ico{font-size:1.5rem;margin-bottom:.3em}
.hl strong{display:block;font-size:1rem}
.hl span{color:var(--muted);font-size:.9rem}
@media (max-width:800px){.hl-grid{grid-template-columns:1fr 1fr}.hl:nth-child(2){border-right:0}.hl:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* story */
.story{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.story-imgs{position:relative}
.story-imgs img{border-radius:var(--radius);box-shadow:var(--shadow)}
.story-imgs .a{width:82%;aspect-ratio:4/5;object-fit:cover}
.story-imgs .b{position:absolute;right:0;bottom:-40px;width:48%;aspect-ratio:1;object-fit:cover;border:6px solid var(--cream)}
.sign{margin-top:1.4em;font-family:Fraunces,serif;font-style:italic;color:var(--green);font-size:1.15rem}
@media (max-width:860px){.story{grid-template-columns:1fr;gap:70px}}

/* rooms */
.rooms{background:var(--sand)}
.rooms-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.room-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}
.room{grid-column:span 2}
.room:nth-child(4),.room:nth-child(5){grid-column:span 3}
.room{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.room .ph{position:relative;aspect-ratio:4/3;cursor:zoom-in;overflow:hidden}
.room .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.room .ph:hover img{transform:scale(1.04)}
.room .count{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:.78rem;padding:.25em .65em;border-radius:999px}
.room .badge{position:absolute;left:12px;top:12px;background:var(--terra);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3em .7em;border-radius:999px}
.room .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.room .sub{color:var(--terra);font-size:.85rem;font-weight:600;margin:-.3em 0 .6em}
.room p{color:var(--muted);font-size:.95rem;margin:0 0 1em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:0;list-style:none}
.tags li{background:var(--green-soft);color:var(--green);font-size:.78rem;font-weight:500;padding:.25em .65em;border-radius:6px}
.room:nth-child(4) .ph,.room:nth-child(5) .ph{aspect-ratio:16/10}
.room.wide{grid-column:1/-1;flex-direction:row}
.room.wide .ph{flex:1.3;aspect-ratio:auto;min-height:340px}
.room.wide .body{flex:1;padding:34px}
@media (max-width:980px){.room-grid{grid-template-columns:1fr 1fr}.room,.room:nth-child(4){grid-column:span 1}.room:nth-child(5){grid-column:1/-1}}
@media (max-width:640px){.room-grid{grid-template-columns:1fr}.room,.room:nth-child(n){grid-column:auto}.room.wide{flex-direction:column}.room.wide .ph{min-height:0;aspect-ratio:4/3}}
.note{font-size:.88rem;color:var(--muted);margin-top:26px}

/* gallery */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.filters button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:.45em 1em;font:500 .88rem Inter,sans-serif;cursor:pointer;color:var(--ink)}
.filters button.on{background:var(--green);border-color:var(--green);color:#fff}
.gallery{columns:4 240px;column-gap:12px}
.gallery button{all:unset;display:block;margin:0 0 12px;break-inside:avoid;cursor:zoom-in;border-radius:12px;overflow:hidden}
.gallery img{width:100%;height:auto;transition:opacity .2s}
.gallery button:hover img{opacity:.85}
.gallery button:focus-visible{outline:3px solid var(--green-2);outline-offset:2px}
.more{text-align:center;margin-top:20px}

/* reviews */
.reviews{background:var(--green);color:#fff}
.reviews .eyebrow{color:#f3b9a6}
.rv-top{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;margin-bottom:50px}
.big-score{font-family:Fraunces,serif;font-size:5.5rem;line-height:1;font-weight:700}
.big-score small{display:block;font:500 1rem Inter,sans-serif;opacity:.8;margin-top:.4em}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.bar{font-size:.9rem}
.bar div{display:flex;justify-content:space-between}
.bar i{display:block;height:6px;border-radius:6px;background:rgba(255,255,255,.18);margin-top:5px;overflow:hidden}
.bar i::after{content:"";display:block;height:100%;width:var(--v);background:#f3b9a6;border-radius:6px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px}
.quote p{margin:0 0 1em;font-family:Fraunces,serif;font-size:1.08rem;line-height:1.5}
.quote span{font-size:.85rem;opacity:.75}
@media (max-width:860px){.rv-top{grid-template-columns:1fr;gap:28px}.quotes{grid-template-columns:1fr}.bars{grid-template-columns:1fr}}

/* guide */
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card h3{font-size:1.15rem;display:flex;gap:.5em;align-items:center}
.card ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.95rem}
.card li{margin:.35em 0}
.card li b{color:var(--ink);font-weight:600}
@media (max-width:900px){.guide-grid{grid-template-columns:1fr}}

/* location */
.loc{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--sand)}
.map iframe{width:100%;height:100%;border:0}
.places{list-style:none;padding:0;margin:1.4em 0}
.places li{display:flex;justify-content:space-between;gap:16px;padding:.7em 0;border-bottom:1px dashed var(--line)}
.places li span:last-child{color:var(--muted);white-space:nowrap;font-size:.92rem}
@media (max-width:860px){.loc{grid-template-columns:1fr}}

/* final cta */
.final{position:relative;color:#fff;text-align:center;padding:120px 0;overflow:hidden}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::after{content:"";position:absolute;inset:0;background:rgba(15,40,32,.66);z-index:-1}
.final p{max-width:52ch;margin:0 auto 1.8em;opacity:.92}
footer{background:#14302a;color:rgba(255,255,255,.75);padding:40px 0;font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:#fff}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(8,14,12,.94);z-index:100;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb .x{top:18px;right:18px}
.lb .prev{left:18px;top:50%;transform:translateY(-50%)}
.lb .next{right:18px;top:50%;transform:translateY(-50%)}
.lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font-size:.9rem}
@media (max-width:640px){.lb .prev,.lb .next{top:auto;bottom:50px;transform:none}}

/* sticky mobile booking bar */
.mbar{display:none}
@media (max-width:640px){
  .mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;justify-content:center;transform:translateY(120px);transition:transform .25s}
  .mbar.show{transform:none}
  .mbar .btn{width:100%;justify-content:center}
  footer{padding-bottom:90px}
}

/* café */
.cafe{background:#2e211a;color:#f6ede2}
.cafe .eyebrow{color:#e8b07f}
.cafe-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.cafe-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cafe-photos img{border-radius:var(--radius);aspect-ratio:9/14;object-fit:cover;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.cafe-photos img:last-child{margin-top:40px}
.cafe .lead{color:rgba(246,237,226,.85)}
.cafe p{color:rgba(246,237,226,.78)}
.cafe .tags li{background:rgba(232,176,127,.15);color:#f3cfa9}
.cafe .rating{display:inline-flex;gap:.5em;align-items:center;font-weight:600;margin:.4em 0 1.2em;color:#f3cfa9}
.cafe .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.btn-cafe{background:#e8b07f;color:#2e211a}
.btn-cafe-line{border:1.5px solid rgba(246,237,226,.5);color:#f6ede2}
@media (max-width:860px){.cafe-grid{grid-template-columns:1fr;gap:32px}}

/* featured café card on the Explore page */
.lm.featured{grid-column:1/-1;flex-direction:row;background:#2e211a;color:#f6ede2}
.lm.featured .ph{flex:1.1;aspect-ratio:auto;min-height:300px}
.lm.featured .ph img{object-position:center 80%}
.lm.featured .body{flex:1;padding:32px}
.lm.featured p{color:rgba(246,237,226,.8)}
.lm.featured .go{color:#f3cfa9}
.lm.featured .links{display:flex;gap:18px;margin-top:auto}
.lm .flag{position:absolute;left:12px;top:12px;background:#e8b07f;color:#2e211a;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.3em .75em;border-radius:999px}
@media (max-width:640px){.lm.featured{flex-direction:column}.lm.featured .ph{min-height:0;aspect-ratio:3/2}}
.pin.cafe{background:#c98a4b}

/* ===== Café page ===== */
.cafe-hero img{object-position:center 85%}
.cafe-hero .score b{background:#c98a4b}
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.serve{background:rgba(255,255,255,.05);border:1px solid rgba(232,176,127,.22);border-radius:var(--radius);padding:26px}
.serve .ico{font-size:1.8rem;margin-bottom:.4em}
.serve h3{color:#f6ede2}
.serve p{margin:0}
@media (max-width:860px){.serve-grid{grid-template-columns:1fr}}
.ritual{list-style:none;counter-reset:step;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ritual li{counter-increment:step;background:var(--white);border-radius:var(--radius);padding:24px;color:var(--muted);box-shadow:var(--shadow)}
.ritual li::before{content:counter(step);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#2e211a;color:#f3cfa9;font:700 1.1rem Fraunces,serif;margin-bottom:12px}
.ritual li b{display:block;color:var(--ink);font-family:Fraunces,serif;font-size:1.15rem;margin-bottom:.3em}
@media (max-width:980px){.ritual{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ritual{grid-template-columns:1fr}}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px 48px;margin-top:26px}
.menu-cat h3{border-bottom:2px solid #2e211a;padding-bottom:.4em}
.menu-cat ul{list-style:none;padding:0;margin:0}
.menu-cat li{display:flex;align-items:baseline;gap:8px;padding:.45em 0}
.menu-cat li i{flex:1;border-bottom:1px dotted var(--line)}
.menu-cat li b{white-space:nowrap}
.cafe-page .story-imgs .a{object-position:center 70%;max-height:520px}

/* places list on home page links to Explore */
.places a{text-decoration:none}
.places a:hover{color:var(--green)}

/* ===== Explore Sarajevo page ===== */
.hero.short{min-height:72svh}
.lm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.lm{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.lm .ph{aspect-ratio:3/2;overflow:hidden;position:relative}
.lm .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lm:hover .ph img{transform:scale(1.04)}
.lm .dist{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--green);font-size:.8rem;font-weight:600;padding:.3em .75em;border-radius:999px}
.lm .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.lm h3{font-size:1.25rem}
.lm p{color:var(--muted);font-size:.95rem;margin:0 0 1em}
.lm .go{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--green);text-decoration:none}
.lm .go:hover{text-decoration:underline}
@media (max-width:980px){.lm-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.lm-grid{grid-template-columns:1fr}}
#lmap{height:480px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:0}
.pin{width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--terra);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pin.home{background:var(--green-2);width:32px;height:32px}
.tips{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;list-style:none;padding:0;margin:30px 0 0}
.tips li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 20px;color:var(--muted)}
.tips li b{display:block;color:var(--ink);margin-bottom:.2em}
@media (max-width:760px){.tips{grid-template-columns:1fr}}
.credits{font-size:.75rem;opacity:.7;margin-top:14px;width:100%}
.credits a{color:inherit}

/* anchor targets clear the fixed header (taller on phones, where the menu wraps) */
section[id]{scroll-margin-top:0}
@media (max-width:900px){section[id]{scroll-margin-top:28px}}
@media (max-width:420px){.nav ul{gap:12px}.nav ul a{font-size:.82rem}}