/* =========================================================
   FINAL LAYOUT SEPARATION
   Desktop and mobile are intentionally isolated here.
   This file must load after styles.css.
   ========================================================= */

/* Shared safety */
html,
body{
  max-width:100%;
}

.hero-brand-title,
.footer-brand-line,
.reserve-line-brand{
  font-family:"Cormorant Garamond",serif!important;
}

/* =========================================================
   DESKTOP — 769px AND ABOVE
   ========================================================= */
@media (min-width:769px){

  html,
  body{
    overflow-x:hidden!important;
  }

  main,
  section,
  header,
  footer,
  .hero,
  .intro,
  .split-feature,
  .membership,
  .culture,
  .reserve,
  .contact{
    overflow:visible!important;
  }

  /* Never clip desktop headings or paragraphs */
  h1,h2,h3,p,blockquote,
  .hero-content,
  .intro-title,
  .intro-copy,
  .feature-copy,
  .membership-heading,
  .membership-intro,
  .culture-copy,
  .reserve-content,
  .contact-heading{
    overflow:visible!important;
  }

  body.ja h1,
  body.ja h2,
  body.ja h3,
  body.ja p,
  body.ja blockquote{
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-break:strict!important;
  }

  /* Hero */
  .hero-content{
    width:min(1180px,88vw)!important;
    max-width:1180px!important;
    padding-bottom:clamp(5.5rem,8vh,7.5rem)!important;
  }

  .hero-brand-title,
  body.ja .hero-brand-title{
    display:block!important;
    max-width:100%!important;
    margin:0 0 1.25rem!important;
    font-size:clamp(5.6rem,10vw,10.5rem)!important;
    line-height:.84!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
  }

  .hero-brand-subtitle{
    max-width:100%!important;
    white-space:normal!important;
  }

  .hero-brand-statement{
    max-width:760px!important;
    white-space:normal!important;
  }

  .all-instagram-links{
    grid-template-columns:repeat(2,max-content)!important;
  }

  /* Introduction */
  .intro{
    grid-template-columns:minmax(0,1fr) minmax(380px,.8fr)!important;
    gap:7vw!important;
  }

  .intro-title,
  .intro-copy{
    min-width:0!important;
    max-width:100%!important;
  }

  body.ja .intro-two-line-title{
    max-width:900px!important;
    font-size:clamp(2.7rem,4.25vw,4.45rem)!important;
    line-height:1.3!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  .intro-copy p{
    max-width:620px!important;
    white-space:normal!important;
  }

  /* Restaurant and Lounge */
  .split-feature{
    grid-template-columns:minmax(0,58%) minmax(0,42%)!important;
    min-height:760px!important;
  }

  .split-feature.reverse{
    grid-template-columns:minmax(0,42%) minmax(0,58%)!important;
  }

  .feature-copy{
    min-width:0!important;
    max-width:100%!important;
    padding:clamp(5rem,7vw,8rem)!important;
  }

  body.ja .feature-copy h2{
    max-width:100%!important;
    font-size:clamp(2.8rem,4.3vw,4.7rem)!important;
    line-height:1.3!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  .feature-copy p{
    max-width:620px!important;
    white-space:normal!important;
  }

  /* Philosophy */
  .quote-section{
    overflow:visible!important;
    min-height:auto!important;
  }

  body.ja .quote-section blockquote{
    max-width:980px!important;
    font-size:clamp(2.1rem,3.4vw,3.7rem)!important;
    line-height:1.65!important;
    white-space:normal!important;
  }

  /* Membership */
  .membership-heading,
  .membership-layout,
  .membership-intro{
    max-width:100%!important;
    overflow:visible!important;
  }

  body.ja .membership-heading h2{
    max-width:100%!important;
    font-size:clamp(2.8rem,4.5vw,4.9rem)!important;
    line-height:1.3!important;
    white-space:normal!important;
  }

  /* Music & Art */
  .culture{
    grid-template-columns:minmax(360px,.75fr) minmax(0,1.25fr)!important;
    gap:5vw!important;
    align-items:start!important;
    min-height:auto!important;
    overflow:visible!important;
  }

  .culture-copy{
    min-width:0!important;
    max-width:620px!important;
    padding-right:0!important;
    overflow:visible!important;
  }

  body.ja .culture-copy h2{
    max-width:620px!important;
    font-size:clamp(2.7rem,4vw,4.35rem)!important;
    line-height:1.35!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  .culture-copy p{
    max-width:580px!important;
    white-space:normal!important;
  }

  .culture-gallery{
    grid-template-columns:1fr 1fr!important;
    min-width:0!important;
    align-items:stretch!important;
  }

  .culture-gallery figure{
    height:720px!important;
    min-height:720px!important;
  }

  /* Reservations */
  .reserve-content{
    width:min(1000px,86vw)!important;
    max-width:1000px!important;
    overflow:visible!important;
  }

  #reserve h2{
    max-width:1000px!important;
    overflow:visible!important;
  }

  #reserve h2 .reserve-line{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
  }

  body.ja #reserve h2{
    font-size:clamp(2.75rem,4.5vw,4.65rem)!important;
    line-height:1.3!important;
  }

  /* Contact */
  .contact{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;
  }

  .contact-heading,
  .contact-form{
    min-width:0!important;
  }

  body.ja .contact-heading h2{
    max-width:100%!important;
    font-size:clamp(2.8rem,4.4vw,4.7rem)!important;
    line-height:1.3!important;
    white-space:normal!important;
  }

  /* Footer */
  .footer-brand-line{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow:visible!important;
    font-size:clamp(4rem,7vw,7.5rem)!important;
    line-height:.95!important;
  }
}

