/* Nav, buttons, chips, panels, bands, gallery, search */

/* header and nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--kai); color: var(--kapa);
  border-bottom: var(--edge) solid var(--kai-lift);
  --focus: var(--olena);
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--nav-h);
  width: min(100% - 2 * var(--gutter), 96rem); margin-inline: auto;
}
.nav a { color: inherit; text-decoration: none; }
.nav__home { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; white-space: nowrap; }
.nav__home-sub { color: var(--olena); }
.nav__links { display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.5rem); font-size: 0.98rem; }
.nav__links a { display: block; padding: 0.9rem 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav__links a:hover { border-bottom-color: var(--kai-lift); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--olena); }
.nav__search, .nav__toggle {
  background: none; border: var(--edge) solid var(--kai-lift); color: inherit;
  padding: 0.3rem 0.7rem; border-radius: 2px; white-space: nowrap;
}
.nav__search:hover, .nav__toggle:hover { border-color: var(--olena); }
.nav__toggle { display: none; }

@media (max-width: 68rem) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--kai); border-bottom: var(--edge) solid var(--kai-lift);
    padding: var(--s-2) var(--gutter) var(--s-5);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 0.8rem 0; border-bottom: var(--edge) solid var(--kai-lift); font-size: 1.1rem; }
  .nav__links a[aria-current="page"] { color: var(--olena); border-bottom-color: var(--kai-lift); }
  .nav__search { margin-top: var(--s-4); width: 100%; padding: 0.7rem; }
}

/* buttons say what they do. Square, stamped, no arrows. */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 600; line-height: 1.2;
  padding: 0.85em 1.4em;
  background: var(--fg); color: var(--bg);
  border: var(--edge) solid var(--fg); border-radius: 2px;
  transition: background-color 0.15s, color 0.15s;
}
.btn:hover { background: transparent; color: var(--fg); }
.btn--gold { background: var(--olena); border-color: var(--olena); color: var(--kukui); }
.btn--gold:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* chips for filters */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  background: transparent; color: var(--fg);
  border: var(--edge) solid var(--rule); border-radius: 2px;
  padding: 0.35em 0.8em; font-size: var(--step--1); line-height: 1.3;
}
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--olena); border-color: var(--olena); color: var(--kukui); font-weight: 600; }

/* kapa bands. Patterns come from js/patterns.js as CSS masks so they take any color. */
.kapa-band {
  height: 28px; background-color: var(--band, var(--olena));
  -webkit-mask: var(--pat-niho) repeat-x left center / auto 100%;
  mask: var(--pat-niho) repeat-x left center / auto 100%;
}
.kapa-band[data-pattern="chevron"] { -webkit-mask-image: var(--pat-chevron); mask-image: var(--pat-chevron); }
.kapa-band[data-pattern="diamond"] { -webkit-mask-image: var(--pat-diamond); mask-image: var(--pat-diamond); }
.kapa-band[data-pattern="dots"] { -webkit-mask-image: var(--pat-dots); mask-image: var(--pat-dots); }
.kapa-band[data-pattern="weave"] { -webkit-mask-image: var(--pat-weave); mask-image: var(--pat-weave); }
.kapa-band--quiet { --band: var(--rule); }
.kapa-band--fg { --band: var(--fg); }

/* a faint all over stamp for big surfaces */
.kapa-field { position: relative; isolation: isolate; }
.kapa-field::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: currentColor; opacity: 0.045;
  -webkit-mask: var(--pat-field) repeat 0 0 / 48px;
  mask: var(--pat-field) repeat 0 0 / 48px;
}

/* panels sit on a ground with a stamped edge, never a shadow */
.panel { background: var(--panel); border: var(--edge) solid var(--rule); padding: var(--s-5); }

/* image credit lines */
.credit { font-size: var(--step--1); color: var(--muted); margin-top: var(--s-2); }
.credit a { color: inherit; }

/* status notes (debated, reclassified) */
.status-note {
  border-left: 6px solid var(--olena); background: var(--panel);
  padding: var(--s-4) var(--s-5); max-width: var(--measure);
}

/* footer */
.site-footer { background: var(--kai); color: var(--kapa); --focus: var(--olena); --link: var(--kapa); }
.site-footer__inner {
  display: grid; gap: var(--s-4) var(--s-7); padding-block: var(--s-7);
  grid-template-columns: 1fr;
}
.site-footer__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer__note { max-width: 52ch; color: #B9C2CC; }
.site-footer__made { color: var(--olena); }
@media (min-width: 56rem) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; align-items: end; }
  .site-footer__links, .site-footer__made { justify-self: end; }
}

/* search dialog */
.search {
  width: min(40rem, 100% - 2rem); margin-top: 12vh;
  background: var(--kapa-light); color: var(--kukui);
  border: var(--edge) solid var(--kukui); border-radius: 2px;
  --focus: var(--kai);
}
.search::backdrop { background: rgb(7 20 36 / 0.75); }
.search__form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); padding: var(--s-5); }
.search__form label { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.search__form input {
  padding: 0.7em 0.9em; border: var(--edge) solid var(--kukui); border-radius: 2px; background: #fff; min-width: 0;
}
.search__form button { background: none; border: var(--edge) solid var(--kukui); border-radius: 2px; padding: 0 1em; }
.search__results { max-height: 50vh; overflow-y: auto; }
.search__results a {
  display: grid; grid-template-columns: 4rem 1fr; gap: 0 var(--s-3);
  padding: var(--s-3) var(--s-5); color: inherit; text-decoration: none;
  border-top: var(--edge) solid var(--kapa-edge);
}
.search__results a:hover, .search__results a:focus-visible { background: var(--kapa); }
.search__kind { grid-row: span 2; font-size: var(--step--1); color: #4F4637; padding-top: 0.3em; }
.search__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.search__sub { font-size: var(--step--1); color: #4F4637; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__none { padding: var(--s-4) var(--s-5); border-top: var(--edge) solid var(--kapa-edge); }

/* form inputs on any ground */
.field {
  padding: 0.65em 0.9em; min-width: 0;
  background: var(--panel); color: var(--fg);
  border: var(--edge) solid var(--rule); border-radius: 2px;
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:hover { border-color: var(--fg); }

/* Swiper gallery, tuned to the site */
.gallery { --swiper-theme-color: var(--kukui); --swiper-navigation-size: 1.6rem; }
.gallery .swiper-slide { height: auto; }
.gallery figure { display: flex; flex-direction: column; height: 100%; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--kapa-edge); }
.gallery figcaption { padding-top: var(--s-2); }
.gallery .swiper-button-prev, .gallery .swiper-button-next {
  background: var(--kapa-light); width: 2.8rem; height: 2.8rem; border: var(--edge) solid var(--kukui); border-radius: 2px;
  top: calc((100% - 5rem) / 2);
}
.gallery .swiper-pagination { position: static; margin-top: var(--s-3); }
.gallery .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0 8px !important; }