/* The shell every page wears, the site's and the app's: promo bar, header and its menu sheet,
   the sticky mobile call to action, footer. Values follow the reference
   layout (parity spec 01, section 1); tokens come from theme.css. */

/* ── moving between pages ── */
/* A move between two pages, the site's or the app's, is a cross-fade, not
   a cut: the paper is the same on both and stands still while one page's
   words and pictures dissolve into the next's. The header moves as one
   piece while the move is drawn, so a header pinned to the window's top on
   a scrolled page slides down into its place under the promo bar instead
   of showing twice; it is named only then, as a named element is a
   backdrop root and the frosted header blurs the page under it the rest of
   the time. Its picture has no blur to draw, so for those 0.3 s it is near
   opaque, as where the browser cannot blur, and no words show through it.
   The logo is carried on its own, so where the next header has no menu
   button (the creator's, on a phone) it slides over instead of showing
   twice. Here, in the sheet both wear and read early, as an app page that asks
   for the move in a sheet of its own may be drawn before that sheet is in
   and then gets none. The app's first paint is the site's header (the
   service's app.html), and its first render waits for the move to end
   (frontend lib/firstPaint.ts), as replacing the named header ends it.
   Without view transitions, or for a visitor who asks for less motion, the
   move stays a cut. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
html:active-view-transition .navbar { view-transition-name: site-header; }
html:active-view-transition .navbar-brand { view-transition-name: site-logo; }
html:active-view-transition .navbar::before { background: var(--paper), rgb(250 248 240 / 97%); }
::view-transition-group(*) { animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
/* The skip link lands the page's content just under the fixed header. */
main { flex: 1 0 auto; scroll-margin-top: 79px; }
.container { max-width: 1340px; }
/* From the widest breakpoint up the gutter grows: below 1340 px the
   container is the window's width, and Bootstrap's 12 px put the logo and
   the headings against a laptop screen's edge. */
@media (min-width: 1200px) { .container { padding-inline: 32px; } }
a { color: var(--text-color); text-decoration: none; }
a:hover { color: var(--primary-ink); }
p { color: var(--text-color); }

/* The pill buttons (not Bootstrap's .btn): filled turquoise, outlined on
   hover, in the ink that carries white text and reads on the cream. */
.button {
  display: inline-block; background-color: var(--primary-ink); 
  color: #fff; border: 2px solid var(--primary-ink); border-radius: var(--radius-pill); padding: 12px 50px;
  font-size: var(--fs-md); font-weight: 700; line-height: 1.5; margin-bottom: 8px; text-align: center; cursor: pointer;
  box-shadow: 0 3px 0 var(--primary-press), 0 6px 14px -8px rgb(var(--primary-color-rgb) / 70%); outline: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  background: var(--primary-color);
}
.button:hover, .button:focus-visible {
  background: var(--primary-hover); color: var(--primary-ink);
  border-color: var(--primary-ink); box-shadow: 0 4px 0 var(--primary-press), 0 10px 20px -10px rgb(var(--primary-color-rgb) / 80%);
  transform: translateY(-1px);
}
.button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-press); transition-duration: 0.06s; }
.button.button2 { background: transparent; color: var(--primary-ink); box-shadow: none; }
.button.button2:hover, .button.button2:focus-visible { background: var(--light-primary-color); color: var(--primary-hover); border-color: var(--primary-hover); box-shadow: none; }
.button.button2:active { box-shadow: none; }
@media (max-width: 560px) { .button { padding: 12px 30px; } }

/* Icons stay invisible until their font has loaded (site.js), so no
   ligature names flash as text: only where the script runs to show them,
   and never a symbol the site draws itself (an svg, no font to wait for). */
@media (scripting: enabled) {
  .material-symbols-outlined:not(svg) { visibility: hidden; }
  .icons-loaded .material-symbols-outlined { visibility: visible; }
}

/* The skip link (layout.html), out of sight until the keyboard reaches it,
   then over the promo bar's corner. */
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 8px 16px; border-radius: 8px;
  background: #fff; color: var(--primary-ink); font-weight: 700; outline: 3px solid var(--primary-ink); outline-offset: 2px; }

