:root {
    --forest: #2f4a3a;
    --forest-dark: #1e3226;
    --cream: #f6f1e7;
    --sand: #ebe0c7;
    --charcoal: #2b2b2b;
    --muted: #6b6b6b;
    --gold: #b48b3a;
    --ok: #3a7d44;
    --error: #b03a3a;
    --radius: 12px;
    --gap: clamp(16px, 3vw, 32px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--charcoal);
    background: var(--cream);
    line-height: 1.6;
    font-size: 16px;
  }
  h1, h2, h3 { font-family: 'Merriweather', Georgia, serif; color: var(--forest-dark); }
  h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; font-weight: 700; }
  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); margin-bottom: 0.5em; }
  h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); margin-bottom: 0.4em; }
  a { color: var(--forest); text-decoration: none; }
  a:hover { text-decoration: underline; }

  /* ==== HEADER ==== */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(246, 241, 231, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sand);
  }
  .nav {
    max-width: 1200px; margin: 0 auto; padding: 12px var(--gap);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .brand { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.15rem; color: var(--forest-dark); }
  .nav-links { display: flex; gap: 18px; font-size: 0.95rem; }
  .nav-links a { color: var(--charcoal); font-weight: 500; }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .lang-switch { display: flex; gap: 4px; font-size: 0.85rem; color: var(--muted); }
  .lang-switch a { padding: 4px 8px; border-radius: 4px; }
  .lang-switch a.active { background: var(--forest); color: white; }
  .btn {
    display: inline-block; padding: 10px 20px; border-radius: var(--radius);
    font-weight: 600; text-align: center; cursor: pointer; border: 0;
    font-family: inherit; transition: transform .1s ease, background .2s;
  }
  .btn-primary { background: var(--forest); color: white; }
  .btn-primary:hover { background: var(--forest-dark); text-decoration: none; transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--forest-dark); border: 1px solid var(--forest); }
  .btn-ghost:hover { background: var(--forest); color: white; text-decoration: none; }
  @media (max-width: 720px) { .nav-links { display: none; } }

  /* ==== HERO ==== */
  .hero {
    position: relative; min-height: 78vh;
    display: flex; align-items: flex-end;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%), var(--hero-img, url('/assets/img/house/facade-summer.jpg')) center/cover no-repeat;
    color: white;
    padding: var(--gap);
  }
  .hero-inner { max-width: 1200px; width: 100%; margin: 0 auto; padding: 40px 0 60px; }
  .hero h1 { color: white; text-shadow: 0 2px 20px rgba(0,0,0,0.35); max-width: 700px; }
  .hero-tag { font-size: 1.15rem; margin: 12px 0 24px; max-width: 550px; opacity: 0.95; }
  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-cta .btn { font-size: 1rem; padding: 14px 26px; }

  /* ==== SECTIONS ==== */
  section { padding: clamp(48px, 8vw, 96px) var(--gap); }
  .container { max-width: 1200px; margin: 0 auto; }
  .lead { font-size: 1.1rem; color: var(--muted); max-width: 720px; margin: 8px 0 24px; }
  section.alt { background: white; }

  /* ==== USP GRID ==== */
  .usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
  .usp-col h3 { border-bottom: 2px solid var(--sand); padding-bottom: 8px; margin-bottom: 16px; }
  .usp-col ul { list-style: none; }
  .usp-col li { padding: 10px 0; border-bottom: 1px dashed var(--sand); display: flex; gap: 10px; align-items: baseline; }
  .usp-col li:last-child { border-bottom: 0; }
  .usp-col .yes::before { content: '✓'; color: var(--ok); font-weight: 700; }
  .usp-col .no::before { content: '×'; color: var(--muted); font-weight: 700; }
  @media (max-width: 720px) { .usp-grid { grid-template-columns: 1fr; } }

  /* ==== DIRECT BOOKING BANNER ==== */
  .direct-banner {
    background: var(--forest); color: white; border-radius: var(--radius);
    padding: 32px; text-align: center; margin-top: 24px;
    background-image: linear-gradient(120deg, var(--forest) 0%, var(--forest-dark) 100%);
  }
  .direct-banner .big { font-family: 'Merriweather', serif; font-size: 2.5rem; font-weight: 700; }
  .direct-banner p { margin: 8px 0 20px; opacity: 0.92; }
  .direct-banner .btn { background: white; color: var(--forest-dark); }

  /* ==== ROOMS GRID ==== */
  .rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
  .room-card { background: white; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
  .room-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
  .room-card .body { padding: 20px; }
  .room-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
  .room-card .meta { color: var(--muted); font-size: 0.9rem; }

  /* ==== DISTANCES TABLE ==== */
  .distances { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
  .distance-row {
    background: white; padding: 14px 18px; border-radius: var(--radius);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
  }
  .distance-row .place { font-weight: 500; }
  .distance-row .time { color: var(--forest); font-weight: 600; font-size: 0.95rem; }
  .roman-note { background: var(--sand); padding: 24px; border-radius: var(--radius); margin-top: 24px; font-style: italic; }

  /* ==== EVENTS ==== */
  .events { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
  .event-card { background: white; padding: 20px; border-radius: var(--radius); border-left: 4px solid var(--gold); }
  .event-card .date { color: var(--gold); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
  .event-card h4 { font-family: 'Merriweather', serif; margin: 6px 0; font-size: 1.05rem; color: var(--forest-dark); }
  .event-card .venue { color: var(--muted); font-size: 0.9rem; }

  /* ==== REVIEWS ==== */
  .agg-badges { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0 40px; }
  .badge {
    background: white; padding: 16px 24px; border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex; align-items: center; gap: 12px;
  }
  .badge .score { font-family: 'Merriweather', serif; font-size: 2rem; font-weight: 700; color: var(--forest-dark); line-height: 1; }
  .badge .meta { font-size: 0.85rem; color: var(--muted); }
  .badge .meta strong { display: block; color: var(--charcoal); font-size: 1rem; }
  .badge.stars .stars { color: var(--gold); font-size: 1rem; }

  .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .review-card { background: white; padding: 24px; border-radius: var(--radius); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
  .review-card .head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
  .review-card .avatar {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    background: var(--sand); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--forest-dark); font-weight: 700; font-family: 'Merriweather', serif;
  }
  .review-card .who { flex: 1; }
  .review-card .who strong { display: block; }
  .review-card .who small { color: var(--muted); }
  .review-card blockquote {
    font-family: 'Merriweather', serif; font-style: italic;
    color: var(--charcoal); font-size: 1rem;
    border-left: 3px solid var(--sand); padding-left: 14px; margin: 8px 0 12px;
  }
  .review-card .src { font-size: 0.8rem; color: var(--muted); }
  .review-card .src a { color: var(--forest); }

  /* ==== LONG-STAY ==== */
  .longstay {
    background: var(--forest-dark); color: white; border-radius: var(--radius);
    padding: 48px 32px; text-align: center; margin-top: 32px;
  }
  .longstay p { max-width: 640px; margin: 0 auto 24px; opacity: 0.9; }

  /* ==== CONTACT / FOOTER ==== */
  footer {
    background: var(--forest-dark); color: white; padding: 48px var(--gap) 24px;
  }
  .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
  .footer-grid h4 { font-family: 'Merriweather', serif; margin-bottom: 12px; color: white; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
  .footer-grid a { color: rgba(255,255,255,0.85); }
  .footer-grid a:hover { color: white; }
  .footer-grid p { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
  .copyright { max-width: 1200px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.85rem; color: rgba(255,255,255,0.6); }

  /* ==== UTILITY ==== */
  .center { text-align: center; }
  .mt-lg { margin-top: 32px; }
  .stub { background: repeating-linear-gradient(45deg, rgba(180,139,58,0.08) 0 10px, transparent 10px 20px); padding: 12px 16px; border-radius: 8px; font-size: 0.85rem; color: var(--muted); border: 1px dashed var(--gold); margin: 12px 0; }

  /* ==== v2 additions (multi-page) ==== */
  .brand small { display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:0.72rem; color:var(--muted); letter-spacing:0.5px; text-transform:uppercase; }
  .nav-links a.active { color: var(--forest); font-weight: 700; }
  .hero.page { min-height: 42vh; }
  .eyebrow { display:inline-block; color: var(--gold); font-weight: 700; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
  .hero .eyebrow { color: #f3dca8; }
  .narrow { max-width: 860px; margin: 0 auto; }
  .prose p { margin: 0 0 1em; font-size: 1.05rem; }
  .prose h2 { margin-top: 1.6em; }
  .prose ul { margin: 0 0 1em 22px; }
  .info-block { background: white; border-left: 4px solid var(--forest); border-radius: var(--radius); padding: 22px 26px; margin: 22px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
  .info-block.gold { border-left-color: var(--gold); }
  .info-block.warn { border-left-color: var(--error); }
  .info-block h3 { margin-bottom: 10px; }
  .info-block ul { margin: 6px 0 0 20px; } .info-block li { margin: 4px 0; }
  .todo { display:inline-block; background:#fff4d6; color:#7a5a12; border:1px dashed var(--gold); border-radius:6px; font-size:0.8rem; font-weight:600; padding:2px 8px; margin:2px 0; }
  /* rooms page */
  .room-detail { display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items:start; padding: 40px 0; border-bottom: 1px solid var(--sand); }
  .room-detail:last-child { border-bottom: 0; }
  .room-detail .gallery { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .room-detail .gallery img { width:100%; height: 170px; object-fit: cover; border-radius: 8px; }
  .room-detail .gallery img:first-child { grid-column: 1 / -1; height: 300px; }
  .facts { display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 16px; }
  .facts span { background: var(--sand); color: var(--forest-dark); border-radius: 999px; padding: 4px 12px; font-size: 0.88rem; font-weight: 600; }
  .amen { columns: 2; margin: 12px 0 20px 18px; } .amen li { margin: 3px 0; break-inside: avoid; }
  @media (max-width: 860px) { .room-detail { grid-template-columns: 1fr; } .amen { columns: 1; } }
  /* history */
  .timeline { position: relative; margin: 32px 0; padding-left: 28px; border-left: 3px solid var(--sand); }
  .timeline .item { position: relative; margin: 0 0 28px; }
  .timeline .item::before { content:''; position:absolute; left:-37px; top:6px; width:15px; height:15px; border-radius:50%; background: var(--gold); border: 3px solid var(--cream); }
  .timeline .year { font-family:'Merriweather',serif; font-weight:700; color: var(--gold); font-size: 1.1rem; }
  .figure { margin: 28px 0; } .figure img { border-radius: var(--radius); width: 100%; }
  .figure figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 6px; font-style: italic; }
  .photo-pair { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
  .photo-pair img { width:100%; height: 280px; object-fit: cover; border-radius: var(--radius); }
  @media (max-width: 720px) { .photo-pair { grid-template-columns: 1fr; } }
  .placeholder-photo { background: repeating-linear-gradient(45deg, var(--sand) 0 12px, #f1e8d4 12px 24px); border-radius: var(--radius); min-height: 240px; display:flex; align-items:center; justify-content:center; text-align:center; color: var(--muted); font-weight:600; padding: 20px; }
  /* faq */
  .faq details { background: white; border-radius: var(--radius); margin: 10px 0; border: 1px solid var(--sand); }
  .faq summary { cursor: pointer; padding: 16px 52px 16px 22px; font-weight: 600; color: var(--forest-dark); list-style: none; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--gold); }
  .faq details[open] summary::after { content: '−'; }
  .faq .answer { padding: 0 22px 18px; }
  .faq h2 { margin-top: 36px; font-size: clamp(1.25rem,3vw,1.6rem); }
  /* tables */
  .tbl { width: 100%; border-collapse: collapse; background: white; border-radius: var(--radius); overflow: hidden; margin-top: 20px; font-size: 0.95rem; }
  .tbl th, .tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--sand); vertical-align: top; }
  .tbl th { background: var(--forest); color: white; font-weight: 600; }
  .map-embed { border: 0; width: 100%; height: 400px; border-radius: var(--radius); margin-top: 20px; }
  /* forms & contact */
  .two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items:start; }
  @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
  .form-card { background: white; border-radius: var(--radius); padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
  .form-card label { display:block; font-weight:600; margin: 14px 0 6px; color: var(--forest-dark); font-size: 0.95rem; }
  .form-card input, .form-card textarea, .form-card select { width:100%; padding: 11px 13px; border: 1.5px solid var(--sand); border-radius: 8px; font: inherit; background: var(--cream); }
  .form-card textarea { min-height: 130px; }
  .form-card .hint { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }
  /* legal */
  .legal { max-width: 860px; margin: 0 auto; }
  .legal h2 { font-size: clamp(1.2rem,3vw,1.5rem); margin-top: 36px; padding-top: 8px; border-top: 1px solid var(--sand); }
  .legal h2:first-child { border-top: 0; margin-top: 0; }
  .legal h3 { font-size: 1.05rem; margin-top: 20px; }
  .legal p, .legal li { font-size: 0.97rem; margin-bottom: 8px; }
  .legal ul, .legal ol { margin: 8px 0 14px 24px; }
  .legal .note { background: var(--sand); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 28px; }
  .legal .stand { color: var(--muted); margin-top: 28px; font-size: 0.9rem; }
  .legal address { font-style: normal; }
  .footer-grid p { margin: 2px 0; }
  .footer-langs { display:flex; flex-wrap:wrap; gap:8px; }

/* language dropdown (8 languages) */
.lang-dd { position: relative; }
.lang-dd summary { display: block; list-style: none; cursor: pointer; padding: 4px 10px; border: 1px solid var(--forest); border-radius: 4px; color: var(--forest); font-weight: 600; }
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd .lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: white; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 6px; display: flex; flex-direction: column; min-width: 150px; z-index: 50; }
.lang-dd .lang-menu a { padding: 6px 10px; color: var(--charcoal); }
.lang-dd .lang-menu a:hover { background: #f1f3ef; }
.lang-dd .lang-menu a.active { color: white; }

/* footer social links */
footer .social { display: flex; flex-wrap: wrap; gap: 14px; }
footer .social a { display: inline-flex; align-items: center; gap: 6px; }
footer .social-note { font-size: 0.85rem; opacity: .8; margin-top: 6px; }