/* Restaurang Kneget — "Tallriken" (Shyar valde den 22 okt). Mobil först (390 → 761 → 1000 → 1440).
 * Toppen och menyn har färgen från rätten (dagens.js sätter --f-*), tallrikarna syns rakt uppifrån och allt runt är runt:
 * tallrikar, prisdekalen, matsalen, Reserverat och skylten. Resten av sidan är fasta färgfält: kräm, rost, neonguld, kvällsblå
 * och mörk sidfot. Varje del sätter --yta (botten) och --skrift (text), så att knapparna får rätt färg överallt.
 * Rubriker i Bespoke Slab (som K:et i loggan), brödtext och etiketter i League Spartan.
 */

@font-face {
  font-family: "Bespoke Slab"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/bespoke-slab-700.woff2") format("woff2");
}
@font-face {
  font-family: "Bespoke Slab"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/bespoke-slab-800.woff2") format("woff2");
}
/* League Spartan är ett variabelt typsnitt: samma fil ger 400, 600 och 700. */
@font-face {
  font-family: "League Spartan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/league-spartan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "League Spartan"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/league-spartan-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Dagens rätt (dagens.js skriver över dem direkt när sidan öppnas) */
  --f-bg: #f0a92e; --f-ink: #2b1505; --f-ord: #e39a1c; --f-dekal: #f6c04f;

  --kn-kram: #f3e8d2;       /* Hela lunchen */
  --kn-papper: #fbf4e6;     /* kvittot */
  --kn-brun: #2b1505;       /* text på ljust */
  --kn-dov: #6b5640;        /* dämpad text på kräm */
  --kn-guld: #87550c;       /* guld som text på ljust, klarar kontrasten */
  --kn-neon: #f4b24c;       /* neonet i loggan: Boka och knappen Ring */
  --kn-rost: #a8432b;       /* Lokalen, som sitsarna i matsalen */
  --kn-ljus: #fbefdc;       /* text på rost och mörkt */
  --kn-kvall: #22445c;      /* Hitta hit */
  --kn-natt: #1c120a;       /* sidfoten och skylten */

  --kn-rubrik: "Bespoke Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --kn-text: "League Spartan", "Segoe UI", system-ui, sans-serif;
  --kn-kant: clamp(16px, 3.9vw, 56px);
  --kn-mjuk: cubic-bezier(.6, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--kn-natt); }
@media (prefers-reduced-motion: no-preference) { html:not(.kn-rorelse) { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip;
  background: var(--kn-kram); color: var(--kn-brun);
  font: 400 1.0625rem/1.55 var(--kn-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
.kn-gomd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }

.kn-sida { width: min(1320px, 100% - 2 * var(--kn-kant)); margin-inline: auto; }

.kn-hoppa {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--kn-natt); color: var(--kn-ljus); padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none;
}
.kn-hoppa:focus { top: 12px; }

/* ---------- Gemensamt: etiketter, rubriker, knappar ---------- */
.kn-etikett { font: 700 .8125rem/1.2 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; }
h2 { font: 800 clamp(2.75rem, 1.6rem + 5.4vw, 7rem)/.9 var(--kn-rubrik); letter-spacing: -.01em; }

.kn-knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 2px 26px 0; border-radius: 999px; border: 2px solid var(--skrift, currentColor);
  font: 700 1rem/1 var(--kn-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s, background-color .9s, color .9s, border-color .9s;
  -webkit-tap-highlight-color: transparent;
}
.kn-knapp:active { transform: scale(.97); }
.kn-knapp--fylld { background: var(--skrift); color: var(--yta); }
.kn-knapp--kontur { background: transparent; color: inherit; }
.kn-knapp--guld { background: var(--kn-neon); color: var(--kn-brun); border-color: var(--kn-neon); }
@media (hover: hover) {
  .kn-knapp--kontur:hover { background: color-mix(in srgb, var(--skrift, currentColor) 10%, transparent); }
  .kn-knapp--fylld:hover { background: color-mix(in srgb, var(--skrift) 86%, var(--yta)); }
}
.kn-knappar { display: flex; flex-wrap: wrap; gap: 12px; }

/* Rättknapparna: en liten tallrik och namnet. Samma knappar i toppen och vid lunchbrickan. */
.kn-val {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 16px 4px 4px;
  border-radius: 999px; border: 2px solid color-mix(in srgb, var(--skrift) 30%, transparent);
  background: color-mix(in srgb, var(--skrift) 9%, var(--yta)); color: var(--skrift);
  font-weight: 600; font-size: .9375rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, background-color .9s, color .9s;
}
.kn-val img { width: 40px; height: 40px; border-radius: 50%; }
.kn-val img.ar-foto { object-fit: cover; }
.kn-val[aria-pressed="true"] { border-color: var(--skrift); background: var(--skrift); color: var(--yta); }
@media (hover: hover) { .kn-val:not([aria-pressed="true"]):hover { border-color: var(--skrift); } }
.kn-pil {
  flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--skrift); background: none; color: var(--skrift);
  display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--kn-mjuk), border-color .9s, color .9s;
}
@media (hover: hover) { .kn-pil:hover { transform: translateX(3px); } }

