/* ============================================================
   Jana Bjelica — portfolio
   Layout: full-screen slideshow home, right-hand project panel,
   translucent About / CV overlays. Mobile stacks everything.
   ============================================================ */

:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #7a7a7a;
  --line: #e4e4e4;
  --scrim: rgba(255, 255, 255, 0.86);
  --overlay: rgba(255, 255, 255, 0.94);

  --font: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --fs: 13px;
  --fs-sm: 11px;
  --lh: 1.45;

  --pad: 14px;
  --gap: 10px;
  --panel-w: 50vw;
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: var(--fs) / var(--lh) var(--font);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation; /* no 300ms wait for a second tap */
}
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

img, video { display: block; }

p { margin: 0; }
.prose p + p { text-indent: 2.4em; }

h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 1.45em;
}

.small { font-size: var(--fs-sm); }

/* ---------------- Home ---------------- */

.home {
  position: fixed;
  inset: 0;
  background: var(--bg);
}

.slides {
  position: absolute;
  inset: 0;
  cursor: e-resize;
  -webkit-tap-highlight-color: transparent;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: calc(var(--pad) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.slide.is-active { opacity: 1; }

/* Fit inside the window, never crop: landscape stays landscape,
   portrait stays portrait, white around it. Images are never enlarged
   beyond their native pixel size, so low-resolution files sit smaller
   with more white space instead of going soft. */
.slide img,
.slide video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Centered statement + nav */
.home-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--pad);
  text-align: center;
  font-size: clamp(16px, 1.85vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  white-space: nowrap;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 2;
}
.home-text a,
.home-text .home-nav { pointer-events: auto; }
.home-line { margin: 0; }
.home-title { display: inline; margin: 0; }
.home-name { margin-right: 0.6em; }

.home-nav { display: inline; white-space: nowrap; margin-left: 0.6em; }
.home-nav a { margin-left: 0.55em; }

.home-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: var(--pad);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--fg);
  pointer-events: none;
  z-index: 2;
}
.home-footer a { pointer-events: auto; }
.home-footer-right { text-align: right; }

/* ---------------- Scrim over home when a panel is open ---------------- */

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
  z-index: 5;
}
body.has-panel .scrim {
  opacity: 1;
  pointer-events: auto;
  cursor: w-resize;
}

/* ---------------- Right-hand panel (Index / Project) ---------------- */

.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-w);
  background: var(--bg);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  z-index: 10;
}
.panel.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.45s var(--ease), visibility 0s;
}

.panel-head,
.overlay-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--pad);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.panel-head .num { display: inline-block; min-width: 2.6em; }

.panel-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--pad);
}
/* Project footer stays in reach: it is the way back to the index. */
.panel-foot.is-sticky {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}

/* Project */
.project-images {
  padding: 0 var(--pad);
}
.project-images figure {
  margin: 0 0 var(--gap);
}
.project-images img,
.project-images video {
  width: 100%;
  height: auto;
  background: #f2f2f2;
}
/* Embedded players (Vimeo) */
.project-images .embed {
  width: 100%;
  background: #f2f2f2;
}
.project-images .embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Portrait videos: cap to the viewport instead of filling the panel width. */
.project-images video {
  max-height: 85vh;
  object-fit: contain;
  background: transparent;
}
.project-images figcaption {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-top: 0.3em;
}

.project-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad);
  padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
}

/* Index */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
}
.index-list a {
  display: grid;
  grid-template-columns: 2.6em 1fr auto;
  gap: var(--gap);
  padding: 0.55em 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.index-list li:last-child a { border-bottom: 1px solid var(--line); }
.index-list a:hover .index-title { text-decoration: underline; text-underline-offset: 0.15em; }
.index-cat { color: var(--muted); }
.index-year { color: var(--muted); }

.index-intro {
  padding: 0 var(--pad) calc(var(--pad) * 2);
  max-width: 34em;
}

/* ---------------- Full-screen overlays (About / CV) ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
  z-index: 20;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
.overlay-head { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* About */
.about {
  display: grid;
  grid-template-columns: minmax(0, 34em) minmax(0, 18em);
  gap: calc(var(--pad) * 3);
  padding: 0 var(--pad) calc(var(--pad) * 3);
}
.blank { height: 1.45em; }
.about-portrait {
  margin: calc(var(--pad) * 2) 0 0;
  max-width: 220px;
}
.about-portrait img { width: 100%; height: auto; }

/* CV */
.cv {
  padding: 0 var(--pad) calc(var(--pad) * 3);
  max-width: 64em;
}
.cv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: var(--pad);
  padding: var(--pad) 0 calc(var(--pad) * 1.5);
  border-top: 1px solid var(--line);
}
.cv-row:first-child { border-top: 0; padding-top: 0; }
.cv-row dt, .cv-row dd { margin: 0; }
.cv-entry + .cv-entry { margin-top: 1.45em; }
.cv-actions { padding: 0 var(--pad) calc(var(--pad) * 2); }

/* ---------------- Blog (static pages in /blog, indexable by search engines) ---------------- */

body.page {
  height: auto;
  min-height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
body.page .page-main { flex: 1; width: 100%; }

.page-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--pad);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.page-head nav a { margin-left: 0.55em; }
.page-head .page-name { margin-right: 0.6em; }

.page-main {
  max-width: 640px;
  padding: calc(var(--pad) * 3) var(--pad) calc(var(--pad) * 4);
}

.page-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--pad);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.eyebrow {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 1em;
}

