/* ─────────────────────────────────────────────────────────────
   Liat Evenchik — Creative Director
   Design tokens, base type, and the responsive layout layer.

   Layout that has to react to viewport width lives here (not in
   inline styles) so media queries can actually win.
   ───────────────────────────────────────────────────────────── */

:root {
  --bg: #ffffff;
  --surface: #f0f0f0;
  --ink: #1e1e1e;
  --ink-soft: #6d6d6d;
  --rule: rgba(30, 30, 30, 0.10);

  --shell-max: 1880px;
  --gutter: 20px;
  --nav-h: 60px;
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #141414;
  --ink: #ffffff;
  --ink-soft: #8a8a8a;
  --rule: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 19.2px;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  transition: background .2s ease, color .2s ease;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-soft); }
::selection { background: #1e1e1e; color: #fff; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: -0.02em;
}

img, video, iframe { max-width: 100%; }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

#app { min-height: 100vh; }

/* Skip link — visible only once focused. */
.pf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule);
}
.pf-skip:focus { left: 8px; top: 8px; }

/* ── Shell ─────────────────────────────────────────────────── */

.pf-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
}

.pf-main { padding: var(--nav-h) var(--gutter) 0; }

.pf-nav,
.pf-footer { padding: 0 var(--gutter); }

/* ── Home ──────────────────────────────────────────────────── */

.pf-hero {
  height: calc(100vh - (var(--nav-h) * 2));
  min-height: 560px;
}

.pf-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 60px;
}

/* ── About ─────────────────────────────────────────────────── */

.pf-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}

.pf-about-contact {
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.pf-about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ── Project detail ────────────────────────────────────────── */

.pf-project-layout {
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
  gap: 40px;
  padding-bottom: 60px;
}

.pf-project-aside {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  height: calc(100vh - var(--nav-h));
  padding: 60px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pf-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Stills sit flush against each other by design. */
.pf-pair--flush { gap: 0; }

.pf-posters {
  display: grid;
  grid-template-columns: repeat(var(--poster-count, 5), 1fr);
  gap: 8px;
}

/* ── Responsive ────────────────────────────────────────────── */

/* The 4-up grid is the design intent and holds on every common laptop and
   desktop width; it only steps down where the cards would get too small. */
@media (max-width: 1100px) {
  .pf-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .pf-project-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  /* Un-pin the metadata panel: on one column it must scroll with the page. */
  .pf-project-aside {
    position: static;
    height: auto;
    padding: 0;
    display: block;
  }
  .pf-posters { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .pf-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }
  .pf-about-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .pf-about-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .pf-project-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .pf-hero {
    height: auto;
    min-height: min(70vh, 460px);
  }
  .pf-pair,
  .pf-pair--flush { grid-template-columns: minmax(0, 1fr); }
  .pf-pair--flush { gap: 20px; }
  .pf-posters { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}