/* Styl wg „Muzeum Polskiej Elektroniki — Design System" (projekt Claude
   Design, tokens/*.css). Wartości tokenów wkopiowane, żeby build pozostał
   samowystarczalny; przy zmianie DS zaktualizować ten blok. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Expanded:wght@500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* paper / ink / metal */
  --paper-0:#F6F3EC; --paper-1:#EDE9E0; --paper-2:#E3DED2; --paper-3:#D6D0C0;
  --ink-0:#2A2A28; --ink-1:#4A4842; --ink-2:#6E6B60; --ink-3:#928E80;
  /* brand / accent / signal */
  --green-0:#E5EDE7; --green-2:#2E5E4E; --green-3:#1F4438;
  --rust-0:#F3E2D6; --rust-2:#C06B3E; --rust-3:#94502C;
  --amber-2:#D8A22B;
  /* aliasy semantyczne */
  --surface-page:var(--paper-1); --surface-raised:var(--paper-0);
  --surface-panel:var(--paper-2);
  --text-primary:var(--ink-0); --text-secondary:var(--ink-1);
  --text-muted:var(--ink-2); --text-faint:var(--ink-3);
  --brand:var(--green-2); --brand-dark:var(--green-3); --brand-tint:var(--green-0);
  --accent:var(--rust-2); --accent-dark:var(--rust-3); --accent-tint:var(--rust-0);
  --border-hairline:rgba(42,42,40,.14); --border-soft:rgba(42,42,40,.24);
  --border-strong:var(--ink-0);
  /* typografia */
  --font-display:'Archivo Expanded','Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --ls-label:.14em;
  /* efekty */
  --radius-1:2px; --radius-2:4px;
  --shadow-1:0 1px 2px rgba(42,42,40,.08); --shadow-2:0 2px 8px rgba(42,42,40,.12);
  --ring:0 0 0 3px rgba(46,94,78,.35);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-base:200ms;
}
* { box-sizing:border-box; }
body { background:var(--surface-page); color:var(--text-primary); margin:0;
       font:400 1rem/1.6 var(--font-body); }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-dark); text-decoration:underline; }
/* --- nagłówek (Navbar DS: wordmark typograficzny + linki mono) --- */
header { display:flex; align-items:center; gap:2rem; flex-wrap:wrap;
         padding:1rem 2rem; background:var(--surface-page);
         border-bottom:2px solid var(--border-strong); }
.wordmark { display:flex; flex-direction:column; line-height:1;
            text-decoration:none; flex-shrink:0; }
.wordmark:hover { text-decoration:none; }
.wordmark .wm-1 { font:800 1rem/1 var(--font-display); letter-spacing:-.02em;
                  color:var(--text-primary); text-transform:uppercase; }
.wordmark .wm-2 { font:700 .6875rem/1.3 var(--font-mono);
                  letter-spacing:var(--ls-label); color:var(--accent);
                  text-transform:uppercase; }
header nav { display:flex; gap:1.5rem; margin-left:auto; align-items:center;
             flex-wrap:wrap; }
header nav a { font:700 .75rem/1 var(--font-mono); letter-spacing:var(--ls-label);
               text-transform:uppercase; color:var(--text-secondary);
               padding-bottom:3px; border-bottom:2px solid transparent; }
header nav a:hover { color:var(--accent); border-bottom-color:var(--accent);
                     text-decoration:none; }
main { max-width:1200px; margin:0 auto; padding:2rem; }
/* --- nagłówki: display uppercase; h2 jak tytuł SpecTable (mono label) --- */
h1 { font:700 2rem/1.15 var(--font-display); text-transform:uppercase;
     letter-spacing:-.02em; margin:.5em 0 .7em; }
h1 .sub { font:400 .875rem/1.35 var(--font-mono); color:var(--text-muted);
          text-transform:none; letter-spacing:0; }
h2 { font:700 .75rem/1 var(--font-mono); letter-spacing:var(--ls-label);
     text-transform:uppercase; color:var(--accent);
     border-bottom:2px solid var(--border-strong);
     padding-bottom:.5rem; margin:2.2em 0 .8em; }
h3,h4 { font:700 1.125rem/1.2 var(--font-display); margin:1.2em 0 .5em; }
/* --- tabele: karta danych (wiersze z liniami włosowymi) --- */
table { border-collapse:collapse; width:100%; margin:.9rem 0;
        background:var(--surface-raised); border:1px solid var(--border-hairline);
        border-radius:var(--radius-2); box-shadow:var(--shadow-1); }
th,td { padding:.65rem .9rem; text-align:left; vertical-align:top;
        border-bottom:1px solid var(--border-hairline); }
