/* Splash N Sizzle brand layer — keep this file clean and asset-based. */

.brand-with-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:inherit;
  flex:0 0 auto;
}

.brand-with-logo .brand-copy{display:none}

.brand-logo,
.brand-logo-large{
  display:block;
  background-image:url('/assets/sns-logo.webp');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  flex:0 0 auto;
}

.brand-logo{
  width:112px;
  height:72px;
}

.brand-logo-large{
  width:220px;
  height:220px;
}

/* Header: logo is a signature, not the whole composition. */
.site-header .nav-shell{
  min-height:76px;
}

.site-header.is-scrolled .nav-shell{
  min-height:62px;
}

.site-header.is-scrolled .brand-logo{
  width:96px;
  height:58px;
}

/* Hero: editorial, full-width and brand-led. No giant floating logo. */
.hero{
  min-height:100svh;
  padding-top:150px;
}

.hero .hero-grid{
  grid-template-columns:minmax(0, 940px);
  justify-content:start;
  gap:0;
}

.hero .hero-copy{
  max-width:920px;
}

.hero .hero-copy.reveal{
  opacity:1;
  transform:none;
}

.hero .hero-brand-lockup{
  display:none;
}

.hero h1{
  font-size:clamp(76px, 9.4vw, 148px);
  max-width:900px;
}

.hero-lead{
  max-width:780px;
}

.hero::before{
  background:
    radial-gradient(circle at 82% 25%, rgba(255,157,0,.14), transparent 23%),
    radial-gradient(circle at 69% 54%, rgba(0,200,255,.10), transparent 28%),
    linear-gradient(90deg, rgba(2,7,13,.97) 0%, rgba(2,7,13,.90) 52%, rgba(2,7,13,.62) 100%);
}

/* Let the identity reappear as a restrained seal at the close. */
.closing .hero-brand-lockup{
  display:block;
  width:190px;
  margin:0 auto 30px !important;
}

.closing .brand-logo-large{
  width:190px;
  height:190px;
}

/* Menu page should lead with food, not another oversized logo. */
.menu-hero .hero-brand-lockup{
  display:none;
}

.menu-hero-grid{
  grid-template-columns:minmax(0, 920px) !important;
  justify-content:start;
}

.menu-hero .reveal:first-child{
  opacity:1;
  transform:none;
}

@media (max-width:820px){
  .brand-logo{
    width:94px;
    height:60px;
  }

  .site-header .nav-shell,
  .site-header.is-scrolled .nav-shell{
    min-height:60px;
  }

  .hero{
    padding-top:118px;
  }

  .hero h1{
    font-size:clamp(62px, 17vw, 92px);
  }
}

@media (max-width:620px){
  .brand-logo{
    width:82px;
    height:54px;
  }

  .hero{
    padding-top:108px;
  }

  .closing .hero-brand-lockup{
    width:145px;
  }

  .closing .brand-logo-large{
    width:145px;
    height:145px;
  }
}