/* ============ PALETTE: 9 colours (+ plain white) ============
   Walnut browns + aged brass + cream. Old-school, heritage feel.
   1 ink  2 brown  3 brown-dark  4 brass  5 brass-soft
   6 cream  7 cream-2  8 taupe  9 brass-text   (--line = taupe at low opacity)

   Two of these are darker than the design started out. Brass at #b08538 and
   taupe at #8a7861 are lovely on a mood board and unreadable as small text:
   measured with the WCAG relative-luminance formula they came to 3.36:1 and
   4.25:1 on white, against the 4.5:1 that AA asks for under 18px. The allergy
   markings were the worst of it — the one line on the page a guest may actually
   need. Both were darkened along the same hue rather than replaced, and both
   are checked against every background they land on: white, cream and cream-2. */
:root{
  --ink:#241b14;          /* 1 darkest brown-black: text + dark sections */
  --brown:#5a3826;        /* 2 walnut, primary */
  --brown-dark:#3c2417;   /* 3 deep brown for hovers */
  --brass:#b08538;        /* 4 aged brass accent: borders, fills, text on ink */
  --brass-soft:#e3cfa6;   /* 5 light brass for dark backgrounds */
  --cream:#f8f1e5;        /* 6 page background */
  --cream-2:#eddfca;      /* 7 alt sections, menu-book backdrop */
  --taupe:#6c5e4c;        /* 8 muted text — 6.28:1 white, 5.60 cream, 4.79 cream-2 */
  /* 9 brass for small text on a light background. --brass stays as it is for
     borders, fills, and text on --ink, where it already measures 5.04:1. */
  --brass-text:#785a26;   /*   6.38:1 white, 5.69 cream, 4.87 cream-2 */
  --line:rgba(138,120,97,.3); /* derived: taupe at low opacity, borders */
  --shadow:0 18px 40px -18px rgba(40,25,15,.45);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;font-weight:300;font-size:16.5px}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Jost';font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:12px;color:var(--brass-text)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Jost';font-weight:500;letter-spacing:.04em;
  padding:13px 26px;border-radius:40px;font-size:15px;transition:.22s;cursor:pointer;border:1.5px solid transparent}
.btn-primary{background:var(--brown);color:#fff}
.btn-primary:hover{background:var(--brown-dark);transform:translateY(-2px)}
.btn-wolt{background:var(--brass);color:var(--ink)}
.btn-wolt:hover{background:var(--brown);color:#fff;transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--brown)}

/* ---------- Top bar (old-school, refined) ---------- */
.topbar{background:var(--ink);color:var(--brass-soft);border-bottom:2px solid var(--brass)}
.topbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding-top:11px;padding-bottom:11px}
.topbar .tb{font-family:'Cormorant Garamond',serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.topbar .tb.left{justify-self:start}
.topbar .tb.mid{justify-self:center;color:var(--brass-soft)}
.topbar .tb.right{justify-self:end}
.topbar a{color:var(--brass-soft)}
.topbar a:hover{color:var(--brass)}
.topbar .tb.mid b{color:var(--brass);font-weight:600;margin:0 7px}

/* ---------- Header / nav ----------
   Safari has never shipped unprefixed backdrop-filter — it is -webkit- only,
   on the iPad and the Mac alike. Without the prefixed line the sticky header
   renders as flat 92% cream on every Apple browser and the page scrolls
   legibly but unblurred behind it. The phone rule below already carried the
   prefix; the desktop one it overrides did not. */
header.nav{position:sticky;top:0;z-index:50;background:rgba(251,247,241,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:14px;line-height:1}
.brand .mark{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:52px;letter-spacing:.04em;color:var(--brown)}
.brand .btext{display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--brass);padding-left:14px}
.brand .btext .r{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--ink)}
.brand .btext .since{font-family:'Jost';font-size:11px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
nav.main{display:flex;align-items:center;gap:30px}
nav.main a{font-size:14.5px;font-weight:400;letter-spacing:.02em;position:relative}
nav.main a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--brass);transition:.25s}
nav.main a:hover::after{width:100%}
nav.main a.lang{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.25s}

/* ---------- Hero slider ----------
   On iOS Safari 1vh is a hundredth of the viewport with the address bar
   HIDDEN, so 84vh on an iPhone is 84% of a taller box than the one the guest
   is looking at when the page loads — the first thing they see is a hero that
   runs past the fold with the toolbar sitting on top of the bottom of it.
   svh is the same hundredth measured with the bar shown. Both are constants,
   so neither reflows while scrolling, and off iOS the two units are equal —
   Chromium and every desktop browser lay this out exactly as before. The vh
   line stays first as the fallback. */
