/* ==========================================================================
   Siam Sushi – felles stilark
   Mobil først: all layout skrives for liten skjerm og utvides med min-width.
   Breakpoints: 48em (tablet) og 62em (desktop).
   Alle farger, fonter, spacing og maksbredder settes KUN i :root under.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variabler
   -------------------------------------------------------------------------- */
:root {
  /* Farger. Kveldspalett. Den mørke familien er varm svart hentet fra
     fotografienes egne skygger (2026-09-05, steg 5 i DESIGNRETNING.md) –
     før det grønnsvart «nori» forankret i tranemaleriet. Det grønne lever
     videre i teksten: celadon på mørkt, jade på lyst. Navnet nori er
     beholdt fordi det står 60 steder; verdien er byttet.
     Alle kombinasjoner er kontrollert mot WCAG AA med kode, ikke øyemål. */
  --farge-nori: #15110d;           /* base mørk – flater, footer, under foto */
  --farge-nori-rgb: 21, 17, 13;    /* samme, til rgba() i dempinger */
  --farge-nori-lys: #221c16;       /* mørk flate ett hakk opp – kort, valgt filter */
  --farge-jade: #1b3129;           /* grønn TEKSTaksent på lys flate – aldri flate */
  --farge-jade-lys: #2c241c;       /* hover på mørk flate */
  --farge-celadon: #8fb8a4;        /* dempet tekst på mørk */
  --farge-celadon-lys: #cfe3d8;    /* samme tone, lysnet – over bilde */
  --farge-rispapir: #f7f4ec;       /* lys bakgrunn */
  --farge-papir-dyp: #efece4;      /* annenhver seksjon */
  --farge-tekst: #15110d;          /* samme varme svart som flatene */
  --farge-tekst-dempet: #5a655e;
  --farge-kant: #e0dbd0;

  /* Signalfarge. Brukes KUN to steder på hele nettstedet: ringeknappen
     og kickeren over hver menygruppe. Det er dette som gjør at øyet
     alltid finner konverteringen. Ikke ta den i bruk andre steder. */
  --farge-chili: #b6462e;      /* justert fra #c04a30: den lå på 4,48:1 */
  --farge-chili-mork: #953926;

  --farge-fokus: #0b5fff;

  /* Mørk flate under foto. Var egen farge (#15110d) mens resten av siden
     var grønnsvart; fra steg 5 er nori den samme varme svarten, og disse er
     alias. Beholdt så hero- og fotoflate-CSS-en leser som den ble skrevet. */
  --farge-foto-morke: var(--farge-nori);
  --farge-foto-morke-rgb: var(--farge-nori-rgb);

  /* Typografi. Fraunces lastes lokalt som subsettet variabel font –
     ingen kall til Google Fonts. Brødtekst er systemfont, null nedlasting. */
  --font-brodtekst: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-overskrift: "Fraunces", Georgia, "Iowan Old Style", serif;

  --tekst-sm: 0.875rem;
  --tekst-base: 1rem;
  --tekst-lg: 1.125rem;
  --tekst-xl: 1.375rem;
  --tekst-2xl: 1.75rem;
  --tekst-3xl: 2.125rem;
  --tekst-4xl: 2.75rem;

  --linjehoyde: 1.65;
  --linjehoyde-tett: 1.15;

  /* Spacing – én skala, brukes overalt */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Mål og form */
  --maks-bredde: 72rem;
  --maks-bredde-smal: 52rem;
  --maks-bredde-tekst: 38rem;
  --radius: 3px;
  --radius-stor: 6px;
  --trykkflate: 44px; /* minste trykkflate på mobil */
  --sticky-hoyde: 4.5rem;
  /* Målt høyde på den klebrige headeren. Kategorilinja på menysiden fester
     seg rett under den, og ankerhopp må klarere begge. main.js oppdaterer
     verdien etter faktisk måling; disse to er fallback uten JS. */
  --header-hoyde: 68px;
  --skygge: 0 1px 2px rgba(23, 25, 26, 0.05), 0 8px 24px rgba(23, 25, 26, 0.06);
}

/* --------------------------------------------------------------------------
   2. Reset / normalize
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ankerlenker skal ikke havne under det som ligger fast øverst. På
     menysiden er det header + kategorilinje, ellers bare headeren. */
  scroll-padding-top: calc(var(--header-hoyde) + 1rem);
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
address,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

body {
  font-family: var(--font-brodtekst);
  font-size: var(--tekst-base);
  line-height: var(--linjehoyde);
  color: var(--farge-tekst);
  background: var(--farge-rispapir);
  /* Plass til sticky CTA slik at den aldri dekker innhold */
  padding-bottom: var(--sticky-hoyde);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

address {
  font-style: normal;
}

/* Synlig fokusmarkering – aldri fjernet uten erstatning */
:focus-visible {
  outline: 3px solid var(--farge-fokus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typografi
   -------------------------------------------------------------------------- */
/* Lys serif, aldri fet – grepet fra heroen (se DESIGNRETNING.md). h1 og h2
   i vekt 300 med stramt sperret store størrelser; h3 og h4 i 500, som er
   nok til å skille dem fra brødtekst uten å bli tunge. Vekt 600 brukes
   ikke i overskrifter lenger. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-overskrift);
  font-weight: 300;
  line-height: var(--linjehoyde-tett);
  text-wrap: balance;
}

h3,
h4 {
  font-weight: 500;
}

h1 {
  font-size: var(--tekst-3xl);
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--tekst-2xl);
  letter-spacing: -0.01em;
}
h3 {
  font-size: var(--tekst-lg);
}
h4 {
  font-size: var(--tekst-base);
}

p,
ul:not([class]),
ol:not([class]) {
  max-width: var(--maks-bredde-tekst);
}

p + p,
h2 + p,
h3 + p,
h4 + p {
  margin-top: var(--sp-4);
}

ul:not([class]),
ol:not([class]) {
  margin-top: var(--sp-4);
  padding-left: var(--sp-5);
}

ul:not([class]) li + li,
ol:not([class]) li + li {
  margin-top: var(--sp-2);
}

.muted {
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
}

/* Liten stor-bokstavs-etikett over overskrifter. Vekt 500 og 0,2 em
   sperring: en hvisking, ikke en etikett som roper. Dette er det eneste
   stedet på nettstedet med positiv sperring – overskriftene er negative,
   brødteksten null. */
.kicker {
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-brodtekst);
  font-size: var(--tekst-sm);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--farge-jade);
}

/* Menygruppe-kickeren er det ANDRE og siste stedet signalfargen brukes. */
.meny-gruppe__topp .kicker {
  color: var(--farge-chili);
}

.ingress {
  font-size: var(--tekst-lg);
  color: var(--farge-tekst-dempet);
  max-width: var(--maks-bredde-tekst);
}

@media (min-width: 62em) {
  :root {
    --header-hoyde: 74px;
  }
}

@media (min-width: 48em) {
  h1 {
    font-size: var(--tekst-4xl);
  }
  h2 {
    font-size: var(--tekst-3xl);
  }
  h3 {
    font-size: var(--tekst-xl);
  }
}

/* --------------------------------------------------------------------------
   4. Hjelpeklasser
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.wrap--smal {
  max-width: var(--maks-bredde-smal);
}

.skiplink {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--farge-nori-lys);
  color: var(--farge-rispapir);
  border-radius: var(--radius);
}

.skiplink:focus {
  top: var(--sp-2);
}

@media (min-width: 48em) {
  .wrap {
    padding-inline: var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   5. Header og navigasjon
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--farge-kant);
  background: var(--farge-rispapir);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--trykkflate);
  padding-block: var(--sp-3);
}

/* Avstanden ligger som margin på skillestreken, ikke som gap på lenken.
   Da forsvinner luften sammen med streken i kompakt tilstand – med gap
   ville det stått igjen to tomrom rundt et element med bredde 0. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* Logoen er en lenke til forsiden og må ha full trykkflate. 44 px er
     lavere enn raden headeren allerede har, så høyden endres ikke av dette. */
  min-height: var(--trykkflate);
  text-decoration: none;
  color: var(--farge-tekst);
}

/* Høyden er låst i px, ikke em: da flytter aldri headeren seg om
   fontstørrelsen endres, og merket får eksakt samme plass fra første frame. */
.logo__merke {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
}

.logo__strek {
  flex: 0 0 auto;
  width: 1px;
  height: 1.75rem;
  margin-inline: var(--sp-3);
  background: var(--farge-kant);
}

.logo__ord {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 0 0 auto;
  /* Må stå: i kompakt tilstand klemmes boksen til bredde 0, og uten nowrap
     brekker «Siam Sushi» til ett ord per linje. Boksen blir da høyere enn
     headeren, og hele headeren vokser mens man scroller. */
  white-space: nowrap;
}

.logo__text {
  font-family: var(--font-overskrift);
  font-size: var(--tekst-lg);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.logo__sted {
  font-size: 0.6875rem;
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--farge-tekst-dempet);
}

@media (min-width: 48em) {
  .logo__merke {
    width: 2.25rem;
    height: 2.25rem;
  }

  .logo__text {
    font-size: var(--tekst-xl);
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--trykkflate);
  min-width: var(--trykkflate);
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Hamburger tegnet med box-shadow, ingen ikonfont eller SVG-fil */
.nav-toggle__bar {
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.nav-toggle__label {
  font-size: var(--tekst-sm);
  font-weight: 600;
}

/* Mobil: menyen er skjult fra første tegning, ikke først når main.js har
   kjørt. Den lå tidligere åpen til `defer`-skriptet rakk å sette hidden, og
   på en treg telefon betød det en header på 316 px som brått krympet: hele
   heroen hoppet oppover. Målt til CLS 0,38 i Lighthouse mobil – kravet er
   under 0,1.

   Åpen tilstand styres av knappens aria-expanded, som JS setter samtidig som
   den fjerner hidden. Uten JS lastes uten-js.css via <noscript>, og den slår
   menyen på igjen – navigasjonen er fortsatt tilgjengelig uten JavaScript. */
.site-nav {
  display: none;
  flex-basis: 100%;
}

.nav-toggle[aria-expanded="true"] ~ .site-nav {
  display: block;
}

.site-nav[hidden] {
  display: none;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-2);
}

.site-nav__list a {
  display: block;
  min-height: var(--trykkflate);
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--tekst-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--radius);
}

.site-nav__list a:hover {
  background: var(--farge-papir-dyp);
}

.site-nav__list a[aria-current="page"] {
  color: var(--farge-jade);
  box-shadow: inset 3px 0 0 var(--farge-jade);
}

@media (min-width: 62em) {
  .nav-toggle {
    display: none;
  }

  /* Desktop: menyen vises alltid, uansett hidden-attributt fra JS */
  .site-nav,
  .site-nav[hidden] {
    display: block;
    flex-basis: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
    padding-block: 0;
  }

  .site-nav__list a {
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
  }

  .site-nav__list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--farge-jade);
  }
}

/* --------------------------------------------------------------------------
   6. Seksjoner
   -------------------------------------------------------------------------- */
/* Luft mellom seksjonene. Heroen satte målestokken: hver seksjon skal få
   stå for seg selv, og tomrommet rundt er en del av uttrykket. */
.section {
  padding-block: var(--sp-8);
}

.section--flate {
  background: var(--farge-papir-dyp);
}

/* Seksjon der innholdet går ut til skjermkanten – ingen .wrap inni */
.section--bleed {
  overflow-x: clip;
}

.section--morke {
  background: var(--farge-nori);
  color: var(--farge-rispapir);
}

.section--morke .kicker {
  color: var(--farge-celadon);
}

.section--morke .muted,
.section--morke .ingress {
  color: var(--farge-celadon);
}

/* Pil-lenken er skrevet for lys flate og arver mørk tekstfarge.
   På nori må den snus, ellers blir den nesten usynlig. */
.section--morke .tilbud__lenke a {
  color: var(--farge-rispapir);
}

