/* Piotr Christopher — site styles.
   Minimal: small medium-weight type, black on white, lots of space, quick
   opacity fades. The work does the talking. */

:root {
  --pad: 12px;            /* page edge + most gaps */
  --header: 44px;         /* header height */
  --fg: #000;
  --bg: #fff;
  --muted: color-mix(in srgb, var(--fg) 30%, var(--bg)); /* secondary text, follows your colours */
  --veil: color-mix(in srgb, var(--bg) 95%, transparent); /* header / bar background */
  --tint: color-mix(in srgb, var(--fg) 5%, var(--bg));   /* placeholder behind loading images */
  --text: 13px;
  --feed-w: 80;            /* feed picture size, % of screen */
  --feed-space: 100;       /* height given to each feed item, % of screen */
  --cols: 5;
  --gap: 12px;
  --fast: .15s ease;
  --slow: .7s ease;
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 500 var(--text)/1.15 var(--font);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .5; transition: opacity var(--fast); }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p, ul, dl, dd { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
img, video { display: block; max-width: 100%; }
.muted { color: var(--muted); }
:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* ---- Images: shaped box + blurred placeholder + fade-in ---------------- */
.frame {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--tint);
}
.frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; }
.fade { opacity: 0; transition: opacity var(--slow); }
.fade.is-loaded { opacity: 1; }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header);
  padding: 0 var(--pad);
  background: var(--veil);
}
.h-row { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.h-nav { display: contents; }
.h-role { color: var(--muted); margin-left: .6em; }
.h-menu { display: none; }
main { padding: calc(var(--header) + 40px) var(--pad) 80px; }

@media (max-width: 767px) {
  .h-name { display: flex; flex-direction: column; }
  .h-role { margin-left: 0; }
  .h-menu { display: block; }
  :root { --header: 52px; }
  .h-nav {
    display: none;
    position: fixed;
    inset: var(--header) 0 0 0;
    padding: 20px var(--pad);
    background: var(--veil);
    flex-direction: column;
    gap: 2px;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -.02em;
  }
  .menu-open .h-nav { display: flex; animation: fadeIn var(--fast); }
  .menu-open { overflow: hidden; }
}
@media (max-width: 420px) { .h-role { font-size: 11px; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Feed (featured / video) ------------------------------------------- */
.feed { margin-top: 0; }
.feed-item {
  min-height: calc(var(--feed-space) * 1svh - var(--header));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6vh 0;
}
.feed-media { display: block; }
.feed-media:hover { opacity: 1; }
.feed-item .frame {
  /* as big as fits: 80% of the width or 72% of the height, keeping its shape */
  width: min(calc(var(--feed-w) * 1vw), calc(var(--feed-w) * 0.9svh * var(--ar, 1.5)), 1400px);
}
.feed-cap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-video main, .page-home .feed:first-child { padding-top: var(--header); }
.empty { text-align: center; padding-top: 30vh; }
@media (max-width: 767px) {
  .feed-item .frame { width: min(calc(100vw - 2 * var(--pad)), calc(var(--feed-w) * 0.85svh * var(--ar, 1.5))); }
}

/* ---- Overview ---------------------------------------------------------- */
.filters { display: flex; gap: var(--pad); margin-bottom: 40px; }
.filters a { color: var(--muted); }
.filters a[aria-current] { color: var(--fg); }
.ov-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: calc(var(--gap) * 2 + 24px) var(--gap);
  align-items: end;
}
.ov-item[hidden] { display: none; }
.ov-item a { display: block; }
.ov-item .frame { margin-bottom: 8px; }
.ov-item span { display: block; }
.ov-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gap) + 20px) var(--gap); } }

/* ---- Information ------------------------------------------------------- */
.info {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px var(--pad);
  align-items: start;
}
.info-bio { max-width: 560px; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.info-bio p + p, .info-bio .more p { margin-top: 1em; }
.read-more { margin-top: 1em; color: var(--muted); font-size: var(--text); }
.read-more:hover { color: var(--fg); }
.info h2 { margin-bottom: 8px; }
@media (max-width: 767px) { .info { grid-template-columns: 1fr; } }

/* ---- Project page ------------------------------------------------------ */
.page-project main { padding: 0; }
.stage {
  position: fixed;
  inset: calc(var(--header) + 8px) var(--pad) 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}
.stage .slide {
  /* fit inside the stage, keeping the photo's shape */
  width: min(100cqw, calc(100cqh * var(--ar, 1.5)));
  max-height: 100cqh;
}
.stage .slide > img, .stage .slide > video { object-fit: contain; }
.nav-zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.nav-zone.prev { left: 0; cursor: w-resize; }
.nav-zone.next { right: 0; cursor: e-resize; }
.nav-zone:focus, .nav-zone:focus-visible { outline: none; } /* arrow keys work instead */
.slide.is-video ~ .nav-zone { bottom: 48px; } /* leave the player controls clickable */

.end-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.end-card .frame { width: min(240px, 40cqw); }

.p-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 3;
  padding: var(--pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--pad);
  background: var(--veil);
}
.p-modes { display: flex; gap: var(--pad); }
.p-modes button[aria-pressed="false"] { color: var(--muted); }
.p-meta { display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-close { justify-self: end; }

.p-grid-wrap { display: none; padding: calc(var(--header) + 40px) var(--pad) 120px; }
[data-mode="overview"] .stage { display: none; }
[data-mode="overview"] .p-grid-wrap { display: block; }
.p-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--pad); }
.p-grid .frame { aspect-ratio: 1; }
.p-grid a.current .frame { outline: 1px solid var(--fg); outline-offset: 3px; }
.p-credits { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px var(--pad); }

@media (max-width: 767px) {
  .stage { inset: calc(var(--header) + 4px) 0 96px; }
  .p-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "meta meta" "modes close"; row-gap: 14px; }
  .p-meta { grid-area: meta; }
  .p-modes { grid-area: modes; }
  .p-close { grid-area: close; }
}

/* ---- Video player (custom minimal controls) ---------------------------- */
.player { position: relative; }
.controls {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 0 6px rgba(0, 0, 0, .35);
  opacity: 0;
  transition: opacity var(--fast);
}
.player:hover .controls, .player.paused .controls, .player:focus-within .controls { opacity: 1; }
@media (hover: none) { .controls { opacity: 1; } }
.controls button:hover { opacity: .6; }
.controls .time { font-variant-numeric: tabular-nums; }
.controls .bar { flex: 1; height: 1px; background: rgba(255, 255, 255, .5); position: relative; cursor: pointer; }
.controls .bar::after { content: ""; position: absolute; inset: -8px 0; } /* bigger hit area */
.controls .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; width: 0; }

/* ---- Misc -------------------------------------------------------------- */
.empty-page { padding-top: 30vh; text-align: center; }
.empty-page p + p { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Design switches --------------------------------------------------- */
.no-role .h-role { display: none; }
/* "Show titles" off: only the pictures. The project title stays readable by
   search engines and screen readers, just not shown. */
.no-titles .feed-cap,
.no-titles .ov-item .ov-title,
.no-titles .ov-item .muted,
.no-titles .p-meta .muted { display: none; }
.no-titles .ov-item .frame { margin-bottom: 0; }
.no-titles .p-meta h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}