:root{
  --cream:#FBF7F0;
  --beige:#EFE6D8;
  --beige-deep:#E1D2B8;
  --brown:#6B4226;
  --brown-deep:#4A2F1D;
  --brown-mid:#8B5E3C;
  --brown-light:#A97C50;
  --ink:#3A2A1D;
  --ink-soft:#7A6A57;
  --line:#E6DCC8;
  --serif:'Playfair Display', serif;
  --script:'Caveat', cursive;
  --sans:'Karla', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2{
  font-family:var(--serif);
  color:var(--brown-deep);
  margin:0;
  line-height:1.15;
}

p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--brown-mid);
  outline-offset:3px;
}

.container{
  max-width:1160px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,247,240,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  transition:padding .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled{
  border-color:var(--line);
  box-shadow:0 8px 24px rgba(74,47,29,0.06);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:80px;
  transition:height .3s ease;
}
.nav.is-scrolled .nav-row{
  height:64px;
}
.brand{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:22px;
  color:var(--brown-deep);
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav-menu a{
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  position:relative;
  padding:4px 0;
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:2px;
  background:var(--brown-mid);
  transition:width .25s ease;
}
.nav-menu a:hover::after{ width:100%; }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:2px;
  background:var(--brown-deep);
  border-radius:2px;
}

/* ---------- Tags ---------- */
.eyebrow{
  font-size:14px;
  font-weight:600;
  color:var(--brown-mid);
  margin-bottom:14px;
}
.script-tag{
  font-family:var(--script);
  font-size:26px;
  color:var(--brown-mid);
  margin-bottom:6px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  padding:14px 30px;
  border-radius:30px;
  border:1.5px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--brown{
  background:var(--brown);
  color:var(--cream);
  box-shadow:0 10px 24px rgba(107,66,38,0.28);
}
.btn--brown:hover{
  background:var(--brown-deep);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(74,47,29,0.32);
}
.btn--outline{
  background:transparent;
  border-color:var(--brown);
  color:var(--brown-deep);
}
.btn--outline:hover{
  background:var(--brown);
  color:var(--cream);
}

/* ---------- Hero ---------- */
.hero{
  padding:90px 0 70px;
}
.hero-row{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}
.hero h1{
  font-style:italic;
  font-size:clamp(44px, 6vw, 72px);
  margin-bottom:20px;
}
.hero-text{
  color:var(--ink-soft);
  font-size:17px;
  max-width:46ch;
  margin-bottom:34px;
}
.hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.hero-art{
  display:flex;
  justify-content:center;
}
.hero-art svg{
  width:100%;
  max-width:320px;
  height:auto;
}
.steam{
  transform-origin:center;
  animation:steam-rise 4s ease-in-out infinite;
  opacity:0.7;
}
.steam-2{ animation-delay:.5s; }
.steam-3{ animation-delay:1s; }
@keyframes steam-rise{
  0%{ transform:translateY(6px); opacity:0; }
  30%{ opacity:0.75; }
  100%{ transform:translateY(-14px); opacity:0; }
}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--brown);
  overflow:hidden;
  padding:16px 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 26s linear infinite;
}
.marquee-track:hover{
  animation-play-state:paused;
}
.marquee-track span{
  color:var(--cream);
  font-family:var(--script);
  font-size:22px;
  padding:0 28px;
  white-space:nowrap;
  position:relative;
}
.marquee-track span::after{
  content:"—";
  position:absolute;
  right:-4px;
  color:var(--brown-light);
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Sections ---------- */
.section{
  padding:100px 0;
}
.section-head{
  max-width:600px;
  margin-bottom:52px;
}
.section-head h2{
  font-size:clamp(28px, 3.6vw, 40px);
}

/* ---------- Om oss ---------- */
.about-row{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:56px;
  align-items:center;
}
.about-art{
  aspect-ratio:4/5;
  border-radius:16px;
  background:
    linear-gradient(135deg, var(--beige-deep), var(--beige)),
    repeating-linear-gradient(45deg, rgba(107,66,38,0.05) 0 2px, transparent 2px 16px);
}
.about-copy h2{
  margin-bottom:18px;
}
.about-text{
  color:var(--ink-soft);
  font-size:16px;
  max-width:52ch;
  margin-bottom:24px;
}
.quote{
  font-family:var(--script);
  font-size:28px;
  color:var(--brown-mid);
}

/* ---------- Menu ---------- */
.section--menu{
  background:var(--beige);
}
.menu-tabs{
  position:relative;
  display:inline-flex;
  gap:8px;
  background:var(--cream);
  border-radius:40px;
  padding:6px;
  margin-bottom:44px;
  border:1px solid var(--line);
}
.menu-tab{
  position:relative;
  z-index:2;
  font-family:var(--sans);
  font-weight:600;
  font-size:14.5px;
  padding:11px 22px;
  border-radius:30px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .25s ease;
}
.menu-tab.is-active{ color:var(--cream); }
.menu-tab-indicator{
  position:absolute;
  top:6px; left:6px;
  height:calc(100% - 12px);
  background:var(--brown);
  border-radius:30px;
  z-index:1;
  transition:transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1);
}

