/* =========================================================================
   Kvrix — Motion Design Portfolio
   Plain CSS. Layout: fixed left sidebar + scrolling content (desktop/tablet),
   collapsing to a hamburger + full-screen nav overlay on phones.
   ========================================================================= */

:root {
  --ink:        #141414;   /* active text / headings */
  --gray:       #9a9a9a;   /* inactive nav + body copy */
  --gray-soft:  #b9b9b9;   /* placeholders, lighter labels */
  --line:       #e6e6e6;   /* hairlines, input borders */
  --bg:         #ffffff;
  --btn:        #2b2b2b;
  --sidebar-w:  260px;
  --pad:        48px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- App shell --------------------------------------------------- */
.app { min-height: 100vh; }

/* ---------- Mobile top bar (hidden on desktop) -------------------------- */
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar .logo-sm img { width: 40px; height: auto; }

.menu-toggle, .menu-close {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 6px;
  color: var(--ink);
}
.menu-toggle .bar {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ink);
  margin: 6px 0;
}
.menu-close {
  display: none;
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 30px;
  line-height: 1;
}

/* ---------- Sidebar ----------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  padding: var(--pad);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 40;
}
.sidebar .logo { display: block; margin-bottom: 44px; }
.sidebar .logo img { width: 66px; height: auto; }

.nav-primary a,
.projects-label {
  display: block;
  font-size: 0.98rem;
  color: var(--gray);
  padding: 4px 0;
  transition: color 0.15s ease;
}
.nav-primary a:hover { color: var(--ink); }

.projects-label {
  margin-top: 30px;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-projects {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-projects a {
  display: block;
  font-size: 0.92rem;
  color: var(--gray);
  padding: 4px 0;
  transition: color 0.15s ease;
}
.nav-projects a:hover { color: var(--ink); }
.nav-projects a.is-active { color: var(--ink); }

/* Active states driven by body[data-page] */
body[data-page="everyday"] .nav-everyday,
body[data-page="ai"] .nav-ai,
body[data-page="about"]    .nav-about,
body[data-page="contact"]  .nav-contact { color: var(--ink); }
body[data-page="home"]     .projects-label,
body[data-page="project"]  .projects-label { color: var(--ink); font-weight: 600; }

.social {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  gap: 18px;
}
.social a {
  color: var(--gray);
  transition: color 0.15s ease;
}
.social a:hover { color: var(--ink); }
.social svg { width: 22px; height: 22px; display: block; }

/* ---------- Content area ------------------------------------------------ */
.content {
  margin-left: var(--sidebar-w);
  padding: var(--pad) 64px 80px;
  min-height: 100vh;
}

.page-title {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 600;
  text-align: center;
  margin: 12px 0 56px;
  letter-spacing: -0.01em;
}
.page-title + .page-subtitle { margin-top: -44px; }
.page-subtitle {
  text-align: center;
  color: var(--gray);
  font-size: 1.05rem;
  margin: 0 0 52px;
}

/* ---------- Everyday Art gallery ---------------------------------------- */
.everyday-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.everyday-item {
  display: block;
  overflow: hidden;
  background: #4a4a4a;
  aspect-ratio: 3 / 4;
  cursor: pointer;
}
.everyday-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.everyday-item:hover img { transform: scale(1.04); }

/* ---------- Lightbox (black overlay video gallery) --------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(0, 0, 0, 0.7);
}
.lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-inner {
  width: 100%;
  max-width: 560px;
  padding: 24px;
  text-align: center;
}
/* Wider lightbox on the AI Experiments page so 16:9 video is large */
body[data-page="ai"] .lb-inner { max-width: 900px; }
/* Photography gallery: take the full viewport so previews are as big as possible. */
body[data-page="project"] .lb-inner {
  max-width: 1920px;
  padding: 24px 80px; /* leaves room for the arrows at screen edges */
}
.lb-media { display: flex; justify-content: center; }
.lb-media .project-video { margin-bottom: 0; width: 100%; }
.lb-image {
  display: block;
  max-width: 100%;
  /* Cap height to viewport so very tall images don't overflow; preserves aspect. */
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
}
/* On the AI page the arrows live inside .lb-stage (wrapping the video). On desktop
   the stage is unpositioned, so arrows stay pinned to the screen edges (relative to
   .lightbox). On mobile the stage becomes the positioning context so the arrows
   centre on the video and overlap it (see the phone media query). */
