:root {
  --bg:#080808;
  --panel:#101010;
  --gold:#c9a45c;
  --gold-soft:#e1c98f;
  --ivory:#f0ece4;
  --muted:#aaa49a;
  --line:#292929;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.6;
}
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }

header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(8,8,8,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav {
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand {
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.14em;
  font-size:1.05rem;
}
.brand span { color:var(--gold); }
nav {
  display:flex;
  align-items:center;
  gap:24px;
  font-size:.88rem;
  letter-spacing:.06em;
}
nav a:hover { color:var(--gold-soft); }

.btn {
  display:inline-block;
  border:1px solid var(--gold);
  padding:12px 19px;
  color:var(--gold-soft);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.75rem;
  transition:.2s ease;
}
.btn:hover { background:var(--gold); color:#111; }
.btn.secondary { border-color:#444; color:#ddd; }

.hero {
  min-height:88vh;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 50% 34%, rgba(201,164,92,.13), transparent 31%),
    linear-gradient(180deg,#090909,#050505);
}
.hero:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.015) 50%,transparent 100%);
  pointer-events:none;
}
.hero-inner {
  position:relative;
  z-index:1;
  width:min(920px,92vw);
  padding:80px 20px 90px;
}
.logo {
  display:block;
  width:min(650px,82vw);
  margin:0 auto 18px;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.35));
}
.hero-copy {
  max-width:700px;
  margin:0 auto;
  color:#c7c1b7;
  font-size:1.04rem;
}
.hero-subtitle {
  margin: 8px auto 18px;
  color: var(--gold-soft);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .82rem;
}
.actions {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px;
}

section {
  padding:88px 0;
  border-bottom:1px solid var(--line);
}
.eyebrow {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.7rem;
  margin-bottom:12px;
}
h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
}
h2 {
  font-size:clamp(2.1rem,4.6vw,3.7rem);
  line-height:1.1;
  margin:0 0 22px;
}
.copy {
  color:#bbb5ab;
  font-size:1rem;
}
.grid-2 {
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:70px;
  align-items:start;
}
.quote {
  border-left:2px solid var(--gold);
  padding:6px 0 6px 24px;
  color:#e7dfd2;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.55rem;
  line-height:1.5;
}
.cards {
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card {
  background:var(--panel);
  border:1px solid var(--line);
  padding:28px;
  min-height:220px;
}
.card h3 {
  font-size:1.45rem;
  margin:0 0 10px;
}
.card p {
  margin:0;
  color:var(--muted);
}

.menu-preview {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:32px;
}
.menu-item {
  border-top:1px solid #343434;
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
}
.menu-item strong {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:1.16rem;
}
.menu-item small {
  display:block;
  color:#8f8981;
  margin-top:3px;
}
.menu-item .meta {
  color:var(--gold);
  white-space:nowrap;
}

.story-band {
  background:
    linear-gradient(90deg,rgba(201,164,92,.055),transparent 42%),
    var(--bg);
}

.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:30px;
}
.contact-box {
  border:1px solid var(--line);
  background:var(--panel);
  padding:28px;
}
.contact-box h3 { margin:0 0 10px; font-size:1.45rem; }
.contact-box p { margin:.35rem 0; color:#b7b0a6; }

footer {
  padding:34px 0;
  color:#777168;
  font-size:.84rem;
}
.footer-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

@media (max-width:820px) {
  nav a:not(.btn) { display:none; }
  .grid-2,.cards,.menu-preview,.contact { grid-template-columns:1fr; }
  section { padding:62px 0; }
  .hero { min-height:80vh; }
  .logo { width:min(560px,92vw); margin-left:auto;margin-right:auto;
}
}

/* --- Interactive layer --- */
.cursor-glow{
  position:fixed;
  width:220px;height:220px;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(circle, rgba(201,164,92,.12) 0%, rgba(201,164,92,.045) 38%, transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .25s ease;
  mix-blend-mode:screen;
}
.cursor-dot{
  position:fixed;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--gold);
  pointer-events:none;
  z-index:40;
  transform:translate(-50%,-50%);
  box-shadow:0 0 16px rgba(201,164,92,.55);
  opacity:0;
  transition:opacity .2s ease, width .2s ease, height .2s ease;
}
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}
.card,.contact-box,.menu-item{
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.card:hover,.contact-box:hover{
  transform:translateY(-5px);
  border-color:rgba(201,164,92,.45);
}
.menu-item:hover{
  transform:translateX(5px);
  border-top-color:rgba(201,164,92,.5);
}
.logo{
  transition:transform .18s ease-out, filter .25s ease;
margin-left:auto;margin-right:auto;
}
.logo:hover{
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.35)) drop-shadow(0 0 24px rgba(201,164,92,.12));
}
.scroll-progress{
  position:fixed;
  left:0;top:0;
  height:2px;
  width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft));
  z-index:50;
}
.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.14) 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.btn:hover::after{ transform:translateX(130%); }

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .cursor-glow,.cursor-dot{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.contact-box,.menu-item,.logo{transition:nonemargin-left:auto;margin-right:auto;
}
}

@media (max-width:820px){
  .logo{
    width:100% !important;
    max-width:560px;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block;
  }
}