/* =========================================================
   MOBILE — 768px AND BELOW
   ========================================================= */
@media (max-width:768px){

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box;
    min-width:0;
  }

  .hero-content,
  .intro,
  .intro-title,
  .intro-copy,
  .feature-copy,
  .video-title,
  .membership-heading,
  .membership-layout,
  .membership-intro,
  .culture-copy,
  .culture-gallery,
  .reserve-content,
  .contact,
  .contact-heading,
  .contact-form,
  footer{
    width:100%!important;
    max-width:100%!important;
  }

  body.ja p,
  body.ja a,
  body.ja span,
  body.ja small,
  body.ja blockquote{
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    line-break:strict!important;
  }

  /* Header */
  .site-header{
    position:fixed!important;
    display:block!important;
    height:64px!important;
  }

  .wordmark{
    position:absolute!important;
    left:16px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    max-width:32vw!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .language-toggle{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:20!important;
    color:var(--ink)!important;
    font-size:.76rem!important;
    font-weight:700!important;
  }

  .menu-toggle{
    position:absolute!important;
    right:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }

  /* Hero */
  .hero-content{
    padding:0 18px 92px!important;
  }

  .hero-brand-title,
  body.ja .hero-brand-title{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(2.15rem,10.2vw,3.35rem)!important;
    line-height:.95!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow:visible!important;
  }

  .hero-actions-simple,
  .all-instagram-links{
    grid-template-columns:1fr!important;
  }

  /* General headings */
  body.ja .intro-two-line-title,
  body.ja .feature-copy h2,
  body.ja .video-title h2,
  body.ja .membership-heading h2,
  body.ja .culture-copy h2,
  body.ja .contact-heading h2{
    max-width:100%!important;
    font-size:clamp(1.85rem,8.2vw,2.3rem)!important;
    line-height:1.43!important;
    white-space:normal!important;
    word-break:keep-all!important;
  }

  /* Reservation title: exactly two meaningful lines */
  #reserve h2{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(1.7rem,7.5vw,2.15rem)!important;
    line-height:1.45!important;
  }

  #reserve h2 .reserve-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  #reserve h2 .reserve-line-brand{
    white-space:nowrap!important;
    word-break:keep-all!important;
    letter-spacing:-.035em!important;
  }

  /* Footer brand */
  .footer-brand-line{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow:visible!important;
    font-size:clamp(1.9rem,9.5vw,2.9rem)!important;
    line-height:1!important;
    letter-spacing:0!important;
  }

  body.ja .quote-section blockquote{
    max-width:100%!important;
    font-size:clamp(1.3rem,6vw,1.6rem)!important;
    line-height:1.85!important;
  }
}

@media (max-width:390px){

  .hero-brand-title,
  body.ja .hero-brand-title{
    font-size:2.02rem!important;
  }

  #reserve h2{
    font-size:1.62rem!important;
  }

  #reserve h2 .reserve-line-brand{
    font-size:.92em!important;
  }

  .footer-brand-line{
    font-size:1.88rem!important;
  }
}