.section--morke .tilbud__lenke a:hover {
  color: var(--farge-celadon);
  text-decoration-color: var(--farge-celadon);
}

.section__topp {
  max-width: var(--maks-bredde-tekst);
}

@media (min-width: 48em) {
  .section {
    padding-block: var(--sp-9);
  }
}

/* Seksjonstittelen: kicker, todelt overskrift med kursiv andrelinje, ingress.
   Skalaen er heroens h1 trukket ett hakk ned, så seksjonene starter med
   samme tyngde som siden åpner med. Gjelder alle steder mønsteret brukes:
   .section__topp, bildeseksjonen og fat-oppslaget. Slutt-CTA-en har egen
   skala i seksjon 37. */
.section__topp h2,
.bildeseksjon__tekst h2,
.fat-oppslag__tekst h2 {
  font-size: clamp(2.25rem, 3.4vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.section__topp .ingress,
.bildeseksjon__tekst > p:not(.tilbud__lenke) {
  margin-top: var(--sp-4);
}

.section > .wrap > * + * {
  margin-top: var(--sp-6);
}

/* --------------------------------------------------------------------------
   7. Hero – ett bilde over hele bredden
   -------------------------------------------------------------------------- */
/* Forsidens hero er ett fotografi (hero-siam: sushifat og rød curry på mørk
   bordflate) som fyller hele bredden, med teksten øverst til venstre der
   bildet selv har tom, mørk bordflate. Ingen todeling, ingen flate ved siden
   av bildet: fotografiet er fargen, teksten står i det.

   Tre grep som bærer uttrykket, og som skal videre til resten av siden:
   1. Lys serif i vekt 300 med én kursivlinje i celadon – ingen fet skrift.
   2. En hårstrek (1 px) som eneste dekor mellom overskrift og ingress.
   3. Langsom bevegelse: teksten glir 16 px opp over 1,2 s, bildet zoomer
      umerkelig ut. Ingenting spretter, ingenting gjentar seg.

   Bildet ligger som <img> i .hero__media, ikke som background-image, slik at
   det kan prioriteres av nettleseren og få width/height mot layoutskift.
   Bakgrunnsfargen på .hero er fallback hvis bildet ikke laster – og på mobil
   er den flaten teksten faktisk står på (se under).

   Fargen --farge-foto-morke er hentet fra fotografiets egne skygger. Den
   var en egen farge mens resten av siden var grønnsvart (grønnsvart over et
   varmt matbilde ga grønnskjær der dempingen slapp taket); fra steg 5 er
   hele den mørke familien denne varme svarten, og tokenet er alias for
   nori. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  /* Mobil: minst det som er synlig under headeren, mer om teksten og
     bildet trenger det. svh er den lille viewporten på iOS – den man
     faktisk ser når URL-linja er framme. */
  min-height: 100vh;
  /* Headeren ligger over heroen (steg 6): heroen fyller hele skjermen og
     gir teksten plass under headeren med padding i stedet for å trekke
     headerhøyden fra. */
  padding-top: calc(var(--header-hoyde) + var(--sp-6));
  background: var(--farge-foto-morke);
  color: var(--farge-rispapir);
}

@supports (min-height: 1svh) {
  .hero {
    min-height: 100svh;
  }
}

/* Mobil: teksten står på ren flate øverst, og bildet stiger opp under den.
   Bildet ligger i flyten, ikke absolutt: da får det en høyde det faktisk
   får plass i (minst 72 % av bredden), og heroen vokser heller enn å legge
   en tung demping over hele tekstblokken. Det øverste av bildet tones inn
   fra flaten og skyves opp under knappene med negativ margin, så tekst og
   bilde griper i hverandre uten at teksten står på maten. Mobilutsnittet
   (hero-siam-mobil) er midtpartiet: sushiens øvre ende og skålen. */
.hero__media {
  /* Bildet står først i HTML-en (det skal lastes først), men vises sist.
     Høyde og overlapp er satt så første skjerm på en telefon viser både
     teksten og et godt stykke av maten – ikke tekst på ren flate med
     bildet under bretten. */
  grid-row: 2;
  position: relative;
  z-index: -1;
  align-self: end;
  min-height: 78vw;
  margin-top: -16vw;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
}

.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: 50% 100%;
  /* Umerkelig utzoom ved ankomst. Bare transform – ingen relayout. */
  animation: hero-bilde-inn 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Demping der teksten kan treffe bildet. På mobil er det bare det øverste
   av bildet, under knappene og vurderingen, og masken har tatt det meste. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--farge-foto-morke-rgb), 0.55) 0%,
    rgba(var(--farge-foto-morke-rgb), 0.20) 40%,
    rgba(var(--farge-foto-morke-rgb), 0) 65%
  );
}

.hero > .wrap {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-5);
}

.hero__inner {
  max-width: 34rem;
  animation: hero-tekst-inn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero .status {
  margin-bottom: var(--sp-4);
  /* Pillen bruker bildets mørke, ikke nori – samme grunn som over. */
  background: rgba(var(--farge-foto-morke-rgb), 0.55);
  border-color: rgba(143, 184, 164, 0.45);
}

.hero h1 {
  margin-bottom: 0;
  font-weight: 300;
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Andrelinja i kursiv celadon – heroens eneste fargeaksent i teksten.
   Celadon er laget for nori-flate, ikke for å ligge på et bilde; over
   fotografiet lysnes den til tinten som klarer kontrastkravet. */
.hero h1 em {
  font-style: italic;
  color: var(--farge-celadon-lys);
}

/* Hårstreken: én piksel celadon, kort. Det er all dekor teksten får. */
.hero__strek {
  width: 3.5rem;
  margin: var(--sp-4) 0;
  border: 0;
  border-top: 1px solid var(--farge-celadon);
}

.hero__ingress {
  max-width: 28rem;
  font-size: var(--tekst-lg);
  /* Kjerneinformasjon, ikke sekundærtekst. Full lyshet mot bildet. */
  color: var(--farge-rispapir);
}

.hero__handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Vurdering rett under knappene – sosialt bevis der valget tas */
.hero__vurdering {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--tekst-sm);
  color: var(--farge-rispapir);
}

.hero__stjerner {
  color: var(--farge-celadon);
  font-size: var(--tekst-lg);
  letter-spacing: 0.12em;
}

@keyframes hero-tekst-inn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-bilde-inn {
  from { transform: scale(1.04); }
  to   { transform: none; }
}

/* Nettbrett: mer luft øverst, bildet får mer av høyden */
@media (min-width: 48em) {
  .hero {
    padding-top: calc(var(--header-hoyde) + var(--sp-8));
  }

  .hero__media {
    min-height: 56vw;
    margin-top: -10vw;
  }
}

/* Fra 62em fyller fotografiet hele bredden, og teksten står i bildets egen
   tomme bordflate øverst til venstre. Heroen er høyere enn bildets 2:1, og
   bildet ligger i bunnen: de øverste 18 % er ren flate som bildet tones inn
   fra, akkurat som på mobil. Det gir teksten et rolig felt å starte i, og
   hele motivet – fatet fra venstre kant, skålen, servietten – blir med.

   Høyden er hele skjermen (headeren ligger over), minus en stripe så toppen
   av neste seksjon er synlig uten å scrolle: siden skal ikke se ut som om
   den slutter ved heroen. Nedre grense holder teksten fra å klemmes på lave
   skjermer; øvre grense (68vw) hindrer at stående nettbrett skalerer bildet
   opp så mye at halve motivet beskjæres bort.

   Dempingen er en vannrett gradient fra venstre: tett bak teksten, borte
   ved 56 % av bredden der skålen begynner. På lave skjermer rekker teksten
   ned over fatets nederste biter – det er prisen for lesbar tekst, og den
   er tatt med vilje: en jevn mørk flate bak teksten slår en flekkvis radial
   som forsøker å spare hver bit. */
@media (min-width: 62em) {
  .hero {
    grid-template-rows: none;
    height: clamp(36rem, calc(100vh - 2.5rem), 68vw);
    min-height: 0;
    padding-block: calc(var(--header-hoyde) + var(--sp-8)) var(--sp-8);
  }

  @supports (height: 1svh) {
    .hero {
      height: clamp(36rem, calc(100svh - 2.5rem), 68vw);
    }
  }

  .hero__media {
    grid-row: auto;
    /* Absolutt barn av et grid: med align-self: end og både top og bottom
       satt, krymper boksen til innholdets høyde – altså null. stretch
       lar insettene bestemme høyden. */
    align-self: stretch;
    position: absolute;
    inset: 18% 0 0 0;
    min-height: 0;
    margin-top: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
  }

  .hero__media img {
    /* Ved beskjæring: behold venstre kant (fatet) og bunnen (maten),
       slipp bordflaten øverst og servietten til høyre. */
    object-position: 0% 100%;
  }

  /* Dempingen er bundet til tekstkolonnen, ikke til viewporten: .wrap er
     maks 72rem og sentrert, så kolonnens venstre kant ligger på
     50 % − 36rem når skjermen er bredere enn det. Stoppene regnes derfra.
     På en 1440-skjerm gir det samme kurve som en ren prosentgradient; på
     1920 følger mørket teksten inn mot midten i stedet for å bli igjen
     ved kanten. Under 72rem blir uttrykket negativt og stoppene trekker
     naturlig mot venstre kant. */
  .hero__media::after {
    background:
      /* Ekstra ro bak knappene og vurderingen, som står over fatets
         nederste biter på en vanlig laptopskjerm. Bred og svak – den skal
         ikke leses som en flekk, bare senke maten ett hakk der. */
      radial-gradient(55% 40% at calc(50% - 36rem + 8rem) 62%,
        rgba(var(--farge-foto-morke-rgb), 0.50) 0%,
        rgba(var(--farge-foto-morke-rgb), 0) 100%),
      linear-gradient(
        90deg,
        rgba(var(--farge-foto-morke-rgb), 0.82) 0,
        rgba(var(--farge-foto-morke-rgb), 0.68) calc(50% - 36rem + 12rem),
        rgba(var(--farge-foto-morke-rgb), 0.32) calc(50% - 36rem + 28rem),
        rgba(var(--farge-foto-morke-rgb), 0) calc(50% - 36rem + 40rem)
      );
  }

  .hero__inner {
    max-width: 32rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 4.6vw, 4.25rem);
  }

  .hero .status {
    margin-bottom: var(--sp-5);
  }

  .hero__handlinger {
    margin-top: var(--sp-6);
  }

  /* Pillen står på jevn demping og trenger ingen egen tung flate */
  .hero .status {
    background: rgba(143, 184, 164, 0.12);
  }
}

/* Ultrabred: teksten skal ikke drive ut mot venstre kant når wrap-en
   sentreres – bildet er fortsatt full bredde, og bordflaten vokser. */
@media (min-width: 100em) {
  .hero__inner {
    max-width: 36rem;
  }
}

/* Kompakt hero for undersider */
.sidetopp {
  padding-block: var(--sp-6) var(--sp-5);
  background: var(--farge-papir-dyp);
  border-bottom: 1px solid var(--farge-kant);
}

.sidetopp h1 {
  margin-bottom: var(--sp-3);
}

@media (min-width: 48em) {
  .sidetopp {
    padding-block: var(--sp-7) var(--sp-6);
  }
}

/* --------------------------------------------------------------------------
   8. Kort og rutenett
   -------------------------------------------------------------------------- */
.kort-liste {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.kort {
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--farge-tekst);
}

.kort h3 {
  margin-bottom: var(--sp-3);
}

.kort > * + * {
  margin-top: var(--sp-3);
}

.kort__lenke {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-weight: 600;
  color: var(--farge-jade);
}

