/*
Theme Name: Polona Smolnikar
Theme URI: https://www.polonasmolnikar.si/
Author: Polona Smolnikar
Description: Editorial dark portfolio theme with asymmetric mosaic grid. Accessible, WCAG-aware.
Version: 1.2.2
License: GNU General Public License v2 or later
Text Domain: polona
*/

:root{
  --background: oklch(0.12 0 0);
  --foreground: oklch(0.96 0 0);
  --muted: oklch(0.20 0 0);
  --muted-foreground: oklch(0.78 0 0);
  --border: oklch(0.28 0 0);
  --accent: oklch(0.85 0.14 80);
  --container: 1400px;
  --gap: .5rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--foreground);
  color:var(--background);padding:.75rem 1rem;z-index:1000;font-weight:600;
}
.skip-link:focus{left:1rem;top:1rem}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab, var(--background) 80%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.site-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1rem 1.25rem;
}
.site-brand{display:flex;align-items:center;gap:.75rem;min-height:44px}
.site-logo img{max-height:40px;width:auto}
.site-wordmark{
  font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;
}
.primary-nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:1.5rem;
}
.primary-nav a{
  display:inline-flex;align-items:center;min-height:44px;
  text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;
  color:var(--muted-foreground);
}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--foreground)}

/* GRID */
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-auto-rows:14rem;
  gap:.25rem;padding:.25rem;
}
@media (min-width:768px){
  .project-grid{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:18rem;gap:.5rem;padding:.5rem;
  }
}
.tile{
  position:relative;display:block;overflow:hidden;
  background:var(--muted);
  grid-column:span 6;grid-row:span 1;
}
.tile img{
  width:100%;height:100%;object-fit:cover;
  transition:filter .5s ease, transform .5s ease;
}
.tile-overlay{
  position:absolute;inset:0;background:transparent;
  transition:background .5s ease;pointer-events:none;
}
.tile-caption{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center;
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.tile:hover img,.tile:focus-visible img{
  filter:grayscale(1) brightness(.55);transform:scale(1.02);
}
.tile:hover .tile-overlay,.tile:focus-visible .tile-overlay{
  background:color-mix(in oklab, var(--background) 55%, transparent);
}
.tile:hover .tile-caption,.tile:focus-visible .tile-caption{opacity:1}
.tile-title{
  margin:0;font-size:1.125rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--foreground);
}
@media(min-width:768px){.tile-title{font-size:1.5rem}}
.tile-meta{
  margin:0;font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--foreground);
}
.tile-no-image{
  display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--muted-foreground);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* PAGES */
.page-wrap{max-width:var(--container);margin:0 auto;padding:3rem 1.25rem}
.page-wrap h1{font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:.04em;margin:0 0 1.5rem}
.page-wrap p{color:var(--muted-foreground);max-width:65ch}

/* PROJECT SINGLE */
.project-single{max-width:var(--container);margin:0 auto;padding:2rem 1.25rem 4rem}
.project-hero img{width:100%;height:auto}
.project-header{margin:2rem 0 1.5rem}
.project-title{font-size:clamp(1.75rem,3.5vw,3rem);margin:0 0 1rem;letter-spacing:.02em}
.project-meta{
  display:grid;gap:.5rem 2rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:1rem 0;margin:0 0 2rem;
}
.project-meta dd{margin:0;color:var(--foreground)}
.project-body{max-width:70ch;color:var(--muted-foreground);font-size:1.05rem}
.project-venues{margin-top:2rem;padding:0;list-style:none}
.project-venues li{padding:.5rem 0;border-top:1px solid var(--border);font-size:.85rem;letter-spacing:.05em}
.project-nav{
  display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;
  padding-top:1.5rem;border-top:1px solid var(--border);
  text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;
}

/* FOOTER */
.site-footer{
  border-top:1px solid var(--border);padding:2rem 1.25rem;margin-top:3rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-foreground);
}
.site-footer a:hover{color:var(--foreground)}