/* Onyxino Hotel — shared stylesheet (pure CSS, no JavaScript) */
:root{
  --ink:#17283a;
  --forest:#1f6f8b;
  --forest-2:#2a86a6;
  --cream:#fcfbf8;
  --sand:#eef4f6;
  --copper:#1f6f8b;
  --copper-d:#175670;
  --gold:#d9b25f;
  --text:#34424f;
  --muted:#5f6d78;
  --line:rgba(23,40,58,.12);
  --radius:18px;
  --shadow:0 18px 50px rgba(23,40,58,.12);
  --head:'Playfair Display',Georgia,serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--text);background:var(--cream);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;background:var(--sand)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.15;font-weight:600}
h1{font-size:clamp(2.3rem,5vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:18px}
h3{font-size:1.4rem;margin-bottom:8px}
h4{font-size:1.05rem;font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);margin-bottom:16px}
p{margin-bottom:14px}
em{font-style:italic;color:var(--copper)}
.wrap{width:min(1180px,92%);margin:0 auto}
section{padding:96px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);margin-bottom:14px}
.lead{font-size:1.12rem;color:var(--muted);max-width:640px}
.center{text-align:center}
.center .lead{margin-inline:auto}
.btn{display:inline-block;padding:14px 30px;border-radius:50px;font-weight:700;font-size:.95rem;letter-spacing:.02em;border:2px solid var(--copper);background:var(--copper);color:#fff;transition:.25s;cursor:pointer}
.btn:hover{background:var(--copper-d);border-color:var(--copper-d);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn.light:hover{background:#fff;color:var(--ink)}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* announcement bar */
.topbar{background:var(--forest);color:#eaf4f8;font-size:.9rem;text-align:center;padding:10px 4%}
.topbar a{color:#fff;font-weight:700;margin-left:10px;border-bottom:1px solid var(--gold)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(252,251,248,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{font-family:var(--head);font-size:1.7rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:12px;line-height:1}
.logo img{width:46px;height:46px;flex-shrink:0;background:none}
.logo span{display:flex;flex-direction:column;gap:4px}
.logo i{font-family:var(--body);font-style:normal;font-weight:700;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper)}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:.95rem;font-weight:500;position:relative;padding:4px 0}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--copper);transition:.25s}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.active{color:var(--copper)}
.nav-toggle,.burger{display:none}
.burger{cursor:pointer;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);place-items:center;font-size:1.4rem;color:var(--ink)}

