/* ===== Kipferl Breakfast — brand tokens ===== */
:root{
  --red:#b3261e;        /* vermilion brand red */
  --red-deep:#7e1a15;
  --maroon:#2b120e;     /* dark nav/footer brown */
  --cream:#f6ecd6;      /* paper cream */
  --cream-soft:#fbf5e6;
  --gold:#d9a441;
  --gold-soft:#e8c877;
  --ink:#3a241d;
  --navy:#1f3a63;
  --shadow: 0 18px 40px -18px rgba(43,18,14,.45);
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito Sans",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,.hero__title{font-family:"Fredoka",system-ui,sans-serif;letter-spacing:.5px}

/* seigaiha wave pattern (pure CSS) */
.seigaiha,.hero__seigaiha,.about,.footer{
  --w:64px;
}
.hero__seigaiha{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background:
    radial-gradient(circle at 50% 100%, transparent 34%, var(--gold-soft) 35%, var(--gold-soft) 38%, transparent 39%) ,
    radial-gradient(circle at 50% 100%, transparent 44%, var(--gold-soft) 45%, var(--gold-soft) 48%, transparent 49%) ,
    radial-gradient(circle at 50% 100%, transparent 54%, var(--gold-soft) 55%, var(--gold-soft) 58%, transparent 59%);
  background-size:var(--w) calc(var(--w)/2);
  background-color:var(--cream-soft);
  -webkit-mask-image:linear-gradient(to bottom, #000 60%, transparent);
  mask-image:linear-gradient(to bottom, #000 60%, transparent);
}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg,var(--maroon),#3a1a14);
  border-bottom:3px solid var(--gold);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.hide{transform:translateY(-100%)}
.nav.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.nav__inner{
  max-width:var(--wrap);margin:0 auto;padding:8px 24px;
  display:flex;align-items:center;gap:20px;position:relative;
}
.nav__eyebrow{
  color:var(--gold-soft);font-size:.72rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;flex:1;min-width:0;
}
.nav__brand{position:absolute;left:50%;top:6px;transform:translateX(-50%)}
.nav__brand img{height:74px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.4))}
.nav__links{list-style:none;display:flex;gap:26px;flex:1;justify-content:flex-end;padding-right:8px}
.nav__links a{
  color:var(--cream);text-decoration:none;font-weight:700;font-size:.95rem;
  letter-spacing:.5px;text-transform:uppercase;padding:6px 2px;position:relative;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav__links a:hover{color:var(--gold-soft)}
.nav__links a:hover::after{width:100%}
.nav__social{display:flex;gap:8px}
.nav__social a{color:var(--cream);background:var(--red);border-radius:50%;width:30px;height:30px;
  display:grid;place-items:center;transition:transform .25s var(--ease),background .25s}
.nav__social svg{width:16px;height:16px}
.nav__social a:hover{background:var(--gold);color:var(--maroon);transform:translateY(-2px)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:3px;background:var(--cream);border-radius:2px;transition:.3s}

.drawer{
  position:fixed;top:0;right:0;z-index:55;height:100vh;width:min(78vw,300px);
  background:var(--maroon);transform:translateX(110%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;gap:6px;padding:100px 30px;border-left:3px solid var(--gold);
}
.drawer.open{transform:translateX(0)}
.drawer a{color:var(--cream);text-decoration:none;font-family:"Fredoka";font-size:1.4rem;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer a:hover{color:var(--gold-soft)}

/* ===== HERO ===== */
.hero{
  position:relative;height:100vh;min-height:660px;overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:104px;
  background:linear-gradient(180deg,#f8eed8 0%, #f6e6c8 42%, #f0dcb6 100%);
}

/* --- copy lives in clear sky at the top --- */
.hero__copy{
  position:relative;z-index:20;max-width:760px;margin:0 auto;text-align:center;
  padding:clamp(8px,3vh,32px) 24px 0;
  flex:0 0 auto;
}
.hero__badge{
  display:inline-block;background:var(--red);color:var(--cream);font-weight:800;
  font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;padding:7px 18px;border-radius:999px;
  border:2px solid var(--gold-soft);box-shadow:var(--shadow);
}
.hero__title{
  line-height:.86;margin:16px 0 12px;
}
.hero__title .t1,.hero__title .t2{display:block;font-weight:700}
.hero__title .t1{
  font-size:clamp(2.6rem,7vw,5.2rem);color:var(--red);
  text-shadow:2px 3px 0 var(--gold-soft), 4px 6px 0 rgba(43,18,14,.12);
}
.hero__title .t2{
  font-size:clamp(2.9rem,7.8vw,5.8rem);color:var(--maroon);letter-spacing:2px;
  text-shadow:2px 3px 0 rgba(217,164,65,.55);
}
.hero__sub{
  font-size:clamp(.98rem,1.7vw,1.18rem);color:var(--ink);max-width:520px;margin:0 auto;
  font-weight:600;line-height:1.5;
}
.hero__cta{display:flex;gap:14px;justify-content:center;margin-top:24px;flex-wrap:wrap}

/* --- illustrations grounded as a landscape band at the bottom --- */
.hero__scene{
  position:absolute;left:0;right:0;bottom:0;
  height:min(60vh,520px);z-index:5;pointer-events:none;
}
.hero .layer{
  position:absolute;will-change:transform;user-select:none;pointer-events:none;
  filter:drop-shadow(0 16px 26px rgba(43,18,14,.16));
}
/* sun rises behind the mountains, low and centered */
#l-sun{width:min(30vw,340px);bottom:34%;left:50%;transform:translateX(-50%);z-index:1}
/* fuji anchored left on the horizon */
#l-fuji{width:min(40vw,520px);bottom:0;left:3%;z-index:3}
/* garita anchored right on the horizon */
#l-garita{width:min(19vw,240px);bottom:0;right:6%;z-index:3}
/* flag flies just above/right of the garita */
#l-flag{width:min(11vw,140px);bottom:26%;right:20%;z-index:4}
/* torii sits center-right, mid-ground */
#l-torii{width:min(13vw,168px);bottom:4%;right:30%;z-index:4}
/* blossom drapes from top-left corner into the sky */
#l-blossom{width:min(24vw,300px);top:-6vh;left:-2%;z-index:6}
/* clouds fill the horizon gaps */
#l-cloud-back-l{width:min(20vw,260px);bottom:30%;left:26%;opacity:.85;z-index:2}
#l-cloud-back-r{width:min(22vw,280px);bottom:38%;right:2%;opacity:.85;z-index:2}
#l-cloud-front-l{width:min(30vw,360px);bottom:-4%;left:-5%;z-index:7}
#l-cloud-front-r{width:min(32vw,380px);bottom:-6%;right:-6%;z-index:7;opacity:.97}

.btn{
  font-family:"Fredoka";font-size:1rem;font-weight:600;text-decoration:none;
  padding:14px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn--primary{background:var(--red);color:var(--cream);box-shadow:0 12px 24px -10px var(--red)}
.btn--primary:hover{background:var(--red-deep);transform:translateY(-3px);box-shadow:0 18px 30px -12px var(--red)}
.btn--ghost{background:rgba(255,255,255,.5);color:var(--maroon);border-color:var(--maroon)}
.btn--ghost:hover{background:var(--maroon);color:var(--cream);transform:translateY(-3px)}

.hero__scroll{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:10;
  color:var(--maroon);font-weight:800;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.8;
}
.hero__scroll span{width:2px;height:30px;background:var(--maroon);border-radius:2px;animation:scroll 1.8s var(--ease) infinite}
@keyframes scroll{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== MARQUEE ===== */
.marquee{background:var(--maroon);border-block:3px solid var(--gold);overflow:hidden;padding:14px 0;position:relative;z-index:20}
.marquee__track{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:marquee 26s linear infinite}
.marquee__track span{color:var(--gold-soft);font-family:"Fredoka";font-size:1.15rem;letter-spacing:1px}
.marquee__track span:nth-child(even){color:var(--cream)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== shared section head ===== */
.section-head{text-align:center;max-width:640px;margin:0 auto 50px}
.kicker{color:var(--red);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:.8rem}
.kicker--light{color:var(--gold-soft)}
.section-head h2,.about__copy h2,.cta h2{
  font-size:clamp(2.2rem,5vw,3.4rem);color:var(--maroon);margin:10px 0
}
.rule{width:70px;height:4px;background:var(--gold);border-radius:4px;margin:0 auto 18px;position:relative}
.rule::after{content:"";position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:var(--red);border-radius:50%}
.rule--left{margin-left:0}
.lede{color:var(--ink);font-size:1.05rem;font-weight:600}

/* ===== MENU ===== */
.menu{padding:90px 0;background:
  radial-gradient(circle at 12% 8%, rgba(217,164,65,.12), transparent 40%),
  var(--cream)}
.menu__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.dish{
  background:var(--cream-soft);border:2px solid rgba(179,38,30,.12);border-radius:22px;
  padding:26px 20px;text-align:center;box-shadow:var(--shadow);position:relative;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.dish:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 26px 46px -18px rgba(43,18,14,.4)}
.dish__icon{
  width:110px;height:110px;margin:0 auto 14px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #fff, var(--cream));
  border:4px solid var(--red);display:grid;place-items:center;overflow:hidden;
  box-shadow:inset 0 -6px 14px rgba(179,38,30,.12);
}
.dish__icon img{width:82%;height:82%;object-fit:contain}
.dish h3{color:var(--red);font-size:1.2rem;margin-bottom:6px}
.dish p{color:var(--ink);font-size:.86rem;font-weight:600;opacity:.85;min-height:2.4em}
.dish__price{display:inline-block;margin-top:12px;background:var(--maroon);color:var(--gold-soft);
  font-family:"Fredoka";padding:4px 14px;border-radius:999px;font-size:.95rem}

/* ===== ABOUT ===== */
.about{position:relative;padding:100px 0;background:var(--maroon);color:var(--cream);overflow:hidden}
.about::before{content:"";position:absolute;inset:0;opacity:.08;
  background:radial-gradient(circle at 50% 100%, transparent 44%, var(--gold-soft) 45%, var(--gold-soft) 48%, transparent 49%);
  background-size:56px 28px}
.about__grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.about__art{position:relative;display:grid;place-items:center}
.about__art>img:first-child{width:min(80%,340px);filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));animation:float 6s ease-in-out infinite}
.about__blossom{position:absolute;top:-30px;right:-10px;width:180px;opacity:.9;transform:rotate(8deg)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.about__copy h2{color:var(--cream)}
.about__copy .kicker{color:var(--gold-soft)}
.about__copy p{margin:14px 0;line-height:1.7;font-size:1.03rem;color:#f0e2c6}
.about__stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.about__stats strong{display:block;font-family:"Fredoka";font-size:2rem;color:var(--gold-soft)}
.about__stats span{font-size:.85rem;opacity:.8}

/* ===== LOCATION ===== */
.location{padding:90px 0;background:var(--cream)}
.location__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:34px}
.location__card{background:var(--cream-soft);border:2px solid rgba(179,38,30,.12);border-radius:22px;padding:34px;box-shadow:var(--shadow)}
.location__card h3{color:var(--red);margin:0 0 6px;font-size:1.15rem}
.location__card h3:not(:first-child){margin-top:24px}
.location__card p{font-weight:600;line-height:1.6}
.location__card ul{list-style:none}
.location__card li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed rgba(58,36,29,.2)}
.location__card li span{font-weight:600}
.location__card li b{color:var(--maroon)}
.location__map{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:3px solid var(--gold);min-height:340px}
.location__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:sepia(.15) saturate(1.05)}

/* ===== CTA ===== */
.cta{position:relative;padding:100px 0;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,var(--red),var(--red-deep))}
.cta__clouds{position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:radial-gradient(circle at 20% 30%, #fff 0 8%, transparent 9%),
            radial-gradient(circle at 80% 60%, #fff 0 10%, transparent 11%),
            radial-gradient(circle at 50% 85%, #fff 0 7%, transparent 8%)}
.cta__inner{position:relative;color:var(--cream);max-width:640px}
.cta h2{color:var(--cream)}
.cta p{margin:10px 0 26px;font-size:1.1rem;opacity:.95;font-weight:600}
.cta__form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta__form input{padding:14px 20px;border-radius:999px;border:2px solid var(--gold-soft);min-width:260px;
  font-size:1rem;font-family:"Nunito Sans";background:var(--cream-soft);color:var(--ink)}
.cta__form input:focus{outline:3px solid var(--gold);outline-offset:2px}

/* ===== FOOTER ===== */
.footer{background:var(--maroon);color:var(--cream);padding-top:56px}
.footer__inner{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:40px}
.footer__brand img{height:110px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.footer__brand p{margin-top:10px;color:var(--gold-soft);font-weight:700;letter-spacing:1px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__cols h4{color:var(--gold-soft);margin-bottom:12px;font-size:1rem}
.footer__cols a{display:block;color:#e8dcc2;text-decoration:none;padding:6px 0;font-weight:600;transition:color .25s}
.footer__cols a:hover{color:var(--gold-soft)}
.footer__base{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center;font-size:.85rem;color:#c9b48f}

/* ===== reveal animation ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== responsive ===== */
@media(max-width:900px){
  .nav__eyebrow{display:none}
  .nav__links,.nav__social{display:none}
  .nav__burger{display:flex;margin-left:auto}
  .nav__brand{position:static;transform:none}
  .nav__brand img{height:60px}
  .nav__inner{justify-content:space-between}
  .menu__grid{grid-template-columns:repeat(2,1fr)}
  .about__grid,.location__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr;text-align:center}
  .footer__brand img{margin:0 auto}
  .about__blossom{display:none}
}
@media(max-width:760px){
  .hero{padding-top:88px}
  .hero__scene{height:min(48vh,420px)}
  #l-fuji{width:56vw;left:-4%}
  #l-garita{width:30vw;right:2%}
  #l-sun{width:44vw;bottom:30%}
  #l-flag{width:18vw;bottom:22%;right:16%}
  #l-torii{width:20vw;right:26%;bottom:2%}
  #l-blossom{width:38vw;top:-4vh}
  #l-cloud-back-l,#l-cloud-back-r{display:none}
  #l-cloud-front-l{width:52vw;left:-10%}
  #l-cloud-front-r{width:56vw;right:-12%}
}
@media(max-width:520px){
  .menu__grid{grid-template-columns:1fr 1fr;gap:14px}
  .dish{padding:18px 12px}
  .dish__icon{width:88px;height:88px}
  .footer__cols{grid-template-columns:1fr}
  .hero__title{text-shadow:2px 3px 0 var(--gold-soft)}
}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .hero .layer{transform:none!important}
}