tr:last-child th, tr:last-child td { border-bottom:0; }
th { font:700 .6875rem/1.4 var(--font-mono); letter-spacing:var(--ls-label);
     text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
/* mocna linia tylko pod prawdziwym wierszem nagłówkowym (kilka th obok
   siebie); w tabelach parametrów th jest etykietą wiersza (jedyny th) */
tr:first-child th:not(:only-of-type),
tr:first-child th:not(:only-of-type) ~ td {
  border-bottom:2px solid var(--border-strong); }
td { font:400 .875rem/1.5 var(--font-body); }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tr:hover td { background:var(--surface-panel); }
/* --- plakietki (Tag DS) --- */
.badge { display:inline-block; font:700 .6875rem/1 var(--font-mono);
         letter-spacing:.06em; text-transform:uppercase;
         padding:3px 8px; border-radius:var(--radius-1);
         background:var(--accent-tint); color:var(--accent-dark);
         border:1px solid var(--accent); }
.badge.cyan { background:var(--brand-tint); color:var(--brand-dark);
              border-color:var(--brand); }
.badge.dim { background:var(--surface-panel); color:var(--text-muted);
             border-color:var(--border-soft); }
/* --- plakietki dostępności / rzadkości --- */
.badge.pospolity { background:var(--surface-panel); color:var(--text-secondary);
                   border-color:var(--border-soft); }
.badge.czesty { background:var(--green-0); color:var(--green-3);
                border-color:var(--green-2); }
.badge.rzadki { background:#F6ECCF; color:#7A5A12; border-color:var(--amber-2); }
.badge.kruk { background:var(--rust-0); color:var(--rust-3);
              border-color:var(--rust-2); }
.badge.wspolczesny { background:var(--surface-panel); color:var(--text-muted);
                     border-color:var(--border-soft); border-style:dashed; }
.badge.brakrynku { background:transparent; color:var(--text-faint);
                   border-color:var(--border-soft); border-style:dotted; }
.dim { color:var(--text-muted); }
/* --- karty (ExhibitCard DS: uniesienie na hover) --- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
         gap:1.5rem; padding:0; list-style:none; }
.card { background:var(--surface-raised); border:1px solid var(--border-hairline);
        border-radius:var(--radius-2); padding:1rem; box-shadow:var(--shadow-1);
        transition:transform var(--dur-base) var(--ease-out),
                   box-shadow var(--dur-base); }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.card h3 { margin:0 0 .4rem; }
td.tmb { width:80px; padding:4px 8px; }
img.thumb { width:72px; height:48px; object-fit:cover; display:block;
            border:1px solid var(--border-hairline); border-radius:var(--radius-1); }
/* --- galeria --- */
.gallery { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1rem 0; }
.gallery figure { margin:0; max-width:320px; background:var(--surface-raised);
                  border:1px solid var(--border-hairline);
                  border-radius:var(--radius-2); overflow:hidden;
                  box-shadow:var(--shadow-1); }
.gallery img { max-width:100%; display:block;
               border-bottom:1px solid var(--border-hairline); }
.gallery figcaption { font:400 .75rem/1.5 var(--font-mono);
                      color:var(--text-muted); padding:.6rem .8rem; }
/* --- powiększenie zdjęcia po kliknięciu (overlay na :target) ---
   Bez JS: działa offline i w PWA. Link do samego pliku zdjęcia byłby
   w trybie standalone pułapką bez wyjścia (brak przycisku „wstecz"),
   a zmiana hasza zostaje w historii, więc gest cofania też zamyka.
   Ten sam mechanizm co .pz-lupa na stronie „poszukiwane". */
.gallery a.lupa-link { display:block; cursor:zoom-in; }
.foto-lupa { display:none; }
.foto-lupa:target { display:flex; position:fixed; inset:0; z-index:60;
                    flex-direction:column; align-items:center; justify-content:center;
                    gap:.7rem; padding:1rem; background:rgba(0,0,0,.97);
                    text-decoration:none; cursor:zoom-out; }
.foto-lupa:target img { max-width:100%; max-height:82vh; object-fit:contain;
                        border-radius:var(--radius-1); }
.foto-lupa span { font:400 .8125rem/1.5 var(--font-mono); color:#ddd;
                  text-align:center; max-width:46rem; }
blockquote { border-left:3px solid var(--accent); margin:.9rem 0;
             padding:2px 14px; color:var(--text-secondary); }
code { font-family:var(--font-mono); font-size:.85em; color:var(--accent-dark);
       background:var(--surface-panel); padding:1px 5px;
       border-radius:var(--radius-1); }
hr { border:0; border-top:1px solid var(--border-soft); }
/* --- filtry (Input/Select DS) --- */
.filters { display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0; }
.filters select,.filters input { background:var(--surface-raised);
  color:var(--text-primary); border:1px solid var(--border-soft);
  padding:.5rem .75rem; font:400 .875rem/1.35 var(--font-body);
  border-radius:var(--radius-1); }
.filters select:focus,.filters input:focus { outline:none; box-shadow:var(--ring);
  border-color:var(--brand); }
/* --- pasek metryk (Home DS) --- */
.stats { display:flex; gap:1.5rem; flex-wrap:wrap; margin:1.5rem 0; }
.stat { background:var(--surface-raised); border:1px solid var(--border-hairline);
        border-radius:var(--radius-2); box-shadow:var(--shadow-1);
        padding:1rem 1.5rem; text-align:center; }
.stat .n { font:800 2rem/1.05 var(--font-display); color:var(--brand); }
footer { border-top:1px solid var(--border-soft); color:var(--text-muted);
         font:400 .75rem/1.5 var(--font-mono); padding:1rem 2rem;
         margin-top:3rem; }