.lb-stage { position: static; width: 100%; }
.lb-title {
  color: #fff;
  font-weight: 500;
  font-size: 1.9rem;
  margin: 26px 0 6px;
}
.lb-date { color: var(--gray); font-size: 0.95rem; margin: 0; }
.lb-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--gray);
  font-size: 0.9rem;
  border-bottom: 1px solid currentColor;
}
.lb-link:hover { color: #fff; }
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.lb-close:hover { opacity: 1; }
.lb-close { top: 22px; right: 26px; font-size: 30px; line-height: 1; }

/* Circular prev/next buttons — clearly visible on the translucent backdrop */
.lb-prev, .lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  color: #444444;
  opacity: 1;
  z-index: 2; /* keep both arrows in front of the video */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}
.lb-prev svg, .lb-next svg { width: 22px; height: 22px; display: block; }
.lb-prev:hover, .lb-next:hover { background: #f2f2f2; }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.94); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-placeholder img { max-width: 300px; width: 60%; border-radius: 2px; }
.lb-placeholder p { color: var(--gray); font-size: 0.95rem; margin-top: 18px; }
.lb-placeholder code { color: #cfcfcf; }

/* ---------- Homepage grid ----------------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 36px;
}
/* AI Experiments uses the same grid, but 4 columns */
.project-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
.project-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-item { display: block; }
.grid-thumb {
  display: block;
  overflow: hidden;
  background: #f2f2f2;
  aspect-ratio: 4 / 3;
}
.grid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.grid-item:hover .grid-thumb img { transform: scale(1.04); }
.grid-name {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 1.05rem;
  color: var(--ink);
}

/* ---------- Back to top ------------------------------------------------- */
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 72px;
  color: var(--gray);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.back-to-top:hover { color: var(--ink); }
.back-to-top svg { width: 14px; height: 14px; }

/* ---------- Centered text pages (About / Contact) ----------------------- */
.prose {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.prose p {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--gray);
  margin: 0 0 26px;
}

/* ---------- Project detail ---------------------------------------------- */
.project-intro {
  max-width: 680px;
  margin: 0 auto 48px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray);
}
.project-images { max-width: 900px; margin: 0 auto; }

/* About-page image: same width as project images, on a clean background */
.about-media { margin-top: 44px; }
.about-media img { background: none; }
.project-images img {
  width: 100%;
  margin-bottom: 28px;
  background: #f2f2f2;
}

/* ---------- Photography gallery (project.gallery = true) --------------- */
.project-images.is-gallery { max-width: 900px; }
.gallery-item {
  position: relative;
  display: block;
  margin-bottom: 28px;
  overflow: hidden;
  background: #f2f2f2;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%;
  display: block;
  margin-bottom: 0;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.02); opacity: 0.92; }
.gallery-zoom {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #2b2b2b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gallery-zoom svg { width: 26px; height: 26px; display: block; }
.gallery-item:hover .gallery-zoom,
.gallery-item:focus-visible .gallery-zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (hover: none) {
  /* Touch devices: the hover icon would be sticky; hide it (tap still opens the lightbox) */
  .gallery-zoom { display: none; }
  .gallery-item { cursor: pointer; }
}

/* Responsive 16:9 YouTube embed shown at the top of a project */
.project-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 28px;
  background: #000;
}
.project-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.project-video-error {
  margin-bottom: 28px;
  padding: 16px;
  text-align: center;
  color: #c0392b;
  background: #faf0ef;
  font-size: 0.95rem;
}