/* hero */
.hero{padding:70px 0 90px;background:radial-gradient(circle at 85% 10%,rgba(217,178,95,.22),transparent 45%),linear-gradient(180deg,#f3f8fa,var(--cream))}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.hero p.lead{margin:22px 0 0}
.age{margin-top:26px;font-size:.78rem;letter-spacing:.18em;font-weight:700;color:var(--muted)}
.hero-media{position:relative;height:560px}
.hero-media .img1{position:absolute;right:0;top:0;width:78%;height:78%;border-radius:200px 200px var(--radius) var(--radius);object-fit:cover;box-shadow:var(--shadow)}
.hero-media .img2{position:absolute;left:0;bottom:0;width:52%;height:46%;border-radius:var(--radius);object-fit:cover;border:8px solid var(--cream);box-shadow:var(--shadow)}
.float{position:absolute;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);font-size:.88rem;line-height:1.35;max-width:210px}
.float strong{display:block;font-family:var(--head);color:var(--ink);font-size:1rem}
.float.a{left:2%;top:12%}
.float.b{right:2%;bottom:4%;background:var(--forest);color:#eaf4f8}
.float.b strong{color:#f0d89a;font-size:1.5rem}

/* stats */
.stats{background:#fff;border-block:1px solid var(--line);padding:46px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;gap:20px}
.stats strong{display:block;font-family:var(--head);font-size:2.6rem;color:var(--copper);line-height:1}
.stats span{color:var(--muted);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev .split-img{order:2}
.split-img{position:relative}
.split-img img{width:100%;height:520px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.split-img .tag{position:absolute;left:-18px;bottom:30px;background:var(--copper);color:#fff;padding:12px 22px;border-radius:50px;font-size:.88rem;font-weight:700;box-shadow:var(--shadow)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.chips span{padding:7px 16px;border:1px solid var(--line);border-radius:50px;font-size:.88rem;background:#fff}
.ticks li{padding:8px 0 8px 32px;position:relative;border-bottom:1px solid var(--line)}
.ticks li::before{content:"✦";position:absolute;left:0;color:var(--copper)}

/* cards */
.bg-sand{background:var(--sand)}
.bg-dark{background:linear-gradient(180deg,#e6f0f4,#f3f8fa);color:var(--text)}
.bg-dark h2,.bg-dark h3{color:var(--ink)}
.bg-dark .lead{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px rgba(23,40,58,.08);transition:.3s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.card img{width:100%;height:240px;object-fit:cover}
.card-body{padding:26px 26px 30px;flex:1;display:flex;flex-direction:column}
.card-body .meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.88rem;font-weight:700;color:var(--forest)}
.kicker{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--copper);margin-bottom:6px}
.badge{width:48px;height:48px;border-radius:50%;background:var(--forest);color:var(--gold);display:grid;place-items:center;font-family:var(--head);font-size:1.3rem;margin-bottom:14px}

/* events */
.events{margin-top:46px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.event{display:flex;gap:22px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);transition:.25s;background:#fff}
.event:hover{border-color:var(--copper);box-shadow:var(--shadow)}
.event .when{min-width:96px;text-align:center;padding:12px 8px;border-radius:14px;background:var(--gold);color:var(--ink);font-weight:700;font-size:.8rem;line-height:1.3;align-self:flex-start}
.event .when b{display:block;font-family:var(--head);font-size:1.5rem}
.event p{margin:0;color:var(--muted);font-size:.95rem}
.event small{display:block;margin-top:8px;color:var(--copper);font-weight:700}

/* amenities */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:50px}
.amen div{padding:30px 24px;background:#fff;border-radius:var(--radius);border:1px solid var(--line);transition:.25s}
.amen div:hover{border-color:var(--copper);transform:translateY(-4px)}
.amen i{font-style:normal;font-size:1.8rem;display:block;margin-bottom:12px}
.amen h3{font-size:1.15rem}
.amen p{font-size:.93rem;color:var(--muted);margin:0}

/* banner */
.banner{position:relative;color:#fff;padding:130px 0;background-size:cover;background-position:center;background-attachment:fixed}
.banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,40,58,.82),rgba(23,40,58,.3))}
.banner .wrap{position:relative;max-width:1180px}
.banner h2,.banner h4{color:#fff}
.banner .eyebrow{color:#f0d89a}
.banner .inner{max-width:620px}
.banner p{color:#e0e8e4}

/* responsible */
.resp{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;padding:56px;background:linear-gradient(135deg,#e6f0f4,#f6efdf);border-radius:28px;color:var(--text)}
.resp h2{color:var(--ink)}
.resp .eyebrow{color:var(--copper)}
.resp .age-badge{width:170px;height:170px;border-radius:50%;border:3px dashed var(--gold);display:grid;place-items:center;font-family:var(--head);font-size:3.6rem;color:var(--copper);margin:auto;background:#fff}

/* faq */
.faq{max-width:860px;margin:46px auto 0}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.faq summary{padding:22px 60px 22px 26px;cursor:pointer;font-weight:700;color:var(--ink);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--copper);transition:.2s}
.faq details[open] summary::after{content:"–"}
.faq details[open]{border-color:var(--copper)}
.faq details p{padding:0 26px 24px;margin:0;color:var(--muted)}

/* cta */
.cta{background:linear-gradient(135deg,#e1f0f5,#f6efdf);color:var(--text);text-align:center;border-radius:30px;padding:80px 6%;position:relative;overflow:hidden;border:1px solid var(--line)}
.cta::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(217,178,95,.2);right:-120px;top:-160px}
.cta h2{color:var(--ink)}
.cta .lead{color:var(--muted);margin-inline:auto}
.cta .btn.light{color:var(--ink);border-color:var(--ink)}
.cta .btn.light:hover{background:var(--ink);color:#fff}
.cta .btns{justify-content:center}
.cta *{position:relative;z-index:1}

/* page hero */
.page-hero{position:relative;padding:150px 0 120px;color:#fff;background-size:cover;background-position:center}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,40,58,.55),rgba(23,40,58,.88))}
.page-hero .wrap{position:relative}
.page-hero h1{color:#fff;max-width:760px}
.page-hero .eyebrow{color:#f0d89a}
.page-hero p{color:#dfe8e3;max-width:620px;font-size:1.12rem;margin-top:18px}
.crumbs{font-size:.85rem;color:#c9d6d0;margin-bottom:20px}
.crumbs a:hover{color:var(--gold)}

/* rooms list */
.room{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 12px 36px rgba(23,40,58,.09);margin-bottom:44px}
.room:nth-child(even){grid-template-columns:1fr 1.1fr}
.room:nth-child(even) img{order:2}
.room img{width:100%;height:100%;min-height:420px;object-fit:cover}
.room-body{padding:46px}
.specs{display:flex;flex-wrap:wrap;gap:10px 24px;margin:16px 0 22px;font-size:.9rem;font-weight:700;color:var(--forest)}
.price{font-family:var(--head);font-size:1.7rem;color:var(--copper);margin-top:6px}
.price small{font-family:var(--body);font-size:.85rem;color:var(--muted)}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(23,40,58,.08);margin-top:36px}
th,td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
th{background:var(--forest);color:#fff;font-weight:600}
tr:last-child td{border-bottom:0}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.gallery img{width:100%;height:230px;object-fit:cover;border-radius:14px;transition:.3s}
.gallery img:hover{transform:scale(1.03)}
.gallery img:nth-child(1),.gallery img:nth-child(6){grid-column:span 2}

/* menu board */
.menu-board{display:grid;grid-template-columns:1fr 1fr;gap:20px 60px;margin-top:40px}
.menu-board div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:12px}
.menu-board span{color:var(--muted);font-size:.9rem;display:block}
.menu-board b{font-family:var(--head);color:var(--copper);white-space:nowrap}

/* legal */
.legal{max-width:820px;margin:auto;padding:80px 0}
.legal h2{font-size:1.6rem;margin-top:36px}
.legal p,.legal li{color:var(--muted)}
.legal ul{margin:0 0 14px 22px;list-style:disc}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px}
.contact-box{background:#fff;padding:36px;border-radius:var(--radius);border:1px solid var(--line)}
.contact-box li{padding:10px 0;border-bottom:1px solid var(--line)}
.contact-box li:last-child{border:0}

/* footer */
footer{background:#e9f1f4;color:var(--muted);padding:80px 0 0;font-size:.95rem;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:50px}
footer .logo{font-family:var(--head);font-size:1.7rem;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:12px;line-height:1}
footer li{margin-bottom:10px}
footer li a:hover{color:var(--copper)}
.legal-strip{margin-top:60px;border-top:1px solid var(--line);padding:26px 0;font-size:.85rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.warn{background:#0a1a17;text-align:center;padding:12px 4%;font-size:.82rem;color:#d8a94f;letter-spacing:.04em}

/* cookie banner (CSS-only) */
.cookie-check{position:absolute;opacity:0;pointer-events:none}
.cookie{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(900px,92%);background:#fff;color:var(--text);padding:18px 24px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:99;box-shadow:0 12px 40px rgba(23,40,58,.22);font-size:.9rem;border:1px solid var(--line)}
.cookie p{margin:0}
.cookie a{color:var(--copper);text-decoration:underline}
.cookie .acts{display:flex;gap:10px;flex-shrink:0}
.cookie label{padding:9px 22px;border-radius:50px;font-weight:700;cursor:pointer;font-size:.85rem}
.cookie .yes{background:var(--copper);color:#fff}
.cookie .no{border:1px solid var(--line);color:var(--ink)}
.cookie-check:checked ~ .cookie{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(900px,92%);background:#fff;color:var(--text);padding:18px 24px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:99;box-shadow:0 12px 40px rgba(23,40,58,.22);font-size:.9rem;border:1px solid var(--line)}

/* responsive */
@media(max-width:1020px){
  .hero-grid,.split,.resp,.room,.room:nth-child(even),.contact-grid{grid-template-columns:1fr}
  .split.rev .split-img,.room:nth-child(even) img{order:0}
  .cards{grid-template-columns:1fr 1fr}
  .amen{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .events,.menu-board{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .hero-media{height:480px}
  .banner{background-attachment:scroll}
  .burger{display:grid}
  .menu{display:none;position:absolute;left:0;right:0;top:80px;background:var(--cream);flex-direction:column;align-items:flex-start;padding:24px 4%;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav-toggle:checked ~ .menu{display:flex}
  header{position:sticky}
  .nav{position:relative}
}
@media(max-width:640px){
  section{padding:70px 0}
  .cards,.amen,.foot{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .resp{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:center;padding:56px;background:linear-gradient(135deg,#e6f0f4,#f6efdf);border-radius:28px;color:var(--text)}
  .room-body{padding:30px}
  .cookie{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(900px,92%);background:#fff;color:var(--text);padding:18px 24px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:99;box-shadow:0 12px 40px rgba(23,40,58,.22);font-size:.9rem;border:1px solid var(--line)}
  .gallery img:nth-child(1),.gallery img:nth-child(6){grid-column:span 1}
  .split-img img{height:380px}
  .float{display:none}
  .hero-media{height:420px}
}