/* ============================================================
   HOTEL BAYERN VITAL — Editorial / Modern Lifestyle Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* Palette */
  --paper:      #F1EBDD;   /* oatmeal white — warmth */
  --paper-soft: #F7F2E8;   /* lighter warm */
  --white:      #FFFFFF;
  --blue:       #607AA3;   /* anchor grayish-blue */
  --blue-700:   #4C638B;   /* hover / deeper */
  --blue-200:   #BCC8D9;   /* tint */
  --ink:        #28313F;   /* deep blue-charcoal text */
  --ink-soft:   #55606F;
  --terra:      #C57B58;   /* soft terracotta accent */
  --terra-soft: #E2B79F;
  --moss:       #76845A;   /* muted moss green accent */
  --moss-soft:  #AEB793;
  --line:       #D8D0BF;   /* hairline on paper */

  /* Type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  /* Rhythm */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --radius-lg: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  line-height:0.92;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin:0;
}
h1.display{ font-size:clamp(48px, 8.5vw, 132px); }
h2.display{ font-size:clamp(38px, 5.5vw, 84px); }
h3.display{ font-size:clamp(28px, 3.4vw, 48px); }

.serifless-lead{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.01em;
  font-size:clamp(24px,3vw,40px);
  margin:0;
}

.overline{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:13px;
  color:var(--blue);
}
.overline.terra{ color:var(--terra); }
.overline.moss{ color:var(--moss); }