/* Ringtexten runt dekaler och skyltar. tallriken.js sprider bokstäverna så att texten går precis ett varv. */
.kn-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kn-ring text { font: 700 11px var(--kn-text); letter-spacing: .26em; text-transform: uppercase; fill: currentColor; }

/* Dekalen: en rund klisterlapp (priset i toppen, Reserverat i Boka) */
.kn-dekal { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; }

/* ---------- Överst: bandet och menyraden ---------- */
.kn-ovan { position: relative; z-index: 10; background: var(--f-bg); color: var(--f-ink); --yta: var(--f-bg); --skrift: var(--f-ink); transition: background-color .9s var(--kn-mjuk), color .9s; }
.kn-band { background: var(--f-ink); color: var(--f-bg); text-align: center; font: 700 .75rem/1.2 var(--kn-text); letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px 7px; transition: background-color .9s, color .9s; }
.kn-topp { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--kn-kant); }
.kn-logga { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.kn-logga img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; }
.kn-logga strong { display: block; font: 800 1.125rem/1 var(--kn-rubrik); letter-spacing: .14em; text-transform: uppercase; }
.kn-logga small { display: block; margin-top: 5px; font: 700 .6875rem/1 var(--kn-text); letter-spacing: .22em; text-transform: uppercase; }
.kn-nav { display: none; }
.kn-topp__hoger { display: flex; align-items: center; gap: 18px; }
.kn-status { display: none; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; }
.kn-status::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.kn-status[data-oppet="nej"]::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.kn-topp .kn-knapp { display: none; }                               /* mobilen: Ring står i bottenknapparna */
.kn-topp .kn-status { display: inline-flex; font-size: .8125rem; }

/* ---------- Toppen: dagens rätt ---------- */
.kn-hero {
  --yta: var(--f-bg); --skrift: var(--f-ink);
  position: relative; overflow: hidden; padding-bottom: 32px;
  background: var(--f-bg); color: var(--f-ink); transition: background-color .9s var(--kn-mjuk), color .9s;
}
/* Det stora ordet: rättens korta namn, fyller bredden (tallriken.js räknar fram exakt storlek när typsnittet laddats) */
.kn-hero__ord {
  position: relative; z-index: 1; margin-top: 4px; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font: 800 var(--ord-fs, min(120px, calc((100vw - 24px) / (var(--n, 10) * .74))))/.8 var(--kn-rubrik);
  letter-spacing: -.01em; color: var(--f-ord); transition: color .9s;
}
.kn-hero__ord span { display: inline-block; }
.kn-hero__tallrik { position: relative; z-index: 2; width: 84vw; margin: -12vw auto 0; aspect-ratio: 1; }
.kn-hero__tallrik::after {                                           /* skuggan under tallriken */
  content: ""; position: absolute; inset: 9% 4% -3% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 8, 0, .42), transparent); filter: blur(18px); transform: translateY(5%);
}
.kn-hero__tallrik img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kn-hero__tallrik img.ar-foto, .kn-platt__bild img.ar-foto, .kn-sak img.ar-foto { border-radius: 50%; object-fit: cover; }