/* ── promo bar ── */
.topbar-action { height: 40px; background-color: var(--primary-ink); display: flex; align-items: center; background: var(--primary-color); }
.topbar-action p { margin: 0; color: #fff; font-size: var(--fs-base); font-weight: 600; align-items: center; justify-content: center; }
.topbar-action .material-symbols-outlined { font-size: 20px; margin-right: 8px; }
.topbar-action b { margin: 0 15px; }
@media (max-width: 767px) {
  .topbar-action p { font-size: var(--fs-sm); line-height: 19px; }
  .topbar-action .material-symbols-outlined { font-size: 18px; }
  .topbar-roteer { position: relative; height: 24px; overflow: hidden; margin: 8px auto !important; }
  .topbar-usp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
  .topbar-usp:nth-child(1) { animation: mp-usp-a 10s infinite; }
  .topbar-usp:nth-child(2) { animation: mp-usp-b 10s infinite; }
}
@keyframes mp-usp-a { 0%, 45% { transform: translateY(0); opacity: 1; } 50%, 95% { transform: translateY(-100%); opacity: 0; } 95.01% { transform: translateY(100%); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes mp-usp-b { 0%, 45% { transform: translateY(100%); opacity: 0; } 50%, 95% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; } }
/* Under reduced motion nothing turns over: the first message stands, and
   the second, which the bar has no room for beside it, is only read out. */
@media (prefers-reduced-motion: reduce) {
  .topbar-usp:nth-child(1), .topbar-usp:nth-child(2) { animation: none; transform: none; }
  .topbar-usp:nth-child(2) { opacity: 0; }
}

/* ── header ── */
.navbar {
  padding: 15px 0; top: 40px;
  transition: top 0.4s ease, box-shadow 0.3s ease;
  background: none;
}
/* The header wears the page's paper, grain and all: frosted alone, its blur
   smooths away the grain under it and leaves a smooth strip above the
   grainy page. */
.navbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper), rgb(250 248 240 / 97%); }
.navbar.navbar-fixed { top: 0; box-shadow: 0 1px 0 rgb(var(--shade) / 8%), 0 12px 24px -18px rgb(var(--shade) / 45%); }
.navbar.navbar-hidden { top: -100px; box-shadow: none; }
.navbar > .container { display: flex; align-items: center; justify-content: space-between; }
@supports (padding: env(safe-area-inset-left)) {
  .navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
.navbar-space { height: 79px; }

/* Our logo: the mark (img/favicon.svg) and the word, set in the page font. */
.logo { display: inline-flex; align-items: center; gap: 9px; height: 39px; color: var(--text-color); }
.logo-mark { width: 44px; height: 44px; flex: none; }
.logo-word { font-size: 32px; font-weight: 800; letter-spacing: -0.2px; line-height: 1; white-space: nowrap; font-family: var(--heading-font); padding-top: 2px; }
.navbar-brand:hover .logo { color: var(--text-color); }

.navbar-light .navbar-nav .nav-link { font-size: var(--fs-base); font-weight: 600; color: var(--text-color); padding: 0 0 0 25px; }
.navbar-light .navbar-nav .nav-link:hover { color: var(--primary-ink); }
@media (max-width: 1350px) { .navbar-light .navbar-nav .nav-link { padding-left: 17px; } }

.menu2 > ul { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu2 li { color: var(--text-color); font-weight: 700; }
.menu2 li.item { padding-left: 18px; max-width: 50px; }
.menu2 li.item.account { padding-left: 0; }
.menu2 li.item.flag { padding: 0 3px; }
.menu2 li.item.flag + li.item.account { padding-left: 18px; }
.menu2 .nav-link { color: var(--text-color); padding: 0; }
.menu2 .nav-link:hover { color: var(--primary-ink); }
.menu2 .material-symbols-outlined { font-size: 32px; }
.menu2 .button { font-size: 1rem; font-weight: 600; padding: 4px 15px; border-width: 1px; margin: 0 0 0 20px; color: #fff; box-shadow: 0 2px 0 var(--primary-press); }
.menu2 .button:hover { color: var(--primary-ink); box-shadow: 0 3px 0 var(--primary-press); }
.menu2 .button:active { box-shadow: 0 1px 0 var(--primary-press); }
.cart_items {
  position: absolute; top: -4px; right: -4px; background: var(--primary-ink); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  height: 18px; min-width: 18px; padding: 0 4px; border-radius: var(--radius-pill); line-height: 18px; text-align: center;
}

/* The menu glyph: three stepped bars that turn into an X. */
.navbar-light .navbar-toggler { border: 0; padding: 0.25rem 0; flex-direction: column; align-items: flex-start; box-shadow: none; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.icon-bar { display: block; height: 3px; background: var(--text-color); border-radius: 3px; margin: 2px 4px; transition: all 0.2s; }
.top-bar { width: 26px; } .middle-bar { width: 22px; } .bottom-bar { width: 18px; }
.navbar:has(#navbarNav.show) .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; }
.navbar:has(#navbarNav.show) .middle-bar { opacity: 0; }
.navbar:has(#navbarNav.show) .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; width: 26px; }

@media (max-width: 1199px) {
  .navbar-light .navbar-toggler { display: flex; }
  .navbar { padding: 10px 0; }
  .navbar-collapse {
    position: fixed; top: 69px; left: 0; right: 0; bottom: 0; overflow-y: auto; background: #faf8f0f0; z-index: 1050;
    padding: 0 calc(var(--bs-gutter-x) * 0.5);
  }
  .navbar-light .navbar-nav { padding: 20px 0; min-height: calc(100vh - 123px); }
  .navbar-light .navbar-nav .nav-link { font-size: var(--fs-lg); font-weight: 700; padding: 14px 0; border-bottom: 1px solid #0097a726; }
  .navbar-light .navbar-nav .button { width: 100%; text-align: center; margin: 14px 0 0; padding: 9px 0; color: #fff; border-bottom: 2px solid var(--primary-ink); }
  .navbar-light .navbar-nav .button:hover { color: var(--primary-ink); }
  .cart_items { top: 2px; }
}
@media (max-width: 767px) {
  .logo { height: 31px; max-width: calc(100vw - 152px); }
  .logo-mark { width: 35px; height: 35px; }
  .logo-word { font-size: 26px; }
  .menu2 .material-symbols-outlined { font-size: 27px; }
  .menu2 li.item { padding-left: 10px; }
  .top-bar { width: 24px; } .middle-bar { width: 20px; } .bottom-bar { width: 16px; }
  .navbar:has(#navbarNav.show) .top-bar { transform-origin: 5% 10%; }
  .navbar:has(#navbarNav.show) .bottom-bar { transform-origin: 5% 90%; width: 24px; }
  .navbar-collapse { top: 64px; }
  .cart_items { top: -2px; height: 16px; min-width: 16px; font-size: var(--fs-xs); line-height: 16px; padding: 0 3px; }
}
@media (max-width: 360px) { .menu2 li.item { padding-left: 7px; } }

/* ── the sticky call to action on phones, after 400 px of scroll ── */
/* Parked below the window it is hidden as well, so neither the keyboard
   nor a screen reader meets it there; visibility changes at the slide's
   end on the way out and at its start on the way in. */
.mobile-footer-new-book {
  position: fixed; bottom: -100px; width: 100%; z-index: 10; background: #ffffffcf; padding: 15px 0; visibility: hidden;
  border-top: 1px solid var(--primary-rule); transition: bottom 0.4s ease-in-out, visibility 0.4s;
}
.mobile-footer-new-book.is-visible { bottom: 0; visibility: visible; }
.mobile-footer-new-book .button { display: block; width: 100%; margin: 0; padding: 10px 5px; }
/* Only where it is drawn (d-md-none): from 768 px it takes no room. */
@media (max-width: 767px) { body:has(.mobile-footer-new-book.is-visible) .site-footer { padding-bottom: 110px; } }

/* ── footer ── */
.site-footer {
  color: var(--text-color); font-size: var(--fs-base); line-height: 1.6; padding: 10px 0 25px; margin-top: auto;
  background: linear-gradient(0deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(250, 248, 240, 0) 100%);
}
.sf-top { display: flex; gap: 56px; align-items: flex-start; }
.sf-brand { flex: 0 0 260px; }
.sf-logo .logo { height: 36px; }
.sf-logo .logo-word { font-size: 30px; }
.sf-slogan { font-size: var(--fs-base); font-weight: 300; max-width: 240px; margin: 5px 0 18px; }
.sf-brand-rule { display: none; }
.sf-social { display: flex; gap: 10px; margin: -4px 0 18px; }
.sf-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f5e9d3; color: var(--ink-soft); }
.sf-social a:hover { color: var(--primary-color); }
.sf-social svg { width: 20px; height: 20px; }
.sf-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; flex: 1; }
.sf-col h2 { font-family: var(--bs-body-font-family); font-size: var(--fs-base); font-weight: 700; color: var(--text-color); margin: 2px 0 14px; }
.sf-col ul { list-style: none; margin: 0; padding: 0; }
.sf-col li { margin-bottom: 11px; }
.sf-col a { font-size: var(--fs-base); font-weight: 400; color: var(--text-color); }
.sf-col a:hover { color: var(--primary-ink); }
.sf-rule { border: 0; border-top: 1px solid rgba(51, 41, 20, 0.08); margin: 40px 0 0; opacity: 1; }
.sf-pay { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px 28px; padding: 22px 0; }
.sf-pay-group { display: flex; align-items: center; gap: 18px; }
.sf-pay-label { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; line-height: 1; }
.sf-pay-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pay-logos img { height: 31px; width: auto; background: #fff; border-radius: var(--radius-sm); padding: 4px 6px; object-fit: contain; }
.sf-country-btn { display: inline-flex; align-items: center; gap: 9px; background: #f5e9d3; border: 0; border-radius: var(--radius-pill); padding: 9px 18px; color: var(--ink-soft); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; cursor: pointer; }
.sf-country-btn .fi { width: 15px; height: 15px; border-radius: 100%; display: block; }
.sf-chev { width: 15px; height: 15px; }

/* The choice of site, as the studied shop's: a round flag in the header (a
   row of the phone menu), the country and currency in the footer, and the
   "Välj land och språk" dialog they open. A flag is flag-icons' square cut
   (static/vendor/flags). */
.mpc-open { background: none; border: 0; padding: 0; display: inline-flex; align-items: center; font: inherit; color: inherit; cursor: pointer; }
.mpc-open:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 6px; }
.mpc-open .fi { width: 20px; height: 20px; border-radius: 100%; display: block; }
/* The phone menu's row is a button, so it takes the menu links' width,
   padding and rule itself. */
.mpc-open-nav { display: flex; width: 100%; text-align: left; padding: 14px 0; }
#marketModal { --mpc-ink: #2b2118; --mpc-muted: #7d6f63; --mpc-line: #f0e4d6; --mpc-tint: #fff8f0; }
#marketModal .modal-dialog { max-width: min(1000px, calc(100% - 2rem)); margin: 1rem auto; }
#marketModal .modal-content { border: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 32px 80px -24px rgba(43, 33, 24, .45), 0 4px 14px rgba(43, 33, 24, .08); }
#marketModal .mpc-head { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: var(--mpc-tint); border-bottom: 1px solid var(--mpc-line); }
#marketModal .mpc-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.6rem); font-weight: 700; line-height: 1.2; color: var(--mpc-ink); text-wrap: balance; }
#marketModal .mpc-close { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #fff; color: var(--mpc-ink); box-shadow: 0 1px 3px rgba(43, 33, 24, .14); cursor: pointer; transition: background .16s, transform .16s; }
#marketModal .mpc-close:hover { background: var(--primary-ink); color: #fff; transform: rotate(90deg); }
#marketModal .mpc-close:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
#marketModal .mpc-body { padding: 14px 28px 18px; max-height: calc(100vh - 118px); overflow-y: auto; overscroll-behavior: contain; }
#marketModal .mpc-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 9px; list-style: none; margin: 0; padding: 0; }
#marketModal .mpc-tile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; min-height: 62px; padding: 9px 15px; background: #fff; border: 1.5px solid var(--mpc-line); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
#marketModal a.mpc-tile:hover, #marketModal .mpc-tile:focus-within { border-color: var(--primary-color); box-shadow: 0 8px 22px -10px rgba(var(--primary-color-rgb), .5); transform: translateY(-2px); }
#marketModal .mpc-tile.is-current { border-color: var(--primary-color); background: var(--mpc-tint); }
/* A site not yet open: listed, not linked. */
#marketModal .mpc-tile.is-closed, #marketModal .mpc-lang.is-closed { opacity: .5; }
#marketModal .mpc-tile.is-closed .mpc-lang.is-closed { opacity: 1; }
#marketModal .mpc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
#marketModal .mpc-flag { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(43, 33, 24, .1); }
#marketModal .mpc-country { display: block; min-width: 0; font-weight: 650; font-size: .98rem; line-height: 1.25; color: var(--mpc-ink); overflow-wrap: anywhere; }
#marketModal .mpc-langs { display: flex; flex-wrap: wrap; gap: 6px; }
#marketModal .mpc-lang { display: inline-block; padding: 2px 9px; font-size: .76rem; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--mpc-muted); background: var(--mpc-tint); border: 1px solid var(--mpc-line); border-radius: var(--radius-pill); text-decoration: none; transition: background .14s, color .14s, border-color .14s; }
#marketModal a.mpc-lang:hover, #marketModal a.mpc-lang:focus-visible { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; outline: 0; }
#marketModal .mpc-lang.is-current { background: var(--primary-ink); border-color: var(--primary-ink); color: #fff; }
@media (max-width: 991.98px) {
  #marketModal .mpc-grid { grid-template-columns: repeat(2, 1fr); }
}
/* At phone width the dialog is a sheet over the whole screen, its head
   fixed and its list scrolling; without align-items: stretch and the full
   height, Bootstrap's centring scrolls the whole sheet and the title away.
   No scale animation here: the end state never waits on one. */
@media (max-width: 575.98px) {
  #marketModal { padding: 0 !important; }
  #marketModal .modal-dialog { max-width: 100%; width: 100%; margin: 0; height: 100dvh; min-height: 100dvh; align-items: stretch; }
  #marketModal .modal-content { height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; }
  #marketModal .mpc-head { padding: 14px 16px; flex: 0 0 auto; }
  #marketModal .mpc-body { padding: 14px 18px 24px; max-height: none; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #marketModal .mpc-grid { grid-template-columns: 1fr; }
  #marketModal.fade .modal-dialog, #marketModal.fade.show .modal-dialog { transform: none; opacity: 1; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #marketModal.fade .modal-dialog { transition: none; transform: none; opacity: 1; }
  #marketModal .mpc-close:hover, #marketModal a.mpc-tile:hover { transform: none; }
}
.site-footer .legal { text-align: center; font-size: var(--fs-sm); color: var(--muted-color); margin: 0; }
/* The page ends on the sea and the paper boat that close every printed
   book: the book's four wave colours drawn wide (img/sea.svg stretches
   freely), the boat its own layer so it keeps its shape. Purely
   decoration, so no text stands on the darker waves. */
.site-footer:not(.site-footer-lean) { padding-bottom: 0; }
.site-footer:not(.site-footer-lean)::after {
  content: ""; display: block; height: 120px; margin-top: 22px;
  background: url("img/sea-boat.svg") 74% 4px / 52px auto no-repeat, url("img/sea.svg") center bottom / 100% 100% no-repeat;
}
@media (max-width: 767px) {
  .site-footer:not(.site-footer-lean)::after { height: 72px; margin-top: 14px; background-size: 34px auto, 100% 100%; background-position: 78% 0, center bottom; }
}
/* Under the fixed create button the sea runs on beneath it instead of a
   cream strip. */
@media (max-width: 767px) {
  body:has(.mobile-footer-new-book.is-visible) .site-footer:not(.site-footer-lean) { padding-bottom: 0; }
  body:has(.mobile-footer-new-book.is-visible) .site-footer:not(.site-footer-lean)::after { height: 160px; }
}
@media (max-width: 991px) {
  .site-footer { padding: 34px 0 22px; }
  .sf-top { flex-direction: column; align-items: center; gap: 26px; }
  .sf-brand { flex: none; width: 100%; text-align: center; }
  .sf-slogan { margin: 10px auto 0; }
  .sf-social { justify-content: center; margin: 14px 0 0; }
  .sf-brand-rule { display: block; border: 0; border-top: 1px solid rgb(51 41 20 / 24%); width: 100%; margin: 22px 0 0; opacity: 1; }
  .sf-cols { grid-template-columns: repeat(2, 1fr); max-width: 440px; width: 100%; gap: 22px 18px; }
  .sf-col h2 { margin: 5px 0; }
  .sf-col li { margin-bottom: 2px; }
  .sf-col a { display: inline-block; padding: 5px 0; }
  .sf-rule { margin-top: 28px; }
  .sf-pay { flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
  .sf-pay-group { flex-direction: column; gap: 12px; }
  /* The marks wrap as balanced lines: the count follows the market's methods,
     and a flex row would leave one mark alone on the last line. */
  .sf-pay-logos { display: block; margin: -4px 0; text-align: center; text-wrap: balance; line-height: 0; }
  .sf-pay-logos img { margin: 4px; vertical-align: top; }
}
@media (max-width: 767px) { .site-footer { padding-top: 17px; } }

@media (prefers-reduced-motion: reduce) {
.button, .button:hover, .button:focus-visible, .button:active { transform: none; }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.navbar::before { background: var(--paper), rgb(250 248 240 / 82%); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
}