p{ margin:0 0 1em; text-wrap:pretty; }
.lead{ font-size:clamp(19px,1.6vw,23px); color:var(--ink-soft); max-width:60ch; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:1480px; margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }
.bleed{ width:100%; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; font-size:14px;
  padding:15px 26px; border-radius:999px;
  border:2px solid transparent; transition:.22s ease; white-space:nowrap;
}
.btn .ar{ transition:transform .22s ease; }
.btn:hover .ar{ transform:translateX(4px); }
.btn-solid{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-solid:hover{ background:var(--blue-700); border-color:var(--blue-700); }
.btn-terra{ background:var(--terra); color:#fff; border-color:var(--terra); }
.btn-terra:hover{ filter:brightness(.93); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--blue); }
.btn-outline:hover{ background:var(--blue); color:#fff; }
.btn-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; border-color:#fff; }
.btn-ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn-ghost-light:hover{ background:#fff; color:var(--ink); }

/* ---------- Star Border — conic-gradient traveling dot ---------- */
@property --sb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.sb-active{
  position:relative;
  isolation:isolate;
  border:none !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-outline.sb-active{
  box-shadow: 0 0 0 1px rgba(96,122,163,0.35);
}

.sb-active::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(
    from var(--sb-angle),
    transparent   0%,
    transparent  78%,
    #607aa3      87%,
    #c8dcf5      93%,
    #ffffff      96%,
    #c8dcf5      98%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation:sb-spin 7s linear infinite;
  z-index:0;
}

.sb-inner{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:6px;
}

@keyframes sb-spin{
  to{ --sb-angle:360deg; }
}
.btn-sm{ padding:10px 18px; font-size:12.5px; }

/* ---------- Decorative bits ---------- */
.sticker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:0.05em; font-size:13px;
  background:var(--terra); color:#fff; padding:8px 16px; border-radius:999px;
  transform:rotate(-3deg);
}
.sticker.moss{ background:var(--moss); }
.sticker.blue{ background:var(--blue); }
.plate{ background:var(--blue); color:#fff; border-radius:var(--radius-lg); }
.hairline{ height:2px; background:var(--terra); border:0; width:64px; margin:0; }

/* image-slot defaults */
image-slot{
  --slot-bg:#cdd5e0;
  background:linear-gradient(135deg,#c7d0dd,#aab7c9);
  display:block;
}

/* photo overlay treatment (#607AA3) */
.photo-overlay{ position:relative; overflow:hidden; }
.photo-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(96,122,163,.10), rgba(40,49,63,.55));
  mix-blend-mode:multiply;
}
.overlay-blue::after{ background:rgba(96,122,163,.42); mix-blend-mode:multiply; }

/* reveal on scroll — visible by default; entrance is pure enhancement that can never leave content hidden */
.reveal{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .reveal.in{ animation:revealUp .7s ease both; }
}
@keyframes revealUp{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:18px 0;
}
.site-header .wrap-wide{ display:flex; align-items:center; gap:28px; }
.site-header.solid{ background:var(--paper-soft); box-shadow:0 1px 0 var(--line); padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:46px; width:auto; transition:height .3s ease; }
.site-header.solid .brand img{ height:40px; }
.brand-txt{ font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.92; letter-spacing:.01em; font-size:15px; }
.brand-txt small{ display:block; font-size:10px; letter-spacing:.28em; font-weight:600; opacity:.7; }

.mainnav{ display:flex; gap:4px; margin-left:8px; }
.mainnav > li{ position:relative; list-style:none; }
.mainnav > li > a{
  display:block; padding:12px 14px; font-family:var(--display); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:13.5px; border-radius:8px;
}
.mainnav > li > a:hover{ color:var(--blue); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* color states: over-hero (light text) vs solid (dark text) */
.site-header:not(.solid){ color:#fff; }
.site-header:not(.solid) .brand-txt small{ opacity:.85; }
.site-header.solid{ color:var(--ink); }

/* dropdown */
.dropdown{
  position:absolute; top:100%; left:0; min-width:230px;
  background:#fff; border-radius:12px; box-shadow:0 22px 50px rgba(40,49,63,.18);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.2s ease; border:1px solid var(--line);
}
.mainnav > li:hover .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:block; padding:9px 14px; border-radius:8px; color:var(--ink); font-size:15px; font-weight:500; }
.dropdown a:hover{ background:var(--paper); color:var(--blue); }

/* burger */
.burger{ display:none; margin-left:auto; background:none; border:0; color:inherit; padding:8px; }
.burger svg{ width:30px; height:30px; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:200; background:var(--ink); color:#fff; transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; padding:24px var(--gutter); }
.drawer.open{ transform:none; }
.drawer-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.drawer-top img{ height:48px; }
.drawer-close{ background:none; border:0; color:#fff; font-size:34px; line-height:1; }
.drawer nav a{ display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:26px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.12); letter-spacing:.02em; }
.drawer nav .sub{ font-size:16px; font-weight:500; text-transform:none; padding:7px 0 7px 16px; border:0; opacity:.8; }
.drawer .drawer-cta{ margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#D7DCE4; padding:80px 0 36px; margin-top:0; }
.site-footer a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1.6fr; gap:40px; }
.foot-grid h4{ font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:#fff; margin:0 0 16px; }
.foot-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; font-size:15px; color:#AEB6C2; }
.foot-brand{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.foot-brand img{ height:88px; margin-bottom:16px; display:block; }
.foot-brand p{ text-align:right; max-width:34ch; }
.foot-bottom{ margin-top:54px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8C96A4; }
.foot-badges{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; justify-content:flex-end; }
.foot-badge{ white-space:nowrap; }
.foot-badge{ border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* ---------- Generic section spacing ---------- */
.section-pad{ padding:clamp(64px,9vw,130px) 0; }
.section-pad-sm{ padding:clamp(44px,6vw,80px) 0; }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease; }
.card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px rgba(40,49,63,.13); }

/* tabs */
.tabbar{ display:flex; flex-wrap:wrap; gap:8px; }
.tab-btn{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:14px; padding:12px 22px; border-radius:999px; background:transparent; border:2px solid var(--line); color:var(--ink); transition:.2s; }
.tab-btn:hover{ border-color:var(--blue); }
.tab-btn.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }
.tab-panel.active.just-shown{ animation:fade .4s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

/* accordion */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; text-align:left; background:none; border:0; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--display); font-weight:700; font-size:clamp(18px,2vw,24px); color:var(--ink); }
.acc-head .pm{ flex-shrink:0; width:34px; height:34px; border-radius:999px; border:2px solid var(--blue); color:var(--blue); display:grid; place-items:center; font-size:22px; transition:.25s; }
.acc-item.open .acc-head .pm{ background:var(--blue); color:#fff; transform:rotate(45deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc-body-inner{ padding:0 0 24px; color:var(--ink-soft); max-width:80ch; }

/* utilities */
.eyebrow-num{ font-family:var(--display); font-weight:900; font-size:clamp(40px,6vw,90px); color:var(--blue-200); line-height:1; }
.tag{ display:inline-block; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:11px; padding:5px 11px; border-radius:999px; background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); }
.price{ font-family:var(--display); font-weight:900; }
.price small{ font-weight:600; font-size:.5em; letter-spacing:.04em; color:var(--ink-soft); text-transform:uppercase; }

/* ---------- Inner page hero ---------- */
.page-hero{ background:var(--paper-soft); padding:calc(96px + clamp(40px,6vw,72px)) 0 clamp(40px,6vw,70px); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero .ph-grid{ display:grid; grid-template-columns:1.5fr 1.3fr; gap:40px; align-items:end; }
.page-hero .ph-title{ }
.page-hero h1.display{ font-size:clamp(44px,7vw,104px); }
.page-hero .ph-lead{ font-size:clamp(18px,1.6vw,22px); color:var(--ink-soft); max-width:46ch; margin-top:18px; }
.page-hero .breadcrumb{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--blue); margin-bottom:18px; display:flex; gap:8px; }
.page-hero .breadcrumb a{ opacity:.6; }
.page-hero .ph-word{ position:absolute; right:-3%; top:30%; font-family:var(--display); font-weight:900; font-size:24vw; color:rgba(96,122,163,.06); line-height:.8; pointer-events:none; text-transform:uppercase; }

/* info strip (blue plate of facts) */
.info-strip{ background:var(--blue); color:#fff; border-radius:var(--radius-lg); padding:8px; display:grid; grid-template-columns:repeat(4,1fr); }
.info-strip .info-cell{ padding:16px 18px; border-right:1px solid rgba(255,255,255,.18); }
.info-strip .info-cell:last-child{ border-right:0; }
.info-strip .info-cell .k{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11px; opacity:.75; }
.info-strip .info-cell .v{ font-family:var(--display); font-weight:800; font-size:19px; margin-top:3px; }

/* section header (non-generic, used variably) */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:42px; }

@media (max-width:980px){
  .page-hero .ph-grid{ grid-template-columns:1fr; align-items:start; }
  .info-strip{ grid-template-columns:1fr 1fr; }
  .info-strip .info-cell:nth-child(2){ border-right:0; }
}
@media (max-width:540px){
  .info-strip{ grid-template-columns:1fr; }
  .info-strip .info-cell{ border-right:0; border-bottom:1px solid rgba(255,255,255,.18); }
  .info-strip .info-cell:last-child{ border-bottom:0; }
}

@media (max-width:1040px){
  .mainnav, .nav-right .btn{ display:none; }
  .burger{ display:block; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .foot-grid{ grid-template-columns:1fr; }
  body{ font-size:17px; }
}