/* Artwork page — minimal, noir-inspired enhancements. Uses base.css as foundation. */
:root {
  --noir-bg: #0b0b0c;
  --noir-ink: #0f1113;
  --noir-text: #e9e6e1;
  --noir-muted: #bdb7ae;
  --ember: #d16a1a; /* subtelny akcent */
  --shadow-blue: #2a3240;
  --line: rgba(233,230,225,0.15);
}

body {
  background: linear-gradient(180deg, var(--noir-bg), var(--noir-ink));
  color: var(--noir-text);
}

.art-hero {
  padding: 4rem 0 2rem;
  background: radial-gradient(1200px 400px at 20% 0%, rgba(255,255,255,0.06), transparent),
              linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  border-bottom: 1px solid var(--line);
}
.art-hero .lead { color: var(--noir-muted); max-width: 60ch; }
.hero-ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

.breadcrumbs ol { list-style: none; padding: 0; margin: 0 0 .75rem; display: flex; gap: .5rem; align-items: center; }
.breadcrumbs li { color: var(--noir-muted); }
.breadcrumbs a { color: var(--noir-muted); text-decoration: none; border-bottom: 1px dotted transparent; }
.breadcrumbs a:hover { border-bottom-color: var(--noir-muted); }

.section { padding: 3rem 0; border-bottom: 1px solid var(--line); }
.section h2 { margin-bottom: .75rem; }
.section p { color: var(--noir-muted); }

.art-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: 1rem; }
.art-card { grid-column: span 12; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: .5rem; overflow: clip; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.art-card img { display: block; width: 100%; height: auto; filter: grayscale(100%) contrast(110%) brightness(94%); }
.art-card figcaption { padding: .75rem 1rem; font-size: .95rem; color: var(--noir-muted); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }

@media (min-width: 600px) { .art-card { grid-column: span 6; } }
@media (min-width: 1000px) { .art-card { grid-column: span 6; } .art-grid { gap: 1.25rem; } }

.timeline { display: grid; gap: 1rem; margin-top: 1rem; }
.time-step { padding: 1rem; border: 1px dashed var(--line); border-radius: .5rem; background: rgba(255,255,255,0.02); }
.time-step strong { color: var(--noir-text); }

.insight { margin-top: 1rem; padding: 1rem 1.25rem; background: linear-gradient(180deg, rgba(209,106,26,0.06), rgba(209,106,26,0.02)); border-left: 4px solid var(--ember); border-radius: .25rem; }
.insight footer { color: var(--noir-muted); margin-top: .5rem; }

.filter-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.filter-btn { cursor: pointer; padding: .5rem .75rem; border: 1px solid var(--line); background: rgba(255,255,255,0.02); color: var(--noir-text); border-radius: .375rem; transition: background .2s ease, border-color .2s ease; }
.filter-btn[aria-pressed="true"], .filter-btn:hover { background: rgba(209,106,26,0.12); border-color: rgba(209,106,26,0.5); }
.filter-status { margin-top: .5rem; color: var(--noir-muted); }

.download-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.download-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: .5rem; }
.download-list .btn { text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1rem; border-radius: .375rem; text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--ember); color: #fff!important; }
.btn-secondary { background: transparent; color: var(--noir-text); border-color: var(--line); }
.btn-tertiary { background: transparent; color: var(--noir-text); border: 1px solid rgba(209,106,26,0.5); }
.btn-link { color: var(--noir-muted); text-decoration: underline; }

/* Focus visibility */
.filter-btn:focus-visible, .btn:focus-visible, .breadcrumbs a:focus-visible { outline: 2px solid var(--shadow-blue); outline-offset: 2px; }