/* ===========================================================================
   Roppongi Sushi and Grill
   Riktning: Sumi. Mörk yta som loggans cirkel, maten är sidans enda ljuskälla,
   och en röd sol ur logotypen ligger bakom varje stor bild.
   Värden och motiveringar i designplan.md och signatur.md.
   =========================================================================== */

:root {
  --sumi: #0E0D0C;
  --kol: #17150F;
  --kol-ljus: #1F1C17;
  --krita: #F4F1EC;
  --dis: #A79E92;
  --sol: #C0392C;
  /* Röd TEXT använder den uppljusade tonen. Originalröden ger bara 3.65:1
     mot sumi, den här ger 5.98:1. Knappen behåller originalröden eftersom
     vit text på den ligger på 5.3:1. */
  --sol-ljus: #E4695A;
  --sol-mork: #9A2C21;
  --linje: #262320;
  /* Komponentgräns mot sumi. #3A352F gav 1.6:1, WCAG 1.4.11 kräver 3:1. */
  --kant: #6A6156;

  --rubrik: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --brod: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;

  --radie: 3px;
  --mjuk: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sumi);
  color: var(--krita);
  font-family: var(--brod);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--sol); color: #fff; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--sol-ljus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visuellt-dolt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hoppa {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: var(--radie);
  background: var(--krita); color: var(--sumi);
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .18s var(--mjuk);
}
.hoppa:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }

/* ---- Typografi ---------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-family: var(--rubrik);
  font-weight: 600;
  letter-spacing: .005em;
  text-wrap: balance;
}

.etikett {
  display: block;
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sol-ljus);
}

/* ---- Knappar ------------------------------------------------------------ */

.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--sol); color: #fff;
  font-family: var(--brod); font-size: 14px; font-weight: 600; letter-spacing: .03em;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--mjuk), border-color .18s var(--mjuk),
              transform .18s var(--mjuk);
}
.knapp:hover { background: var(--sol-mork); transform: translateY(-2px); }
.knapp:active { transform: translateY(0); }
.knapp--tom { background: transparent; color: var(--krita); border-color: var(--kant); }
.knapp--tom:hover { background: var(--kol-ljus); border-color: var(--dis); transform: translateY(-2px); }
.knapp--stor { min-height: 52px; padding: 0 28px; font-size: 15px; }

/* ---- Navigationen ------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  /* Solid list från start. Det är den enda hårda sak vi tar rakt av ur
     Florentine, och en genomskinlig nav faller isär över ljusa bilder. */
  background: var(--sumi);
  transition: background .28s var(--mjuk), backdrop-filter .28s var(--mjuk),
              border-color .28s var(--mjuk);
  /* Ingen linje forran man borjar skrolla. Emanuel 28/9: overst pa sidan har
     naven samma botten som heron, och da ritar linjen en kant tvars over en
     yta som inte har nagon. Den kommer nar naven borjar ligga OVANPA
     innehallet, vilket ar da den behovs. */
  border-bottom: 1px solid transparent;
}
.nav.ar-fast {
  background: rgba(14, 13, 12, .92);
  border-bottom-color: var(--linje);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--linje);
}
.nav-rad {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 0 40px; height: 84px;
}
.nav.ar-fast .nav-rad { height: 60px; }

.nav-logga { flex: none; display: inline-flex; align-items: center; min-height: 44px; }
.nav-logga img {
  width: auto; height: 34px;
  transform-origin: left center;
  transition: transform .28s var(--mjuk);
}
.nav.ar-fast .nav-logga img { transform: scale(.79); }

.nav-lankar { display: flex; gap: 26px; margin-left: auto; }
.nav-lankar a {
  position: relative;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dis); text-decoration: none;
  padding: 15px 0;   /* 44 px tapyta, inte 31 */
  transition: color .18s var(--mjuk);
}
.nav-lankar a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sol-ljus);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--mjuk);
}
.nav-lankar a:hover { color: var(--krita); }
.nav-lankar a:hover::after, .nav-lankar a[aria-current="page"]::after { transform: scaleX(1); }
.nav-lankar a[aria-current="page"] { color: var(--krita); }

.nav-hoger { display: flex; align-items: center; gap: 14px; margin-left: 8px; }

/* Naken hamburgare, ingen ring, som Savocas. Ringen gjorde ikonen till en
   knapp bland andra knappar i naven i stallet for en oppning. Tap-ytan ar
   kvar pa 46 px aven utan ram. Stangkrysset i menyn ar naket pa samma satt. */