.hero{position:relative;height:84vh;height:84svh;min-height:520px;overflow:hidden}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.slide.active{opacity:1}
/* The middle stop carries the headline block, so it holds a real scrim — the
   eyebrow is the first line of text on the page and sat invisible on the photo. */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,8,.50) 0%,rgba(20,12,8,.68) 45%,rgba(34,18,12,.80) 100%)}
.hero-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:0 24px}
.hero-inner .eyebrow{color:#faeed2;margin-bottom:18px;text-shadow:0 1px 10px rgba(20,12,8,.85),0 0 3px rgba(20,12,8,.6)}
.hero h1{font-size:clamp(44px,7vw,86px);font-weight:700;line-height:1.02;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.hero p.lead{max-width:600px;margin:18px auto 30px;font-size:clamp(16px,2vw,19px);font-weight:300;color:var(--cream)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:10px}
.dots button{width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;background:transparent;cursor:pointer;padding:0;transition:.2s}
.dots button.on{background:var(--brass);border-color:var(--brass)}

/* ---------- Section shells ---------- */
section{padding:54px 0}
/* The nav is sticky and 81px tall, so an anchored section must keep that much
   clearance or its gold eyebrow lands underneath the header after a nav click. */
section[id]{scroll-margin-top:100px}
.hero[id]{scroll-margin-top:0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 38px}
.sec-head h1,.sec-head h2{font-size:clamp(32px,4.5vw,50px);font-weight:600;color:var(--brown);margin:10px 0 14px}
.sec-head p{color:var(--taupe);font-size:17.5px}
.divider{width:54px;height:3px;background:var(--brass);margin:16px auto 0;border-radius:2px}

/* ---------- About ---------- */
.about{background:var(--cream-2)}
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about img{border-radius:8px;box-shadow:var(--shadow);width:100%;max-width:600px;height:auto}
.about h2{font-size:clamp(30px,4vw,46px);color:var(--brown);font-weight:600;margin:8px 0 18px;line-height:1.08}
.about p{color:var(--ink);font-size:17.5px;margin-bottom:16px}

/* ---------- Menu ---------- */
.menu-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.menu-tabs button{font-family:'Jost';font-size:14px;font-weight:500;letter-spacing:.04em;padding:9px 20px;border-radius:30px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.2s}
.menu-tabs button:hover{border-color:var(--brass)}
.menu-tabs button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.menu-panel{display:none}
.menu-panel.on{display:block;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dishes{display:grid;grid-template-columns:1fr 1fr;gap:10px 54px;max-width:980px;margin:0 auto}
.dish{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px dashed var(--line)}
.dish .d-main{flex:1}
.dish h3{font-size:22.5px;font-weight:600;letter-spacing:.01em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dish .tags{font-family:'Jost';font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--brass-text);border:1px solid var(--brass-soft);border-radius:4px;padding:1px 6px}
.dish p{font-size:15px;color:var(--taupe);margin-top:4px;line-height:1.55}
.dish .price{font-family:'Cormorant Garamond';font-size:22.5px;font-weight:700;color:var(--brown);white-space:nowrap}
.dish .price small{display:block;font-size:13.5px;color:var(--taupe);font-weight:500;font-family:'Jost'}
.legend{text-align:center;margin-top:34px;font-size:13px;color:var(--taupe);letter-spacing:.02em}

/* ---------- Set menu (meze-ateria, prix-fixe) ---------- */
.setmenu{max-width:900px;margin:0 auto}
.set-head{text-align:center;margin-bottom:34px}
.set-head .set-title{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.4vw,34px);font-weight:600;color:var(--brown);line-height:1.1}
.set-head .set-price{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:700;color:var(--brass);margin-top:4px}
.set-head .set-note{font-size:13px;color:var(--taupe);letter-spacing:.03em;margin-top:8px}
.set-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px 40px;align-items:start}
.scol ul{list-style:none;margin-top:10px}
.scol li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:15.5px;color:var(--ink)}
.scol li:last-child{border-bottom:0}

/* ---------- Menu "book" frame (food + drinks) ---------- */
.menu-sec{background:var(--cream-2)}
.menu-book{position:relative;max-width:1040px;margin:0 auto;background:#fff;
  padding:54px 48px 44px;box-shadow:var(--shadow);border:1px solid var(--brass)}
.menu-book::before{content:"";position:absolute;inset:9px;border:1px solid rgba(176,133,56,.45);pointer-events:none}
/* corner diamonds for the old-school book feel */
.menu-book .corner{position:absolute;width:9px;height:9px;background:var(--brass);transform:rotate(45deg);z-index:2}
.menu-book .corner.tl{top:4px;left:4px}.menu-book .corner.tr{top:4px;right:4px}
.menu-book .corner.bl{bottom:4px;left:4px}.menu-book .corner.br{bottom:4px;right:4px}