.kn-hero__dekal {
  position: absolute; z-index: 4; right: 12px; top: 40px; width: 112px;
  background: var(--f-ink); color: var(--f-dekal); box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  transition: background-color .9s, color .9s;
}
.kn-hero__dekal .kn-ring { inset: 5%; width: 90%; height: 90%; }
.kn-hero__dekal .kn-ring text { font-size: 12px; }
.kn-dekal__pris { display: grid; justify-items: center; line-height: 1; }
.kn-dekal__ord s { font: 600 .6875rem/1 var(--kn-text); opacity: .75; }
.kn-dekal__belopp { font: 800 2.5rem/.85 var(--kn-rubrik); margin-top: 3px; }
.kn-dekal__kr { font: 700 .75rem/1 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; margin-top: 4px; }

.kn-hero__info { position: relative; z-index: 4; padding: 18px var(--kn-kant) 0; }
.kn-hero__rattbox { display: flex; flex-direction: column; justify-content: flex-end; }   /* lika hög för alla rätter i mobilen (tallriken.js) */
.kn-hero__namn { margin-top: 12px; font: 800 2.375rem/.98 var(--kn-rubrik); letter-spacing: -.01em; }
.kn-hero__till { margin-top: 12px; font-size: 1.0625rem; max-width: 34ch; }
.kn-hero__val { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.kn-hero__sma { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 18px; font-weight: 600; font-size: .9375rem; }
.kn-hero__sma > span + span::before { content: "·"; margin-inline: 8px; }
.kn-hero__sma > [hidden] + span::before { content: none; }
.kn-hero__ner { display: none; }

/* ---------- Veckans meny: buffélinjen ----------
 * Utan rörelse (eller utan JS) är menyn en rad man bläddrar i sidled. tallriken.js sätter .kn-meny--linje:
 * då står menyn still på skärmen och tallrikarna åker förbi när man scrollar, och färgen följer rätten i mitten. */
.kn-meny {
  --yta: var(--m-bg, var(--f-bg)); --skrift: var(--m-ink, var(--f-ink));
  position: relative; overflow: hidden; background: var(--yta); color: var(--skrift);
}
.kn-meny__spar {
  display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-block: 56px 64px; scrollbar-width: thin;
}
.kn-meny__spar > *, .kn-dag__rubrik, .kn-platt { scroll-snap-align: start; }
.kn-meny__skylt { flex: 0 0 auto; width: 86vw; padding-inline: var(--kn-kant); align-self: center; }
.kn-meny__skylt h2 { margin-top: 14px; }
.kn-meny__ingress { margin-top: 18px; font-size: 1.125rem; max-width: 30ch; }
.kn-meny__pris { margin-top: 10px; font-weight: 600; max-width: 32ch; }
.kn-meny__tips { margin-top: 24px; font: 700 .8125rem/1 var(--kn-text); letter-spacing: .16em; text-transform: uppercase; }
.kn-meny__tips span { display: inline-block; }
.kn-meny__dagar { display: flex; flex: 0 0 auto; }
.kn-dag { display: flex; flex: 0 0 auto; }
/* Dagen står på högkant mellan tallrikarna, som en skylt på buffén */
.kn-dag__rubrik {
  flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
  width: 22vw; border-inline-start: 2px solid color-mix(in srgb, var(--skrift) 22%, transparent);
}
.kn-dag__rubrik > span:first-child { writing-mode: vertical-rl; rotate: 180deg; font: 800 clamp(2.5rem, 1.6rem + 3vw, 5.5rem)/1.08 var(--kn-rubrik); text-transform: uppercase; white-space: nowrap; } /* 1.08: ringen på Å i MÅNDAG får plats */
.kn-dag__datum { writing-mode: vertical-rl; rotate: 180deg; font: 700 .75rem/1 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.kn-dag__ratter { display: flex; }
.kn-platt {
  flex: 0 0 auto; width: 84vw; display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center;
  gap: 22px; padding: 0 4vw; text-align: center;
}
.kn-platt__bild { position: relative; width: min(70vw, 52svh); aspect-ratio: 1; }
.kn-platt__bild::after {
  content: ""; position: absolute; inset: 10% 6% -2% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 8, 0, .38), transparent); filter: blur(16px); transform: translateY(5%);
}
.kn-platt__bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kn-platt__text { max-width: 30ch; }
.kn-platt__dag, .kn-platt__tagg .meny__tagg {
  display: inline-block; margin-bottom: 12px; padding: 8px 12px 6px; border-radius: 999px; border: 1.5px solid currentColor;
  font: 700 .75rem/1 var(--kn-text); letter-spacing: .2em; text-transform: uppercase;
}
.kn-platt__dag.ar-idag { background: var(--skrift); color: var(--yta); border-color: transparent; }
.kn-platt__namn { font: 800 clamp(1.625rem, 1.2rem + 1.2vw, 2.375rem)/1.02 var(--kn-rubrik); }
.kn-platt__till { margin-top: 8px; font-size: 1rem; }
.kn-platt__till::first-letter { text-transform: uppercase; }
.kn-meny__slut { flex: 0 0 auto; width: 80vw; padding-inline: var(--kn-kant); align-self: center; display: grid; gap: 16px; }
.kn-meny__nasta { font: 800 1.75rem/1.05 var(--kn-rubrik); }
.kn-meny__allergi { max-width: 34ch; }