.nav-oppna {
  display: none;
  width: 46px; height: 46px; padding: 0; margin-right: -10px;
  border: 0; background: transparent; color: var(--krita); cursor: pointer;
  place-items: center;
  transition: opacity .18s var(--mjuk);
}
.nav-oppna:hover { opacity: .72; }
.nav-oppna .streck { position: relative; display: block; width: 18px; height: 1.5px; background: currentColor; }
.nav-oppna .streck::before, .nav-oppna .streck::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
}
.nav-oppna .streck::before { top: -6px; }
.nav-oppna .streck::after { top: 6px; }

/* ---- Mobilmenyn --------------------------------------------------------- */

.mobilmeny {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: 0 24px calc(28px + env(safe-area-inset-bottom));
  background: var(--sumi);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--mjuk), transform .34s var(--mjuk);
}
.mobilmeny[hidden] { display: none; }
.mobilmeny.ar-oppen { opacity: 1; transform: none; }
.mobilmeny-topp {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 84px; margin: 0 -4px;
}
.mobilmeny-logga { width: auto; height: 32px; }
/* Naken X, ingen ring. Emanuel 28/9: mobilmenyn ska vara mer som Savocas,
   och Savocas stangknapp ar ett rent kryss. Ringen gjorde den till en knapp
   bland andra knappar i stallet for en avslutning. Tap-ytan ar kvar pa 46 px
   aven utan ram. */
.mobilmeny-stang {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0; margin-right: -10px;
  border: 0; background: transparent; color: var(--krita); cursor: pointer;
}
/* Lankarna borjar direkt under huvudet i stallet for att centreras. Centrerad
   lagde en stor tom lucka under loggan, och det var det som gjorde att
   Roppongis meny kandes tunnare an Savocas fast den har FLER rader. */
.mobilmeny-lankar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0; margin-top: 18px; }

/* Oppettiderna, tva spalter. Ritas bara nar vi faktiskt har dem. */
.mobilmeny-fakta {
  flex: none; list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 15px; color: var(--dis);
}
.mobilmeny-fakta li { display: flex; justify-content: space-between; gap: 18px; }
.mobilmeny-fakta b { color: var(--krita); font-weight: 600; }

.mobilmeny-kontakt {
  margin: 14px 0 0; font-size: 14px; color: var(--dis); text-align: center;
}
.mobilmeny-kontakt a { color: var(--krita); }

/* Vagbandet langst ner, Roppongis motsvarighet till Savocas kakelrad. Samma
   seigaiha som ligger pa menyskarmarna, sa sajt och vagg talar samma sprak. */
.vagband {
  flex: none; height: 26px; margin: 22px -24px 0;
  background-repeat: repeat-x; background-position: center bottom;
  background-size: 34px 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'%3E%3Cg fill='none' stroke='%23C0392C' stroke-linecap='round'%3E%3Cpath d='M0 26a17 17 0 0 1 34 0M-17 26a17 17 0 0 1 34 0M17 26a17 17 0 0 1 34 0' stroke-width='1.4' opacity='.9'/%3E%3Cpath d='M5 26a12 12 0 0 1 24 0M-12 26a12 12 0 0 1 24 0M22 26a12 12 0 0 1 24 0' stroke-width='1.1' opacity='.6'/%3E%3Cpath d='M10 26a7 7 0 0 1 14 0M-7 26a7 7 0 0 1 14 0M27 26a7 7 0 0 1 14 0' stroke-width='1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
}
.mobilmeny-lankar a {
  display: block; padding: 14px 0;
  font-family: var(--rubrik); font-size: 30px; font-weight: 600; line-height: 1.16;
  color: var(--krita); text-decoration: none;
  border-bottom: 1px solid var(--linje);
}
.mobilmeny-lankar a[aria-current="page"] { color: var(--sol-ljus); }
.mobilmeny-fot { flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: flex-end; }
.mobilmeny-fot .knapp { width: 100%; min-height: 52px; }

body.meny-uppe { overflow: hidden; }

/* ---- Signaturen: solen -------------------------------------------------- */

.sol {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: var(--sol-form, 1); border-radius: 50%;
  /* Mjuk avtoning hela vägen ut. En hård kant läser som en klisterlapp,
     inte som ljus bakom maten. */
  background: radial-gradient(circle at 50% 50%,
      rgba(214, 71, 58, var(--sol-alfa, .58)) 0%,
      rgba(192, 57, 44, calc(var(--sol-alfa, .58) * .8)) 40%,
      rgba(168, 48, 37, calc(var(--sol-alfa, .58) * .4)) 66%,
      rgba(154, 44, 33, 0) 100%);
  filter: blur(40px);
  will-change: transform;
}
/* Solen hör ihop med bilden, inte med sektionen. Låg den på sektionen hamnade
   den bakom brödtexten på mobilen, och signaturen får aldrig ligga bakom text
   som ska läsas. */
