@layer components {
  /* --- Search form ------------------------------------------------------------------------------- */
  .search-form {
    display: grid; gap: var(--space-m); padding: var(--space-m) var(--space-l) var(--space-l); margin-block-end: var(--space-l);
    background: var(--color-cream);
    label, legend { display: block; font-weight: 700; font-size: var(--step--1); margin-block-end: var(--space-xs); }
    input:not([type='submit']), select {
      inline-size: 100%; min-block-size: 40px; padding: var(--space-xs) var(--space-s);
      background: var(--color-paper); border: 1px solid var(--color-control); color: var(--color-text);
    }
    fieldset { border: 0; padding: 0; min-inline-size: 0; }
  }

  .search-form__years { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap;
    legend { inline-size: 100%; }
    input:not([type='submit']) { inline-size: 6rem; }
  }
  .search-form__actions { display: flex; gap: var(--space-s); align-items: end; flex-wrap: wrap; }

  @media (min-width: 52rem) {
    .search-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
    .search-form__query { grid-column: 1 / -1; }
  }
  @media (min-width: 68rem) {
    .search-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; }
    .search-form__query { grid-column: auto; }
  }

  .empty { padding: var(--space-l); background: var(--color-cream); }

  /* --- Organ list: a register with rules; blocks on phones --------------------------------------- */
  .organ-table {
    inline-size: 100%;
    th, td { padding: var(--space-s) var(--space-s); text-align: start; vertical-align: middle; }
    thead th { font-size: var(--step--1); border-block-end: 2px solid var(--color-coral); white-space: nowrap; }
    thead a { color: var(--color-text); text-decoration: none; display: inline-flex; gap: var(--space-xs); min-block-size: 24px; align-items: center; }
    thead a:hover { color: var(--color-accent); text-decoration: underline; }
    thead th[aria-sort] a { color: var(--color-accent); }
    tbody tr { border-block-end: 1px solid var(--color-rule); }
    tbody tr:hover { background: var(--color-cream-light); }
  }

  .organ-table__place { font-weight: 700;
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
  }
  .organ-table__photo { inline-size: 4rem;
    img { inline-size: 3.25rem; block-size: 3.25rem; object-fit: cover; }
  }

  @media (max-width: 47.99rem) {
    .organ-table {
      thead tr { display: flex; flex-wrap: wrap; }
      thead th { flex: 1 1 auto; }
      thead th:first-child { display: none; }
      tbody, tr, td, th { display: block; }
      tbody tr { display: grid; grid-template-columns: 4rem 1fr; column-gap: var(--space-m); padding-block: var(--space-s); }
      tbody td, tbody th { padding: 0; grid-column: 2; }
      .organ-table__photo { grid-column: 1; grid-row: 1 / span 4; }
      td[data-label]::before { content: attr(data-label) ': '; color: var(--color-muted); font-size: var(--step--1); }
    }
  }

  /* --- Organ page --------------------------------------------------------------------------------- */
  .organ__header { margin-block-end: var(--space-l); max-inline-size: var(--measure); }
  .organ__summary { font-family: var(--font-text); font-size: var(--step-1); line-height: 1.5; margin-block-start: var(--space-s); }
  .organ__edit { margin-block-start: var(--space-m); }

  .organ__layout { display: grid; gap: var(--space-xl); }

  @media (min-width: 60rem) {
    .organ__layout { grid-template-columns: minmax(0, 1fr) 24rem; align-items: start; }
    .organ__media { grid-column: 2; grid-row: 1; }
    .organ__content { grid-column: 1; grid-row: 1; }
  }

  .organ__primary { a { display: block; } img { inline-size: 100%; }
    figcaption { font-size: var(--step--1); color: var(--color-muted); margin-block-start: var(--space-xs); }
  }

  .organ__thumbs {
    list-style: none; padding: 0; margin-block-start: var(--space-s);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: 3px;
    a { display: block; }
    img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }
    a:hover img { outline: 3px solid var(--color-coral); outline-offset: -3px; }
  }

  .organ__downloads { margin-block-start: var(--space-m); }

  .organ__content {
    max-inline-size: var(--measure);
    section { padding-block: var(--space-l) 0; }
    h2 { font-size: var(--step-1); margin-block-end: var(--space-s); }
    h3 { font-size: var(--step-0); margin-block: var(--space-m) var(--space-xs); }
  }

  .facts { display: grid; font-size: var(--step-0); }
  .facts__row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: var(--space-m); padding-block: var(--space-xs);
    & + & { border-block-start: 1px solid var(--color-rule); }
    dt { color: var(--color-muted); }
  }

  .text p + p { margin-block-start: var(--space-s); }
  .manual + .manual { margin-block-start: var(--space-s); }
  .manual__notes { margin-block-start: var(--space-m); }
  .literature { padding-inline-start: 1.2em; li + li { margin-block-start: var(--space-s); } }
  .links { padding-inline-start: 1.2em; }

  .organ__footer { margin-block-start: var(--space-xl); padding-block-start: var(--space-m); border-block-start: 1px solid var(--color-rule); font-size: var(--step--1); }

  .pager {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-m); align-items: center;
    margin-block-start: var(--space-xl); padding-block: var(--space-m); border-block: 1px solid var(--color-rule);
    a { text-decoration: none; display: grid; }
    a:hover span:last-child { text-decoration: underline; }
    a[rel='next'] { text-align: end; }
    span:last-child { font-weight: 700; }
  }
  .pager__direction { font-size: var(--step--1); color: var(--color-muted); }
  .pager__list { font-weight: 700; }

  /* --- Lightbox ----------------------------------------------------------------------------------- */
  .lightbox {
    inline-size: 100vw; block-size: 100vh; max-inline-size: none; max-block-size: none; padding: var(--space-xl) var(--space-m);
    border: 0; background: transparent; color: #fff;
    &::backdrop { background: rgb(20 16 14 / 0.94); }
    figure { block-size: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: var(--space-s); }
    img { max-block-size: calc(100vh - 8rem); max-inline-size: 100%; inline-size: auto; object-fit: contain; }
    figcaption { font-size: var(--step-0); }
    button {
      position: fixed; min-inline-size: 44px; min-block-size: 44px; padding: var(--space-s) var(--space-m);
      background: #000; color: #fff; border: 1px solid #fff; cursor: pointer;
    }
    button:hover { background: var(--color-accent); }
    :focus-visible { outline-color: var(--color-coral); }
  }
  .lightbox__close { inset-block-start: var(--space-m); inset-inline-end: var(--space-m); }
  .lightbox__prev { inset-block-end: var(--space-m); inset-inline-start: var(--space-m); }
  .lightbox__next { inset-block-end: var(--space-m); inset-inline-end: var(--space-m); }

  /* --- Works -------------------------------------------------------------------------------------- */
  .works { margin-block-start: var(--space-xl); }
  .works__list { list-style: none; padding: 0; }
  .works__item { padding-block: var(--space-m); border-block-end: 1px solid var(--color-rule);
    h3 { font-size: var(--step-0); }
    .muted { font-size: var(--step--1); margin-block: var(--space-xs) var(--space-s); }
  }
}

@media print {
  .site-header, .site-nav, .site-footer, .skip-link, .breadcrumbs, .pager, .organ__thumbs, .organ__downloads, .organ__edit, .lightbox, .search-form { display: none !important; }
  body { font-size: 10.5pt; }
  .organ__layout { display: block; }
  .organ__primary img { max-block-size: 9cm; inline-size: auto; }
  .organ__content { max-inline-size: none; }
  a { color: inherit; text-decoration: none; }
  section { break-inside: avoid-page; }
}