/* GENERATED by scripts/sync-static-header.mjs from src/components/SiteNav.astro — do not edit. */
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/amiri-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/amiri-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/amiri-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexar-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexar-latinext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plexar-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexar-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexar-latinext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plexar-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* v2 tokens the header uses (the static pages have their own, older :root). */
.masthead {
  --night: #0F2740; --navy: #14314E; --lantern: #ECC55A; --brass: #C9A84C;
  --night-rgb: 15 39 64; --paper-rgb: 241 240 236; --brass-rgb: 201 168 76; --lantern-rgb: 236 197 90;
  --on-night: #F1F0EC; --on-night-soft: rgb(241 240 236 / .72);
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Amiri', 'Traditional Arabic', serif;
  --nav-h: 68px;
}
@media (max-width: 899px) { .masthead { --nav-h: 58px; } }

/* ── Masthead: one night bar on every page ── */
  .masthead {
    position: fixed; top: 0; inset-inline: 0; z-index: 100;
    background: var(--night);
    border-bottom: 1px solid rgb(var(--brass-rgb) / .28);
    color: var(--on-night);
    font-family: var(--font-body);
  }
  .masthead-bar {
    height: var(--nav-h);
    box-sizing: border-box;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(12px, 3.3vw, 48px);
    display: flex; align-items: center;
    gap: clamp(16px, 2.8vw, 40px);
  }
  .masthead a { text-decoration: none; }
  .masthead a:focus-visible, .masthead button:focus-visible {
    outline: 2px solid var(--lantern); outline-offset: 2px; border-radius: 8px;
  }

  .masthead-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; border-radius: 8px; }
  .masthead-brand .masthead-logo { width: 44px; height: auto; display: block; }
  .masthead-tagline { font-size: 13px; line-height: 1.4; color: var(--brass); white-space: nowrap; }

  .masthead-nav { flex-grow: 1; min-width: 0; display: flex; justify-content: center; }
  .masthead-links {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center;
    gap: clamp(18px, 2.1vw, 30px);
  }
  .masthead-item { display: flex; align-items: center; }
  /* the shop, set apart from the reading links by a short brass rule */
  .masthead-item--shop { gap: clamp(18px, 2.1vw, 30px); }
  .masthead-item--shop::after { content: ''; width: 1px; height: 18px; background: rgb(var(--brass-rgb) / .4); }
  .masthead-item--sheet { display: none; }
  .masthead-link {
    position: relative;
    display: flex; align-items: center;
    height: var(--nav-h);
    padding-inline: 2px;
    font-size: 15px;
    white-space: nowrap;
    color: rgb(var(--paper-rgb) / .74);
    transition: color .2s ease;
  }
  .masthead-link:hover { color: var(--lantern); }
  .masthead-link[aria-current="page"] { color: var(--on-night); font-weight: 600; }
  /* current page: a lantern-gold zellige diamond under the word */
  .masthead-link[aria-current="page"]::after {
    content: '';
    position: absolute; bottom: 10px; inset-inline: 0;
    margin-inline: auto;
    width: 6px; height: 6px;
    background: var(--lantern);
    transform: rotate(45deg);
  }
  .masthead-link-desc, .masthead-sheet-extra { display: none; }

  .masthead-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .masthead-search {
    height: 44px; width: 232px; box-sizing: border-box;
    display: flex; align-items: center; gap: 10px;
    padding-inline: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgb(var(--paper-rgb) / .2);
    background: rgb(var(--paper-rgb) / .04);
    color: rgb(var(--paper-rgb) / .62);
    font-size: 14px;
    transition: border-color .2s ease, color .2s ease;
  }
  .masthead-search svg { color: var(--brass); flex-shrink: 0; }
  .masthead-search:hover { border-color: rgb(var(--brass-rgb) / .7); color: var(--on-night); }
  .masthead-search-text { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .masthead-kbd {
    font: 500 12px var(--font-body);
    border: 1px solid rgb(var(--paper-rgb) / .22); border-radius: 6px;
    padding: 1px 7px;
    color: rgb(var(--paper-rgb) / .62);
  }
  .masthead-wish {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    color: var(--on-night);
    transition: color .2s ease;
  }
  .masthead-wish:hover { color: var(--lantern); }

  /* counts: lantern gold on night, never alarm red */
  .masthead-count {
    min-width: 18px; height: 18px; box-sizing: border-box;
    padding: 0 5px; border-radius: 9px;
    background: var(--lantern); color: var(--night);
    font: 600 11px/18px var(--font-body);
    text-align: center;
  }
  .masthead-count[hidden] { display: none; }
  .masthead-count--pin { position: absolute; top: 5px; inset-inline-end: 3px; }

  /* cart: outlined when empty, a filled brass button once it holds books */
  .masthead-cart {
    height: 44px;
    display: flex; align-items: center; gap: 8px;
    padding-inline: 14px;
    border-radius: 10px;
    border: 1px solid rgb(var(--brass-rgb) / .7);
    background: transparent;
    color: var(--lantern);
    font: 600 15px var(--font-body);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .masthead-cart:hover { background: rgb(var(--brass-rgb) / .14); }
  .masthead-cart:has(.masthead-count--cart:not([hidden])) { background: var(--brass); border-color: var(--brass); color: var(--night); }
  .masthead-cart:has(.masthead-count--cart:not([hidden])):hover { background: var(--lantern); border-color: var(--lantern); }
  .masthead-count--cart {
    min-width: 22px; height: 22px; border-radius: 11px;
    line-height: 22px; font-size: 12px;
    background: var(--night); color: var(--lantern);
  }

  .masthead-toggle {
    display: none;
    width: 44px; height: 44px;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .masthead-toggle--nojs, .masthead-toggle--nojs-close { display: none !important; }
  .masthead-toggle-bar {
    width: 22px; height: 2px; border-radius: 2px;
    background: var(--on-night);
    transition: transform .25s ease, width .25s ease, background-color .25s ease;
  }
  .masthead-toggle-bar + .masthead-toggle-bar { width: 14px; background: var(--lantern); }
  .is-open .masthead-toggle { background: rgb(var(--paper-rgb) / .08); }
  .is-open .masthead-toggle-bar { width: 20px; background: var(--lantern); }
  .is-open .masthead-toggle-bar:first-child { transform: translateY(4px) rotate(45deg); }
  .is-open .masthead-toggle-bar + .masthead-toggle-bar { transform: translateY(-4px) rotate(-45deg); }

  /* Narrower desktops: drop the tagline, search becomes an icon. */
  @media (max-width: 1099px) {
    .masthead-tagline, .masthead-search-text, .masthead-kbd { display: none; }
    .masthead-search {
      width: 44px; padding: 0; justify-content: center;
      border-color: transparent; background: transparent;
      color: var(--on-night);
    }
    .masthead-search svg { color: currentColor; }
  }

  @keyframes masthead-sheet-in {
    from { opacity: 0; transform: translateX(24px); } /* physical: the start edge is on the right in RTL */
    to { opacity: 1; transform: none; }
  }

  /* Phones and small tablets, right to left: menu · logo … search · cart. The
     menu button leads at the start edge (under the right thumb), the logo
     follows it, and search and cart sit at the end. The actions box dissolves
     (display: contents) so its buttons can be ordered with the logo; the links
     move into a full-screen sheet. */
  @media (max-width: 899px) {
    .masthead-bar { padding-inline: 8px 12px; gap: 8px; }
    .masthead-actions { display: contents; }
    .masthead-toggle { order: -1; }
    .masthead-brand { margin-inline-end: auto; padding: 4px; }
    .masthead-brand .masthead-logo { width: 36px; }
    .masthead-wish { display: none; }
    .masthead-cart { padding-inline: 10px; gap: 6px; font-size: 14px; }
    .masthead-cart-label { display: none; }
    .masthead-count--cart { min-width: 0; padding: 0; background: transparent; color: inherit; font-size: 14px; }
    .masthead-toggle { display: flex; }

    .masthead-nav {
      position: fixed; top: var(--nav-h); bottom: 0; inset-inline: 0;
      display: none;
      flex-direction: column; justify-content: flex-start;
      overflow-y: auto; overscroll-behavior: contain;
      box-sizing: border-box;
      padding: 8px 24px calc(24px + env(safe-area-inset-bottom, 0px));
      background: var(--night);
    }
    .is-open .masthead-nav { display: flex; }
    /* the sheet comes in from the menu button's side (the start edge, right) */
    @media (prefers-reduced-motion: no-preference) {
      .is-open .masthead-nav, html:not(.mh-js) .masthead-nav:target { animation: masthead-sheet-in .24s ease-out both; }
    }
    .masthead-links { flex-direction: column; align-items: stretch; gap: 0; }
    .masthead-item, .masthead-item--sheet { display: block; }
    .masthead-item--shop::after { display: none; }
    .masthead-link {
      height: auto;
      display: grid; grid-template-columns: 8px 1fr; align-items: center;
      column-gap: 14px;
      padding: 16px 0;
      white-space: normal;
      border-bottom: 1px solid rgb(var(--brass-rgb) / .2);
    }
    .masthead-link::before {
      content: '';
      grid-row: 1 / span 2;
      width: 8px; height: 8px; box-sizing: border-box;
      border: 1px solid rgb(var(--brass-rgb) / .6);
      transform: rotate(45deg);
    }
    .masthead-link[aria-current="page"]::before { background: var(--lantern); border-color: var(--lantern); }
    .masthead-link[aria-current="page"]::after { display: none; }
    .masthead-link-name { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1.15; color: var(--on-night); }
    .masthead-link[aria-current="page"] .masthead-link-name { color: var(--lantern); }
    .masthead-link-desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--on-night-soft); }

    .masthead-sheet-extra { display: flex; flex-direction: column; gap: 24px; flex-grow: 1; padding-top: 20px; }
    .masthead-sheet-wish {
      height: 48px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      border: 1px solid rgb(var(--paper-rgb) / .22); border-radius: 10px;
      color: var(--on-night); font-size: 15px;
    }
    .masthead-promise {
      list-style: none; margin: auto 0 0; padding: 0;
      display: flex; flex-direction: column; gap: 8px;
      font-size: 13px; line-height: 1.6; color: var(--on-night-soft);
    }
    .masthead-promise li { display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: center; column-gap: 10px; }
    .masthead-promise li::before { content: ''; width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); }
    /* No JavaScript: the link toggles open the sheet via :target. */
    html:not(.mh-js) #navToggle { display: none; }
    html:not(.mh-js) .masthead-toggle--nojs { display: flex !important; }
    html:not(.mh-js) .masthead-nav:target { display: flex; }
    html:not(.mh-js) .masthead:has(.masthead-nav:target) .masthead-toggle--nojs { display: none !important; }
    html:not(.mh-js) .masthead:has(.masthead-nav:target) .masthead-toggle--nojs-close { display: flex !important; color: var(--lantern); background: rgb(var(--paper-rgb) / .08); }
    html:has(.masthead-nav:target) .whatsapp-float { display: none; }

    /* the sheet takes the screen: floating cart / WhatsApp buttons step aside */
    html:has(.masthead.is-open) .whatsapp-float,
    html:has(.masthead.is-open) .cart-fab { display: none; }
  }

/* Static pages: the header sits in the flow (their content starts below it). */
.masthead { position: sticky; }