.hero-media {
  position: relative;
  /* Bilden går ut till skärmkanten. Ett bildkort som slutar 140 px från
     kanten bär inte första skärmen; förlagan har helbild. */
  margin-right: calc(-40px - max(0px, (100vw - var(--wrap)) / 2));
}
/* Placeringen sker med top och right, aldrig med transform. main.js äger
   transform för parallaxen och hade annars slagit ut centreringen. */
/* Solen ska stiga ur det mörka under bilden, inte sitta som en lins uppe
   till höger på tom yta. */
.sol--hero { width: min(620px, 86%); bottom: -34%; right: -6%; --sol-alfa: .52; }

/* Kornigheten är bakgrundens mellanlager. Den syns knappt, men utan den blir
   den stora svarta ytan platt som en tom canvas. */
.korn {
  position: absolute; inset: -10% 0; z-index: 0; pointer-events: none;
  opacity: .5; will-change: transform;
  background-image: radial-gradient(rgba(244, 241, 236, .05) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 60% 30%, #000 0%, transparent 72%);
}

/* ---- Heron -------------------------------------------------------------- */

/* Heron, omgjord 28/9. Emanuel jamforde med savoca.vercel.app: "Savoca var ju
   mycket battre, speciellt heron". Skillnaden lag inte i fargen utan i modet.
   Savoca satsar hela ytan pa EN ratt som ar enorm och gar ut over hogerkanten.
   Roppongi hade ett rektangulart foto i en rundad ram pa knappt halva ytan,
   och ramen gjorde att bilden SLUTADE i stallet for att fortsatta ut ur bilden.
   Nu: hela skarmhojden, California Roll frilagd och stor, ut over kanten. */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 40px 0 64px;
}
.hero-rad {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .96fr);
  gap: 40px; align-items: center;
}
.hero-text { max-width: 34rem; }
.hero-h1 {
  margin: 22px 0 0;
  font-size: clamp(3.1rem, 7.4vw, 6.2rem);
  line-height: 1.02; letter-spacing: -.015em;
}
/* Raderna ar masker. Texten ligger under kanten och stiger upp bakom den, i
   stallet for att tonas in pa plats. Det ar den rorelsen som gor att en hero
   kanns gjord och inte pahangd. */