.menu-panel{
  display:none;
  grid-template-columns:1fr 1fr;
  gap:0 56px;
}
.menu-panel.is-active{
  display:grid;
  animation:panel-fade .4s ease;
}
@keyframes panel-fade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.menu-item{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.menu-item-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--serif);
  font-size:19px;
  color:var(--brown-deep);
  margin-bottom:6px;
}
.dots{
  flex:1;
  border-bottom:1.5px dotted var(--brown-light);
  transform:translateY(-4px);
}
.price{
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  color:var(--brown-mid);
  white-space:nowrap;
}
.menu-item p{
  color:var(--ink-soft);
  font-size:14.5px;
}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:220px;
  gap:20px;
  perspective:1200px;
}
.tile{
  --a:#6B4226;
  --b:#8B5E3C;
  --rx:0deg;
  --ry:0deg;
  margin:0;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--a), var(--b));
  display:flex;
  align-items:flex-end;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) scale(1);
  transition:transform .2s ease, box-shadow .3s ease;
  will-change:transform;
}
.tile:hover{
  box-shadow:0 22px 40px rgba(74,47,29,0.24);
}
.tile--tall{ grid-row:span 2; }
.tile figcaption{
  width:100%;
  padding:16px 18px;
  font-size:14px;
  font-weight:600;
  color:var(--cream);
  background:linear-gradient(180deg, transparent, rgba(58,42,29,0.75));
}

/* ---------- Footer ---------- */
.footer{
  background:var(--brown-deep);
  color:var(--beige);
  padding:64px 0 24px;
}
.footer-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:36px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand{
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--cream);
  margin-bottom:10px;
}
.footer-heading{
  font-weight:600;
  color:var(--cream);
  margin-bottom:10px;
  font-size:15px;
}
.footer-line{
  font-size:14px;
  color:#D8C7B4;
  margin-bottom:4px;
}
.footer-line a:hover{ color:var(--cream); }
.footer-copy{
  padding-top:22px;
  font-size:13px;
  color:#B39D85;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.gallery-grid .tile:nth-child(1){ transition-delay:0s; }
.gallery-grid .tile:nth-child(2){ transition-delay:.06s; }
.gallery-grid .tile:nth-child(3){ transition-delay:.12s; }
.gallery-grid .tile:nth-child(4){ transition-delay:.18s; }
.gallery-grid .tile:nth-child(5){ transition-delay:.24s; }
.gallery-grid .tile:nth-child(6){ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .steam{ animation:none !important; opacity:0.5 !important; }
  .marquee-track{ animation:none !important; }
  .tile{ transition:box-shadow .3s ease !important; }
  html{ scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero-row{
    grid-template-columns:1fr;
  }
  .hero-art{
    order:-1;
    max-width:220px;
    margin:0 auto;
  }
  .about-row{
    grid-template-columns:1fr;
  }
  .about-art{
    aspect-ratio:16/9;
  }
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .footer-row{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 28px 20px;
    display:none;
  }
  .nav-menu.is-open{ display:flex; }
  .nav-menu a{
    width:100%;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .menu-panel{
    grid-template-columns:1fr;
  }
  .gallery-grid{
    grid-template-columns:1fr;
  }
  .tile--tall{ grid-row:span 1; }
  .footer-row{
    grid-template-columns:1fr;
  }
  .section{ padding:72px 0; }
  .hero{ padding:56px 0 48px; }
  .menu-tabs{
    display:flex;
    flex-wrap:wrap;
    width:100%;
  }
  .menu-tab{ flex:1; text-align:center; }
}