/* ---------- Drinks list ---------- */
.drinks-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 48px;align-items:start;max-width:940px;margin:0 auto}
.drinks-group.wide{grid-column:1 / -1}
.drinks-group.wide .rows{columns:2;column-gap:44px}
.gtitle{font-family:'Cormorant Garamond',serif;color:var(--brown);font-size:25px;font-weight:600;
  letter-spacing:.03em;border-bottom:2px solid var(--brass);padding-bottom:7px;margin-bottom:4px}
.drink-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:7px 0;border-bottom:1px dashed var(--line);break-inside:avoid}
.drink-row .dn{font-size:16.5px;color:var(--ink)}
.drink-row .dp{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:16px;color:var(--brown);text-align:right;min-width:84px}

/* ---------- Lunch (framed insert, matches the menu-book) ---------- */
/* Two tracks since Ma–To and Perjantai merged into Ma–Pe; a third would sit
   empty. The mobile block below still stacks them to one column. */
.lunch-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;max-width:880px;margin:0 auto}
.lcol{text-align:center;padding:18px 30px;border-right:1px solid var(--line)}
.lcol:last-child{border-right:0}
.lcol .lday{font-family:'Jost';letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--brass-text);margin-bottom:14px}
.lcol .lpr{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,4vw,48px);font-weight:700;color:var(--brown);line-height:1}
.lcol .ltime{font-size:14px;color:var(--taupe);margin-top:14px}
.lunch-note{text-align:center;color:var(--taupe);font-size:14px;max-width:680px;margin:32px auto 0;border-top:1px dashed var(--line);padding-top:20px}

/* ---------- Order & book (Klar API) ---------- */
/* the display rules below would otherwise beat the UA's [hidden] */
#tilaa [hidden]{display:none !important}
.kl-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.kl-tabs button{font-family:'Jost';font-size:14px;font-weight:500;letter-spacing:.04em;padding:9px 22px;border-radius:30px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.2s}
.kl-tabs button:hover{border-color:var(--brass)}
.kl-tabs button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.kl-panel{display:none}
.kl-panel.on{display:block;animation:fade .4s ease}
.kl-grid{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
/* The category pills, the dish rows and their prices below are the printed
   menu's — .menu-tabs, .dish and .dish .price, matched value for value rather
   than reused, because these carry an add button and a cart the printed list
   has no idea about. A guest who reads /ruokalista.html and then comes here to
   order should not feel they changed restaurant. */
.kl-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.kl-cats button{font-family:'Jost';font-size:14px;font-weight:500;letter-spacing:.04em;padding:9px 20px;border-radius:30px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.2s}
.kl-cats button:hover{border-color:var(--brass)}
.kl-cats button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.kl-item{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px dashed var(--line)}
.kl-item .ki-main{flex:1}
/* No line-height here: .dish h3 does not set one either, so both take the
   body's 1.65 and a dish name that wraps breaks the same way on both pages.
   The markings inherit it too, which is why .ki-tags carries none. */
.kl-item h4{font-family:'Cormorant Garamond',Georgia,serif;font-size:22.5px;font-weight:600;letter-spacing:.01em;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* The API sends each dish's markings; the printed menu further up the page
   already shows them and carries the legend. Same letters, same pill, so a
   guest who reads "G/K/L" on the menu finds the same mark where they order. */
.kl-item .ki-tags{font-family:'Jost';font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--brass-text);
  border:1px solid var(--brass-soft);border-radius:4px;padding:1px 6px;white-space:nowrap}
.kl-item p{font-size:15px;color:var(--taupe);margin-top:4px;line-height:1.55}
/* What a set menu contains. Closed by default so the row keeps the height of
   the dishes around it; the summary is the only thing on screen until asked. */
.ki-set{margin-top:6px}
.ki-set>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-family:'Jost';font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--brass-text)}
.ki-set>summary::-webkit-details-marker{display:none}
.ki-set>summary::after{content:"+";font-size:15px;line-height:1}
.ki-set[open]>summary::after{content:"–"}
.ki-set>summary:hover{text-decoration:underline}
.ki-set ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.ki-set li{font-size:14px;color:var(--taupe);line-height:1.5}
.ki-set li b{font-family:'Jost';font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brown);display:block}
.ki-set-note{font-size:13px !important;font-style:italic;margin-top:8px !important}
/* ---------- Reserving the menu's space before it arrives ----------
   #kl-items held one line of text until the API answered, and the real first
   category is 1866px tall on a phone. So the moment the menu landed, every
   section below it dropped by about that much, and the layout-shift score for
   that one frame was 0.33 on its own — three times Google's "poor" line.

   Two numbers, because one cannot do both jobs. The wrapper holds the measured
   total, which is what stops the page below it from moving. The rows inside hold
   the commonest real row height — 105.6px, which is also every row at desktop
   width — which is what stops the rows sliding under the eye of a guest already
   reading them. Rows vary from 105.6 to 172.8 on a phone depending on how a
   description wraps, so no single row height can match all fifteen; matching
   the most common one puts the error where the guest is least likely to be.
   Both figures are measured, not estimated.

   renderItems() replaces the whole subtree, which is also how the reservation
   releases itself: a one-dish category must not go on holding 1866px. */
