@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  color-scheme: light;
  --ink:#241512;
  --ink-soft:#6B5850;
  --paper:#FBF3E7;
  --paper-high:#FFFDF9;
  --surface:#F3E4CB;
  --line:#E4CFAE;
  --ember:#C1401F;
  --ember-soft:#E0603A;
  --saffron:#B9812A;
  --olive:#5B6B3F;
  --focus:#1D6FB8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important;}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Mulish', ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.62;
}
h1,h2,h3{
  font-family:'Unbounded', ui-sans-serif, system-ui, sans-serif;
  font-weight:700; text-wrap:balance; margin:0; letter-spacing:-0.01em;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums;}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem);}
.label{font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ember);}

/* Nav */
header.nav{position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.85rem clamp(1.25rem,4vw,3rem); max-width:1140px; margin:0 auto; gap:1rem;}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; font-family:'Unbounded',sans-serif; font-weight:700; font-size:1.02rem; white-space:nowrap;}
.brand .mark{width:30px; height:30px; flex:none; border-radius:7px; background:var(--ember); display:flex; align-items:center; justify-content:center; color:#fff;}
.brand .mark svg{width:17px; height:17px;}
nav.links{display:flex; gap:1.6rem; align-items:center;}
nav.links a{font-size:.92rem; font-weight:700; text-decoration:none; color:var(--ink-soft); border-bottom:2px solid transparent; padding-bottom:2px; transition:color .15s ease,border-color .15s ease;}
nav.links a:hover{color:var(--ember); border-color:var(--saffron);}
nav.links a[aria-current="page"]{color:var(--ember); border-color:var(--saffron);}
.nav-cta{display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1rem; background:var(--ember); color:#fff !important; border-radius:6px; font-size:.88rem; font-weight:700; text-decoration:none;}
.nav-cta:hover{background:var(--ember-soft);}
@media (max-width:760px){ nav.links a:not(.nav-cta){display:none;} }

/* Mobile header: logo text + CTA button compete for space on a narrow
   single row (no hamburger menu in this design), so both shrink here. */
@media (max-width:600px){
  .nav-inner{gap:.5rem;}
  .brand{gap:.5rem; font-size:.92rem;}
  .brand .mark{width:26px; height:26px;}
  .brand .mark svg{width:15px; height:15px;}
  .brand-name{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15;}
  .brand-line1{font-size:1rem;}
  .brand-line2{font-size:.66rem; font-weight:600; color:var(--ink-soft);}
  .nav-cta{padding:.5rem .7rem; font-size:.78rem; gap:.35rem;}
  .nav-cta svg{width:14px; height:14px;}
}
@media (max-width:400px){
  .nav-cta-text{display:none;}
  .nav-cta{padding:.55rem; border-radius:50%;}
}

/* Hero */
.hero{position:relative; overflow:hidden; padding:clamp(3.2rem,8vw,5.5rem) 0 clamp(2.8rem,6vw,4.5rem); border-bottom:1px solid var(--line);}
.grate{position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, color-mix(in srgb, var(--ember) 10%, transparent) 0 2px, transparent 2px 34px);
  mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.hero-inner{position:relative; display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(2rem,5vw,3.5rem); align-items:center;}
@media (max-width:860px){ .hero-inner{grid-template-columns:1fr;} }
.eyebrow{display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1rem;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--saffron);}
.hero h1{font-size:clamp(2.5rem,6vw,4.1rem); line-height:1.03;}
.hero h1 span{color:var(--ember);}
.hero p.lede{margin-top:1.2rem; max-width:46ch; font-size:1.12rem; color:var(--ink-soft);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem;}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; font-weight:700; font-size:.95rem; text-decoration:none; border-radius:7px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; font-family:'Mulish',sans-serif;}
.btn-primary{background:var(--ember); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); background:var(--ember-soft);}
.btn-ghost{border-color:var(--ink); color:var(--ink);}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--ember); color:var(--ember);}
.hero-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.5rem; display:grid; gap:1rem;}
.hero-card .row{display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:.95rem;}
.hero-card .row svg{width:19px; height:19px; flex:none; color:var(--ember);}
.hero-card .row.open span.tag{margin-left:auto; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--olive); background:color-mix(in srgb, var(--olive) 16%, transparent); padding:.2rem .55rem; border-radius:99px;}

section{padding:clamp(3.2rem,7vw,5rem) 0;}
section + section{border-top:1px solid var(--line);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.4rem; flex-wrap:wrap;}
#ruokalista .section-head{margin-bottom:1rem;}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.4rem);}
.section-head p{color:var(--ink-soft); max-width:40ch; margin:.5rem 0 0;}
.contact-band .section-head p{color:color-mix(in srgb, var(--paper) 55%, transparent);}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:none;}