.kort__lenke a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (min-width: 48em) {
  .kort-liste {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}

@media (min-width: 62em) {
  .kort-liste--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* To spalter: tekst ved siden av faktaboks */
.to-spalter {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

/* Avstand mellom blokkene i tekstspalten */
.to-spalter > div > * + * {
  margin-top: var(--sp-4);
}

.to-spalter h2:not(:first-child) {
  margin-top: var(--sp-7);
}

/* Stegene får full bredde når de ligger inni en spalte */
.to-spalter .steg {
  grid-template-columns: 1fr;
}

@media (min-width: 62em) {
  .to-spalter {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-8);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   9. Knapper
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--trykkflate);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--tekst-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--farge-chili);
  color: var(--farge-rispapir);
}

.btn--primary:hover {
  background: var(--farge-chili-mork);
}

.btn--secondary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.btn--secondary:hover {
  background: var(--farge-papir-dyp);
  color: var(--farge-tekst);
}

.btn--full {
  width: 100%;
}

/* --------------------------------------------------------------------------
   10. Meny (retter og priser)
   -------------------------------------------------------------------------- */

/* Ankerlenker øverst på menysidene */
.ankermeny-wrap {
  padding-bottom: var(--sp-2);
}

.ankermeny {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.ankermeny a {
  display: inline-flex;
  align-items: center;
  min-height: var(--trykkflate);
  padding: var(--sp-2) var(--sp-4);
  background: var(--farge-rispapir);
  border: 1px solid var(--farge-kant);
  border-radius: 999px;
  font-size: var(--tekst-sm);
  font-weight: 600;
  text-decoration: none;
}

.ankermeny a:hover {
  border-color: var(--farge-jade);
  color: var(--farge-jade);
}

/* Menyen holdes smalere enn sidebredden så prisen ikke havner langt
   fra rettnavnet på store skjermer. */
.meny-gruppe {
  max-width: 56rem;
}

.meny-gruppe + .meny-gruppe {
  margin-top: var(--sp-7);
}

/* Bredden på én priskolonne. Samme mål brukes av kolonneoverskriften og av
   hver rad, ellers står ikke tallene under sin egen etikett. */
:root {
  --priskolonne: 4.25rem;
}

.meny-gruppe__topp {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--farge-kant);
}

/* Kolonneoverskriften over prisene. Ligger til høyre, i samme rutenett som
   prisparet i hver rad. */
.prisnokkel {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, var(--priskolonne));
  gap: var(--sp-3);
  font-size: var(--tekst-sm);
  text-align: right;
  white-space: nowrap;
}

.prisnokkel__ta {
  color: var(--farge-chili);
}

/* Prisparet i raden: spise her, så takeaway. Faste kolonner gjør at tallene
   står loddrett under hverandre gjennom hele menyen. */
.meny-rad__priser {
  display: grid;
  grid-template-columns: repeat(2, var(--priskolonne));
  gap: var(--sp-3);
  text-align: right;
}

/* Takeawayprisen i signalfargen – det er den som er lavere, og fargen skiller
   de to tallene fra hverandre uten at raden trenger en ekstra ledetekst. */
.meny-rad__pris--ta {
  color: var(--farge-chili);
}

.meny-liste {
  margin-top: var(--sp-4);
}

.meny-rad {
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--farge-kant);
}

.meny-rad__topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.meny-rad__navn {
  font-family: var(--font-overskrift);
  font-size: var(--tekst-lg);
}

.meny-rad__pris {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.meny-rad__beskrivelse {
  margin-top: var(--sp-2);
  max-width: 46rem;
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
}

/* Rettnummer fra den trykte menyen, så gjestene kan bestille på nummer */
.meny-rad__nr {
  color: var(--farge-tekst-dempet);
  font-variant-numeric: tabular-nums;
}

/* Styrkegrad. Symbolet er dekorativt – teksten leses av skjermleser */
.meny-rad__styrke {
  margin-left: var(--sp-2);
  font-size: var(--tekst-sm);
  white-space: nowrap;
}

/* Allergener per rett. Mørkere enn beskrivelsen: dette er helseinformasjon
   og skal ikke være det svakeste elementet i raden. */
.meny-rad__allergener {
  margin-top: var(--sp-2);
  color: var(--farge-tekst);
  font-size: var(--tekst-sm);
}

.meny-rad__merkelapp {
  font-weight: 700;
}

/* Proteinvalgene på én linje. Samme form som allergenlinja – merkelapp i
   halvfet, innhold i vanlig vekt – men i full tekstfarge: dette er et valg
   gjesten skal ta, ikke en fotnote. */
.meny-rad__valg {
  margin-top: var(--sp-2);
  color: var(--farge-tekst);
  font-size: var(--tekst-sm);
}

/* Varianter med egen pris (kylling, biff, scampi …) */
.meny-varianter {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--farge-kant);
  list-style: none;
}

.meny-variant {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-1);
  font-size: var(--tekst-sm);
}

.meny-variant__strek {
  flex: 1 1 auto;
  height: 1px;
  margin-bottom: 0.3em;
  border-bottom: 1px dotted var(--farge-kant);
}

.meny-variant__pris {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variantradene bruker samme priskolonner som rettene, så alle tall i
   gruppen står i samme to loddrette linjer. */
.meny-rad__priser--variant {
  flex: 0 0 auto;
  font-size: var(--tekst-sm);
}

/* Merking av pris som ikke er lest av den trykte menyen */
.meny-rad__forbehold {
  display: block;
  color: var(--farge-jade);
  font-size: var(--tekst-sm);
  font-weight: 400;
  text-align: right;
}

/* Tekst kun for skjermleser. Brukes av styrkegraden. */
.visuelt-skjult {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Notis om allergener, priser og forbehold */
.notis {
  padding: var(--sp-4);
  background: var(--farge-papir-dyp);
  border-left: 3px solid var(--farge-celadon);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--tekst-sm);
  color: var(--farge-tekst-dempet);
}

.notis p {
  max-width: none;
}

/* --------------------------------------------------------------------------
   11. Faktaliste (åpningstider, kontaktinfo)
   --------------------------------------------------------------------------
   Samme grep som prisradene i menyen: etikett til venstre, verdi til høyre,
   hårfin strek mellom radene. Ingen ramme, ingen bakgrunn, ingen radius –
   det var den grå boksen som gjorde at disse sidene ikke leste som menysiden.
   -------------------------------------------------------------------------- */
.fakta {
  padding-top: var(--sp-4);
  /* Hårstrek – den eneste streken på nettstedet er 1 px */
  border-top: 1px solid var(--farge-tekst);
}

/* Overskriften er en etikett over en liste, ikke en seksjonstittel */
.fakta h2 {
  font-size: var(--tekst-lg);
  font-weight: 500;
}

.fakta > * + * {
  margin-top: var(--sp-4);
}

.fakta h2:not(:first-child) {
  margin-top: var(--sp-6);
}

.fakta__liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 0;
  font-size: var(--tekst-base);
}

.fakta__liste dt,
.fakta__liste dd {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--farge-kant);
}

/* Første rad står uten strek – overskriften over gjør den jobben */
.fakta__liste > dt:first-child,
.fakta__liste > dt:first-child + dd {
  border-top: 0;
  padding-top: 0;
}

.fakta__liste dt {
  font-weight: 600;
}

.fakta__liste dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. Nummererte steg
   -------------------------------------------------------------------------- */
.steg {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  counter-reset: steg;
}

.steg__punkt {
  counter-increment: steg;
  padding-top: var(--sp-4);
  /* 1px: stegene er punkter i én liste, ikke tre separate blokker. Den
     tunge 2px-streken er reservert blokkstart (.fakta, .kort). */
  border-top: 1px solid var(--farge-kant);
}

/* Samme talltypografi som .steg-rad på forsiden: Fraunces i lys vekt, jade,
   med ledende null. De to komponentene har ulik layout med vilje – forsiden
   har tre steg på tvers av full bredde, catering har dem stablet i en smal
   spalte – men tallene skal se ut som samme familie. */
.steg__punkt::before {
  content: counter(steg, decimal-leading-zero);
  display: block;
  margin-bottom: var(--sp-3);
  font-family: var(--font-overskrift);
  font-weight: 300;
  font-size: 3.25rem;
  line-height: 1;
  /* Celadon, som alle tall på nettstedet. Tallet er dekor (aria-hidden
     eller counter) – teksten under bærer innholdet. */
  color: var(--farge-celadon);
}

.steg__punkt p {
  margin-top: var(--sp-2);
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
}

@media (min-width: 48em) {
  .steg {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   13. Spørsmål og svar
   -------------------------------------------------------------------------- */
.faq {
  max-width: var(--maks-bredde-smal);
}

.faq__punkt {
  border-bottom: 1px solid var(--farge-kant);
}

.faq__punkt summary {
  display: flex;
  align-items: center;
  min-height: var(--trykkflate);
  padding-block: var(--sp-3);
  padding-right: var(--sp-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__punkt summary::-webkit-details-marker {
  display: none;
}

/* Pluss/minus tegnet i CSS */
.faq__punkt summary::after {
  content: "+";
  margin-left: auto;
  font-size: var(--tekst-xl);
  line-height: 1;
  color: var(--farge-jade);
}

.faq__punkt[open] summary::after {
  content: "\2212";
}

.faq__punkt p {
  padding-bottom: var(--sp-4);
  color: var(--farge-tekst-dempet);
}

/* --------------------------------------------------------------------------
   14. Bildeplass
   Reservert plass til ekte foto. Fast forhold hindrer layouthopp (CLS).
   -------------------------------------------------------------------------- */
.bildeplass {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--farge-kant);
  border-radius: var(--radius-stor);
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
  text-align: center;
}

/* --------------------------------------------------------------------------
   15. Knapperad
   -------------------------------------------------------------------------- */
/* Knappene i en CTA – brukes i slutt-CTA-en på menysiden og 404. */
.cta-band__handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --------------------------------------------------------------------------
   16. Sticky CTA (kun mobil)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--farge-rispapir);
  border-top: 1px solid var(--farge-kant);
}

.sticky-cta .btn {
  flex: 1 1 0;
  padding-inline: var(--sp-3);
  font-size: var(--tekst-sm);
}

@media (min-width: 48em) {
  .sticky-cta {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--sp-7) var(--sp-6);
  /* Hårfin strek slik at footeren skiller seg fra en mørk seksjon over */
  border-top: 1px solid rgba(244, 239, 231, 0.14);
  background: var(--farge-nori);
  color: var(--farge-rispapir);
  font-size: var(--tekst-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

.site-footer__heading {
  margin-bottom: var(--sp-3);
  font-size: var(--tekst-base);
  /* Serif i vekt 300 på 16 px blir for tynn – etiketter holder 500 */
  font-weight: 500;
  letter-spacing: 0.02em;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.site-footer a {
  min-height: var(--trykkflate);
  display: inline-flex;
  align-items: center;
}

.site-footer .muted {
  color: var(--farge-celadon);
}

.site-footer__bunn {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(244, 239, 231, 0.18);
  color: var(--farge-celadon);
}

/* Mobil: footeren er sist på siden og skal ikke bli en egen lang side.
   Luft og overskriftsmarger strammes inn, og lenkelista går i to spalter.
   Trykkflatene beholder sine 44 px – det er høyden mellom dem som kuttes. */
@media (max-width: 47.99em) {
  .site-footer {
    padding-block: var(--sp-5) var(--sp-4);
  }

  .site-footer__inner {
    gap: var(--sp-4);
  }

  .site-footer__heading {
    margin-bottom: var(--sp-1);
  }

  .site-footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sp-4);
  }

  .site-footer__bunn {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
  }
}

@media (min-width: 48em) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer a {
    min-height: 0;
    display: inline;
  }

  .site-footer__links {
    gap: var(--sp-2);
  }
}


/* --------------------------------------------------------------------------
   18. Webfont – Fraunces, subsettet og servert lokalt
   -------------------------------------------------------------------------- */
/* Variabel font med vektakse 300–600. Subsettet til norsk tegnsett, så
   begge filene til sammen er under 40 KB. Ingen kall til Google Fonts. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var.woff2?v=1") format("woff2-variations");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic-var.woff2?v=1") format("woff2-variations");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   19. Statuspille – åpent eller stengt akkurat nå
   -------------------------------------------------------------------------- */
/* Progressiv forbedring: HTML-en inneholder en statisk åpningstid.
   main.js bytter teksten til sanntidsstatus. Uten JS blir pillen stående
   med den statiske teksten – den forsvinner aldri. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(143, 184, 164, 0.45);
  border-radius: 999px;
  background: rgba(var(--farge-nori-rgb), 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--tekst-sm);
  color: var(--farge-rispapir);
}

/* På lys sidetopp må pillen snus: mørk tekst på lys flate.
   Uten dette blir lys tekst på halvgjennomsiktig mørk langt under AA. */
.sidetopp .status {
  background: rgba(var(--farge-nori-rgb), 0.05);
  border-color: var(--farge-kant);
  color: var(--farge-tekst);
}

.status__prikk {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--farge-celadon);
}

