/* Tile header for the quiet navigation (add-on to quiet-nav.css, load it AFTER quiet-nav.css).
   The whole bar is Seljuk tile mosaic under a black-lacquer veil, cream links, gold star and gold rule,
   gilt edge at the bottom. The bar is dark in both day and night mode. Usage: <nav class="qn qn-tile"> */

header.site nav.qn.qn-tile {
  --qn-ink: #e6dcc6; --qn-strong: #fff6dc; --qn-gold: #e3c77e; --qn-rule: rgba(227,199,126,.35);
  --qn-menu-bg: #141418; --qn-menu-hover: #24242b; --qn-btn-bg: #141418;
  position: relative; border-bottom: 0;
  padding: 1.5rem 1.4rem 1rem;
  background:
    linear-gradient(90deg, rgba(10,10,12,.92), rgba(10,10,12,.78) 55%, rgba(10,10,12,.62)),
    #0a0a0c url(img/nav-tile.webp?v=3) center 30% / cover no-repeat;
}
/* gilt edge, same as the banners */
header.site nav.qn.qn-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: repeating-linear-gradient(#ecd8a2 0 1px, #c9a44c 1px 2px);
}
/* moon in gold on the dark bar (the night-mode sun from quiet-nav.css already is gold) */
header.site nav.qn.qn-tile .qn-mode {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M13.5 3.2A7 7 0 1 0 16.8 14 6 6 0 0 1 13.5 3.2Z%22 fill=%22%23e3c77e%22/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(227,199,126,.5);
}
:root[data-theme="dark"] header.site nav.qn.qn-tile .qn-mode { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg stroke=%22%23e3b23c%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M10 1.5v2.4M10 16.1v2.4M1.5 10h2.4M16.1 10h2.4M4 4l1.7 1.7M14.3 14.3L16 16M4 16l1.7-1.7M14.3 5.7L16 4%22/%3E%3C/g%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%224%22 fill=%22%23e3b23c%22/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.site nav.qn.qn-tile .qn-mode { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cg stroke=%22%23e3b23c%22 stroke-width=%221.8%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M10 1.5v2.4M10 16.1v2.4M1.5 10h2.4M16.1 10h2.4M4 4l1.7 1.7M14.3 14.3L16 16M4 16l1.7-1.7M14.3 5.7L16 4%22/%3E%3C/g%3E%3Ccircle cx=%2210%22 cy=%2210%22 r=%224%22 fill=%22%23e3b23c%22/%3E%3C/svg%3E"); } }
/* the Scholars menu becomes black lacquer too */
header.site nav.qn.qn-tile .qn-menu { box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); border-color: rgba(227,199,126,.3); }
header.site nav.qn.qn-tile :focus-visible { outline-color: #e3c77e; }

@media (max-width: 760px) {
  header.site nav.qn.qn-tile { padding: 1.2rem 1rem .9rem; background-image:
    linear-gradient(90deg, rgba(10,10,12,.9), rgba(10,10,12,.72)), url(img/nav-tile-small.webp?v=3); }
  /* the fade on the scrolling links must fade into the dark bar, not into paper */
  header.site nav.qn.qn-tile .qn-links { -webkit-mask: linear-gradient(90deg,#000 85%,transparent); mask: linear-gradient(90deg,#000 85%,transparent); }
}

header.site nav.qn.qn-tile .site-search-open{color:var(--qn-ink);background:var(--qn-btn-bg);border-color:var(--qn-rule)}