/* Post list (blog index) */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  padding: 0.9em 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.post-list li:last-child a { border-bottom: 1px solid var(--line); }
.post-list a:hover .post-title { text-decoration: underline; text-underline-offset: 0.15em; }
.post-title { font-weight: 500; }
.post-excerpt { color: var(--muted); margin-top: 0.3em; }
.post-date { color: var(--muted); }

/* Article */
.article h1 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0.6em;
}
.article-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 2.5em;
}
.article-figure { margin: 0 0 2.5em; }
.article-figure img {
  width: 100%;
  height: auto;
  background: #f2f2f2;
}
.article-figure figcaption {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-top: 0.3em;
}
.article-body {
  font-size: 15px;
  line-height: 1.5;
}
.article-body .lead { font-size: 17px; }
.article-body p { margin: 0 0 1em; }
.article-body h2 {
  font-weight: 500;
  font-size: 1.15em;
  margin: 2.2em 0 0.8em;
}
.article-body h3 {
  font-weight: 500;
  margin: 1.6em 0 0.5em;
}
.article-body ul, .article-body ol {
  padding-left: 1.2em;
  margin: 0 0 1em;
}
.article-body li + li { margin-top: 0.35em; }
.article-body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.article-body strong { font-weight: 500; }
.article-cta {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
.article-author {
  display: flex;
  gap: var(--pad);
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
  font-size: var(--fs);
  color: var(--muted);
}
.article-author a { color: var(--fg); }

/* Generated project / about pages (scripts/build-pages.mjs) */
.project-media { margin: 0 0 1.5em; }
.project-media .article-figure { margin-bottom: var(--gap); }
.project-media video,
.project-media .embed {
  width: 100%;
  background: #f2f2f2;
}
.project-media video { height: auto; max-height: 85vh; object-fit: contain; }
.project-media .embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.page .project-text { padding-left: 0; padding-right: 0; }
.page-pager {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: 2.5em;
  padding-top: 1em;
  border-top: 1px solid var(--line);
}
.cv-inline { padding: 0; max-width: none; }
.cv-inline .cv-row:first-child { border-top: 1px solid var(--line); padding-top: var(--pad); }
.contact p { margin: 0; }
.post-title .index-num { display: inline-block; min-width: 2.6em; color: var(--muted); font-weight: 400; }

/* ---------------- Utility ---------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- Motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .slide, .panel, .overlay, .scrim { transition: none; }
}

/* ============================================================
   Touch targets
   ============================================================ */

/* A fingertip covers much more than a line of 13px type. On touch devices
   every control gets a hit area of at least 44px — the smallest a thumb
   hits reliably — with space between neighbours so the wrong one is hard
   to catch. The type itself never changes size; only the invisible box
   around it grows. Corner links grow through a pseudo-element, which
   costs no layout. */

@media (pointer: coarse) {

  /* Primary menu: out of the sentence and onto its own row, so the items
     sit side by side as targets rather than as running text. */
  .home-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0.25em 0 0;
  }
  .home-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
  }

  /* Blog header menu: the same row, held to the right edge. */
  .page-head {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  .page-head > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .page-head nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    margin-right: -10px;
  }
  .page-head nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
  }

  /* (Close) is the way out of a panel; it sits in a corner, where a thumb
     is least accurate. The box reaches into the header padding. */
  .panel-head,
  .overlay-head {
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .panel-head a,
  .overlay-head a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
    margin-right: -6px;
    padding-right: 6px;
  }

  .panel-foot {
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .panel-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* List rows are already full width; they only lacked height. */
  .index-list a,
  .post-list a {
    align-items: center;
    min-height: 48px;
  }
  .index-list a { padding: 0.5em 0; }

  /* Stacked contact links needed vertical separation, not width. */
  .about-contact p a,
  .cv-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Corner links: hit area grows around the text without moving it. */
  .home-footer a,
  .page-foot a { position: relative; }
  .home-footer a::after,
  .page-foot a::after {
    content: "";
    position: absolute;
    inset: -14px -12px;
  }

  /* Hover never fires on a touch screen, so the feedback is on press. */
  .home-nav a:active,
  .page-head a:active,
  .panel-head a:active,
  .overlay-head a:active,
  .panel-foot a:active,
  .index-list a:active,
  .post-list a:active,
  .home-footer a:active,
  .page-foot a:active,
  .about-contact p a:active,
  .cv-actions a:active { opacity: 0.5; }
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --fs: 14px;
    --fs-sm: 11px;
    --pad: 12px;
    --panel-w: 100vw;
  }

  body { overflow: hidden; }

  .home {
    display: flex;
    flex-direction: column;
  }

  .home-text {
    position: static;
    transform: none;
    order: 0;
    padding: var(--pad) var(--pad) 0;
    font-size: 15px;
    line-height: 1.3;
    white-space: normal;
    color: var(--fg);
    mix-blend-mode: normal;
    pointer-events: auto;
  }
  .home-nav { white-space: normal; }

  .slides {
    position: relative;
    order: 1;
    flex: 1;
    min-height: 0;
  }
  .slide { padding: var(--pad); }

  .home-footer {
    position: static;
    order: 2;
  }

  .panel { border-left: 0; }

  .project-text { grid-template-columns: 1fr; }

  .about {
    grid-template-columns: 1fr;
    gap: calc(var(--pad) * 2);
  }

  .cv-row { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); }

  .index-list a { grid-template-columns: 2.2em 1fr auto; }
  .index-cat { display: none; }

  /* The header is a row of touch targets first and a signature second:
     the tagline goes, so the name and the menu each get their width. */
  .page-tagline { display: none; }
}