.kn-meny--linje .kn-meny__spar { overflow: visible; height: 100svh; padding-block: 0; align-items: center; scroll-snap-type: none; will-change: transform; }
.kn-meny--linje .kn-meny__dagar, .kn-meny--linje .kn-dag, .kn-meny--linje .kn-dag__ratter { height: 100%; }
.kn-meny--linje .kn-platt__bild img { will-change: transform; }

/* ---------- Hela lunchen: brickan ---------- */
.kn-lunch { --yta: var(--kn-kram); --skrift: var(--kn-brun); background: var(--yta); color: var(--skrift); padding: 80px 0 88px; }
.kn-lunch__inner { display: grid; }
.kn-lunch__text { display: contents; }
.kn-lunch .kn-etikett { color: var(--kn-guld); }
.kn-lunch h2 { margin-top: 14px; }
.kn-lunch__ingress { margin-top: 18px; font-size: 1.125rem; color: var(--kn-dov); max-width: 36ch; }
.kn-lunch__bild { order: 1; margin-top: 30px; }
.kn-kvitto, .kn-tipsa { order: 2; }
/* Brickan ligger på en rund matta i dagens färg */
.kn-duk { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .9; }
.kn-duk::before {
  content: ""; position: absolute; inset: 2% 8%; border-radius: 50%; background: var(--f-bg);
  transition: background-color .9s var(--kn-mjuk);
}
.kn-bricka { position: relative; width: 94%; aspect-ratio: 1120 / 764; container-type: inline-size; rotate: -4deg; }
.kn-bricka__bricka { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(1.2cqi 2.2cqi 2.4cqi rgba(30, 12, 0, .45)); }
.kn-sak { position: absolute; aspect-ratio: 1; transition: scale .4s cubic-bezier(.2, .8, .2, 1), translate .4s cubic-bezier(.2, .8, .2, 1); }
.kn-sak img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(.7cqi 1.1cqi 1cqi rgba(0, 0, 0, .45)); }
.kn-sak--tallrik { left: 4.5%; top: 16%; width: 48%; }
.kn-sak--sallad { left: 48%; top: 4.4%; width: 25%; rotate: 14deg; }
.kn-sak--dryck { left: 55.5%; top: 44.5%; width: 15%; }
.kn-sak--kaffe { left: 51%; top: 69%; width: 20%; aspect-ratio: 440 / 351; rotate: -10deg; }
.kn-sak.ar-lyft { scale: 1.035; translate: -.4% -.8%; }
/* Byte av rätt: förra tallriken lyfts bort, nästa ställs ner */
.kn-sak__ut { opacity: 0; scale: 1.06; translate: -7% -5%; transition: opacity .35s ease, scale .45s ease, translate .45s ease; }
.kn-sak__ny { opacity: 0; scale: 1.1; translate: 5% -6%; }
.kn-sak__ny.ar-inne { opacity: 1; scale: 1; translate: 0 0; transition: opacity .3s ease, scale .65s cubic-bezier(.2, .8, .2, 1), translate .65s cubic-bezier(.2, .8, .2, 1); }
.kn-lunch__val { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* Kvittot: lunchkupongen med en rad per sak och priset längst ner */
.kn-kvitto {
  position: relative; margin-top: 30px; max-width: 460px; padding: 26px 34px 24px; border-radius: 10px;
  background: var(--kn-papper); box-shadow: 0 24px 50px -30px rgba(43, 21, 5, .45);
  -webkit-mask: radial-gradient(circle 12px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle 12px at 0 50%, #0000 97%, #000) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle 12px at 100% 50%, #0000 97%, #000) 100% 0 / 51% 100% no-repeat;
}
.kn-kvitto::before { content: ""; position: absolute; inset: 8px 20px; border: 1.5px dashed rgba(138, 87, 16, .35); border-radius: 6px; pointer-events: none; }
.kn-kvitto h3 { position: relative; font: 700 .8125rem/1.2 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; color: var(--kn-guld); }
.kn-kvitto__rader { position: relative; display: grid; gap: 2px; margin-top: 12px; }
.kn-kvitto li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-inline: -8px; padding: 7px 8px 5px; border-radius: 8px; transition: background-color .25s; }
.kn-kvitto li::before {                                             /* bocken: ingår */
  content: ""; flex: none; align-self: flex-start; width: 18px; height: 18px; margin-top: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.6 10.8c1.7 1 3.1 2.6 4.3 4.6 2.2-5.1 5.4-9.4 10.3-12.6' fill='none' stroke='%2387550c' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 18px no-repeat;
}
.kn-kvitto li.ar-lyft { background: rgba(244, 178, 76, .25); }
.kn-kvitto__sak { flex: 1 0 auto; display: flex; align-items: baseline; gap: 8px; font-weight: 600; white-space: nowrap; }
.kn-kvitto__sak::after { content: ""; flex: 1; min-width: 14px; border-bottom: 1.5px dotted rgba(138, 87, 16, .45); translate: 0 -4px; }
.kn-kvitto__vad { flex: 0 1 auto; max-width: 100%; margin-left: auto; text-align: right; color: var(--kn-dov); line-height: 1.3; }
.kn-kvitto__vad::first-letter { text-transform: uppercase; }
.kn-kvitto .kn-kvitto__summa {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed rgba(138, 87, 16, .35); font-weight: 600;
}
.kn-kvitto__summa strong { display: inline-block; font: 800 2.25rem/1 var(--kn-rubrik); color: var(--kn-guld); }
.kn-kvitto .kn-kvitto__pens { position: relative; margin-top: 4px; text-align: right; font-size: .9375rem; }
.kn-tipsa { display: grid; justify-items: start; gap: 10px; margin-top: 22px; }
.kn-tipsa .kn-knapp svg { flex: none; translate: 0 -1px; }
.kn-tipsa__klart { max-width: 46ch; font-size: .9375rem; font-weight: 600; color: var(--kn-guld); }

/* ---------- Lokalen ---------- */
.kn-lokal { --yta: var(--kn-rost); --skrift: var(--kn-ljus); background: var(--yta); color: var(--skrift); padding: 88px 0 96px; overflow: hidden; }
.kn-lokal__inner { display: grid; gap: 56px; align-items: center; }
.kn-lokal h2 { margin-top: 14px; }
.kn-lokal__text > p:not(.kn-etikett) { margin-top: 20px; font-size: 1.125rem; max-width: 40ch; }
.kn-lokal .kn-lokal__agare { font-weight: 600; }
.kn-lokal__bild { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.kn-rund { width: 80%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(30, 8, 0, .7); }
.kn-rund img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.kn-lokal__ring text { font-size: 9.5px; }

/* ---------- Boka ---------- */
.kn-boka { --yta: var(--kn-neon); --skrift: var(--kn-brun); background: var(--yta); color: var(--skrift); padding: 88px 0 96px; overflow: hidden; }
.kn-boka__inner { display: grid; gap: 48px; align-items: center; }
.kn-boka h2 { margin-top: 14px; max-width: 11ch; }
.kn-boka__lista { margin-top: 32px; display: grid; gap: 0; counter-reset: rad; max-width: 560px; }
.kn-boka__lista li { counter-increment: rad; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; padding: 18px 0; border-top: 2px solid color-mix(in srgb, var(--skrift) 22%, transparent); }
.kn-boka__lista li::before { content: counter(rad, decimal-leading-zero); grid-row: span 2; font: 800 2rem/1 var(--kn-rubrik); }
.kn-boka__lista h3 { font: 800 1.375rem/1.1 var(--kn-rubrik); }
.kn-boka__hur { margin-top: 18px; font-weight: 600; max-width: 44ch; }
.kn-boka .kn-knappar { margin-top: 26px; }
.kn-boka__epost { margin-top: 16px; font-size: .9375rem; }
.kn-boka__dekal { width: min(76vw, 340px); margin-inline: auto; background: var(--kn-natt); color: var(--kn-neon); box-shadow: 0 30px 60px -24px rgba(43, 21, 5, .55); }
.kn-boka__dekal .kn-ring { inset: 6%; width: 88%; height: 88%; }
.kn-boka__kort { display: grid; justify-items: center; gap: 6px; }
.kn-boka__kort img { width: 56px; height: 56px; border-radius: 50%; }
.kn-boka__ord { font: 800 clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem)/1 var(--kn-rubrik); text-transform: uppercase; letter-spacing: .04em; }
.kn-boka__for { font: 700 .75rem/1 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; color: var(--kn-ljus); }

/* ---------- Hitta hit ---------- */
.kn-hitta { --yta: var(--kn-kvall); --skrift: var(--kn-ljus); background: var(--yta); color: var(--skrift); padding: 88px 0 96px; overflow: hidden; }
.kn-hitta__inner { display: grid; gap: 56px; align-items: center; }
.kn-hitta h2 { margin-top: 14px; }
.kn-hitta__adress { margin-top: 22px; font: 800 clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem)/1.1 var(--kn-rubrik); }
.kn-hitta__parkering { margin-top: 12px; max-width: 40ch; }
.kn-hitta h3 { margin-top: 30px; font: 700 .8125rem/1.2 var(--kn-text); letter-spacing: .2em; text-transform: uppercase; }
.kn-tider { margin-top: 10px; display: grid; gap: 2px; max-width: 380px; }
.oppettider__rad { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0 7px; border-bottom: 1px dashed color-mix(in srgb, currentColor 30%, transparent); }
.oppettider__tider { font-weight: 600; font-variant-numeric: tabular-nums; }
.oppettider__rad--avvikande { font-size: .9375rem; opacity: .85; }
.kn-hitta .kn-knappar { margin-top: 28px; }
/* Skylten: loggan lyser i en mörk rund skylt med adressen runt */
.kn-skylt {
  position: relative; width: min(80vw, 380px); aspect-ratio: 1; margin-inline: auto; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 42%, #2a1c10, var(--kn-natt) 70%); color: var(--kn-neon);
  box-shadow: 0 0 0 2px rgba(244, 178, 76, .35), 0 40px 70px -30px rgba(0, 0, 0, .7);
}
.kn-skylt .kn-ring { inset: 5%; width: 90%; height: 90%; }
.kn-skylt img { width: 46%; border-radius: 50%; transition: filter 1.4s ease, opacity 1.4s ease; filter: drop-shadow(0 0 6px rgba(244, 178, 76, .2)); opacity: .82; }
.kn-skylt.ar-tand img { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 190, 90, .7)) drop-shadow(0 0 40px rgba(244, 160, 60, .45)); }
html[data-oppet="nej"] .kn-skylt.ar-tand img { filter: drop-shadow(0 0 10px rgba(255, 190, 90, .35)); }
.kn-skylt__status { display: inline-flex; font-size: .8125rem; color: var(--kn-ljus); }

