:root{
    --bg: #E7E2DD;
    --line: #6a655d;
    --text: #3f3a33;
    --muted:#6b645c;
    --accent:#b29775;
    --maxw: 1050px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: url('../images/superior_king/photo-1519710164239-da123dc03ef4.webp') no-repeat center center fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-attachment: fixed;
    background-color: var(--bg);
    /* background: var(--bg); */
    color: var(--text);
    font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Top centered title */
  .page-title{
    text-align:center;
    margin-top: 65px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:20px 0;
    font-family:'Marcellus', serif;
    font-weight:400;
    font-size:18px;
    letter-spacing:.45em;
    text-transform:uppercase;
    color:#2e2a25;
    background:rgba(231,226,221,.85);
    backdrop-filter:blur(2px);
  }

  /* Content block */
  .room-section{
    padding: 80px 24px 30px;
    background: rgba(250,244,236,0.75);
    backdrop-filter: blur(1px);
  }
  .hero{
    max-width: var(--maxw);
    margin: 0 auto;
    text-align: center;
  }

  .hero h1{
    font-family: 'Marcellus', serif;
    font-weight: 400;
    font-size: clamp(36px, 5vw, 56px);
    letter-spacing: .02em;
    margin: 24px 0 18px;
  }

  .lead{
    max-width: 920px;
    margin: 0 auto;
    font-family: "times new roman", serif;
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--muted);
  }
  .lead em{
    font-style: italic;
    color: #4a443d;
  }

  /* Michelin line */
  .award{
    display:inline-flex;
    align-items:center;
    gap: 12px;
    margin-top: 48px;
    color:#6e6a63;
    letter-spacing: .15em;
    font-weight:500;
    font-size: 15px;
    opacity:.9;
  }
  .award svg{ width:18px; height:18px; flex:0 0 18px; }

  .bottom-hairline{
    margin: 60px auto 60px;
    height: 1px;
    max-width: 1400px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    opacity:.5;
  }

  @media (max-width:768px){
    .page-title{ font-size:14px; letter-spacing:.35em; padding:24px 0; }
    .room-section{ padding:64px 16px 30px; }
  }

  /* image-section */
  .image-section{
    max-width: 1120px;
    margin: 56px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .card{
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    height: 360px;
    background: #0f0f0f;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    transition: transform .4s ease, filter .4s ease;
  }

  .card:hover{
    transform: scale(1.02);
    filter: brightness(1.05);
  }

  .card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
  }

  .card:hover img{
    transform: scale(1.05);
  }

  /* Overlay gradient for readability */
  .card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
    pointer-events: none;
  }

  @media (max-width: 768px){
    .image-section{
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .card{
      height: 280px;
    }
  }

  .fac-wrap{
    max-width: 1120px;
    margin: 64px auto 10px;
    padding: 0 4px;
  }
  
  .fac-list{
    list-style:none; padding:0; margin:0;
    display:grid;
    background-color: #f5f5f5;
    padding: 18px 24px;
    border-radius: 5px;
    margin-top: 30px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 18px;
  }
  .fac-item{
    display:flex; align-items:center; gap:10px;
    color:#3f3a33;
    font-size:14px;
    line-height:1.4;
  }
  .fac-item svg{
    width:18px; height:18px; flex:0 0 18px;
    stroke: currentColor; fill: none; stroke-width:1.6;
  }
  

  @media (max-width:768px){
    .fac-wrap{ margin-top:48px; }
    .fac-list{ grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
  }