/* Menu */
.menu-pills{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2rem; position:sticky; top:65px; z-index:20; background:var(--paper); padding:.75rem 0; border-bottom:1px solid var(--line); scroll-margin-top:65px;}
.pill{border:1.5px solid var(--line); background:var(--paper-high); color:var(--ink); font-weight:700; font-size:.86rem; padding:.55rem 1rem; border-radius:99px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;}
.pill:hover{border-color:var(--ember);}
.pill[aria-pressed="true"]{background:var(--ember); border-color:var(--ember); color:#fff;}

.menu-content{border-top:1px solid var(--line); padding:1.5rem .25rem 0;}
.acc-note{font-size:.88rem; color:var(--ink-soft); margin-bottom:1rem; max-width:70ch;}
.menu-item{display:flex; align-items:baseline; gap:.5rem; padding:.55rem 0; border-bottom:1px dotted var(--line);}
.menu-item:last-child{border-bottom:none;}
.menu-item .name{font-weight:700;}
.menu-item .name small{display:block; font-weight:400; color:var(--ink-soft); font-size:.82rem; margin-top:.1rem;}
.menu-item .dots{flex:1; border-bottom:1px dotted var(--line); margin:0 .3rem .3rem;}
.menu-item .price{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--ember); white-space:nowrap; font-size:.92rem;}
.subgroup{margin-top:1.6rem;}
.subgroup h4{font-family:'Unbounded',sans-serif; font-size:.86rem; letter-spacing:.03em; color:var(--saffron); text-transform:uppercase; margin-bottom:.6rem;}

/* About / owner */
.about{display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(2rem,5vw,3.5rem); align-items:center;}
@media (max-width:820px){ .about{grid-template-columns:1fr;} }
.owner-photo{aspect-ratio:4/5; border-radius:12px; border:1.5px dashed var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; color:var(--ink-soft); text-align:center; padding:1.5rem;}
.owner-photo svg{width:44px; height:44px; color:var(--ink-soft);}
.owner-photo .ph-label{font-size:.82rem; font-weight:700;}
.owner-photo .ph-sub{font-size:.74rem; max-width:20ch;}
.about p{color:var(--ink-soft); max-width:58ch;}
.about p + p{margin-top:.9rem;}
.quote-bubble{margin-top:1.6rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:1.2rem 1.4rem; display:inline-flex; flex-direction:column; gap:.3rem; max-width:34ch;}
.quote-bubble .qtext{font-family:'Unbounded',sans-serif; font-size:1.15rem; color:var(--ember);}
.quote-bubble .qsign{font-size:.85rem; font-weight:700; color:var(--ink-soft);}

/* Reviews */
.reviews-top{display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; margin-bottom:2rem;}
.rating-badge{display:flex; align-items:center; gap:1rem;}
.rating-num{font-family:'Unbounded',sans-serif; font-size:2.6rem; font-weight:800; color:var(--ember);}
.stars{display:flex; gap:2px; color:var(--saffron);}
.stars svg{width:18px; height:18px;}
.rating-meta{font-size:.85rem; color:var(--ink-soft);}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;}
@media (max-width:900px){ .review-grid{grid-template-columns:1fr;} }
.review-card{background:var(--paper-high); border:1px solid var(--line); border-radius:12px; padding:1.3rem; display:flex; flex-direction:column; gap:.6rem;}
.review-card .stars{color:var(--saffron);}
.review-card p{margin:0; font-size:.94rem; color:var(--ink-soft);}
.review-card .author{font-weight:700; font-size:.88rem; color:var(--ink); display:flex; justify-content:space-between; gap:.5rem;}
.review-card .author time{font-weight:500; color:var(--ink-soft); font-size:.78rem;}
.demo-flag{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--olive); background:color-mix(in srgb, var(--olive) 16%, transparent); padding:.3rem .6rem; border-radius:99px; margin-bottom:1.1rem;}
.google-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line);}
.powered{font-size:.78rem; color:var(--ink-soft);}

/* Contact */
.contact-band{background:var(--ink); color:var(--paper);}
.contact-band h2{color:inherit;}
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.c-card{background:color-mix(in srgb, var(--paper) 8%, transparent); border:1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:.7rem;}
.c-card svg{width:22px; height:22px; color:var(--saffron);}
.c-card h3{font-size:1.05rem; color:inherit;}
.c-card a.c-link{font-weight:700; text-decoration:none; color:var(--saffron); border-bottom:1.5px solid color-mix(in srgb, var(--saffron) 60%, transparent); align-self:flex-start; padding-bottom:1px;}
.c-card p{margin:0; font-size:.88rem; color:color-mix(in srgb, var(--paper) 72%, transparent);}
.hours-table{width:100%; border-collapse:collapse; margin-top:.2rem;}
.hours-table tr{border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent);}
.hours-table tr:last-child{border-bottom:none;}
.hours-table td{padding:.45rem 0; font-size:.9rem; color:color-mix(in srgb, var(--paper) 90%, transparent);}
.hours-table td:last-child{text-align:right; font-family:'IBM Plex Mono',monospace; color:color-mix(in srgb, var(--paper) 75%, transparent);}

footer.foot{padding:1.3rem clamp(1.25rem,4vw,3rem); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem 1.5rem; font-size:.78rem; color:color-mix(in srgb, var(--paper) 55%, transparent); border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent); background:var(--ink);}
.foot-info{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.2rem;}
.foot-info a{color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--paper) 35%, transparent);}
.foot-info a:hover{color:color-mix(in srgb, var(--paper) 90%, transparent); border-color:color-mix(in srgb, var(--paper) 60%, transparent);}