.hero-h1 .rad { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-h1 .rad > span { display: block; }
.hero-h1 .kanji { color: var(--sol-ljus); font-size: .8em; margin-top: 2px; }
.hero-brod { margin: 30px 0 0; color: var(--dis); max-width: 42ch; }
.hero-fakta {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: 15px; letter-spacing: .01em; color: var(--dis);
}
.hero-fakta li { display: flex; align-items: center; gap: 9px; }
.hero-fakta svg { flex: none; color: var(--sol-ljus); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Ingen ram, ingen beskarning. Ratten ar frilagd och ska lasa som ett foremal
   pa ytan, inte som ett foto i en ruta. Skuggan ligger som filter sa den
   foljer tallrikens form i stallet for en rektangel. */
.hero-bild {
  margin: 0; position: relative;
  width: min(63vw, 960px);
  margin-right: calc(-1 * var(--kant) - 14vw);
  justify-self: end;
  filter: drop-shadow(30px 40px 60px rgba(0, 0, 0, .62));
  will-change: transform;
}
.hero-bild img { width: 100%; height: auto; display: block; }

/* Rubriken kommer in radvis. Sätts av main.js via klassen ar-klar, så texten
   syns även utan JavaScript. */
.js .hero-text .etikett, .js .hero-brod, .js .hero-fakta,
.js .hero-cta, .js .hero-bild { opacity: 0; }
.js .hero-h1 .rad > span { transform: translateY(110%); }
.js .hero.ar-klar .etikett, .js .hero.ar-klar .hero-brod,
.js .hero.ar-klar .hero-fakta, .js .hero.ar-klar .hero-cta,
.js .hero.ar-klar .hero-bild {
  animation: in-under .58s var(--mjuk) both;
}
.js .hero.ar-klar .hero-h1 .rad > span {
  transform: none;
  transition: transform .82s cubic-bezier(.19, 1, .22, 1);
}
.js .hero.ar-klar .hero-h1 .rad:nth-child(2) > span { transition-delay: .09s; }
.js .hero.ar-klar .etikett { animation-delay: .04s; }
.js .hero.ar-klar .hero-brod { animation-delay: .34s; }
.js .hero.ar-klar .hero-fakta { animation-delay: .42s; }
.js .hero.ar-klar .hero-cta { animation-delay: .5s; }
.js .hero.ar-klar .hero-bild {
  animation-name: in-tallrik; animation-delay: .06s; animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@keyframes in-tallrik {
  from { opacity: 0; transform: translate3d(7%, 22px, 0) rotate(2.4deg) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes in-under {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---- Mobil -------------------------------------------------------------- */

@media (max-width: 880px) {
  body { font-size: 16px; }
  .wrap, .nav-rad { padding: 0 20px; }
  .nav-rad { height: 68px; }
  .nav.ar-fast .nav-rad { height: 56px; }
  .nav-lankar { display: none; }
  .nav-hoger .knapp { display: none; }
  /* .nav-lankar bar margin-left:auto och göms här, så raden kollapsade mot
     loggan och hamburgaren hamnade mitt i naven. */
  .nav-hoger { margin-left: auto; }
  .nav-oppna { display: grid; }

  /* Mobilen skiljer text och bild åt. Text i bild på 390 px slutar alltid med
     att antingen texten eller maten blir oläslig. Se referensboard.md. */
  .hero { min-height: calc(100svh - 68px); padding: 20px 0 44px; }
  .hero-rad { grid-template-columns: 1fr; gap: 18px; }
  /* Referensboardet: fotot fyller skärmen under naven, rubriken ligger
     direkt under fotot. Jag hade byggt det omvänt. */
  .hero-media { order: 1; }
  .hero-text { max-width: none; order: 2; }
  /* Urklippet far ga ut over hogerkanten aven pa mobilen, som Savocas
     tallrik. Den ska kannas storre an skarmen, inte inramad av den. */
  /* Bilden far ga ut over hogerkanten men inte ata upp forsta skarmen.
     Tas hela hojden av tallriken hamnar knapparna under vikningen, och da
     har heron ingen handling kvar i forsta vyn. */
  /* Storre an skarmen, inte inramad av den. Taket ar CTA:n: knappen maste
     ligga kvar i forsta vyn, annars har heron ingen handling i den vy man
     faktiskt ser. Matt i QA:n, inte gissat. */
  .hero-bild {
    width: 178%; margin: 0 -56% 0 0; justify-self: end;
    filter: drop-shadow(14px 20px 30px rgba(0, 0, 0, .6));
  }
  .hero-bild img { height: auto; max-height: 39svh; object-fit: contain; }
  .hero-h1 { margin-top: 14px; font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .hero-brod { margin-top: 18px; font-size: 16px; }
  .hero-fakta { margin-top: 14px; font-size: 14px; gap: 4px 18px; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-cta .knapp { flex: 1 1 100%; }
  /* Bilden går kant i kant på mobilen, så solen syns bara i bandet under
     den. Bandet är 56 px och glöden slutar innan rubriken börjar, så
     signaturen aldrig hamnar bakom text som ska läsas. */
  .sol--hero {
    width: 148%; left: -24%; right: auto; bottom: -58px;
    --sol-form: 148 / 46;   /* bred, låg ellips: en horisont, inte en skiva */
    --sol-alfa: .95;
  }
}

/* ---- Mindre rörelse ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .hero-text .etikett, .js .hero-brod, .js .hero-fakta,
  .js .hero-cta, .js .hero-bild { opacity: 1; animation: none; }
  .js .hero-h1 .rad > span { transform: none; transition: none; }
  .sol, .korn { transform: none !important; }
  .knapp:hover, .knapp--tom:hover { transform: none; }
}

/* ===========================================================================
   Sektioner. Allt nedan tillkom när resten av sidorna byggdes 28/9.
   =========================================================================== */

.wrap.smal { max-width: 780px; }

.sek { position: relative; padding: 104px 0; overflow: hidden; }
.sek--kol { background: var(--kol); }
.sek + .sek { border-top: 1px solid var(--linje); }

.sek-topp { max-width: 46rem; margin-bottom: 44px; }
.sek-topp h2 { margin: 12px 0 0; font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.12; }
.kana {
  display: block; margin-bottom: 10px;
  font-family: var(--rubrik); font-size: 15px; letter-spacing: .3em;
  color: var(--kant);
}
.sek-brod { margin: 16px 0 0; color: var(--dis); max-width: 52ch; }
.sek-fot { margin-top: 40px; }

.lank {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  color: var(--sol-ljus); font-size: 15px; font-weight: 600; text-decoration: none;
}
.lank svg { transition: transform .22s var(--mjuk); }
.lank:hover svg { transform: translateX(4px); }

.pris {
  font-family: var(--brod); font-weight: 600; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--sol-ljus); white-space: nowrap;
}

/* ---- Solen i sektionerna ------------------------------------------------ */

.sol--sek { width: 78%; bottom: -26%; left: -14%; --sol-alfa: .5; }
.sol--liten { width: 62%; bottom: -18%; right: -10%; --sol-alfa: .46; }
.sol--fot { width: min(520px, 70%); bottom: -46%; right: 4%; --sol-alfa: .34; }

/* ---- Sidhuvud på undersidor --------------------------------------------- */

.sidhuvud { position: relative; overflow: hidden; padding: 72px 0 60px; border-bottom: 1px solid var(--linje); }
.sidhuvud h1 { margin: 14px 0 0; font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height: 1.06; }
.sidhuvud-brod { margin: 22px 0 0; color: var(--dis); max-width: 52ch; }
.sidhuvud--mitt { text-align: center; padding: 120px 0; border-bottom: 0; }
.sidhuvud--mitt .sidhuvud-brod { margin-left: auto; margin-right: auto; }
.sidhuvud--mitt .hero-cta { justify-content: center; margin-top: 28px; }

/* ---- Dagens lunch på startsidan ----------------------------------------- */

.lunchlista { list-style: none; margin: 0; padding: 0; }
.lunchrad {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr auto;
  align-items: baseline; gap: 8px 28px;
  padding: 22px 0; border-top: 1px solid var(--linje);
}
.lunchrad:last-child { border-bottom: 1px solid var(--linje); }
.lunchrad-namn { font-family: var(--rubrik); font-size: 21px; font-weight: 600; }
.lunchrad-besk { color: var(--dis); font-size: 15px; }
.lunchrad--dag .lunchrad-namn { color: var(--sol-ljus); }

/* ---- Rättkort ------------------------------------------------------------ */

.kortrad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kortrad--tre { grid-template-columns: repeat(3, 1fr); }
.kort {
  display: flex; flex-direction: column;
  background: var(--kol); border: 1px solid var(--linje); border-radius: var(--radie);
  overflow: hidden;
  transition: transform .22s var(--mjuk), border-color .22s var(--mjuk);
}
.sek--kol .kort { background: var(--sumi); }
.kort:hover { transform: translateY(-4px); border-color: var(--kant); }
.kort-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--kol-ljus); }
.kort-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--mjuk); }

/* ---- Frilagda rätter ----------------------------------------------------
   Rättbilderna är urklipp sedan 28/9, samma filer som menyskärmarna laddar.
   De får aldrig beskäras: object-fit: cover klipper av tallriken, och en
   frilagd rätt har ingen bakgrund som tål det. contain i stället, med luft
   runt om så ingenting tangerar kanten, och skuggan som filter så den följer
   tallrikens form i stället för att bli en rektangel under bilden. */
img.urklipp {
  object-fit: contain;
  filter: drop-shadow(10px 14px 20px rgba(0, 0, 0, .55));
}
.kort-bild img.urklipp { padding: 16px 12px; }
.band img.urklipp, .gal-kol img.urklipp { padding: 10px; }
.menybild img.urklipp, .tvadelad-media img.urklipp { padding: 8px; }
.kort:hover .kort-bild img { transform: scale(1.03); }
.kort-kat {
  position: absolute; left: 12px; top: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(14, 13, 12, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--krita);
}
.kort-text { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.kort-text h3 { font-size: 20px; line-height: 1.25; }
.kort-text small { color: var(--dis); font-size: 14px; line-height: 1.5; }
.kort-text .pris { margin-top: 4px; }

/* ---- Tvådelad sektion ---------------------------------------------------- */

.tvadelad { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; }
.tvadelad--vand .tvadelad-text { order: 2; }
.tvadelad--vand .tvadelad-media { order: 1; }
.tvadelad-text p { color: var(--dis); max-width: 46ch; margin: 0 0 18px; }
.tvadelad-media { position: relative; }
.tvadelad-media figure { margin: 0; position: relative; z-index: 1; border-radius: var(--radie); overflow: hidden; }
.tvadelad-media img { width: 100%; height: clamp(320px, 46vh, 520px); object-fit: cover; }

.lista { margin: 0; }
.lista > div { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: 6px 28px;
  padding: 18px 0; border-top: 1px solid var(--linje); }
.lista > div:last-child { border-bottom: 1px solid var(--linje); }
.lista dt { font-family: var(--rubrik); font-size: 18px; font-weight: 600; }
.lista dd { margin: 0; color: var(--dis); font-size: 15px; }

/* ---- Bildbandet ---------------------------------------------------------- */

.band {
  display: flex; gap: 18px; margin-top: 44px; padding: 0 40px 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.band::-webkit-scrollbar { display: none; }
.band figure {
  flex: 0 0 auto; margin: 0; width: 28vw; max-width: 360px; min-width: 220px;
  border-radius: var(--radie); overflow: hidden; scroll-snap-align: start;
}
.band img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .35s var(--mjuk); }
.band figure:hover img { transform: scale(1.03); }

/* ---- Frågor -------------------------------------------------------------- */

/* Kickern ligger under rubriken sedan 28/9. Impeccable-detektorn flaggade
   hero-eyebrow-chip pa alla sex sidor: en liten sparrad versal etikett rakt
   ovanfor en stor rubrik ar sa vanlig i AI-genererade sidor att den laser som
   mall. Pa startsidan var den dessutom en dubblett av adressen i faktaraden. */
.sid-kicker {
  margin: 14px 0 0; font-size: 15px; letter-spacing: .01em;
  color: var(--dis); text-transform: none;
}

/* cramped-padding: barnen lag dikt an mot linjen. */
.fragor { border-top: 1px solid var(--linje); padding-top: 14px; }
.fraga { border-bottom: 1px solid var(--linje); background: var(--kol); }
.sek--kol .fraga { background: var(--sumi); }
.fraga summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 22px; min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--rubrik); font-size: 19px; font-weight: 600;
  transition: background .18s var(--mjuk), color .18s var(--mjuk);
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary:hover { background: var(--kol-ljus); color: var(--sol-ljus); }
.fraga summary svg { flex: none; color: var(--sol-ljus); transition: transform .24s var(--mjuk); }
.fraga[open] summary svg { transform: rotate(45deg); }
.fraga p { margin: 0; padding: 0 22px 24px; color: var(--dis); max-width: 62ch; }

/* ---- Menysidan ----------------------------------------------------------- */

.katnav {
  position: sticky; top: 84px; z-index: 40;
  background: rgba(14, 13, 12, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linje);
  transition: top .28s var(--mjuk);
}
body.nav-fast .katnav { top: 60px; }
.katnav-rad {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--wrap); margin: 0 auto; padding: 0 40px;
}
.katnav-rad::-webkit-scrollbar { display: none; }
.katnav-rad a {
  flex: none; display: inline-flex; align-items: center; min-height: 52px;
  padding: 0 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dis); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s var(--mjuk), border-color .18s var(--mjuk);
}
.katnav-rad a:hover { color: var(--krita); }
.katnav-rad a.ar-har { color: var(--krita); border-bottom-color: var(--sol); }

.meny-yta { padding-top: 24px; padding-bottom: 24px; }
/* overflow döljer solen som bleder ut ur menybilden. Utan den blev sidan
   405 px bred på en 390-skärm. */
.menykat { padding: 56px 0; border-bottom: 1px solid var(--linje); scroll-margin-top: 150px; overflow: hidden; }
.menykat:last-of-type { border-bottom: 0; }
.menykat-rad.har-bild { display: grid; grid-template-columns: 1fr 36%; gap: 56px; align-items: start; }
.menykat .sek-topp { margin-bottom: 28px; }
.menykat h2 { margin: 6px 0 0; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.menylista { list-style: none; margin: 0; padding: 0; }
.menyrad { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; }
.menyrad + .menyrad { border-top: 1px solid var(--linje); }
.menyrad-text { flex: 0 1 auto; min-width: 0; }
.menyrad-text strong { display: block; font-family: var(--rubrik); font-size: 19px; font-weight: 600; }
.menyrad-text small { display: block; margin-top: 3px; color: var(--dis); font-size: 14px; line-height: 1.5; }
.menyrad-linje { flex: 1 1 auto; min-width: 20px; height: 1px; background: var(--linje); }
.menybild { position: relative; }
.menybild figure { margin: 0; position: relative; z-index: 1; border-radius: var(--radie); overflow: hidden; }
.menybild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.menybild figure:has(img.urklipp) { overflow: visible; }
.menybild img.urklipp { aspect-ratio: 1 / 1; }
.menyknapp { padding: 12px 0 44px; }

/* ---- Lunchsidan ---------------------------------------------------------- */

.dagar { list-style: none; margin: 0; padding: 0; }
.dagrad {
  display: grid; grid-template-columns: 7rem minmax(9rem, 13rem) 1fr auto;
  align-items: baseline; gap: 8px 24px;
  padding: 22px 0; border-top: 1px solid var(--linje);
  transition: color .2s var(--mjuk);
}
.dagrad:last-child { border-bottom: 1px solid var(--linje); }
.dagrad-dag { font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dis); }
.dagrad-namn { font-family: var(--rubrik); font-size: 20px; font-weight: 600; }
.dagrad-besk { color: var(--dis); font-size: 15px; }
/* Ingen sidostreck. Dagens rad markeras med sin egen yta och med att dagen
   star i accentfargen, inte med en 3 px rand langs kanten. */
.dagrad.ar-idag { background: var(--kol-ljus); }
.sek--kol .dagrad.ar-idag { background: var(--sumi); }
.dagrad.ar-idag .dagrad-dag { color: var(--sol-ljus); }

/* ---- Galleri ------------------------------------------------------------- */

.galleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.gal-kol { display: flex; flex-direction: column; gap: 22px; will-change: transform; }
.gal-kol:nth-child(2) { margin-top: 44px; }
.gal-kol figure { margin: 0; border-radius: var(--radie); overflow: hidden; }
.gal-kol figure:has(img.urklipp) { overflow: visible; background: var(--kol-ljus);
                                   border-radius: var(--radie); }
.gal-kol img { width: 100%; height: auto; transition: transform .4s var(--mjuk); }
.gal-kol figure:hover img { transform: scale(1.03); }
.gal-kol figure { transition: transform .18s var(--mjuk); }
.gal-kol figure:hover { transform: translateY(-4px); }
.band figure { transition: transform .18s var(--mjuk); }
.band figure:hover { transform: translateY(-5px); }
.kort { transition: transform .18s var(--mjuk); }
.kort:hover { transform: translateY(-4px); }

/* ---- Kontakt och formulär ------------------------------------------------ */

.kontakt-rad { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.under { margin: 40px 0 16px; font-size: 18px; }
.oppet { list-style: none; margin: 0; padding: 0; }
.oppet li { display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-top: 1px solid var(--linje); color: var(--dis); font-size: 15px; }
.oppet li:last-child { border-bottom: 1px solid var(--linje); }
.saknas { color: var(--dis); font-size: 15px; font-style: italic; }

.kontakt-form { background: var(--kol); border: 1px solid var(--linje);
  border-radius: var(--radie); padding: 34px; }
.sek--kol .kontakt-form { background: var(--sumi); }
.kontakt-form h2 { font-size: 26px; }
.form-brod { margin: 12px 0 26px; color: var(--dis); font-size: 15px; }
.falt { margin-bottom: 18px; }
.falt label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dis); }
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.falt input, .falt textarea {
  width: 100%; padding: 13px 14px;
  background: var(--kol-ljus); color: var(--krita);
  border: 1px solid var(--kant); border-radius: var(--radie);
  font-family: var(--brod); font-size: 16px; line-height: 1.5;
  transition: border-color .18s var(--mjuk);
}
.falt textarea { resize: vertical; min-height: 120px; }
.falt input:focus, .falt textarea:focus { outline: none; border-color: var(--sol-ljus); }
.honung { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.samtycke { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 22px;
  color: var(--dis); font-size: 14px; line-height: 1.55; }
.samtycke input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--sol); }
.samtycke a { color: var(--sol-ljus); }
.form .knapp { width: 100%; }
.form-status { margin: 16px 0 0; font-size: 14px; min-height: 1.2em; }
.form-status.ar-ok { color: #7FBE7F; }
.form-status.ar-fel { color: var(--sol-ljus); }

.karta { width: 100%; height: 420px; border: 0; border-radius: var(--radie);
  filter: grayscale(1) invert(.92) contrast(.86); }
.sek--karta { padding: 0 0 104px; }

/* ---- Brödtext på policysidan --------------------------------------------- */

.brodtext h2 { margin: 40px 0 12px; font-size: 22px; }
.brodtext h2:first-child { margin-top: 0; }
.brodtext p { margin: 0; color: var(--dis); max-width: 62ch; }

/* ---- Footern ------------------------------------------------------------- */

.fot { position: relative; overflow: hidden; padding: 84px 0 0; border-top: 1px solid var(--linje); }
.fot-rad { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.fot-logga { width: auto; height: 34px; }
.fot-brod { margin: 18px 0 0; color: var(--dis); font-size: 15px; max-width: 30ch; }
.fot-social { display: flex; gap: 18px; margin-top: 18px; }
.fot-social a { color: var(--dis); font-size: 14px; text-decoration: none; }
.fot-social a:hover { color: var(--krita); }
.fot-block h2 { font-family: var(--brod); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dis); margin-bottom: 18px; }
.fot-block p { margin: 0 0 8px; color: var(--krita); font-size: 15px; }
.fot-block a { color: var(--krita); text-decoration: none; }
.fot-block a:hover { color: var(--sol-ljus); }
.fot-lankar { display: flex; flex-direction: column; gap: 2px; }
.fot-lankar a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.fot-slut { position: relative; z-index: 1; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px;
  margin-top: 64px; padding-top: 26px; padding-bottom: 34px;
  border-top: 1px solid var(--linje); }
.fot-slut p { margin: 0; color: var(--dis); font-size: 13px; }
.fot-slut a { color: var(--dis); }
.fot-slut a:hover { color: var(--krita); }

/* ---- Scroll-reveal ------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translate3d(0, 18px, 0); }
.js .reveal.syns { opacity: 1; transform: none;
  transition: opacity .6s var(--mjuk), transform .6s var(--mjuk); }

/* ---- Mobil och mellanläge ------------------------------------------------ */

@media (max-width: 1080px) {
  .kortrad, .kortrad--tre { grid-template-columns: repeat(2, 1fr); }
  .galleri { grid-template-columns: repeat(2, 1fr); }
  .gal-kol:nth-child(3) { display: none; }
  .fot-rad { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 880px) {
  .sek { padding: 60px 0; }
  .sek-topp { margin-bottom: 30px; }
  .sek-fot { margin-top: 28px; }
  .sidhuvud { padding: 44px 0 40px; }
  .sidhuvud-brod { margin-top: 16px; }
  .sidhuvud--mitt { padding: 80px 0; }

  .tvadelad, .kontakt-rad { grid-template-columns: 1fr; gap: 34px; }
  .tvadelad--vand .tvadelad-text { order: 1; }
  .tvadelad--vand .tvadelad-media { order: 2; }
  .tvadelad-media img { height: 300px; }

  /* Beskrivningen klämdes ihop till fyra rader i en 9rem-spalt. */
  .lista > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .lunchrad { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; }
  .lunchrad-besk { grid-column: 1 / -1; }

  .dagrad { grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; }
  .dagrad-dag { grid-column: 1 / -1; }
  .dagrad-besk { grid-column: 1 / -1; }

  .katnav { top: 68px; }
  body.nav-fast .katnav { top: 56px; }
  .katnav-rad { padding: 0 20px; }
  .menykat { padding: 40px 0; scroll-margin-top: 130px; }
  .menykat-rad.har-bild { grid-template-columns: 1fr; gap: 28px; }
  .menybild { order: -1; }
  .menybild img { aspect-ratio: 4 / 3; }

  .band { padding: 0 20px 12px; gap: 12px; margin-top: 28px; }
  .band figure { width: 62vw; min-width: 0; }

  .galleri { grid-template-columns: 1fr; gap: 14px; }
  .gal-kol { gap: 14px; }
  .gal-kol:nth-child(2) { margin-top: 0; }
  .gal-kol:nth-child(3) { display: flex; }
  .gal-kol { transform: none !important; }

  .kontakt-form { padding: 24px 20px; }
  .karta { height: 300px; }
  .sek--karta { padding-bottom: 60px; }

  .fot { padding-top: 56px; }
  .fot-rad { grid-template-columns: 1fr; gap: 34px; }
  .fot-slut { margin-top: 40px; }
}

@media (max-width: 560px) {
  .kortrad, .kortrad--tre { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .kort:hover { transform: none; }
  .kort:hover .kort-bild img, .band figure:hover img, .gal-kol figure:hover img { transform: none; }
  .lank:hover svg { transform: none; }
}

/* Joachim 28/9: bild på varje menygrupp. Sushi-gruppen har två, Classic
   Salmon och mixen på tolv bitar, och de ligger då under varandra med samma
   luft som mellan raderna i listan. Varannan grupp lägger bilden till höger
   så sidan inte blir en kolumn med allt åt samma håll. */
.menybild--tva { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 880px) {
  .menybild--tva { flex-direction: row; gap: 10px; }
  .menybild--tva figure { flex: 1 1 0; }
}

/* Lunchen är fyra rätter, inte tre: sushi, vegetarisk sushi, pokésallad och
   katsun som byter sort. Fyra kort på bredden, två på surfplatta, ett på
   telefon, samma trappa som de andra raderna. */
.kortrad--fyra { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .kortrad--fyra { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .kortrad--fyra { grid-template-columns: 1fr; } }