/* ---------- Contact ----------------------------------------------------- */
.contact-block {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.contact-block p { color: var(--gray); font-size: 1.1rem; line-height: 1.6; }
.contact-intro { margin-bottom: 26px; }
.contact-address { margin: 0 0 22px; }
.contact-phone { margin: 0; }
.contact-divider {
  width: 28px;
  border: 0;
  border-top: 1px solid var(--gray-soft);
  margin: 34px auto;
}

.contact-form {
  max-width: 760px;
  margin: 56px auto 0;
  text-align: left;
}
.contact-form label {
  display: block;
  font-size: 0.95rem;
  margin: 24px 0 8px;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--gray-soft); }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--ink); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form button {
  margin-top: 28px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 1rem;
  color: #fff;
  background: var(--btn);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.contact-form button:hover { opacity: 0.85; }
.form-note { margin-top: 16px; color: var(--ink); font-size: 0.95rem; }
.form-note.is-error { color: #c0392b; }

/* Honeypot field — visually hidden, kept in the DOM for bots */
.contact-form input.hp-field {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================================
   TABLET  (<= 1024px) — sidebar stays, everything tightens
   ========================================================================= */
@media (max-width: 1024px) {
  :root { --sidebar-w: 240px; --pad: 36px; }
  .content { padding: 36px 44px 72px; }
  .project-grid { gap: 32px 26px; }
  .project-grid.grid-4 { grid-template-columns: repeat(3, 1fr); }
  .everyday-grid { grid-template-columns: repeat(3, 1fr); }
  .sidebar .logo img { width: 46px; }
}

/* =========================================================================
   PHONE  (<= 720px) — hamburger + full-screen nav overlay, single column
   ========================================================================= */
@media (max-width: 720px) {
  .topbar { display: flex; }

  .content {
    margin-left: 0;
    padding: 32px 22px 64px;
  }

  /* Sidebar becomes a full-screen overlay, hidden until toggled */
  .sidebar {
    width: 100%;
    height: 100%;
    padding: 80px 24px 40px;
    align-items: center;
    justify-content: flex-start; /* top-aligned + scrollable so tall menus aren't cropped */
    text-align: center;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.32s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  .sidebar .logo { display: none; }   /* logo lives in the top bar on mobile */
  .menu-close { display: block; }

  .nav-primary a,
  .projects-label,
  .nav-projects a {
    font-size: 1.25rem;
    padding: 12px 0;
    color: var(--gray);
  }
  .projects-label { margin-top: 18px; font-weight: 600; }
  .nav-projects { width: 100%; }

  .social {
    margin-top: 30px;
    padding-top: 24px;
    justify-content: center;
  }

  .page-title { font-size: clamp(2.1rem, 9vw, 2.8rem); margin: 6px 0 36px; }
  .page-title + .page-subtitle { margin-top: -28px; }
  .page-subtitle { margin-bottom: 32px; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .project-grid.grid-2 { grid-template-columns: 1fr; }
  .grid-thumb { aspect-ratio: 16 / 11; }
  .everyday-grid { grid-template-columns: repeat(2, 1fr); }
  .prose p { font-size: 1.05rem; }
  .contact-form { margin-top: 40px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }

  /* AI Films + Project gallery lightboxes on mobile: the stage becomes the positioning
     context, so arrows centre on the media and straddle its left/right edges
     (partly over, partly outside) — like the Everyday Art lightbox. */
  .lb-stage { position: relative; }
  .lb-stage .lb-prev { left: -18px; }
  .lb-stage .lb-next { right: -18px; }

  /* Photography gallery: drop the desktop side-padding so the image fills the screen. */
  body[data-page="project"] .lb-inner { padding: 16px 14px; }
  body[data-page="project"] .lb-image { max-height: calc(100vh - 60px); }
}