/* House 106 final crescent reveal */
.logo-stage{
  position:relative;
  width:min(650px,82vw);
  aspect-ratio:2048 / 1557;
  margin:0 auto 18px;
}
.logo-stage .logo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  object-fit:contain;
  display:block;
}
.logo-base{
  z-index:1;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.35));
}
.logo-moon{
  z-index:2;
  opacity:0;
  clip-path:inset(100% 0 0 0);
  animation:
    house106MoonReveal 5s cubic-bezier(.22,.61,.36,1) .45s forwards,
    house106MoonFade 5s ease-out .45s forwards;
}
@keyframes house106MoonReveal{
  from{clip-path:inset(100% 0 0 0);}
  to{clip-path:inset(0 0 0 0);}
}
@keyframes house106MoonFade{
  from{opacity:0;}
  to{opacity:1;}
}
@media(max-width:820px){
  .logo-stage{
    width:100%;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
}
@media(prefers-reduced-motion:reduce){
  .logo-moon{
    animation:none;
    opacity:1;
    clip-path:none;
  }
}

/* Founders preview */
.founders-section{background:#171715;padding:95px 0 105px}.founders-intro{max-width:660px;margin-bottom:36px}.founders-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.founder{background:#242320;border:1px solid rgba(215,181,117,.22);overflow:hidden;border-radius:4px}.founder img{display:block;width:100%;height:420px;object-fit:cover;object-position:center 27%}.founder-info{padding:26px 28px 32px}.founder-info h3{font-size:30px;margin:10px 0;color:#f6eee0}.founder-info p{color:#d1c9ba;line-height:1.7;margin:0}.founder-info .eyebrow{font-size:11px;letter-spacing:.13em}@media(max-width:650px){.founders-grid{grid-template-columns:1fr}.founder img{height:370px}.founders-section{padding:65px 0}}

/* Founders responsive layout fix — desktop two columns, mobile one column */
#founders .founders-grid {display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:clamp(16px,3vw,32px);align-items:stretch;width:100%;}
#founders .founder {min-width:0;width:100%;display:flex;flex-direction:column;overflow:hidden;}
#founders .founder img {display:block;width:100%;height:auto;aspect-ratio:4 / 5;max-height:none;object-fit:cover;object-position:center top;}
#founders .founder-info {flex:1;padding:clamp(18px,2.5vw,28px);overflow-wrap:break-word;}
@media (max-width:700px) {
 #founders .founders-grid {grid-template-columns:minmax(0,1fr) !important;gap:22px;}
 #founders .founder {max-width:460px;margin-inline:auto;}
 #founders .founder img {aspect-ratio:4 / 5;max-height:none;object-position:center 20%;}
 #founders .founder-info {padding:20px;}
 #founders .founder-info h3 {font-size:26px;}
 #founders .wrap {padding-inline:18px;}
}

/* Mobile portrait containment: prevent intrinsic image width expanding viewport */
html { box-sizing:border-box; width:100%; max-width:100%; overflow-x:clip; }
*, *::before, *::after {box-sizing:inherit;}
body {width:100%; max-width:100%; margin:0; overflow-x:clip;}
img,svg,video {max-width:100%;}
#founders, #founders .wrap, #founders .founders-grid, #founders .founder {min-width:0;max-width:100%;}
#founders .founder img {width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; display:block !important;}
@media screen and (max-width:700px) {
 #founders .wrap {width:100% !important; max-width:100% !important; padding-left:18px !important; padding-right:18px !important;}
 #founders .founders-grid {display:grid !important; grid-template-columns:minmax(0,1fr) !important; width:100% !important; gap:22px !important;}
 #founders .founder {width:100% !important; max-width:100% !important; margin:0 !important;}
 #founders .founder img {aspect-ratio:4 / 5 !important; object-fit:cover !important; object-position:center 20% !important;}
 #founders .founder-info {width:100%; padding:20px;}
}


/* ALTERNATIVE PREVIEW 2: clearer restaurant background + transparent logo */
.hero {
  min-height: min(920px, 92svh);
  background:
    linear-gradient(90deg, rgba(5,5,5,.22) 0%, rgba(5,5,5,.08) 48%, rgba(5,5,5,.18) 100%),
    radial-gradient(circle at 50% 34%, rgba(201,164,92,.08), transparent 36%),
    url('../assets/restaurant-atmosphere-clear.png') center center / cover no-repeat;
  border-bottom: 1px solid rgba(201,164,92,.24);
}
.hero::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,.12) 5%, rgba(0,0,0,.02) 56%, transparent 76%);
}
.hero-inner {
  padding: 58px 20px 72px;
}
.hero .logo-stage {
  width: min(620px, 78vw);
  margin-bottom: 2px;
}
.hero .logo-base,
.hero .logo-moon {
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.40)) drop-shadow(0 0 18px rgba(0,0,0,.18));
}
.hero-subtitle {
  margin: 6px auto 14px;
  color: var(--gold-soft);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.hero-copy {
  max-width: 650px;
  color: #efe8dd;
  text-shadow: 0 2px 14px rgba(0,0,0,.62);
}
.hero .actions { margin-top: 26px; }
.hero .btn {
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(1px);
}
.hero .btn.secondary { border-color: rgba(201,164,92,.58); }
.hero .btn:hover { background: var(--gold); }
@media (max-width:700px) {
  .hero { min-height: 78svh; background-position: center center; }
  .hero-inner { padding: 54px 15px 60px; }
  .hero .logo-stage { width: min(560px, 92vw); }
  .hero-copy { font-size: .93rem; }
}


/* Founder portrait alignment tuning v2: show more of Micke's background sign while keeping both heads and shoulders at similar height */
#founders .founder-eryk img {
  object-position: center 8% !important;
}
#founders .founder-micke img {
  object-position: center 6% !important;
}
@media (max-width:700px) {
  #founders .founder-eryk img {
    object-position: center 10% !important;
  }
  #founders .founder-micke img {
    object-position: center 8% !important;
  }
}


/* Mobile hero centering tweak */
@media (max-width:700px) {
  .hero-inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .hero .logo-stage {
    width: min(560px, 90vw);
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    transform: none; /* center logo using the flex layout; no manual horizontal offset */
  }
  .hero-subtitle,
  .hero-copy,
  .hero .actions {
    margin-left: auto;
    margin-right: auto;
  }
}