.status--apen .status__prikk {
  background: #5fd18b;
  animation: status-puls 2.4s ease-in-out infinite;
}

.status--stengt .status__prikk {
  background: var(--farge-celadon);
  opacity: 0.6;
}

@keyframes status-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 209, 139, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(95, 209, 139, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status--apen .status__prikk {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   22. Menyrad – oppdatert rutenett
   -------------------------------------------------------------------------- */
/* Prikkelinjen mellom navn og pris er fjernet. Den er en trykt konvensjon
   og gir ingen mening på skjerm. Rutenettet holder kolonnene på plass. */
.meny-rad__topp {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: baseline;
  gap: var(--sp-2);
}

.meny-rad__nr {
  font-family: var(--font-overskrift);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--farge-tekst-dempet);
}

.meny-rad__navn {
  font-family: var(--font-overskrift);
  font-weight: 600;
  font-size: var(--tekst-lg);
}

.meny-rad__pris {
  font-family: var(--font-overskrift);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Retter uten nummer skal ikke få en tom kolonne */
.meny-rad__topp > .meny-rad__navn:first-child {
  grid-column: 1 / 3;
}

.meny-rad__beskrivelse,
.meny-rad__allergener,
.meny-varianter {
  grid-column: 1 / -1;
}

/* Styrkegrad som punkt etter rettnavnet. aria-label bærer betydningen. */
.meny-rad__styrke {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: var(--sp-2);
  border-radius: 50%;
  background: var(--farge-chili);
  vertical-align: 0.15em;
}

.meny-rad__styrke + .meny-rad__styrke {
  margin-left: 0.2rem;
}

/* Allergener: egen linje, mindre, men fortsatt over AA-kravet */
.meny-rad__allergener {
  margin-top: var(--sp-2);
  color: #606c65;   /* justert fra #7c8a82: den lå på 3,29:1, godt under AA */
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   23. Sticky CTA – vektet mot ringeknappen
   -------------------------------------------------------------------------- */
/* Ikke 50/50. Ringeknappen er bredere slik at tommelen treffer riktig
   knapp uten å måtte sikte. */
.sticky-cta {
  background: var(--farge-nori);
  border-top: 1px solid rgba(143, 184, 164, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Under 48em finnes den klebrige linja, og den er allerede chili. Da ville
   slutt-CTA-ens knapp vært en nummer to av nøyaktig samme røde ringeknapp på
   siste skjerm. Den gjøres til omriss så lenge linja er der, og får chili
   tilbake fra 48em, der linja er borte. */
.cta-band__handlinger .btn--primary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

@media (min-width: 48em) {
  .cta-band__handlinger .btn--primary {
    background: var(--farge-chili);
    color: var(--farge-rispapir);
    border-color: transparent;
  }
}

/* Settes av main.js mens hero-knappene er synlige – da er linja overflødig.
   Uten JS settes attributtet aldri, og linja står som før. */
.sticky-cta[data-skjult="true"] {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.sticky-cta .btn--primary {
  flex: 1 1 58%;
}

.sticky-cta .btn--secondary {
  flex: 1 1 32%;
  color: var(--farge-rispapir);
  border-color: rgba(143, 184, 164, 0.55);
}

/* --------------------------------------------------------------------------
   24. Header – typografien i ordmerket
   --------------------------------------------------------------------------
   Selve oppsettet ligger i seksjon 5, og avsløringen i seksjon 39. Her står
   bare vekten og sperringen. Denne seksjonen het tidligere «rent tekstmerke»
   og la .logo i kolonne – det er nå .logo__ord som gjør, siden lenken selv
   er en vannrett rekke: merke · strek · ordmerke. */
.logo__text {
  font-weight: 600;
}

.logo__sted {
  letter-spacing: 0.22em;
}


/* --------------------------------------------------------------------------
   27. Hero og header – strammere komposisjon
   -------------------------------------------------------------------------- */
/* Bestillingsknapp i headeren. Skjules på mobil, der sticky CTA gjør jobben
   og plassen trengs til logo og menyknapp. */
.site-header__cta {
  display: none;
}

@media (min-width: 62em) {
  .site-header__cta {
    display: inline-flex;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--tekst-sm);
  }
}

/* Telefonikonet i knappen. Tegnet inline, ingen ikonfont. */
.btn__ikon {
  flex: 0 0 auto;
  margin-right: var(--sp-2);
}

/* --------------------------------------------------------------------------
   28. Tilbudsliste – nummererte spalter
   -------------------------------------------------------------------------- */
/* Erstatter kortrutenettet på forsiden. Nummerert liste, så rekkefølgen
   også finnes for skjermlesere og ikke bare visuelt. */
.tilbud {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tilbud__punkt > * + * {
  margin-top: var(--sp-3);
}

/* Tallet. Tynn Fraunces i celadon, med kort strek under. */
.tilbud__nr {
  display: block;
  font-family: var(--font-overskrift);
  font-weight: 300;
  font-size: 3rem;
  line-height: 1;
  color: var(--farge-celadon);
}

.tilbud__nr::after {
  content: "";
  display: block;
  width: 2.25rem;
  margin-top: var(--sp-3);
  border-top: 1px solid var(--farge-celadon);
}

.tilbud__punkt h3 {
  margin-top: var(--sp-5);
}

.tilbud__punkt p {
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
  max-width: 22rem;
}

/* Lenken står nederst i sin rad, så alle fire ligger på samme linje */
.tilbud__punkt .tilbud__lenke {
  align-self: end;
}

/* Lenken understrekes permanent – den er handlingen i hvert punkt */
.tilbud__lenke {
  margin-top: var(--sp-4);
}

.tilbud__lenke a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--trykkflate);
  color: var(--farge-tekst);
  font-size: var(--tekst-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.tilbud__lenke a:hover {
  color: var(--farge-jade);
  text-decoration-color: var(--farge-celadon);
}

/* Pilen flytter seg litt på hover – eneste bevegelse i seksjonen */
.tilbud__pil {
  transition: transform 0.15s ease;
}

.tilbud__lenke a:hover .tilbud__pil {
  transform: translateX(3px);
}

/* Kursiv celadon i overskriften, som i hero */
.section__topp h2 em {
  font-style: italic;
  color: var(--farge-jade);
}

@media (min-width: 48em) {
  .tilbud {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-6);
  }
}

/* Fra 48em deler punktene radene sine (subgrid): tall, tittel, tekst og
   lenke står på samme linje i alle spaltene, selv om én tittel bryter over
   to linjer. Uten subgrid-støtte faller det tilbake til vanlig rutenett –
   fortsatt riktig, bare ikke linjert. */
@media (min-width: 62em) {
  .tilbud {
    grid-template-columns: repeat(4, 1fr);
    /* Radavstanden er nå avstanden mellom tall, tittel, tekst og lenke
       inne i hvert punkt – ikke mellom punktene (de står på én rad). */
    gap: var(--sp-3) var(--sp-7);
  }

  .tilbud__punkt {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  /* Tittelen henger ned mot teksten sin, ikke opp mot tallet: der én
     tittel bryter over to linjer, får de andre luften over seg. */
  .tilbud__punkt h3 {
    align-self: end;
  }

  /* Hårfine skiller midt i mellomrommet, tegnet som pseudoelement: da har
     alle fire spaltene nøyaktig samme bredde. Med padding + border på de
     tre siste ble den første spalten 32 px bredere enn resten, og teksten
     brøt ulikt. */
  .tilbud__punkt {
    position: relative;
  }

  .tilbud__punkt + .tilbud__punkt::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * var(--sp-7) / 2);
    border-left: 1px solid var(--farge-kant);
  }
}


/* --------------------------------------------------------------------------
   29. Bildeseksjon – bilde og tekst side om side
   -------------------------------------------------------------------------- */
/* Samme grep som tilbudslisten: kicker, todelt overskrift med kursiv
   andrelinje, brødtekst og understreket lenke med pil.

   Bildet går ut til skjermkanten (steg 2 i DESIGNRETNING.md). Seksjonen
   ligger derfor uten .wrap, og rutenettet regner selv ut hvor wrap-kanten
   er: de ytre kolonnene tar det som blir til overs når wrap-innholdet
   (--maks-bredde minus wrap-padding) er sentrert. Da står teksten på
   nøyaktig samme linje som seksjonene over og under, mens bildet fyller
   alt fra venstre skjermkant til 47 % av wrap-bredden – samme bredde som
   før, bare uten den tomme margen til venstre. Under 62em er bildet
   kant til kant og teksten får wrap-en sin padding. */
.bildeseksjon {
  display: grid;
  gap: var(--sp-6);
}

.bildeseksjon__bilde img {
  width: 100%;
  height: auto;
  /* Mobil: kant til kant, beskåret til 4:5 så det ikke tar hele skjermen */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.bildeseksjon__tekst {
  width: 100%;
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.bildeseksjon__tekst > * + * {
  margin-top: var(--sp-4);
}

.bildeseksjon__tekst h2 {
  margin-top: var(--sp-3);
}

.bildeseksjon__tekst h2 em {
  font-style: italic;
  color: var(--farge-jade);
}

.bildeseksjon__tekst p {
  color: var(--farge-tekst-dempet);
  max-width: 30rem;
}

.bildeseksjon__tekst .tilbud__lenke {
  margin-top: var(--sp-6);
}

@media (min-width: 48em) {
  .bildeseksjon__tekst {
    padding-inline: var(--sp-6);
  }
}

@media (min-width: 62em) {
  .bildeseksjon {
    --wrap-innhold: calc(var(--maks-bredde) - 2 * var(--sp-6));
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, calc(var(--wrap-innhold) * 0.47))
      var(--sp-7)
      minmax(0, calc(var(--wrap-innhold) * 0.53 - var(--sp-7)))
      minmax(var(--sp-6), 1fr);
    gap: 0;
    align-items: center;
  }

  .bildeseksjon__bilde {
    grid-column: 1 / 3;
  }

  .bildeseksjon__bilde img {
    /* Høyden styres av skjermen, ikke av bildets 3:4 – ellers blir det en
       søyle på nesten tusen piksler ved siden av fire linjer tekst. */
    height: clamp(28rem, 44vw, 40rem);
    aspect-ratio: auto;
    object-position: 50% 45%;
  }

  .bildeseksjon__tekst {
    grid-column: 4;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   30. Stegrad – nummererte steg på én linje
   -------------------------------------------------------------------------- */
/* Samme familie som tilbudslisten, men streken går vannrett UT fra tallet
   i stedet for under det. Den binder stegene sammen til én bevegelse
   framover, i stedet for å ramme inn hvert steg for seg. */
.steg-rad {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
  padding: 0;
  list-style: none;
}

.steg-rad__punkt > * + * {
  margin-top: var(--sp-3);
}

/* Tallet og streken deler linje */
.steg-rad__nr {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-overskrift);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: var(--farge-celadon);
}

.steg-rad__nr::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--farge-celadon);
}

/* Siste steg trenger ingen strek videre – der stopper rekken */
.steg-rad__punkt:last-child .steg-rad__nr::after {
  opacity: 0.45;
}

.steg-rad__punkt h3 {
  margin-top: var(--sp-3);
}

.steg-rad__punkt p {
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
  max-width: 22rem;
}

@media (min-width: 62em) {
  .steg-rad {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}


/* --------------------------------------------------------------------------
   31. Fat – utvalgte retter på forsiden
   -------------------------------------------------------------------------- */
/* Egen komponent, ikke menyradene fra menysidene. De er bygget for lange
   lister med rettnummer og allergener; her er det fire utvalgte retter. */
.fat {
  display: grid;
  gap: 0;
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
  max-width: 52rem;
}

.fat__punkt {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--farge-kant);
}

.fat__punkt:last-child {
  border-bottom: 1px solid var(--farge-kant);
}

.fat__topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}

.fat__pris {
  flex: 0 0 auto;
  font-family: var(--font-overskrift);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fat__punkt p {
  margin-top: var(--sp-2);
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
  max-width: 34rem;
}

.fat__forbehold {
  margin-top: var(--sp-4);
}

/* Lenken i forbeholdet manglet trykkflate – den målte 17 px på mobil */
.fat__forbehold a {
  display: inline-flex;
  align-items: center;
  min-height: var(--trykkflate);
}

/* Takeaway er hovedmålet og skal veie mer enn de tre andre */
@media (min-width: 62em) {
  .tilbud {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}


/* --------------------------------------------------------------------------
   32. Spor – to likestilte innganger til menyen
   -------------------------------------------------------------------------- */
.spor {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: 0;
  list-style: none;
}

.spor__kort a {
  position: relative;
  display: block;
  height: 10rem;
  overflow: hidden;
  border-radius: var(--radius-stor);
  text-decoration: none;
  color: var(--farge-rispapir);
}

.spor__kort img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay som holder teksten lesbar uansett hva bildet inneholder */
.spor__kort a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--farge-nori-rgb), 0.92) 0%,
    rgba(var(--farge-nori-rgb), 0.72) 55%,
    rgba(var(--farge-nori-rgb), 0.35) 100%);
}

.spor__innhold {
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--sp-5);
}