/* ---------- Sidfoten ---------- */
.kn-fot { background: var(--kn-natt); color: #f4e7d0; padding-top: 88px; overflow: hidden; }
.kn-fot__slogan { font: 800 clamp(2.5rem, 1.4rem + 4.6vw, 5.75rem)/.95 var(--kn-rubrik); max-width: 13ch; }
.kn-fot__slogan em { font-style: normal; color: var(--kn-neon); }
.kn-fot__rad { display: grid; gap: 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(244, 231, 208, .2); }
.kn-fot__rubrik { margin-bottom: 10px; font: 700 .75rem/1 var(--kn-text); letter-spacing: .22em; text-transform: uppercase; color: var(--kn-neon); }
.kn-fot .kn-tider { margin-top: 0; }
.kn-fot .oppettider__rad { padding-block: 4px 2px; border: 0; }
.kn-fot__sma { margin-top: 20px; font-size: .875rem; opacity: .75; }
.kn-fot__av { margin-top: 20px; font-size: .875rem; opacity: .75; }
.kn-fot__av a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kn-fot__av a:hover { color: var(--kn-neon); }
.kn-fot__jatte { margin: 36px 0 -3.6vw -1vw; font: 800 23.5vw/.8 var(--kn-rubrik); color: var(--kn-neon); white-space: nowrap; pointer-events: none; user-select: none; }
.kn-fot__jatte span { display: inline-block; }

/* ---------- Bottenknapparna (bara mobilen) ---------- */
.kn-botten {
  position: fixed; z-index: 50; inset: auto 0 0; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--kn-natt); color: var(--kn-ljus);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
.kn-botten .kn-knapp { min-height: 50px; padding-inline: 10px; --skrift: var(--kn-ljus); }
.kn-botten .kn-knapp--kontur { border-color: rgba(251, 239, 220, .4); }

/* ---------- Surfplatta och dator ---------- */
@media (min-width: 640px) {
  .kn-fot__rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kn-lunch__val .kn-val img { width: 34px; height: 34px; }
}

@media (min-width: 761px) {
  body { padding-bottom: 0; }
  .kn-botten { display: none; }

  .kn-ovan { position: absolute; inset: 0 0 auto; background: transparent; }
  .kn-topp { padding: 22px var(--kn-kant); }
  .kn-logga img { width: 50px; height: 50px; }
  .kn-logga strong { font-size: 1.375rem; }
  .kn-nav { display: flex; gap: clamp(16px, 2.2vw, 34px); font-weight: 600; font-size: .9375rem; }
  .kn-nav a { text-decoration: none; padding-block: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--kn-mjuk); }
  .kn-nav a:hover { background-size: 100% 2px; }
  .kn-topp .kn-knapp { display: inline-flex; min-height: 50px; padding-inline: 24px; }
  .kn-topp .kn-status { font-size: .9375rem; }

  .kn-hero { height: 100svh; min-height: 680px; padding: 0; }
  .kn-hero__ord {
    position: absolute; left: 0; right: 0; top: 43%; margin: 0; translate: 0 -50%;
    font-size: var(--ord-fs, min(330px, calc((100vw - 80px) / (var(--n, 10) * .74))));
  }
  .kn-hero__tallrik { position: absolute; left: 61%; top: 53%; width: min(72svh, 47vw); margin: 0; translate: -50% -50%; }
  .kn-hero__info { position: absolute; left: var(--kn-kant); bottom: clamp(28px, 6svh, 64px); max-width: min(40vw, 600px); padding: 0; }
  .kn-hero__namn { font-size: clamp(2.5rem, 4.2vw, 4.25rem); }
  .kn-hero__till { font-size: 1.1875rem; }
  .kn-hero__val { flex-wrap: nowrap; width: max-content; gap: 10px; margin-top: 26px; }
  .kn-hero__val .kn-val { min-height: 56px; padding-right: 18px; }
  .kn-hero__val .kn-val img { width: 46px; height: 46px; }
  .kn-hero__val .kn-pil { width: 56px; height: 56px; }
  .kn-hero__dekal { top: auto; right: var(--kn-kant); bottom: clamp(28px, 7svh, 72px); width: clamp(150px, 14vw, 210px); }
  .kn-hero__dekal .kn-ring text { font-size: 11.5px; }
  .kn-dekal__ord s { font-size: .8125rem; }
  .kn-dekal__belopp { font-size: clamp(2.875rem, 4.6vw, 4.375rem); }
  .kn-dekal__kr { font-size: 1rem; }
  .kn-hero__ner {
    display: block; position: absolute; z-index: 4; left: 50%; bottom: 20px; translate: -50% 0;
    font: 700 .75rem/1 var(--kn-text); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  }

  .kn-meny__skylt { width: min(44vw, 620px); }
  .kn-meny__ingress { font-size: 1.1875rem; }
  .kn-dag__rubrik { width: clamp(120px, 11vw, 190px); }
  .kn-platt { width: min(52vw, 760px); }
  .kn-platt__bild { width: min(54svh, 38vw); }
  .kn-meny__slut { width: min(40vw, 560px); }
  .kn-meny__nasta { font-size: 2.25rem; }

  .kn-lokal, .kn-boka, .kn-hitta { padding: 130px 0 140px; }
  .kn-lokal__inner, .kn-hitta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .kn-boka__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .kn-boka__dekal { width: min(100%, 400px); }
  .kn-skylt { width: min(100%, 440px); }
  .kn-fot { padding-top: 130px; }
}

