/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz */

@font-face {
  font-family: "Berthold Akzidenz Grotesk";
  src: url("../typsnitt/akzidenz-grotesk-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../typsnitt/helvetica-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Stefan Trial";
  src:
    url("../typsnitt/abc-stefan-trial-simple.woff2") format("woff2"),
    url("../typsnitt/abc-stefan-trial-simple.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --handels-riso-troskel: 0.42;
  --handels-riso-troskel-intens: 0.1;
  --kalla-gra: var(--kalla-primar);
  --typsnitt-rubrik: "Berthold Akzidenz Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --typsnitt-fot: "Helvetica", "Helvetica Neue", Arial, sans-serif;
  --typsnitt-betoning: "ABC Stefan Trial", "Berthold Akzidenz Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vikt-rubrik: 500;
  --vikt-fot: 300;
  --falt-inline: 100dvw;
  --falt-block: 100dvh;
  --cols: 2;
  --rows: 24;
  --ratio-space: 0.25;
  --ratio-row-gutter: 0.1;
  --ratio-type: 1.4;
  --u: calc(
    var(--falt-block)
    / (
      var(--rows)
      + var(--ratio-space)
      * (2 + (var(--rows) - 1) * var(--ratio-row-gutter))
    )
  );
  --gutter: calc(var(--u) * var(--ratio-space));
  --margin: var(--gutter);
  --rad-gap: calc(var(--gutter) * var(--ratio-row-gutter));
  --rutnat-block: calc(var(--rows) * var(--u) + (var(--rows) - 1) * var(--rad-gap));
  --falt-inset-block: var(--rutnat-block);
  --dev-grid-falt-block: var(--rutnat-block);
  --baseline: calc(var(--u) / 4);
  --col: calc(
    (
        var(--falt-inline)
        - (2 * var(--margin))
        - ((var(--cols) - 1) * var(--gutter))
      )
    / var(--cols)
  );
  --span-1: var(--col);
  --span-2: calc(var(--col) * 2 + var(--gutter));
  --span-3: calc(var(--col) * 3 + var(--gutter) * 2);
  --span-4: calc(var(--col) * 4 + var(--gutter) * 3);
  --span-5: calc(var(--col) * 5 + var(--gutter) * 4);
  --span-6: calc(var(--col) * 6 + var(--gutter) * 5);
  --strek: calc(var(--u) / 16);
  --stroke: var(--strek);
  --tau: 120ms;
  --dur-1: var(--tau);
  --dur-2: calc(var(--tau) * 2);
  --dur-half: calc(var(--tau) / 2);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: var(--ease-standard);
  --linje-tjocklek: var(--baseline);
  --lank-underline-tjocklek: var(--linje-tjocklek);
  --lank-underline-offset: calc(var(--baseline) / 2);
  --lank-dekor-block: calc(var(--lank-underline-offset) + var(--lank-underline-tjocklek));
  --lank-rad-hojd: calc(var(--typ-brod-hojd) + var(--lank-dekor-block));
  --lank-rad-efter: calc(var(--gutter) + var(--lank-dekor-block));
  --rad-text: calc(var(--u) - var(--linje-tjocklek));
  --rad-hojd: var(--u);
  --rad-steg: var(--rad-hojd);
  --typ-nav-hojd: var(--rad-text);
  --typ-nav: calc(var(--typ-nav-hojd) / var(--ratio-type));
  --typ-brod-hojd: calc(var(--baseline) * 2);
  --typ-brod: calc(var(--typ-brod-hojd) / var(--ratio-type));
  --typ-fot: calc(var(--baseline) / var(--ratio-type));
  --typ-3-hojd: calc(var(--baseline) * 6);
  --typ-3: calc(var(--typ-3-hojd) / var(--ratio-type));
  --trad-start: var(--margin);
  --linje-halv: calc(
    (var(--cols) / 2) * var(--col)
    + ((var(--cols) / 2) - 1) * var(--gutter)
  );
  --gut-ytter: var(--margin);
  --gut-nasta: calc(var(--margin) + var(--gutter));
  --insats-inline-rad: var(--gutter);
  --program-text-insats: var(--insats-inline-rad);
  --copy-bredd: var(--span-2);
  --copy-bredd-nasta: var(--span-1);
  --fot-hojd: var(--u);
  --media-program-hojd: calc(var(--u) * 5);
  --media-lokal-sida: var(--span-2);
  --media-las-bredd: var(--span-2);
  --las-brod-bredd: var(--span-1);
  --media-max-block: var(--falt-inset-block);
  --media-tathet-program: 0.75;
  --media-tathet-lokal: 0.75;
  --media-restaurant-ratio-mobil: 4 / 5;
  --media-restaurant-ratio-skrivbord: 16 / 9;
  --media-tathet-restaurant: 0.75;
  --caption-hojd: calc(var(--baseline) * 2);
  --styrenhet-insats: var(--margin);
  --styrenhet-band: calc(var(--styrenhet-insats) * 2 + var(--caption-hojd));
  --galleri-span: 100%;
  --galleri-luft: var(--u);
  --galleri-yta: calc(var(--falt-inset-block) - var(--u) - var(--galleri-luft));
  --galleri-bild-hojd: calc(var(--galleri-yta) - var(--styrenhet-band));
  --bx-gallery-full-topp: 0;
  --bx-gallery-full-block-reserv: var(--u);
  --bx-gallery-full-yta: calc(var(--galleri-yta) - var(--bx-gallery-full-block-reserv));
  --bx-gallery-full-bild-hojd: calc(var(--galleri-bild-hojd) - var(--bx-gallery-full-block-reserv));
  --bx-gallery-kolonn-block: calc(var(--rutnat-block) / 3);
  --staende-inline: 100%;
  --staende-gap: var(--gutter);
  --staende-text-hojd: var(--typ-brod-hojd);
  --staende-max-block: calc(var(--falt-inset-block) - var(--u) * 3);
  --bx-gallery-kolonn-rad-steg: calc(3 * var(--u) + 2 * var(--rad-gap));
  --bx-marginalia-kolonner: 1;
  --bx-marginalia-max-block: calc(var(--rutnat-block) / 2);
  --bx-marginalia-ratio: var(--media-restaurant-ratio-mobil);
  --bx-marginalia-luft: var(--u);
  --spelare-hojd: var(--caption-hojd);
  --spelare-insats: calc(var(--gutter) / 2);
  --cta-hojd: calc(var(--linje-tjocklek) * 2 + var(--rad-text));
  --text-cta-pa-accent: var(--text-cta-vila);
  --text-cta-pa-panel: var(--text-cta-vila);
  --rulla-insats-x: var(--gutter);
  --rulla-insats-y: calc(var(--baseline) * -2);
  --meny-namn: calc(var(--u) * 3);
  --meny-pris-start: calc(var(--u) * 3 + var(--gutter));
  --meny-grupp-gap: calc(var(--gutter) * 3);
  --meny-skrivbord-insats-inline: calc(var(--col) / 2);
  --black-hem-x: -13.875rem;
  --black-hem-y: -0.5625rem;
  --black-hem-b: 52.3125rem;
  --black-hem-h: 50.125rem;
  --black-restaurant-x: 1.0625rem;
  --black-restaurant-y: 4.375rem;
  --black-restaurant-b: 21.6875rem;
  --black-restaurant-h: 44.25rem;
  --black-meny-x: 11.875rem;
  --black-meny-y: -1.125rem;
  --black-meny-b: 21.0625rem;
  --black-meny-h: 54.625rem;
  --black-program-x: 0;
  --black-program-y: 10.9375rem;
  --black-program-b: 24.375rem;
  --black-program-h: 27.8125rem;
  --black-om-x: 6.3125rem;
  --black-om-y: -23.0625rem;
  --black-om-b: 31.418125rem;
  --black-om-h: 81.49375rem;
  --black-hem-skrivbord-x: -13.625rem;
  --black-hem-skrivbord-y: -29.4375rem;
  --black-hem-skrivbord-b: 116.3125rem;
  --black-hem-skrivbord-h: 111.5rem;
  --logotyp-b: 13.6875rem;
  --logotyp-h: 4.125rem;
  --logotyp-hem-block: var(--margin);
  --logotyp-hem-inline-end: var(--margin);
  --logotyp-vald-inline-start: var(--margin);
  --logotyp-vald-block-end: var(--margin);
  --kolumn-bredd: var(--span-2);
  --spelare-skrivbord-bredd: var(--span-1);
  --bryt-skarm: 64rem;
  --lager-bak: 0;
  --lager-black: 1;
  --lager-innehall: 2;
  --lager-list: 3;
  --lager-fot: 4;
  --lager-huvud: calc(var(--lager-fot) + 1);
  --lager-dev: calc(var(--lager-huvud) + 1);
  --hem-mark-ratio: 219 / 66;
  --hem-mark-stor-rader: 3;
  --hem-mark-stor-hojd: calc(var(--u) * var(--hem-mark-stor-rader));
  --hem-handels-mark-luft: calc((var(--hem-mark-stor-rader) - 1) * (var(--u) + var(--rad-gap)));
  --fokus-linje: calc(var(--u) / 27);
  --dev-grid-linje-margin: rgb(3 120 191);
  --dev-grid-linje-kol: rgb(3 120 191);
  --dev-grid-linje-rad: rgb(203 255 0);
  --dev-grid-linje-kol-gap: rgb(70 70 70);
  --dev-grid-linje-rad-gap: rgb(70 70 70);
  --dev-grid-etikett: rgb(3 120 191);
  --dold-spalt: calc(var(--u) / 54);
  --rorelse-snabb: calc(var(--tau) * 3 / 2);
  --rorelse-standard: calc(var(--tau) * 8 / 3);
  --sid-in-varaktighet: var(--rorelse-standard);
  --sid-in-resa: calc(var(--baseline) * 2);
  --sid-in-steg: var(--tau);
  --sid-in-fordrojning-max: calc(var(--sid-in-steg) * 8);
  --program-in-fordrojning-max: var(--sid-in-fordrojning-max);
  --view-transition-varaktighet: var(--rorelse-standard);
}

@media not (min-width: 64rem) {
  :root {
    --mobil-rad-nav: 1;
    --mobil-handels-rad-start: 2;
    --mobil-handels-rader: calc(var(--rows) - 1);
    --mobil-handels-mitt: calc(var(--rows) / 2 + 1);
    --handels-ring-tjocklek: var(--linje-tjocklek);
    --mobil-handelse-rad: calc(var(--u) * 2);
    --mobil-handelse-titel: calc(var(--mobil-handelse-rad) - var(--linje-tjocklek));
    --mobil-handelse-media-rader: 4;
    --mobil-handelse-media-min: calc(
      var(--mobil-handelse-media-rader) * var(--u)
      + (var(--mobil-handelse-media-rader) - 1) * var(--rad-gap)
    );
    --mobil-handelse-luft: var(--u);
    --sid-in-resa: var(--u);
    --meny-gif-mobil-rader: 6;
    --meny-gif-mobil-inline: var(--col);
    --meny-gif-mobil-block: calc(
      var(--meny-gif-mobil-rader) * var(--u)
      + (var(--meny-gif-mobil-rader) - 1) * var(--rad-gap)
    );
  }

  :root:has(.hem-skrivbord__cell--hem[data-nav-mark-stor="ja"]) {
    --mobil-handels-rad-start: 4;
    --mobil-handels-rader: calc(var(--rows) - 3);
  }
}

@media not (min-width: 40rem) {
  :root {
    --program-halv: calc(var(--rutnat-block) / 2);
    --idag-kropp: calc(var(--program-halv) - var(--trad-start) - (var(--u) * 2));
    --idag-media-hojd: calc(var(--idag-kropp) - (var(--u) * 4) - var(--cta-hojd));
    --idag-media-bredd: min(100%, calc(var(--idag-media-hojd) * 4 / 5));
  }
}

@media (min-width: 40rem) {
  :root {
    --cols: 3;
  }
}

@media (min-width: 64rem) {
  :root {
    --cols: 6;
    --copy-bredd: var(--span-3);
    --copy-bredd-nasta: var(--span-2);
    --kolumn-bredd: var(--span-3);
    --las-brod-bredd: var(--span-2);
    --media-lokal-sida: var(--span-3);
    --media-las-bredd: var(--span-3);

    --spelare-skrivbord-bredd: var(--span-3);
    --spelare-skrivbord-hojd: var(--u);
    --spelare-skrivbord-inset-block-start: calc(
      var(--margin) + (var(--rows) - 1) * (var(--u) + var(--rad-gap))
    );
    --spelare-skrivbord-inset-inline-start: var(--margin);
    --hem-handels-rad-start: 2;
    --hem-handels-rad-slut: 23;
    --hem-handels-rader: calc(var(--hem-handels-rad-slut) - var(--hem-handels-rad-start) + 1);
    --hem-handels-block-start: calc(
      var(--margin) + (var(--hem-handels-rad-start) - 1) * (var(--u) + var(--rad-gap))
    );
    --hem-handels-block: calc(
      var(--hem-handels-rader) * var(--u) + (var(--hem-handels-rader) - 1) * var(--rad-gap)
    );
    --hem-handels-kol-2-inline-start: calc(var(--margin) + var(--span-3) + var(--gutter));
    --staende-inline: var(--span-2);
    --staende-gap: var(--gutter);
    --staende-text-hojd: var(--typ-brod-hojd);
    --staende-max-block: calc(
      var(--hem-handels-block) - var(--staende-text-hojd) - var(--staende-gap)
    );
    --handels-ring-tjocklek: var(--linje-tjocklek);
    --handels-ring-luft: var(--gutter);
    --handels-ring-steg: calc(var(--handels-ring-tjocklek) + var(--handels-ring-luft));
    --handels-inre-fyll-inset: calc(
      var(--handels-ring-luft) + var(--handels-ring-steg) * 11 + var(--handels-ring-tjocklek)
    );
    --media-program-hojd: calc(var(--u) * var(--rows) / 3);
    --galleri-span: var(--span-3);
    --handelse-rubrik: calc(var(--u) * var(--rows) / 12);
    --meny-gif-rad-start: 4;
    --meny-gif-rader: 4;
    --meny-gif-block-start: calc(
      var(--margin) + (var(--meny-gif-rad-start) - 1) * (var(--u) + var(--rad-gap))
    );
    --meny-gif-block: calc(
      var(--meny-gif-rader) * var(--u) + (var(--meny-gif-rader) - 1) * var(--rad-gap)
    );
    --meny-gif-a-inline-start: var(--margin);
    --meny-gif-f-inline-start: calc(var(--margin) + 5 * (var(--col) + var(--gutter)));
    --program-kropp: calc(var(--u) * var(--rows) * 7 / 12);
    --program-lista: calc(var(--u) * var(--rows) / 3);
    --handelse-text-rubrik: calc(var(--handelse-rubrik) - var(--linje-tjocklek));
    --program-stam: calc(var(--u) * var(--rows));
    --sidtext-kropp: calc(
      (var(--rows) - 1) * var(--u) + (var(--rows) - 2) * var(--rad-gap)
    );
  }

  :root:has(.hem-skrivbord__cell--hem[data-nav-mark-stor="ja"]) {
    --hem-handels-rad-start: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tau: 0ms;
  }
}