.spor__merke {
  display: block;
  font-family: var(--font-overskrift);
  font-size: var(--tekst-2xl);
  font-weight: 500;
}

.spor__antall {
  display: block;
  margin-top: var(--sp-1);
  color: var(--farge-celadon);
  font-size: var(--tekst-sm);
}

.spor__tekst {
  display: block;
  margin-top: var(--sp-2);
  max-width: 20rem;
  font-size: var(--tekst-sm);
}

/* --------------------------------------------------------------------------
   33. Populært øverst på menysiden
   -------------------------------------------------------------------------- */
.populaert__topp {
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   34. Ankermeny med grupper
   -------------------------------------------------------------------------- */
.ankermeny__merke {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--farge-tekst-dempet);
}

.ankermeny__merke:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   35. Menyfilter
   -------------------------------------------------------------------------- */
.filter {
  margin-block: var(--sp-5);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--farge-kant);
}

.filter__ledetekst {
  margin-bottom: var(--sp-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--farge-tekst-dempet);
}

.filter__knapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.filter__knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--trykkflate);
  padding: var(--sp-2) var(--sp-4);
  background: var(--farge-rispapir);
  border: 1px solid var(--farge-kant);
  border-radius: 999px;
  font-size: var(--tekst-sm);
  cursor: pointer;
}

.filter__knapp:hover {
  border-color: var(--farge-jade);
}

.filter__knapp[aria-pressed="true"] {
  background: var(--farge-nori-lys);
  border-color: var(--farge-nori-lys);
  color: var(--farge-rispapir);
}

.filter__tall {
  color: var(--farge-tekst-dempet);
  font-variant-numeric: tabular-nums;
}

.filter__knapp[aria-pressed="true"] .filter__tall {
  color: var(--farge-celadon);
}

/* Telleren har fast høyde selv når teksten skifter, så filtrering
   aldri flytter innholdet under seg. */
.filter__teller {
  min-height: 1.5rem;
  margin-top: var(--sp-3);
  font-size: var(--tekst-sm);
  color: var(--farge-tekst-dempet);
}

.filter__teller--aktiv {
  cursor: pointer;
  color: var(--farge-jade);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (min-width: 48em) {
  .spor {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

  .spor__kort a {
    height: 14rem;
  }
}


/* --------------------------------------------------------------------------
   36. Fat-oppslag – editorial to-spalter med dominant bilde
   -------------------------------------------------------------------------- */
/* Asymmetrisk 55/45 på desktop: bildet bærer venstre side i full høyde,
   uten radius, skygge eller kortramme. Teksten ligger rett på nori.
   Mobil: bildet på toppen i sin egen høyde, teksten under. */
.fat-oppslag {
  display: grid;
  gap: var(--sp-6);
}

.fat-oppslag__bilde img {
  display: block;
  width: 100%;
  height: auto;
}

.fat-oppslag__tekst h2 {
  margin-top: var(--sp-3);
}

/* Andrelinja i celadon kursiv – samme grep som i hero */
.fat-oppslag__tekst h2 em {
  font-style: italic;
  color: var(--farge-celadon);
}

/* Seksjonen har strammere luft enn resten: bildet skal gjøre jobben.
   Flaten er fotomørket (regel 1 i DESIGNRETNING.md: der et fotografi ligger
   på mørk flate, er flaten bildets egen mørke). Slutt-CTA-en rett under er
   samme mørke, så den mørke passasjen nederst på forsiden er ett stykke.
   Footeren er fortsatt nori til undersidene tas – der møter den bildet i
   slutt-CTA-en, ikke en flate, og det holder inntil videre. */
.section--oppslag {
  padding-block: var(--sp-8);
  background: var(--farge-foto-morke);
}

/* Bildets kanter tones inn i flaten på alle fire sider, så fatet ligger
   på bordflaten i stedet for i en avgrenset firkant. To masker som
   krysses: en vannrett og en loddrett. Uten mask-composite-støtte gjelder
   den siste alene – fortsatt en myk kant, bare på to sider. */
.fat-oppslag__bilde picture {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}

@media (min-width: 62em) {
  .fat-oppslag {
    grid-template-columns: 55% 1fr;
    gap: 0;
    align-items: stretch;
  }

  /* Bildet fyller hele radhøyden. picture ligger absolutt, slik at
     radhøyden bestemmes av tekstspalta og aldri av bildets egenhøyde. */
  .fat-oppslag__bilde {
    position: relative;
    min-height: 30rem;
  }

  .fat-oppslag__bilde picture {
    position: absolute;
    inset: 0;
    display: block;
  }

  .fat-oppslag__bilde img {
    height: 100%;
    /* contain, ikke cover: fatet fyller bildet nesten kant til kant, og
       cover ville skåret i tallerkenen. Resten av cellen er flaten. */
    object-fit: contain;
  }

  .fat-oppslag__tekst {
    padding-left: var(--sp-7);
  }
}

/* Fargeoverstyringene for fat-lista på mørk flate – alt samlet her.
   Strukturen (.fat__topp, .fat__pris) er uendret fra lys variant. */
.fat--editorial {
  margin-top: var(--sp-5);
  max-width: none;
}

.fat--editorial .fat__punkt {
  border-top-color: rgba(143, 184, 164, 0.28);
}

.fat--editorial .fat__punkt:last-child {
  border-bottom-color: rgba(143, 184, 164, 0.28);
}

.fat--editorial .fat__punkt h3,
.fat--editorial .fat__pris {
  color: var(--farge-rispapir);
}

/* Celadon på nori måler 8,8:1 – godt over AA for brødtekst */
.fat--editorial .fat__punkt p {
  color: var(--farge-celadon);
}

/* --------------------------------------------------------------------------
   37. Fotoflate – heroens grep som gjenbrukbart mønster
   -------------------------------------------------------------------------- */
/* Ett fotografi over hele bredden, teksten i bildets mørke, dempingen
   bundet til tekstkolonnen. Oppbygningen er heroens (seksjon 7) – les
   begrunnelsene der. Brukes av slutt-CTA-en på forsiden (.slutt) og
   sidetoppen på undersidene (.sidetopp--bilde). Hver av dem setter bare
   høyde, luft og egen typografi; alt om bildet, masken og dempingen
   ligger her, ett sted.

   Mobil: teksten på ren flate øverst, bildet i flyten under, tonet inn fra
   flaten og skjøvet opp bak det siste i teksten. Desktop: bildet fyller
   seksjonen, teksten står i det. */
.fotoflate {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--farge-nori);
  color: var(--farge-rispapir);
}

.fotoflate > .wrap {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding-bottom: var(--sp-5);
}

.fotoflate__media {
  grid-row: 2;
  position: relative;
  z-index: -1;
  align-self: end;
  min-height: 60vw;
  margin-top: -12vw;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
}

.fotoflate__media picture,
.fotoflate__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.fotoflate__media img {
  object-fit: cover;
  object-position: 50% 100%;
}

.fotoflate__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--farge-nori-rgb), 0.55) 0%,
    rgba(var(--farge-nori-rgb), 0.20) 40%,
    rgba(var(--farge-nori-rgb), 0) 65%
  );
}

@media (min-width: 48em) {
  .fotoflate__media {
    min-height: 48vw;
    margin-top: -8vw;
  }
}

/* Desktop: bildet fyller seksjonen. Dempingen er bundet til tekstkolonnen,
   ikke viewporten – se hero for regnestykket (50 % − 36rem er wrap-kanten). */
@media (min-width: 62em) {
  .fotoflate {
    grid-template-rows: none;
    align-content: center;
  }

  .fotoflate > .wrap {
    padding-bottom: 0;
  }

  .fotoflate__media {
    grid-row: auto;
    /* Absolutt barn av et grid med align-self: end og både top og bottom
       satt krymper til null høyde – stretch lar insettene bestemme. */
    align-self: stretch;
    position: absolute;
    inset: 0;
    min-height: 0;
    margin-top: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .fotoflate__media img {
    object-position: 50% 50%;
  }

  .fotoflate__media::after {
    background: linear-gradient(
      90deg,
      rgba(var(--farge-nori-rgb), 0.9) 0,
      rgba(var(--farge-nori-rgb), 0.8) calc(50% - 36rem + 16rem),
      rgba(var(--farge-nori-rgb), 0.4) calc(50% - 36rem + 32rem),
      rgba(var(--farge-nori-rgb), 0) calc(50% - 36rem + 44rem)
    );
  }
}

/* ---- Slutt-CTA på forsiden ----
   Siden åpner med fotografiet og slutter med det: samme bilde i et tettere
   utsnitt, skalert opp og forankret nederst til høyre, så skålen og
   spisepinnene bærer det – et detaljutsnitt av heroen, ikke heroen om
   igjen. De fire praktiske faktaene (åpent, siste bestilling, adresse,
   veibeskrivelse) står som én hårstrek-linje under knappene. */
.slutt {
  padding-top: var(--sp-8);
}

.slutt__inner {
  max-width: 34rem;
}

.slutt h2 {
  font-size: clamp(2.5rem, 4vw + 1rem, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.slutt__ingress {
  margin-top: var(--sp-3);
  font-size: var(--tekst-lg);
}

.slutt__handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Faktalinja: hårstrek over, celadon tekst, lenke i lys. Stablet på mobil,
   én linje med diskrete skiller fra 48em. */
.slutt__fakta {
  display: flex;
  flex-direction: column;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-4) 0 0;
  list-style: none;
  border-top: 1px solid rgba(143, 184, 164, 0.35);
  font-size: var(--tekst-sm);
  color: var(--farge-celadon-lys);
}

.slutt__fakta li {
  display: flex;
  align-items: center;
  min-height: var(--trykkflate);
}

.slutt__fakta a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--trykkflate);
  color: var(--farge-rispapir);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

.slutt__fakta a:hover {
  color: var(--farge-celadon-lys);
}

.slutt__fakta a:hover .tilbud__pil {
  transform: translateX(3px);
}

/* Pil inne i en knapp trenger sin egen luft – knappen har ingen gap */
.btn .tilbud__pil {
  margin-left: var(--sp-2);
}

@media (min-width: 48em) {
  .slutt {
    padding-top: var(--sp-9);
  }

  .slutt__fakta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
  }

  .slutt__fakta li {
    min-height: 0;
  }

  .slutt__fakta li + li {
    padding-left: var(--sp-4);
    border-left: 1px solid rgba(143, 184, 164, 0.3);
  }

  .slutt__fakta a {
    min-height: 0;
  }
}