@media (min-width: 1000px) {
  .kn-lunch { padding: 130px 0 140px; }
  .kn-lunch__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  .kn-lunch__text { display: block; }
  .kn-lunch__bild { margin-top: 0; }
  .kn-lunch__val { margin-top: 10px; }
}

/* ---------- Rörelse som sköts av CSS (tallriken.js sköter resten) ---------- */
.kn-intro :is(.kn-hero__tallrik img, .kn-hero__ord, .kn-hero__dekal, .kn-hero__val) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kn-hero__dekal .kn-ring, .kn-boka__dekal .kn-ring { animation: kn-snurra 28s linear infinite; }
  .kn-skylt .kn-ring { animation: kn-snurra 60s linear infinite reverse; }
  .kn-meny__tips span { animation: kn-knuff 1.6s var(--kn-mjuk) infinite; }

  /* Lunchbrickan dukas: brickan glider in, tallriken ställs ner, sedan sallad, dryck och kaffe.
   * Varje rad på kvittot bockas av när saken landar, och priset stämplas sist. */
  .kn-lunch--vantar:not(.ar-dukad) :is(.kn-bricka, .kn-sak),
  .kn-lunch--vantar .kn-kvitto:not(.ar-bockad) .kn-kvitto__summa strong,
  .kn-lunch--vantar .kn-kvitto:not(.ar-bockad) li::before { opacity: 0; }
  .ar-dukad .kn-bricka { animation: kn-bricka .9s cubic-bezier(.2, .8, .2, 1) backwards; }
  .ar-dukad .kn-sak { animation: kn-dukas .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  .ar-dukad .kn-sak--tallrik { animation-delay: .4s; }
  .ar-dukad .kn-sak--sallad { animation-delay: .85s; }
  .ar-dukad .kn-sak--dryck { animation-delay: 1.1s; }
  .ar-dukad .kn-sak--kaffe { animation-delay: 1.35s; }
  .ar-bockad li::before { animation: kn-bock .4s cubic-bezier(.5, 0, .3, 1) backwards; }
  .ar-bockad li[data-sak="tallrik"]::before { animation-delay: .95s; }
  .ar-bockad li[data-sak="sallad"]::before { animation-delay: 1.4s; }
  .ar-bockad li[data-sak="dryck"]::before { animation-delay: 1.65s; }
  .ar-bockad li[data-sak="kaffe"]::before { animation-delay: 1.9s; }
  .ar-bockad .kn-kvitto__summa strong { animation: kn-stampel .5s cubic-bezier(.2, .8, .2, 1) 2.25s backwards; }
  @media (max-width: 999px) {                                       /* kvittot under brickan: bockas när det syns */
    .ar-bockad li[data-sak="tallrik"]::before { animation-delay: .2s; }
    .ar-bockad li[data-sak="sallad"]::before { animation-delay: .5s; }
    .ar-bockad li[data-sak="dryck"]::before { animation-delay: .8s; }
    .ar-bockad li[data-sak="kaffe"]::before { animation-delay: 1.1s; }
    .ar-bockad .kn-kvitto__summa strong { animation-delay: 1.45s; }
  }
}
@keyframes kn-snurra { to { transform: rotate(360deg); } }
@keyframes kn-knuff { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
@keyframes kn-bricka { from { opacity: 0; translate: 0 7%; } }
@keyframes kn-dukas { 0% { opacity: 0; translate: -1.5% -6%; scale: 1.14; } 14% { opacity: 1; } }
@keyframes kn-bock { from { clip-path: inset(0 100% 0 0); } }        /* bocken dras med penna, från vänster */
@keyframes kn-stampel { from { opacity: 0; scale: 1.4; } }
.kn-ring { transform-origin: 50% 50%; }