/*
  Bystanek Photo Portfolio — site styles
  Classical / quiet / ordered. Deep-dark default, hairline borders, no gradients.
  Tokens are the single source of truth — no hardcoded hex here.
*/

@import url("/tokens/fonts.css");
@import url("/tokens/colors.css");
@import url("/tokens/typography.css");
@import url("/tokens/spacing.css");
@import url("/tokens/shape.css");
@import url("/tokens/motion.css");
@import url("/tokens/base.css");

*, *::before, *::after { box-sizing: border-box; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout shell ---------- */
.wrap {
  max-width: var(--max-width-app);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.wrap-reading {
  max-width: var(--max-width-reading);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---------- Header / nav ---------- */
.site-header {
  border-bottom: var(--border-width) solid var(--color-border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}
.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.wordmark:hover { text-decoration: none; }
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: none;
}
.nav .external::after { content: " \2197"; font-size: 0.85em; }

/* Theme toggle — line-icon button, no fill */
.theme-toggle {
  appearance: none;
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-7);
  border-bottom: var(--border-width) solid var(--color-border);
}
.hero h1 {
  font-size: var(--text-4xl);
  margin: 0 0 var(--space-3);
}
.hero .tagline {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: 44ch;
  margin: 0 auto;
}
.ornament {
  width: 48px; height: 1px;
  background: var(--color-border);
  margin: var(--space-4) auto 0;
  border: 0;
}

/* ---------- Collection cards (index) ---------- */
.section-title {
  text-align: center;
  margin: var(--space-7) 0 var(--space-5);
}
.collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-8);
}
.collection-card {
  display: block;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.collection-card:hover {
  border-color: var(--color-accent);
  text-decoration: none;
  transform: translateY(-2px);
}
.collection-card .cover {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--color-accent-fill);
}
.collection-card .meta { padding: var(--space-3) var(--space-4) var(--space-4); }
.collection-card h3 { margin: 0 0 var(--space-1); }
.collection-card .sub {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  display: flex; gap: var(--space-2); align-items: baseline;
}
.collection-card .count::before { content: "\00B7"; margin-right: var(--space-2); }

/* ---------- Collection page (masonry) ---------- */
.collection-head {
  text-align: center;
  padding: var(--space-7) var(--space-4) var(--space-5);
}
.collection-head h1 { margin: 0 0 var(--space-2); font-size: var(--text-3xl); }
.collection-head .desc {
  color: var(--color-text-muted);
  max-width: 56ch; margin: 0 auto;
}
.collection-head .date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block; margin-bottom: var(--space-2);
}

.masonry {
  column-gap: var(--space-3);
  columns: 3 300px;
  padding-bottom: var(--space-8);
}
.masonry figure {
  margin: 0 0 var(--space-3);
  break-inside: avoid;
  cursor: zoom-in;
}
.masonry img {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  background: var(--color-accent-fill);
  transition: opacity var(--duration-base) var(--ease-out);
}
.masonry figure:hover img { opacity: 0.88; }
.masonry figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-1) 0;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  padding: var(--space-4);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox figcaption {
  color: var(--stone-light);
  text-align: center;
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  max-width: 60ch;
}
.lightbox-inner { max-width: 1120px; position: relative; text-align: center; }
.lb-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  appearance: none; background: none;
  border: var(--border-width) solid rgba(232,227,214,0.4);
  border-radius: var(--radius-sm);
  color: var(--stone-light);
  width: 44px; height: 44px;
  font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lb-btn:hover { border-color: var(--stone-light); }
.lb-prev { left: var(--space-4); }
.lb-next { right: var(--space-4); }
.lb-close {
  position: fixed; top: var(--space-4); right: var(--space-4);
  transform: none;
}
@media (max-width: 640px) {
  .lb-prev { left: var(--space-2); }
  .lb-next { right: var(--space-2); }
}

/* ---------- About ---------- */
.about {
  padding: var(--space-8) var(--space-4);
}
.about h1 { margin: 0 0 var(--space-5); font-size: var(--text-3xl); }
.about p { margin: 0 0 var(--space-4); }
.about .lead { font-size: var(--text-lg); color: var(--color-text); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-accent); }

/* ---------- States ---------- */
.empty, .loading {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8) var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .hero { padding: var(--space-6) var(--space-3) var(--space-5); }
  .hero h1 { font-size: var(--text-3xl); }
  .masonry { columns: 1; }
}