@media (min-width: 62em) {
  .slutt {
    min-height: clamp(30rem, 58vh, 40rem);
    padding-block: var(--sp-9);
  }

  /* Bred nok til at faktalinja står på én linje */
  .slutt__inner {
    max-width: 42rem;
  }

  .slutt .fotoflate__media img {
    object-position: 100% 62%;
    transform: scale(1.35);
    transform-origin: 100% 62%;
  }
}

/* ---- Sidetopp med bilde på undersidene ----
   Samme grep som hero, men lavere: forsiden er den tyngste inngangen, og
   undersidene skal få innholdet raskere opp i bildet. Innholdet ligger
   rett i .wrap (statuspille, kicker, h1, ingress). Kontakt, personvern og
   404 beholder den kompakte sidetoppen uten bilde (.sidetopp i seksjon 7)
   – der er intensjonen høy, og et bilde forsinker uten å selge. */
.sidetopp--bilde {
  padding-top: var(--sp-6);
  /* Bunnen er bildet – ingen flate under det på mobil */
  padding-bottom: 0;
  border-bottom: 0;
}

.sidetopp--bilde > .wrap > * {
  max-width: 34rem;
}

.sidetopp--bilde h1 {
  font-weight: 300;
  font-size: clamp(2.5rem, 3.6vw + 1rem, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.sidetopp--bilde .kicker {
  color: var(--farge-celadon);
}

.sidetopp--bilde .ingress {
  margin-top: var(--sp-4);
  color: var(--farge-rispapir);
}

.sidetopp--bilde .status {
  margin-bottom: var(--sp-5);
  background: rgba(var(--farge-nori-rgb), 0.55);
  border-color: rgba(143, 184, 164, 0.45);
  color: var(--farge-rispapir);
}

@media (min-width: 48em) {
  .sidetopp--bilde {
    padding-top: var(--sp-7);
  }
}

@media (min-width: 62em) {
  .sidetopp--bilde {
    /* Fast høyde, ikke min-height: sidetoppen skal være like høy på alle
       undersider uansett om ingressen er to eller tre linjer. Nedre grense
       gir plass til pille + to linjer h1 + tre linjer ingress + luft. */
    height: clamp(28rem, 46vh, 31rem);
    padding-block: var(--sp-8);
  }

  /* Sidetoppen viser bare en stripe av et liggende bilde. Ligger motivet
     høyt (tranemaleriet på om oss), flyttes utsnittet opp. */
  .sidetopp--motiv-hoyt .fotoflate__media img {
    object-position: 50% 22%;
  }

  .sidetopp--bilde .status {
    background: rgba(143, 184, 164, 0.12);
  }
}

/* --------------------------------------------------------------------------
   39. Logo – engangsavsløring og kompakt tilstand
   --------------------------------------------------------------------------
   Tre regler styrer hele oppførselen:

   1. Uten JS, og etter at animasjonen er ferdig, står logoen i ferdig
      tilstand. Ingenting her skjuler noe permanent.
   2. Avsløringen kjører kun når .logo--intro står på lenken. Den settes av
      main.js ved første ankomst utenfra, og fjernes når siste steg er ferdig.
      Derfor kan den ikke starte på nytt ved scrolling eller klikk.
   3. Kompakt tilstand (.site-header--kompakt) er ren transition, ikke
      animasjon – veien tilbake til full logo er en overgang, ikke en ny
      avsløring.

   Headerens høyde endres ALDRI. Den er sticky og ligger i normal flyt, så en
   høydeendring ville flyttet alt innholdet under den mens man scroller.
   Komprimeringen skjer derfor inne i logoen: ordmerket trekker seg sammen og
   [S.] blir stående alene.
   -------------------------------------------------------------------------- */

/* Pulsen ligger oppå den faste prikken og er usynlig i hviletilstand */
.logo__puls {
  fill: var(--farge-celadon);
  opacity: 0;
}

/* --- Engangsavsløringen ------------------------------------------------- */
/* pathLength="1" i SVG-en gjør at strektegningen kan skrives som 0→1
   uansett hvor lang kurven faktisk er.

   --intro-fart skalerer hele sekvensen. Mobil er raskest og mest nedtonet:
   der er logoen liten og skjermen trang, og en lang avsløring ville tatt
   oppmerksomhet den ikke har fortjent. Pulsen i prikken hoppes helt over
   på små skjermer – den er en detalj man uansett ikke rekker å se. */
.logo--intro {
  --intro-fart: 0.75;
}

.logo--intro .logo__ramme,
.logo--intro .logo__s {
  stroke-dasharray: 1;
}

.logo--intro .logo__ramme {
  animation: logo-tegn calc(0.45s * var(--intro-fart))
             cubic-bezier(0.65, 0, 0.35, 1) calc(0.05s * var(--intro-fart)) both;
}

.logo--intro .logo__s {
  animation: logo-tegn calc(0.55s * var(--intro-fart))
             cubic-bezier(0.65, 0, 0.35, 1) calc(0.26s * var(--intro-fart)) both;
}

.logo--intro .logo__prikk {
  transform-origin: 112px 112px;
  animation: logo-prikk calc(0.2s * var(--intro-fart))
             cubic-bezier(0.33, 1, 0.68, 1) calc(0.78s * var(--intro-fart)) both;
}

.logo--intro .logo__strek {
  transform-origin: center;
  animation: logo-strek calc(0.3s * var(--intro-fart))
             cubic-bezier(0.33, 1, 0.68, 1) calc(0.72s * var(--intro-fart)) both;
}

/* Ordmerket beveges med transform og opacity, aldri letter-spacing eller
   bredde – da ville nav og CTA blitt dyttet sidelengs mens det kjørte. */
.logo--intro .logo__text {
  animation: logo-ord calc(0.5s * var(--intro-fart))
             cubic-bezier(0.33, 1, 0.68, 1) calc(0.6s * var(--intro-fart)) both;
}

.logo--intro .logo__sted {
  animation: logo-ord calc(0.45s * var(--intro-fart))
             cubic-bezier(0.33, 1, 0.68, 1) calc(0.78s * var(--intro-fart)) both;
}

/* Fra tablet og opp er det plass til hele sekvensen, og til pulsen */
@media (min-width: 48em) {
  .logo--intro {
    --intro-fart: 1;
  }

  .logo--intro .logo__puls {
    animation: logo-puls 0.4s ease-out 0.9s both;
  }
}

@keyframes logo-tegn {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes logo-prikk {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes logo-puls {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes logo-strek {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes logo-ord {
  from { opacity: 0; transform: translateX(-0.4rem); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --- Kompakt tilstand ved scrolling ------------------------------------- */
/* Overgangene ligger på elementene selv, ikke på kompakt-klassen, slik at de
   gjelder begge veier: sammen når man scroller ned, ut igjen når man er
   tilbake på toppen. */
.logo__strek {
  transition: width 0.28s ease, margin 0.28s ease, opacity 0.2s ease;
}

.logo__ord {
  max-width: 14rem;
  transition: max-width 0.28s ease, opacity 0.2s ease;
}

.site-header--kompakt .logo__strek {
  width: 0;
  margin-inline: 0;
  opacity: 0;
}

.site-header--kompakt .logo__ord {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
}

/* --- Redusert bevegelse -------------------------------------------------- */
/* Ingen tegning, ingen sammentrekning. Logoen står ferdig og blir stående.
   main.js hopper også over begge deler, dette er beltet i tillegg til
   bukseselene. */
@media (prefers-reduced-motion: reduce) {
  .logo--intro .logo__ramme,
  .logo--intro .logo__s {
    stroke-dasharray: none;
    animation: none;
  }

  .logo--intro .logo__prikk,
  .logo--intro .logo__strek,
  .logo--intro .logo__text,
  .logo--intro .logo__sted {
    animation: none;
  }

  .logo--intro .logo__puls {
    animation: none;
    opacity: 0;
  }

  .site-header--kompakt .logo__strek,
  .site-header--kompakt .logo__ord {
    width: auto;
    max-width: 14rem;
    margin-inline: 0;
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------
   40. Menysiden – kategorilinje, søk, kompakte porter
   --------------------------------------------------------------------------
   Menysiden er mer funksjonell enn resten av nettstedet. Den arver uttrykket
   gjennom typografi, farge og luft – ikke gjennom å gjenta salgsgrepene fra
   forsiden. Derfor: ingen ikoner i kategorilinja, ingen piller, ingen kort,
   ingen skygger. Én tynn kant, og ellers ingenting.
   -------------------------------------------------------------------------- */

/* --- Sidetopp -------------------------------------------------------------
   Høyden er nå den samme på alle bildetopper – 42vh var menysidens mål, og
   det er den høyden hele nettstedet bruker. .sidetopp--lav er derfor borte. */

/* --- Kompakte porter -------------------------------------------------------
   To brede knapper, ikke to bannere. Overlayet er likt på begge kort: det
   lyse laksebildet lå under AA med det gamle, sidelengs gradienten. */
.spor--kompakt {
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.spor--kompakt .spor__kort a {
  height: 6rem;
  border: 1px solid rgba(247, 244, 236, 0.18);
  transition: border-color 0.15s ease;
}

.spor--kompakt .spor__kort a::after {
  background:
    radial-gradient(70% 120% at 18% 60%,
      rgba(var(--farge-nori-rgb), 0.72) 0%, transparent 72%),
    linear-gradient(180deg,
      rgba(var(--farge-nori-rgb), 0.35) 0%,
      rgba(var(--farge-nori-rgb), 0.82) 100%);
}

.spor--kompakt .spor__innhold {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
}

.spor--kompakt .spor__merke {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--tekst-xl);
}

.spor__pil {
  display: inline-block;
  transition: transform 0.15s ease;
}

.spor--kompakt .spor__kort a:hover {
  border-color: rgba(247, 244, 236, 0.5);
}

.spor--kompakt .spor__kort a:hover .spor__pil {
  transform: translateX(4px);
}

/* Fokusmarkeringen skal ligge på hele kortet, ikke bare på teksten */
.spor--kompakt .spor__kort a:focus-visible {
  outline: 3px solid var(--farge-fokus);
  outline-offset: 3px;
}

@media (min-width: 48em) {
  .spor--kompakt .spor__kort a {
    height: 8rem;
  }
}

/* --- Kategorilinja ---------------------------------------------------------
   Fester seg under headeren. Fordi den ligger i normal flyt, endrer den
   ingenting når den fester seg – ingen plass å reservere, ingen CLS. */
/* Menysiden har ett fast element mer enn de andre sidene */
.har-katnav {
  scroll-padding-top: calc(var(--header-hoyde) + 3rem + 1rem);
}

.katnav {
  position: sticky;
  top: var(--header-hoyde);
  z-index: 30;
  margin-bottom: var(--sp-5);
  background: var(--farge-nori);
  /* Streken tegnes som skygge, ikke kant: da holder linja seg på nøyaktig
     3rem i stedet for 3rem + 1px. */
  box-shadow: 0 1px 0 rgba(143, 184, 164, 0.28);
}

@media (min-width: 48em) {
  .katnav__inner {
    padding-inline: var(--sp-6);
  }
}

/* Selve linja går i full bredde; innholdet holdes i samme spalte som
   resten av siden. Den vannrette lista får lov å bla helt ut i kanten. */
.katnav__inner {
  max-width: var(--maks-bredde);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.katnav__rad {
  display: flex;
  align-items: stretch;
  height: 3rem;
}

.katnav__liste {
  display: flex;
  flex: 1 1 auto;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.katnav__liste::-webkit-scrollbar {
  display: none;
}

.katnav__liste li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.katnav__liste a {
  display: flex;
  align-items: center;
  height: 3rem;
  padding-inline: var(--sp-4);
  border-bottom: 2px solid transparent;
  font-family: var(--font-overskrift);
  font-size: var(--tekst-base);
  color: var(--farge-celadon);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.katnav__liste a:hover {
  color: var(--farge-rispapir);
}

.katnav__liste a[aria-current="true"] {
  color: var(--farge-rispapir);
  border-bottom-color: var(--farge-celadon);
}

/* Overgangsfelt i høyre kant på mobil, så det synes at lista fortsetter.
   Ligger utenpå og tar ikke klikk. Starter der søkeknappen begynner, ellers
   legger den seg som en skygge over selve knappen. */
.katnav__rad::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--trykkflate);
  width: 2.5rem;
  height: 3rem;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--farge-nori-rgb), 0) 0%, var(--farge-nori) 78%);
}

.katnav {
  position: sticky;
}

.katnav__rad {
  position: relative;
}

/* --- Søket -----------------------------------------------------------------
   Andreprioritet: et forstørrelsesglass til høyre, ikke et felt med egen
   overskrift. Folk på restaurantmenyer blar mer enn de søker. */
.katnav__sok-knapp {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--trykkflate);
  height: 3rem;
  padding: 0;
  background: var(--farge-nori);
  border: 0;
  border-left: 1px solid rgba(143, 184, 164, 0.28);
  color: var(--farge-celadon);
  cursor: pointer;
}

/* display: inline-flex over slår [hidden] fra nettleserens eget stilark.
   Uten dette står søkeknappen der uten JavaScript – og gjør ingenting. */
.katnav__sok-knapp[hidden] {
  display: none;
}

.katnav__sok-knapp:hover,
.katnav__sok-knapp[aria-expanded="true"] {
  color: var(--farge-rispapir);
}

.katnav__sok {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(143, 184, 164, 0.2);
}

.katnav__sok[hidden] {
  display: none;
}

.katnav__felt {
  flex: 1 1 auto;
  min-height: var(--trykkflate);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(247, 244, 236, 0.06);
  border: 1px solid rgba(143, 184, 164, 0.4);
  border-radius: var(--radius);
  color: var(--farge-rispapir);
  font-size: var(--tekst-base);
}

.katnav__felt::placeholder {
  color: var(--farge-celadon);
}

.katnav__treff {
  flex: 0 0 auto;
  color: var(--farge-celadon);
  font-size: var(--tekst-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.katnav__lukk {
  flex: 0 0 auto;
  min-height: var(--trykkflate);
  padding-inline: var(--sp-3);
  background: none;
  border: 0;
  color: var(--farge-celadon);
  font-size: var(--tekst-sm);
  font-weight: 600;
  cursor: pointer;
}

.katnav__lukk:hover {
  color: var(--farge-rispapir);
}

/* --- Filtrene rett under linja --------------------------------------------- */
.meny-omrade > .filter {
  margin-top: 0;
}

/* Populært er nå en vanlig menygruppe og skal ikke ha ekstra topplass */
#populaert .fat {
  margin-top: var(--sp-4);
}

/* --- Kategorilinja på mobil ------------------------------------------------
   Én rad som blas sidelengs, ikke flere rader: linja beholder høyden sin og
   kan fortsatt klebe under headeren. Kategoriene er chips, så det leser som
   valg man kan bla i – og under linja står det rett ut at man kan sveipe.
   Uten den setningen er det bare kanten som antyder at det finnes mer. */
@media (max-width: 47.99em) {
  .katnav__inner {
    padding-block: var(--sp-2);
  }

  .katnav__rad {
    height: auto;
  }

  .katnav__liste {
    gap: var(--sp-2);
    align-items: center;
  }

  .katnav__liste a {
    height: auto;
    min-height: var(--trykkflate);
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid rgba(143, 184, 164, 0.32);
    border-radius: 999px;
    font-size: var(--tekst-sm);
  }

  .katnav__liste a[aria-current="true"] {
    background: var(--farge-celadon);
    border-color: var(--farge-celadon);
    color: var(--farge-nori);
  }

  /* Faden lå over faner i full høyde. Over runde chips ser den ut som en
     skygge på siste chip, så kanten får tale for seg selv. */
  .katnav__rad::after {
    display: none;
  }

  .katnav__sok-knapp {
    height: var(--trykkflate);
    align-self: center;
  }
}

/* Sveipehint under kategorilinja. Bare mobil – på desktop får hele lista
   plass, og da ville setningen vært feil. Forsvinner sammen med linja når
   man står i kategorioversikten. */
.katnav__sveip {
  display: none;
}

@media (max-width: 47.99em) {
  .katnav__sveip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-block: var(--sp-3) 0;
    font-size: var(--tekst-sm);
    color: var(--farge-tekst-dempet);
  }

  .katnav[hidden] + .wrap .katnav__sveip {
    display: none;
  }
}

.katnav__sveip-pil {
  letter-spacing: -0.08em;
}

@media (min-width: 48em) {
  .katnav__liste a {
    font-size: var(--tekst-lg);
  }

  /* Nok plass til hele lista – da trengs ingen fade i kanten */
  .katnav__rad::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spor__pil,
  .spor--kompakt .spor__kort a,
  .katnav__liste a {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   41. Kontaktskjema
   --------------------------------------------------------------------------
   Samme språk som resten: hårfine streker, ingen bokser, ingen radius utover
   den felles --radius. Etiketten står over feltet, ikke ved siden av – da
   brekker ingenting på mobil, og feltet får hele bredden.
   -------------------------------------------------------------------------- */
.skjema-blokk {
  max-width: 34rem;
}

.skjema {
  margin-top: var(--sp-6);
  /* Blokkstart, som .fakta og .kort. Streken ligger på skjemaet selv og
     ikke på første rad: honningkrukka er også en div, så :first-of-type
     ville aldri truffet en .skjema__rad. */
  border-top: 2px solid var(--farge-tekst);
}

.skjema__rad {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
}

.skjema__rad + .skjema__rad {
  border-top: 1px solid var(--farge-kant);
}

.skjema__rad label {
  font-weight: 600;
}

.skjema__valgfri {
  font-weight: 400;
  color: var(--farge-tekst-dempet);
}

.skjema input,
.skjema textarea {
  width: 100%;
  min-height: var(--trykkflate);
  padding: var(--sp-3);
  background: var(--farge-rispapir);
  border: 1px solid var(--farge-kant);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
}

.skjema textarea {
  resize: vertical;
}

.skjema input:hover,
.skjema textarea:hover {
  border-color: var(--farge-jade);
}

/* :user-invalid, ikke :invalid – ellers merkes tomme påkrevde felt som feil
   allerede før man har rørt dem. */
.skjema input:user-invalid,
.skjema textarea:user-invalid {
  border-color: var(--farge-chili);
}

.skjema__hjelp {
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
}

.skjema__bunn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--farge-kant);
}

.skjema__bunn .muted {
  flex: 1 1 14rem;
  margin: 0;
}

/* Honningkrukka skal ikke sees, ikke leses opp og ikke få tabfokus.
   display: none ville fått noen roboter til å hoppe over den, derfor
   flyttes den ut av bildet i stedet. */
.skjema__krukke {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   42. Kortseksjonene mellom hero og menyen
   --------------------------------------------------------------------------
   To seksjoner: tre utvalgte retter, og et rutenett med én inngang per del
   av menyen. Begge er bygget av samme deler – mørk Nori-flate, bilde som
   bakgrunn, tekst nederst over en gradient.

   Bildene er ikke klare. Fram til de er det, står Nori-flaten alene som
   plassholder. Høyden er låst med aspect-ratio, så ingenting flytter seg
   den dagen bildene kommer: da settes --kort-bilde per kort, og det er alt.
   -------------------------------------------------------------------------- */
.kortrad-seksjon {
  margin-bottom: var(--sp-8);
  max-width: none;
}

.kortrad__topp {
  margin-bottom: var(--sp-4);
}

/* Chili på overtittelen er samme bruk som kickeren over hver menygruppe –
   signalfargen peker på hvor du skal se, ikke på en handling. */
.kicker--chili {
  color: var(--farge-chili);
}

/* --- Felles kortflate ------------------------------------------------------ */
.rettkort,
.katkort {
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(247, 244, 236, 0.16);
  border-radius: var(--radius-stor);
  background-color: var(--farge-nori);
  color: var(--farge-rispapir);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

/* Gradienten holder teksten lesbar uansett hva bildet inneholder. Ligger
   under innholdet, ikke over. */
/* Bildet ligger som <img>, ikke background-image. CSP-en har
   style-src 'self', som blokkerer inline style-attributter – en CSS-variabel
   satt i style="" ble stille droppet, og kortene sto tomme på live. */
.rettkort img,
.katkort img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rettkort::before,
.katkort::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--farge-nori-rgb), 0.25) 0%,
    rgba(var(--farge-nori-rgb), 0.72) 55%,
    rgba(var(--farge-nori-rgb), 0.94) 100%);
}

.rettkort:hover,
.katkort:hover {
  border-color: rgba(247, 244, 236, 0.45);
}

.rettkort:focus-visible,
.katkort:focus-visible {
  outline: 3px solid var(--farge-fokus);
  outline-offset: 3px;
}

/* --- Populært: tre retter --------------------------------------------------
   Mobil: vannrett sveip med snap. Desktop: tre i rad. */
.kortrad {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--sp-3);
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-2);
  margin-inline: calc(-1 * var(--sp-4));
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.kortrad::-webkit-scrollbar {
  display: none;
}

.kortrad__punkt {
  scroll-snap-align: start;
}

/* Høyden styres av min-height, ikke aspect-ratio. Med nummer, tekst og knapp
   er tekstflaten alene over 200 px, og uten et gulv presses bildet helt ut av
   kortet. aspect-ratio kan ikke brukes til gulvet: da regnes min-height om
   til en min-width, og kortene sprenger spaltebredden på desktop. */
.rettkort {
  min-height: 21rem;
  align-items: flex-end;
  height: 100%;
}

.rettkort__innhold {
  position: relative;
  display: block;
  width: 100%;
  padding: 2rem var(--sp-4) var(--sp-4);
  /* Tekstflaten er hel Nori på ALLE kort, ikke bare noen. Uten dette
     bestemmer bildet lesbarheten: målt med bare kortgradienten falt Chili
     til 2,65:1 i median og rispapir helt ned i 1,00:1 der lyse partier lå
     bak bokstavene. Kravet er 3:1 og 4,5:1. */
  background: linear-gradient(180deg,
    rgba(var(--farge-nori-rgb), 0) 0,
    var(--farge-nori) 2rem);
}

.rettkort__topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.rettkort__navn {
  font-family: var(--font-overskrift);
  font-size: var(--tekst-xl);
  line-height: 1.1;
}

.rettkort__pris {
  flex: 0 0 auto;
  /* 22 px halvfet = «stor tekst» etter WCAG, der kravet er 3:1. Arvet
     16 px ville krevd 4,5:1, og Chili på Nori måler 3,31:1 – altså stryk.
     Størrelsen er ikke pynt, den er det som gjør fargen lovlig her. */
  font-size: var(--tekst-xl);
  color: var(--farge-chili);
  font-family: var(--font-overskrift);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rettnummeret over navnet. Samme form som NR.-linja på kategorikortene, så
   de to kortslagene leser som samme system. */
.rettkort__nr {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--farge-celadon);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rettkort__under {
  display: block;
  margin-top: var(--sp-1);
  color: var(--farge-celadon);
  font-size: var(--tekst-sm);
}

.rettkort__tekst {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--tekst-sm);
  line-height: 1.45;
}

/* --- Utforsk menyen: rutenett ---------------------------------------------- */
.kategorirutenett {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.katkort {
  /* Sideforholdet reserverer plassen bildet skal ha. min-height sikrer at
     teksten aldri klippes når kortet er smalt – på 390 px er to kolonner
     ~171 px brede, og 16:10 gir da bare 107 px. Begge er faste verdier,
     så høyden er forutsigbar uansett: ingen CLS. */
  /* Fast gulv i stedet for aspect-ratio: med knappen i tekstflaten ville et
     sideforhold høyt nok til å vise bildet også tvunget fram en min-width
     som sprengte spaltebredden. */
  min-height: 17rem;
  align-items: flex-end;
  padding: 0;
}

.katkort__innhold {
  position: relative;
  z-index: 1;
  /* Tre faste rader: tittel, NR.-linje, antall. NR.-linja rendres alltid,
     også tom (Drikke har ingen rettnumre), så grunnlinjene i rad 2 står
     like uansett kort. */
  display: grid;
  grid-template-rows: auto 1rem auto auto;
  align-content: end;
  width: 100%;
  padding: 1.5rem var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg,
    rgba(var(--farge-nori-rgb), 0) 0,
    var(--farge-nori) 1.5rem);
}

.katkort__navn {
  display: block;
  font-family: var(--font-overskrift);
  font-size: var(--tekst-lg);
  line-height: 1.15;
}

.katkort__serie {
  display: block;
  color: var(--farge-celadon);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.katkort__antall {
  display: block;
  color: var(--farge-rispapir);
  font-size: var(--tekst-sm);
}

/* --- Knappen på kortene ----------------------------------------------------
   En <span>, ikke en lenke: hele kortet er klikkflaten, og en lenke inni en
   lenke er ugyldig. Den bare pila etter tittelen ble ikke lest som «trykk
   her» – kortene så ut som bilder med tekst. Knappeformen sier det tydelig,
   og holder seg samtidig innenfor det redaksjonelle uttrykket: hårfin kant
   og celadon, ikke fylt signalfarge. */
.kortknapp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
  justify-self: start;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--farge-celadon);
  border-radius: 999px;
  color: var(--farge-celadon);
  font-size: var(--tekst-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.kortknapp__pil {
  transition: transform 0.15s ease;
}

.rettkort:hover .kortknapp,
.katkort:hover .kortknapp,
.rettkort:focus-visible .kortknapp,
.katkort:focus-visible .kortknapp {
  background: var(--farge-celadon);
  color: var(--farge-nori);
}

.rettkort:hover .kortknapp__pil,
.katkort:hover .kortknapp__pil {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .kortknapp,
  .kortknapp__pil {
    transition: none;
  }
}

/* --- Linja om allergener --------------------------------------------------- */
.kortrad__allergener {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  color: var(--farge-tekst-dempet);
  font-size: var(--tekst-sm);
  text-align: center;
}

.kortrad__allergener a {
  display: inline-flex;
  align-items: center;
  min-height: var(--trykkflate);
  color: inherit;
  text-underline-offset: 0.3em;
}

/* Ni kort deler seg jevnt på tre. Med fire kolonner ble det 4 + 4 + 1, og
   det siste kortet sto alene og så ut som en feil. */
@media (min-width: 48em) {
  .kategorirutenett {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 62em) {
  /* Fra desktop er det plass til alle tre – da er sveip unødvendig */
  .kortrad {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-inline: 0;
    padding: 0;
    overflow-x: visible;
  }

  .rettkort__navn {
    font-size: var(--tekst-2xl);
  }

  .katkort__navn {
    font-size: var(--tekst-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rettkort,
  .katkort,
  .katkort__pil {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   43. Kategorivisning
   --------------------------------------------------------------------------
   Kategorilinja er ikke lenger bare en ankermeny – den bytter hvilken del av
   menyen som vises. «Alle kategorier» ligger først i lista og dukker opp når
   en kategori er valgt. Uten JS er den hidden, og linja oppfører seg som før.
   -------------------------------------------------------------------------- */
.katnav__tilbake[hidden] {
  display: none;
}

.katnav__tilbake a {
  color: var(--farge-rispapir);
  white-space: nowrap;
}

/* Skillet gjør at «Alle kategorier» leser som en vei ut, ikke som
   nok en kategori på linje med de andre. */
.katnav__tilbake {
  border-right: 1px solid rgba(143, 184, 164, 0.28);
  margin-right: var(--sp-2);
}

/* På mobil spiser «Alle kategorier» halve kategorilinja og skyver
   kategoriene ut av syne. Veien ut ligger uansett som knapp nederst i
   rettelisten, så på smal skjerm holder det med den ene. */
@media (max-width: 47.99em) {
  .katnav__tilbake {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   44. Menysiden på mobil
   --------------------------------------------------------------------------
   Mobil er ikke en smalere desktop. Her er skjermen så trang at tre
   populærkort i sveip og to kategorikort i bredden begge blir små og
   uleselige. Under 48em vises derfor ett populærkort, og kategoriene ligger
   som bilder etter hverandre nedover i full bredde.

   Alt dette er mobil-først: reglene under gjelder som utgangspunkt, og
   desktop-oppsettet slår inn igjen i mediespørringene lenger opp.
   -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  /* Ett kort er nok. Sveip med to kort halvt utenfor kanten leser som at
     noe er avkuttet, ikke som at det finnes mer. */
  .kortrad__punkt:not(.kortrad__punkt--mobil) {
    display: none;
  }

  .kortrad {
    grid-auto-columns: 1fr;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* Kategoriene nedover i full bredde. 2:1 holder dem lave nok til at man
     rekker gjennom alle ni uten å scrolle i evigheter. */
  .kategorirutenett {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .katkort {
    min-height: 15rem;
  }

  /* Filteret står i veien øverst: man kommer inn i en kategori for å se
     rettene, ikke for å filtrere. Flyttes derfor under rettelisten, med
     tilbake-knappen fortsatt aller nederst. Rekkefølgen i HTML-en er
     uendret, så uten CSS ligger filteret der det alltid har ligget. */
  .meny-omrade {
    display: flex;
    flex-direction: column;
  }

  .meny-omrade .filter {
    order: 1;
  }

  .meny-omrade .meny-tilbake {
    order: 2;
  }
}

/* Vei ut nederst i rettelisten – slipper å scrolle opp til linja igjen */
.meny-tilbake {
  margin-top: var(--sp-6);
}

.meny-tilbake[hidden] {
  display: none;
}

@media (min-width: 48em) {
  .meny-tilbake {
    max-width: 22rem;
  }
}

/* --------------------------------------------------------------------------
   44. Avsløring ved scroll – steg 4 i DESIGNRETNING.md
   -------------------------------------------------------------------------- */
/* Samme bevegelse som heroen bruker ved ankomst: 16 px opp og inn over
   1,2 s, én gang. Innholdet i hver seksjon (ikke seksjonens flate) er merket
   med data-avsloer i HTML-en. main.js legger på .avsloer-venter for det
   som ikke er i bildet ennå, og bytter den til .avsloert når det kommer.

   Uten JS finnes ingen av klassene, og alt er synlig fra første tegning.
   Det som allerede er i bildet når skriptet kjører, merkes aldri som
   ventende – ingenting skal blinke bort og komme tilbake.

   Bare opacity og transform – ingen relayout. Redusert bevegelse: den
   globale regelen i seksjon 2 nuller transition-duration, så innholdet
   står stille og synlig. */
[data-avsloer].avsloer-venter {
  opacity: 0;
  transform: translateY(16px);
}

[data-avsloer].avsloert {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   45. Header over hero – steg 6 i DESIGNRETNING.md
   -------------------------------------------------------------------------- */
/* Bare forsiden (.site-header--over). Headeren er fortsatt sticky og i
   flyt, men trekkes over heroen med negativ bunnmarg, og heroen gir teksten
   plass med padding-top (seksjon 7). Over heroen er den gjennomsiktig med
   lys tekst; når heroen er scrollet forbi, setter main.js .site-header--lys
   og den blir som på undersidene. Overgangen er 400 ms, ikke brå: en header
   som slår om fargen leser som feil.

   Logoen bruker currentColor og trenger ingen egen negativ fil. Pulsprikken
   er celadon uansett.

   Mobilmenyen åpnes inne i headeren. Er den åpen mens headeren er
   gjennomsiktig, får headeren nori-flate så lista står på noe. */
.site-header--over {
  margin-bottom: calc(-1 * var(--header-hoyde));
  background: transparent;
  border-bottom-color: transparent;
  color: var(--farge-rispapir);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease;
}

.site-header--over .logo {
  color: inherit;
}

.site-header--over .logo__sted {
  color: var(--farge-celadon);
}

.site-header--over .logo__strek {
  background: rgba(247, 244, 236, 0.3);
}

.site-header--over .nav-toggle {
  color: inherit;
  border-color: rgba(247, 244, 236, 0.35);
}

.site-header--over .site-nav__list a:hover {
  background: rgba(247, 244, 236, 0.08);
}

.site-header--over .site-nav__list a[aria-current="page"] {
  color: var(--farge-celadon-lys);
  box-shadow: inset 3px 0 0 var(--farge-celadon);
}

.site-header--over:has(.nav-toggle[aria-expanded="true"]):not(.site-header--lys) {
  background: var(--farge-nori);
}

/* Etter heroen: lys, som på undersidene */
.site-header--lys {
  background: var(--farge-rispapir);
  border-bottom-color: var(--farge-kant);
  color: var(--farge-tekst);
}

.site-header--lys .logo__sted {
  color: var(--farge-tekst-dempet);
}

.site-header--lys .logo__strek {
  background: var(--farge-kant);
}

.site-header--lys .nav-toggle {
  border-color: var(--farge-kant);
}

.site-header--lys .site-nav__list a:hover {
  background: var(--farge-papir-dyp);
}

.site-header--lys .site-nav__list a[aria-current="page"] {
  color: var(--farge-jade);
  box-shadow: inset 3px 0 0 var(--farge-jade);
}

@media (min-width: 62em) {
  .site-header--over .site-nav__list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--farge-celadon);
  }

  .site-header--lys .site-nav__list a[aria-current="page"] {
    box-shadow: inset 0 -2px 0 var(--farge-jade);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header--over {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   46. Galleri – bilder fra restauranten (om oss)
   -------------------------------------------------------------------------- */
/* Tre bilder i 4:5, kant i kant med bare luft imellom. Ingen ramme, ingen
   radius, ingen skygge – fotografiet er fargen. Liggende bilder beskjæres
   til samme format, så raden står som én blokk. Én kolonne på mobil, tre
   fra 62em; på nettbrett to, og det tredje får full bredde under. */
.galleri {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.galleri img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 48em) {
  .galleri {
    grid-template-columns: repeat(2, 1fr);
  }

  .galleri li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .galleri li:last-child:nth-child(odd) img {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 62em) {
  .galleri {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }

  .galleri li:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .galleri li:last-child:nth-child(odd) img {
    aspect-ratio: 4 / 5;
  }
}

/* --------------------------------------------------------------------------
   47. Slutt-CTA på undersider – fotoflate med eget bilde
   -------------------------------------------------------------------------- */
/* Samme mønster som forsidens slutt (.slutt), men med sidens eget bilde og
   uten faktalinja. Arrangementer bruker bursdagsbordet, som er stående: på
   desktop viser båndet bare en fjerdedel av høyden, og det er det dekkede
   bordet nederst – tallerkenene, blomstene og lysene – som skal med, ikke
   snøen utenfor vinduet. */
@media (min-width: 62em) {
  .slutt--arrangementer .fotoflate__media img {
    object-position: 50% 74%;
  }
}

/* Vurderingen som står ved siden av teksten i slutt-CTA-en */
.slutt__vurdering {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--tekst-sm);
  color: var(--farge-celadon-lys);
}

.slutt__vurdering .hero__stjerner {
  color: var(--farge-celadon);
}