:root{
  /* Drawn from the shop itself: the barn-red walls, the yellow keyline on the
     menu board outside, and the cream script in the sign. */
  --rod:#A32A17;          /* veggene og skiltet */
  --rod-dyp:#7A1B0D;      /* skygge i det røde */
  --gul:#F2B233;          /* menytavla utenfor */
  --papir:#F6EFE2;        /* kremen i logoen */
  --kull:#1B1512;         /* tekst på lyst, bunn i mørke felt */
  --kull-myk:#2A201B;
  --foodora:#D70F64;
  --delivia:#34B15B;
  --display:Archivo,Impact,"Arial Narrow",sans-serif;
  --body:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",Georgia,serif;
  --side:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papir);color:var(--kull);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--rod);text-decoration:none}
a:hover{color:var(--kull)}
:focus-visible{outline:3px solid var(--gul);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gul);
  color:var(--kull);padding:12px 18px;font-weight:700}
.skip:focus{left:12px;top:12px}
.visuelt-skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* One display setting used everywhere: Archivo's width axis pulled to its
   narrowest so long Norwegian compounds still set big. */
.dsp,h1,h2,h3,.knapp,.pill,.fane,.pris,.adresse,.tider td:last-child{
  font-family:var(--display);font-stretch:62.5%;font-weight:900;
  text-transform:uppercase;letter-spacing:-.005em;
}

/* ---------- header ---------- */
.topp{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding:16px var(--side);
  background:var(--rod);
  border-bottom:3px solid var(--gul);
}
.merke img{height:42px;width:auto;display:block}
.navi{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:600;
  letter-spacing:.04em}
.navi a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;
  color:rgba(246,239,226,.86)}
.navi a:hover{color:var(--gul)}
.lever{display:flex;gap:9px}