/* The category pills are the other half of the same jump, and the bigger half:
   #kl-cats was hidden until the menu arrived and then unhid at 310px on a phone
   (ten pills over seven rows) plus its own 20px margin, which is the 330px that
   #kl-items was pushed down by. Reserved on the same self-releasing wrapper —
   catsWrap.innerHTML replaces it with the real pills. */
/* Centred and 10px apart because that is what the real pills now are, and the
   widths are the short Finnish names rather than the glossed ones — the
   stand-in is only honest while it is the shape of what replaces it. */
.kl-skel-cats{display:flex;flex-wrap:wrap;gap:10px;width:100%;justify-content:center;align-content:flex-start;min-height:140px}
.kl-skel-cats i{display:block;height:40px;border-radius:30px;background:var(--line)}
.kl-skel-cats i:nth-child(1){width:105px}.kl-skel-cats i:nth-child(2){width:95px}
.kl-skel-cats i:nth-child(3){width:120px}.kl-skel-cats i:nth-child(4){width:110px}
.kl-skel-cats i:nth-child(5){width:110px}.kl-skel-cats i:nth-child(6){width:100px}
.kl-skel-cats i:nth-child(7){width:205px}.kl-skel-cats i:nth-child(8){width:145px}
.kl-skel-cats i:nth-child(9){width:125px}.kl-skel-cats i:nth-child(10){width:110px}
.kl-skel{min-height:1669px}
.kl-skel-row{height:109.6px;padding:14px 0;border-bottom:1px dashed var(--line);display:flex;gap:14px;align-items:flex-start}
.kl-skel-row .sk-main{flex:1}
.kl-skel-row span{display:block;background:var(--line);border-radius:3px}
.kl-skel-row .sk-t{height:21px;width:58%;margin-bottom:9px}
.kl-skel-row .sk-d{height:13px;width:86%}
.kl-skel-row .sk-p{height:21px;width:62px;flex-shrink:0}
.kl-item .ki-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.kl-price{font-family:'Cormorant Garamond',serif;font-size:22.5px;font-weight:700;color:var(--brown);white-space:nowrap}
.kl-add{font-family:'Jost';font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 16px;border-radius:30px;border:1.5px solid var(--brown);background:#fff;color:var(--brown);cursor:pointer;transition:.2s}
.kl-add:hover{background:var(--brown);color:#fff}
/* The in-row stepper that replaces the add pill once the dish is in the order.
   34px is the measured height of .kl-add, so a row does not change height at the
   moment a guest taps it. The prefix is ki-, not kl-: .kl-step is already the
   order-status rail below, dots and connecting line and all. */
.ki-step{display:flex;align-items:center;gap:9px}
.ki-stepb{font-family:'Jost';font-size:15px;line-height:1;width:34px;height:34px;padding:0;border-radius:50%;
  border:1.5px solid var(--brown);background:#fff;color:var(--brown);cursor:pointer;transition:.2s;
  display:inline-flex;align-items:center;justify-content:center}
.ki-stepb:hover{background:var(--brown);color:#fff}
.ki-stepn{font-family:'Jost';font-size:14.5px;font-weight:500;color:var(--brown);min-width:16px;text-align:center}
.kl-cart{position:sticky;top:104px;background:var(--cream-2);border:1px solid var(--brass);padding:24px 22px}
.kl-cart h3{font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:600;color:var(--brown);margin-bottom:14px}
.kl-line{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.kl-line .kl-ln{flex:1;font-size:14.5px}
.kl-line .kl-lp{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:16px;color:var(--brown);min-width:66px;text-align:right}
.kl-qty{display:flex;align-items:center;gap:7px}
.kl-qty button{width:25px;height:25px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;font-size:15px;line-height:1;padding:0}
.kl-qty button:hover{border-color:var(--brass)}
.kl-qty span{min-width:16px;text-align:center;font-size:14.5px}
.kl-total{display:flex;justify-content:space-between;align-items:baseline;margin:18px 0 4px}
.kl-total .kl-tv{font-family:'Cormorant Garamond',serif;font-size:29px;font-weight:700;color:var(--brown)}
.kl-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 14px}
.kl-seg button{font-family:'Jost';font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:11px 6px;
  border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--taupe);cursor:pointer;transition:.2s}
.kl-seg button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.kl-field{margin-bottom:13px}
.kl-field label{display:block;font-family:'Jost';font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:6px}
/* 16px, not 15: iOS Safari auto-zooms into any focused field under 16px and
   never zooms back out, so a guest filling this form on an iPhone is left
   scrolled sideways through the rest of it. The threshold is Safari's, not a
   preference — 15.5px zooms too. On desktop the extra pixel is invisible. */
.kl-field input,.kl-field select,.kl-field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:6px;
  font-family:'Jost';font-size:16px;font-weight:300;background:#fff;color:var(--ink)}
.kl-field input:focus,.kl-field select:focus,.kl-field textarea:focus{outline:none;border-color:var(--brass)}
/* The Art 9 consent row under the allergy field. Deliberately unlike the
   uppercase, letter-spaced field labels above: this is wording a guest has to
   read before ticking, not a caption to skim past. The `label` selector above
   is overridden rather than avoided, because the checkbox has to live inside a
   label for the whole sentence to be clickable. Hidden until the field has
   something in it — see klar.js. */
.kl-field label.kl-consent{display:flex;align-items:flex-start;gap:9px;margin:9px 0 0;
  font-family:'Jost';font-size:12.5px;font-weight:300;letter-spacing:0;text-transform:none;
  line-height:1.5;color:var(--taupe);cursor:pointer}
.kl-field label.kl-consent[hidden]{display:none}
.kl-field label.kl-consent input[type="checkbox"]{width:auto;flex:0 0 auto;margin-top:3px;padding:0}
.kl-form{background:#fff;border:1px solid var(--brass);padding:30px 28px}
.kl-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.kl-full{grid-column:1 / -1}
/* Holds the height of the time-slot grid across every state it passes through:
   "valitse päivä", "haetaan…", and the buttons themselves. A weekday's 13 slots
   measure four rows of 40px on a phone and one row wider, and the buttons used
   to land into a box the height of a single line of text — 0.02 of layout shift
   here, and more on a busy day with 23 slots. Reserved for two rows wide so a
   full evening does not push the form down either. */
.kl-slots{display:flex;flex-wrap:wrap;gap:8px;min-height:88px;align-content:flex-start}
/* The reserve above exists so the form does not jump when times arrive. When the
   answer is a sentence rather than times — closed day, day already past, nothing
   free — there is nothing to reserve for, and at 480px the 304px reserve read as
   a page of blank cream. Two classes, so it beats the per-breakpoint overrides. */
.kl-slots.kl-slots-msg{min-height:0}
.kl-slots button{font-family:'Jost';font-size:14px;padding:9px 16px;border-radius:30px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:.2s}
.kl-slots button:hover:not([disabled]){border-color:var(--brass)}
.kl-slots button.on{background:var(--brown);border-color:var(--brown);color:#fff}
.kl-slots button[disabled]{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.kl-err{color:#9c2f1c;font-size:13.5px;margin-top:8px}
.kl-note{font-size:12.5px;color:var(--taupe);text-align:center;margin-top:12px;line-height:1.5}
/* The site strips underlines from every link, which in a muted grey note leaves
   nothing to say this one is clickable — and it is the link to the privacy
   notice, sitting beside the button that submits the guest's details. */
.kl-note a{color:var(--brass-text);border-bottom:1px solid var(--brass-soft)}
.kl-note a:hover{color:var(--brown);border-bottom-color:var(--brown)}
.kl-muted{color:var(--taupe);font-size:15px}
.kl-btn-full{width:100%;justify-content:center;margin-top:8px}
.kl-ok{max-width:560px;margin:0 auto;text-align:center;background:var(--cream-2);border:1px solid var(--brass);padding:40px 28px}
.kl-ok .kl-check{width:54px;height:54px;border-radius:50%;background:var(--brown);color:#fff;font-size:26px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.kl-ok h3{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;color:var(--brown);margin-bottom:10px}
.kl-ok .kl-big{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:700;color:var(--ink);margin:12px 0 6px}
/* live order status — the step rail, the one status line, and the clock time it changed */
.kl-track{margin:20px 0 6px;padding-top:18px;border-top:1px dashed var(--line)}
.kl-steps{display:flex;margin-bottom:14px}
.kl-step{position:relative;flex:1;padding-top:19px;font-family:'Jost';font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);opacity:.45}
.kl-step::before{content:'';position:absolute;top:2px;left:50%;margin-left:-5px;width:10px;height:10px;
  border-radius:50%;border:1.5px solid var(--taupe);background:var(--cream-2);z-index:1}
.kl-step::after{content:'';position:absolute;top:6px;left:50%;width:100%;height:1.5px;background:var(--line)}
.kl-step:last-child::after{display:none}
.kl-step.done{opacity:1}
.kl-step.done::before{background:var(--brass);border-color:var(--brass)}
.kl-step.done::after{background:var(--brass)}
.kl-step.on{opacity:1;color:var(--brown);font-weight:600}
.kl-step.on::before{background:var(--brown);border-color:var(--brown)}
.kl-track-line{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;color:var(--brown);line-height:1.35}
.kl-track-time{font-family:'Jost';font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--taupe);margin-top:6px}
/* a cancelled order was never made, so the ✓ is not a success mark.
   The fulfilment line is not hidden here: it is dropped in JS for both terminal
   statuses, because a delivered order must not promise a delivery either. */
.kl-ok.kl-cancelled .kl-check{background:var(--taupe)}

/* ---------- Gallery ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-grid a{display:block;overflow:hidden;border-radius:6px}
.gal-grid img{width:100%;height:auto;display:block}

/* ---------- Visit / contact + map + oiva ---------- */
/* The brass rule at the bottom is the same one .topbar draws, doing the same
   job: this is the only page whose last section is --ink, so without it the
   contact block and the footer are one undifferentiated dark slab. Scoped to
   .visit, which exists on yhteystiedot.html alone — a border on footer.f would
   draw a line under cream on the other six pages, where there is nothing to
   separate. */
.visit{background:var(--ink);color:var(--cream);border-bottom:2px solid var(--brass)}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.visit h1,.visit h2{color:#fff;font-size:clamp(30px,4vw,46px);font-weight:600;margin-bottom:8px}
.visit .eyebrow{color:var(--brass)}
.info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.info-row .k{font-family:'Jost';letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--brass);min-width:120px;padding-top:3px}
.info-row .v{font-size:17px}
.info-row .v a:hover{color:var(--brass)}
.map-card{background:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.map-frame{width:100%;flex:1;min-height:320px;border:0;display:block;filter:saturate(.9)}
.oiva-card{display:flex;align-items:center;gap:18px;padding:18px 22px;background:#fff;color:var(--ink)}
.oiva-card img{height:60px;width:auto}
.oiva-card .t{font-size:13.5px;color:var(--taupe)}
.oiva-card .t b{color:var(--ink);font-family:'Cormorant Garamond';font-size:18px}

/* ---------- Footer ---------- */
footer.f{background:var(--ink);color:var(--brass-soft);text-align:center;padding:46px 24px}
footer.f .brand-f{font-family:'Cormorant Garamond';font-size:30px;font-weight:700;color:#fff;letter-spacing:.06em}
footer.f .sub{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin:6px 0 18px}
footer.f .fl{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;font-size:14px;margin-bottom:18px}
footer.f .fl a:hover{color:var(--brass)}
footer.f .cc{font-size:12px;opacity:.5;margin-top:14px}

/* ---------- Mobile ---------- */
/* The top bar's three columns stop fitting well before the mobile breakpoint.
   Measured on /, /tilaa.html and /yhteystiedot.html, the page scrolled sideways
   from 861px to 957px inclusive, peaking at +97px at 861px: .tb.right's right
   edge is pinned at 958.41px (24 padding + 285.05 left + 18 gap + 477.08 mid +
   18 gap + 136.28 right) whatever the viewport, and .tb is white-space:nowrap,
   so nothing can give. Dropping the opening hours below 980px clears it with
   margin over the measured 957. The two-column template comes with it: with
   the middle column merely display:none the 1fr auto 1fr below would leave an
   empty third column and strand the phone number ~360px short of the right
   edge instead of at it. */
@media(max-width:980px){
  .topbar .wrap{grid-template-columns:1fr auto}
  .topbar .hide-m{display:none}
}
/* 1000, raised from 900. nav.main in here carries transition:.3s, so for ~300ms
   after the breakpoint is crossed the drawer is still wider than its settled size
   and the page really does scroll. With the breakpoint at 885, stepping up to
   886px measured +7px immediately and +3px 60ms later, settling to 0; at 900
   there was no transient at any width, and there is none at 1000 either.
   Do not tighten it back down: above the breakpoint the desktop nav has to fit
   on one line, and it stops fitting below ~1000px — measured on the live site,
   the "Tilaa tai varaa" button wrapped to two lines at 950px (52px -> 76px) and
   to three at 901px (100px), because the burger had not taken over yet.
   1010 and not 1000 for the same transient reason as above: with the breakpoint
   at 1000, resizing 900 -> 1001 measured 40px of overflow that cleared by 300ms,
   because the row interpolating out of the drawer is briefly wider than it
   settles. One pixel of headroom is not enough; at 1010 no crossing overflows. */
/* The hours line grew a fourth column when Friday split off Saturday (Pe opens
   10:30, La 11:00), taking .tb.mid from 449px to 591px. Same nowrap arithmetic
   as the 980 block above: measured on / in a 1011..1120 sweep, the page scrolled
   sideways from 1011px to 1072px inclusive, peaking at +62px at 1011. Dropping
   the hours through 1080 clears it with margin over the measured 1072. The
   two-column template comes with it for the reason given at 980 — otherwise the
   empty third column strands the phone number short of the right edge. Kept
   separate from the 1010 block because that one also resizes the brand and the
   nav, and those must not move up into 1011..1080. */
@media(max-width:1080px){
  .topbar .wrap{grid-template-columns:1fr auto}
  .topbar .hide-m{display:none}
}
@media(max-width:1010px){
  .topbar .wrap{grid-template-columns:1fr auto;gap:10px}
  .topbar .tb{font-size:12.5px;letter-spacing:.08em}
  .topbar .hide-m{display:none}
  .brand .mark{font-size:40px}
  .brand .btext .r{font-size:15px;letter-spacing:.2em}
  .brand .btext .since{font-size:9.5px}
  /* Opaque, not merely un-blurred. Dropping backdrop-filter on a phone left the
     .92 alpha from the base rule with nothing behind it, so body text and the
     menu's "+ Lisää" buttons scrolled visibly through the header. */
  header.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--cream)}
  /* Top padding clears the sticky header row and nothing more. The header is
     14 + 44 + 14 = 72px tall and the burger inside it ends at 58px from the top
     of the drawer, so 66 leaves 8px under the burger — the old 90 left 32 and
     read as a band of empty cream above "Tietoa". */
  nav.main{position:fixed;inset:0 0 0 auto;width:78%;max-width:330px;background:var(--cream);flex-direction:column;
    align-items:flex-start;padding:66px 30px 90px;gap:22px;transform:translateX(100%);transition:.3s;box-shadow:var(--shadow)}
  nav.main.open{transform:none}
  nav.main a{font-size:18px}
  .burger{display:flex;z-index:60}
  /* Tap targets, measured in a 390x844 Chromium with touch on. Everything a
     finger can hit below 900px has to come to 44x44; these were 16 to 42px
     high. Where a bigger box would move the design, the growth is padding
     cancelled by a matching negative margin, so the hit area grows and the
     ink stays exactly where it was.
       topbar phone link 101.6 x 16   ->  x 44
       .brand            207.4 x 40   ->  x 44
       .burger            42   x 32   ->  44 x 44
       drawer links       47.3+ x 29.7 -> x 45.7
     The drawer's Wolt button is also a `nav.main a`, so the drawer padding is
     scoped :not(.btn) — .btn already carries 13px/26px and measures 47 high.
     The brass underline sits 6px under the text, so inside the padded drawer
     link it moves from bottom:-6px to bottom:2px to stay there. */
  .topbar a{display:inline-block;padding:14px 0;margin:-14px 0}
  .brand{min-height:44px}
  .burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center}
  nav.main a:not(.btn){padding:8px 0}
  nav.main a:not(.btn)::after{bottom:2px}
  .menu-tabs button{padding:11px 20px}
  /* The footer link row wraps into three rows on a phone, so the padded boxes
     cannot be pulled back with a negative margin — the rows would overlap and
     a tap near a row edge would land on the wrong link. The gap absorbs the
     padding instead: 24px between text becomes 10px between boxes that are
     now 9px wider on each side, which leaves the spacing as it looked. */
  footer.f .fl{gap:4px 10px}
  footer.f .fl a{display:inline-block;padding:11px 9px}
  .info-row .v a{display:inline-block;padding:10px 0;margin:-10px 0}
  .oiva-card .t a{display:inline-block;padding:13px 0;margin:-13px 0}
  .about .grid,.visit .grid{grid-template-columns:1fr;gap:30px}
  .dishes{grid-template-columns:1fr;gap:0}
  .menu-book{padding:30px 18px}
  .drinks-grid{grid-template-columns:1fr;gap:18px}
  .drinks-group.wide .rows{columns:1}
  .set-cols{grid-template-columns:1fr;gap:2px}
  .lunch-cols{grid-template-columns:1fr}
  .lcol{border-right:0;border-bottom:1px solid var(--line);padding:18px 10px}
  .lcol:last-child{border-bottom:0}
  .gal-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kl-grid{grid-template-columns:1fr;gap:26px}
  .kl-cart{position:static}
  .kl-form{padding:22px 18px}
  .kl-form-grid{grid-template-columns:1fr}
  .kl-ok{padding:32px 16px}
  /* The phone and tablet numbers. Note the block above opens at 1010px, not
     900 — 900 is styles.tilaa.css's breakpoint, and the two are not the same
     one. 480 and below has its own reservations there too, so these govern
     481-1010, and that band is not one shape. Measured against the production
     menu: the first category comes to 1902px at 500, 1802 at 700 and 820, and
     1652 at 901 and 1000; the pills to 206 at 500, 152 at 700, 98 at 820 and 90
     at 901 and 1000. No single reservation is right for a 250px spread, so each
     is set at the middle of its range, where the worst error in the band is
     smallest, rather than exact at one end and worst at the other. 13 slots
     still take four rows of 40px with three 8px gaps between them. */
  .kl-skel{min-height:1777px}
  .kl-skel-cats{min-height:148px}
  .kl-slots{min-height:184px}
  .kl-step{font-size:9px;letter-spacing:.04em}
  section{padding:42px 0}
  .hero{height:74vh;height:74svh} /* the iOS address bar again — see the base rule */
}
@media(max-width:480px){
  .gal-grid{grid-template-columns:1fr}
  .info-row{flex-direction:column;gap:2px}
}

/* ---------- Current page ---------- */
/* The brass underline the link already draws under the cursor, left standing on
   the page you are on. The site has no second way of saying "you are here", and
   inventing one would put a badge in a header built to be quiet. */
nav.main a[data-active="true"]::after{width:100%}

/* ---------- Bottom bars — phone and tablet only ----------
   Below 1010px nav.main folds into the burger, and with it the header's "Tilaa
   tai varaa" button: a guest reading the menu on a phone has no visible way to
   reach the order page without first opening a menu they have no reason to
   think holds one. These two bars are that way. Above 1010 the header button is
   on screen, so neither bar exists — the desktop page is byte-for-byte what it
   was.

   Both are drawn here, in the one stylesheet /en/ also loads, and neither
   carries a word of copy: the Finnish page's text comes from klar.js and the
   English page's from en/klar.js, so no page can render the other's language.

   z-index 40, under the header's 50, so the open burger drawer covers the bar
   rather than the bar punching through it.

   env(safe-area-inset-bottom) is 0 everywhere except an iPhone with a home
   indicator, where it is that indicator's height. The bar sits above it instead
   of half under it. */
.kl-bottom-bar{display:none}
@media(max-width:1010px){
  .kl-bottom-bar{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    width:100%;border:0;border-top:1px solid rgba(255,255,255,.14);
    padding:15px 22px;padding-bottom:calc(15px + env(safe-area-inset-bottom));
    background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;
    font-family:'Jost',system-ui,sans-serif;font-weight:500;font-size:15px;
    letter-spacing:.06em;text-transform:uppercase;text-align:left;
    box-shadow:0 -6px 24px rgba(20,12,8,.20)
  }
  /* The attribute has to beat the display:flex above it — the UA sheet's rule
     for [hidden] does not. Without this the empty basket bar shows anyway. */
  .kl-bottom-bar[hidden]{display:none}
  .kl-bottom-bar .kl-bb-arrow{margin-left:auto;color:var(--brass-soft)}
  .kl-bottom-bar .kl-bb-sum{margin-left:auto;color:var(--brass-soft);font-weight:600}
  .kl-bottom-bar .kl-bb-sum span{margin-left:10px}

  /* Nothing may end underneath the bar. The last dish on the menu and the
     footer links both have to stay reachable, so the page keeps the bar's own
     height clear at the bottom. */
  body.kl-bar-space{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* ---- Ordering switched off: the CTAs start off the page ----
   Every element marked data-klar-order used to be painted by the HTML and
   removed once the API answered — which on a restaurant that is not taking
   orders is a "Tilaa ruokaa" button that visibly flashes on screen and then
   disappears, roughly a menu fetch long. So it was turned around: the markup
   ships hidden and site.js/klar.js put it back once the switch reads as on.
   That moved the flash rather than ending it — with ordering ON the buttons
   popped in a fetch late instead. The inline <head> script now decides from
   the last remembered answer, so the class is present on the first load in a
   browser and on any load where ordering was last seen off. Either way it is
   set before the first paint, which is what this rule needs.

   Set by script and never by the markup, on purpose: a visitor with no
   JavaScript, or one whose site.js is blocked, keeps the links. The switch
   being off costs them a link to a menu they can still read; hiding it on
   every failure would cost the restaurant its orders on the days ordering
   is on, and that is the worse of the two. */
html.klar-order-pending [data-klar-order]{display:none}