/* the menu bar, the same in the garden and on the book's pages (Damla, 1 Nov): home, projects, devlog, books, websites,
   about, cv; on the right the magnifier, github and linkedin. its sizes are the garden's (canli/garden/home.css) */
header.site { position: relative; display: flex; align-items: center; gap: 28px; padding: 22px var(--pad); font-size: 15px; line-height: 1.5; }
header.site nav, header.site .elsewhere { display: flex; gap: 26px; align-items: center; }
header.site .elsewhere { margin-left: auto; }
/* the menu is grey, the one under the pointer or the keyboard turns white */
header.site a, header.site button { color: var(--ink2); }
header.site a:hover, header.site a:focus-visible, header.site button:hover, header.site button:focus-visible { color: var(--ink); }
header.site button { border: 0; background: none; padding: 0; font-size: 15px; }
/* the page the reader is on is white, as home is in the garden */
header.site .menu-t[aria-current=page] { color: var(--ink); }

/* the search in the menu: the magnifier opens into a field inside the bar, the results drop under it */
.find { position: relative; display: flex; align-items: center; gap: 8px; }
header.site .find-open { display: flex; align-items: center; padding: 0; }
header.site .find-open svg { display: block; }
.find.on .find-open { color: var(--ink); }
.find-field { width: 0; padding: 0; border: 0; opacity: 0; background: none; color: var(--ink); caret-color: var(--ink);
  font: 15px var(--sans); outline: none; transition: width .18s ease, opacity .18s ease; }
.find.on .find-field { width: 220px; opacity: 1; padding: 0; margin-right: 2px; }
.find-field::placeholder { color: var(--ink2); }
.find-results { position: absolute; top: calc(100% + 14px); right: 0; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto;
  background: var(--panel, #161618); padding: 6px 0; z-index: 30; }
.find-row { display: block; padding: 9px 16px; cursor: pointer; }
.find-row[aria-selected=true] { background: #222226; }
.find-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.find-top b { font-weight: 600; color: var(--ink); }
.find-kind, .find-why, .find-none { color: var(--ink2); }
.find-why { display: block; line-height: 1.4; margin-top: 2px; }
.find-none { padding: 9px 16px; }

/* books: a small menu under its name, as on the live portfolio; the books still to come are grey */
.menu { position: relative; }
.menu-d { position: absolute; top: calc(100% + 12px); left: -16px; z-index: 30; min-width: 300px; padding: 6px 0;
  background: var(--panel, #161618); }
.menu-d[hidden] { display: none; }
.menu-d > * { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 8px 16px; white-space: nowrap; }
header.site .menu-d a { color: var(--ink); }
header.site .menu-d a:hover, header.site .menu-d a:focus-visible { background: #222226; color: var(--ink); outline: none; }
.menu-d span span, .menu-d a span { color: var(--ink2); }
.menu-d .off { color: var(--ink2); cursor: default; }
.menu-t[aria-expanded=true] { color: var(--ink) !important; }