.pill{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;
  font-size:19px;line-height:1;white-space:nowrap;
  transition:transform .24s cubic-bezier(.16,.84,.3,1),filter .24s;
}
.pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pill:hover{transform:translateY(-3px);filter:brightness(1.08)}
.pill-foodora{background:var(--foodora);color:#fff}
.pill-foodora:hover{color:#fff}
.pill-delivia{background:var(--delivia);color:#0E2A17}
.pill-delivia:hover{color:#0E2A17}

.knapp{
  display:inline-flex;align-items:center;gap:11px;height:62px;padding:0 26px;
  font-size:25px;line-height:1;white-space:nowrap;
  transition:transform .24s cubic-bezier(.16,.84,.3,1),filter .24s;
}
.knapp svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.knapp:hover{transform:translateY(-3px)}
.knapp-ring{background:var(--gul);color:var(--kull)}
.knapp-ring:hover{color:var(--kull);filter:brightness(1.06)}

/* ---------- hero ---------- */
/* Cursor position arrives as two unitless numbers in the -0.5..0.5 range,
   written onto the section as custom properties. Everything below reads them,
   so pointer movement never triggers a re-layout of the content. */
.hero{
  --mx:0;--my:0;--tilt:15;
  position:relative;min-height:min(88vh,900px);
  padding:clamp(40px,7vw,90px) var(--side) clamp(36px,5vw,56px);
  overflow:hidden;color:var(--papir);
  background:
    linear-gradient(180deg,var(--rod-dyp) 0%,var(--rod) 42%,var(--rod) 100%);
}
/* Barely-there awning stripes, the same diagonal as the parasols outside. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.045) 0 26px,rgba(0,0,0,0) 26px 52px);
}
.glo{
  position:absolute;right:-8%;top:2%;width:min(880px,70vw);aspect-ratio:1.26;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(242,178,51,.42) 0%,
    rgba(242,178,51,.12) 48%,rgba(163,42,23,0) 72%);
  transform:translate(calc(var(--mx) * 70px),calc(var(--my) * 46px));
  transition:transform .9s cubic-bezier(.16,.84,.3,1);
}
/* Depth: things further back move less and settle later than the burger. */
.lag{position:absolute;pointer-events:none;
  transform:translate(calc(var(--mx) * -30px),calc(var(--my) * -20px));
  transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.lag img{display:block;width:100%;height:auto}
.lag-1{right:42%;top:6%;width:clamp(90px,13vw,190px);opacity:.3}
.lag-1 img{filter:saturate(.55) brightness(.72)}
.lag-2{right:4%;bottom:6%;width:clamp(84px,12vw,172px);opacity:.26}
.lag-2 img{filter:saturate(.5) brightness(.66)}
.lag-3{right:31%;bottom:4%;width:clamp(76px,10vw,150px);opacity:.34;
  transform:translate(calc(var(--mx) * -52px),calc(var(--my) * -34px));
  transition-duration:.85s}
.lag-3 img{filter:saturate(.6) brightness(.78)}

/* Two weights of the same voice: the promise is drawn in outline, the thing you
   actually get is solid. The burger passes between the two lines. */
/* The headline sits in normal flow so the copy below can never collide with it;
   only the front slice is absolute, pinned over its own twin. */
.lockup-holder{position:relative;margin-top:clamp(110px,22vw,300px);pointer-events:none}
.lockup{margin:0}
.linje{display:block;font-family:var(--display);font-weight:900;
  text-transform:uppercase;font-size:clamp(56px,13.6vw,196px);line-height:.82;
  letter-spacing:-.022em;white-space:nowrap}
.hul{font-stretch:62.5%;color:transparent;-webkit-text-stroke:clamp(1.5px,.22vw,3px) var(--gul)}
.fast{font-stretch:75%;color:var(--papir)}
.foran{position:absolute;inset:0;z-index:5;clip-path:inset(74% 0 -30% 0)}

/* Entrance and tilt live on separate elements: an animation with fill-mode:both
   keeps writing `transform` and would clobber the tilt. */
.rig-ytre{position:absolute;right:calc(var(--side) * .9);top:clamp(90px,11vw,126px);
  width:clamp(300px,48vw,672px);z-index:3;perspective:1200px}
.rig{position:relative;transform-style:preserve-3d;
  transform:rotateX(calc(var(--my) * var(--tilt) * -.7deg))
            rotateY(calc(var(--mx) * var(--tilt) * 1deg));
  transition:transform .45s cubic-bezier(.16,.84,.3,1)}
.rig img{display:block;width:100%;height:auto}
/* A light sweep clipped to the burger's own alpha, so it travels across the
   object rather than across a rectangle. */
.glans{position:absolute;inset:0;mix-blend-mode:screen;opacity:.5;
  filter:brightness(1.9) contrast(.85) saturate(.45);
  -webkit-mask-image:linear-gradient(112deg,transparent 40%,#000 47%,#000 53%,transparent 60%);
  mask-image:linear-gradient(112deg,transparent 40%,#000 47%,#000 53%,transparent 60%);
  -webkit-mask-size:280% 100%;mask-size:280% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:sveip 6.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes sveip{
  0%,8%{-webkit-mask-position:150% 0;mask-position:150% 0}
  52%,100%{-webkit-mask-position:-50% 0;mask-position:-50% 0}}
.skygge{position:absolute;left:50%;bottom:-26px;width:74%;height:46px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(70,12,4,.7) 0%,rgba(70,12,4,0) 70%);
  filter:blur(7px);
  transform:translateX(calc(-50% + var(--mx) * -34px)) scaleX(calc(1 - var(--my) * .12));
  transition:transform .45s cubic-bezier(.16,.84,.3,1)}

.hero-bunn{position:relative;z-index:9;max-width:720px;margin-top:clamp(26px,3.4vw,44px)}
.hero-handling{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.strek{width:46px;height:2px;background:var(--gul);display:block;flex:none}

/* ---------- the band ---------- */
.band{background:var(--gul);color:var(--kull);overflow:hidden;
  border-top:3px solid var(--kull);border-bottom:3px solid var(--kull);
  padding:14px 0}
.band-spor{display:flex;width:max-content;animation:rulle 58s linear infinite}
.band-spor span{display:flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--display);font-stretch:62.5%;font-weight:900;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,29px);line-height:1;white-space:nowrap}
.band-spor b{width:9px;height:9px;background:var(--rod);transform:rotate(45deg);flex:none}
@keyframes rulle{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-spor{animation:none}}

/* ---------- menu ---------- */
.meny{padding:clamp(56px,7vw,90px) var(--side) clamp(48px,6vw,72px);
  background:var(--papir);color:var(--kull)}
.brodd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,5vw,64px);
  align-items:end}
.brodd h2{margin:0;font-size:clamp(46px,7vw,98px);line-height:.88;color:var(--rod)}
.brodd p{margin:0 0 8px;font-size:16px;line-height:1.65;color:rgba(27,21,18,.72)}
.brodd em{font-family:var(--serif);font-style:italic;color:var(--rod);font-size:1.18em}

.faner{display:flex;gap:clamp(16px,3vw,42px);margin-top:38px;overflow-x:auto;
  border-bottom:2px solid rgba(27,21,18,.16);scrollbar-width:none}
.faner::-webkit-scrollbar{display:none}
.fane{appearance:none;background:none;border:0;cursor:pointer;padding:0 0 12px;
  font-size:clamp(22px,3.2vw,36px);line-height:1;color:rgba(27,21,18,.42);
  border-bottom:4px solid transparent;white-space:nowrap;margin-bottom:-2px;
  transition:color .22s,border-color .22s}
.fane:hover{color:rgba(27,21,18,.8)}
.fane[aria-selected="true"]{color:var(--rod);border-bottom-color:var(--rod)}

.meny-rutenett{display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:clamp(24px,4vw,56px);align-items:start}
.gruppe-tittel{display:flex;align-items:baseline;gap:14px;padding:22px 0 8px;
  font-family:var(--display);font-stretch:62.5%;font-weight:900;text-transform:uppercase;
  font-size:22px;line-height:1;color:var(--rod)}
.kolonner{display:flex;gap:0;margin-left:auto}
.kolonne-navn{font-family:var(--body);font-stretch:100%;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;color:rgba(27,21,18,.62);width:70px;text-align:right;
  text-transform:uppercase}

.rett{position:relative;display:flex;align-items:baseline;gap:14px;width:100%;
  padding:13px 4px 13px 0;border:0;border-top:1px solid rgba(27,21,18,.14);
  background:none;color:inherit;font:inherit;text-align:left;
  transition:padding-left .26s ease}
.rett-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
.om{font-size:13px;line-height:1.4;color:rgba(27,21,18,.58)}
.rett.klikkbar{cursor:pointer}
.rett.klikkbar:hover,.rett.klikkbar:focus-visible{padding-left:12px}
.rett::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  background:var(--rod);opacity:0;transition:opacity .26s}
.rett.klikkbar:hover::before,.rett.klikkbar:focus-visible::before{opacity:1}
.navn{font-size:clamp(16px,1.7vw,19.5px);font-weight:600;letter-spacing:-.01em;
  line-height:1.25}
.leder{flex:1;height:1px;background:rgba(27,21,18,.22);min-width:14px;
  transform:translateY(-6px);align-self:flex-start;margin-top:14px}
.pris{font-stretch:75%;font-size:clamp(20px,2.4vw,26px);line-height:1;color:var(--rod);
  font-variant-numeric:tabular-nums;width:70px;text-align:right;flex:none}
.pris.dim{color:rgba(27,21,18,.55)}

.tallerken{position:sticky;top:96px;text-align:center}
.tallerken-glo{position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(242,178,51,.55) 0%,
    rgba(242,178,51,.16) 48%,rgba(246,239,226,0) 72%)}
.tallerken img{position:relative;width:100%;height:auto;display:block;
  animation:svev 9s ease-in-out infinite}
.rettnavn{position:relative;margin:18px 0 0;font-size:14px;line-height:1.4;
  color:rgba(27,21,18,.7)}
@keyframes svev{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.meny-bunn{margin-top:26px;padding-top:22px;border-top:3px solid var(--rod)}
.allergen{margin:0;font-size:12.5px;line-height:1.5;color:rgba(27,21,18,.6);
  max-width:62ch}
.allergen strong{color:var(--rod)}

/* ---------- place ---------- */
.sted{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:0;
  background:var(--kull);color:var(--papir)}
.huset{position:relative;margin:0;min-height:460px;overflow:hidden}
.huset img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block}
.huset figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(24px,3vw,38px);
  background:linear-gradient(180deg,rgba(27,21,18,0) 0%,rgba(27,21,18,.9) 60%)}
.huset-logo{height:38px;width:auto;display:block;margin-bottom:16px}
.adresse{display:block;font-size:clamp(30px,3.6vw,52px);line-height:.94;color:var(--papir)}
.poststed{display:block;font-size:15px;color:rgba(246,239,226,.82);margin-top:8px}

.apent{padding:clamp(44px,5vw,64px) var(--side)}
.apent h2{margin:0;font-size:clamp(46px,6vw,86px);line-height:.9;color:var(--gul)}
.status{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;
  animation:puls 2.2s ease-in-out infinite}
.status.apen{color:#5FD07E}
.status.stengt{color:#FF7A5C}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.25}}

.tider{width:100%;border-collapse:collapse;margin-top:20px}
.tider tr{border-top:1px solid rgba(246,239,226,.16);transition:background .22s}
.tider tr:last-child{border-bottom:1px solid rgba(246,239,226,.16)}
.tider tr.idag{background:rgba(242,178,51,.16)}
.tider td{padding:12px 14px;font-size:16px;color:rgba(246,239,226,.78)}
.tider td:last-child{font-stretch:75%;font-size:22px;text-align:right;
  font-variant-numeric:tabular-nums}
.tider tr.idag td{color:var(--gul)}
.takeaway{margin:14px 0 0;font-size:13px;line-height:1.5;color:rgba(246,239,226,.62)}

.lever-tittel{margin:30px 0 14px;font-size:22px;color:rgba(246,239,226,.72)}
.partnere{display:flex;flex-direction:column;gap:12px}
.partner{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:76px;padding:14px 22px;border:1px solid rgba(246,239,226,.3);
  color:var(--papir);
  transition:background .26s,border-color .26s,transform .26s cubic-bezier(.16,.84,.3,1)}
.partner strong{display:block;font-family:var(--display);font-stretch:62.5%;font-weight:900;
  text-transform:uppercase;font-size:29px;line-height:1}
.partner small{display:block;margin-top:5px;font-size:12.5px;line-height:1.4;
  color:rgba(246,239,226,.64)}
.partner svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.partner:hover{transform:translateX(6px);color:var(--papir)}
.partner-foodora:hover{background:var(--foodora);border-color:var(--foodora);color:#fff}
.partner-foodora:hover small{color:rgba(255,255,255,.85)}
.partner-delivia:hover{background:var(--delivia);border-color:var(--delivia);color:#0E2A17}
.partner-delivia:hover small{color:rgba(14,42,23,.78)}
.partner-ring{background:var(--gul);border-color:var(--gul);color:var(--kull)}
.partner-ring small{color:rgba(27,21,18,.72)}
.partner-ring:hover{color:var(--kull);filter:brightness(1.06)}
.partner-ring small{color:rgba(246,239,226,.84)}
.veibeskrivelse{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--gul);border-bottom:1px solid currentColor}
.veibeskrivelse:hover{color:var(--papir)}

/* ---------- footer ---------- */
.bunn{padding:clamp(44px,5vw,64px) var(--side);border-top:3px solid var(--gul);
  background:var(--rod);color:var(--papir)}
.bunn-logo{height:40px;width:auto;display:block;margin-bottom:30px}
.bunn-kolonner{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px}
.bunn h4{margin:0 0 10px;font-family:var(--display);font-stretch:62.5%;font-weight:900;
  text-transform:uppercase;font-size:20px;color:var(--gul)}
.bunn span{display:block;font-size:15px;line-height:1.6;color:rgba(246,239,226,.84)}
.bunn a{display:flex;align-items:center;min-height:44px;font-size:15px;
  color:rgba(246,239,226,.84);width:fit-content}
.bunn a:hover{color:var(--gul)}
.orgnr{margin:34px 0 0;font-size:12.5px;color:rgba(246,239,226,.6)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .meny-rutenett{grid-template-columns:1fr}
  .tallerken{position:static;order:-1;max-width:340px;margin:22px auto 0}
  .sted{grid-template-columns:1fr}
  .huset{min-height:380px}
}
@media (max-width:820px){
  .brodd{grid-template-columns:1fr}
  .navi{display:none}
  .lever{margin-left:auto}
  .lockup-holder{margin-top:0;margin-bottom:18px}
  .foran{display:none}
  .rig-ytre{position:relative;right:auto;top:auto;width:min(100%,420px);margin:0 auto 8px}
  .hero-bunn{margin-top:26px;max-width:none}
  .hero{min-height:0;padding-top:26px}
  .lag-1,.lag-2,.lag-3{display:none}
  .glo{right:-30%;top:8%;width:120vw}
}
@media (max-width:520px){
  .topp{flex-wrap:wrap;gap:12px}
  .merke img{height:34px}
  .pill{height:44px;padding:0 14px;font-size:17px}
  .knapp{height:56px;padding:0 20px;font-size:21px;white-space:normal}
  .meny-bunn .knapp{width:100%;justify-content:center}
  .partner{padding:14px 16px}
  .partner strong{font-size:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}