/* ─── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: Georgia, serif;
  background: #fafafa;
  color: #222;
}

a { color: inherit; }

/* ─── Split layout ──────────────────────────────────────────── */

.site-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #ddd;
}

.site-header h1 { font-size: 1.4rem; font-weight: normal; }
.site-header p   { font-size: 0.9rem; color: #555; margin-top: 0.25rem; }

.split-container {
  display: flex;
  height: calc(100vh - var(--header-height, 80px));
  overflow: hidden;
}

.panel {
  flex: 1;
  overflow-y: auto;
}

/* Vertical divider */
.divider {
  flex-shrink: 0;
  width: 1px;
  background: #ddd;
}

.panel__title-wrap {
  padding: 1rem 1.5rem 0;
}

.panel__title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid currentColor;
  padding-bottom: 0.25rem;
  line-height: 1.1;
}

.panel__inner {
  padding: 1.5rem;
  max-width: 720px;
}

.panel__bio {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* ─── Project card ──────────────────────────────────────────── */

.project-item {
  margin-bottom: 2rem;
}

.project-date {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.25rem;
}

.project-headline {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.project-headline:hover { text-decoration: underline; }

.project-thumb img,
.project-thumb video {
  width: 100%;
  display: block;
  max-width: 400px;
}

.project-caption {
  font-size: 0.8rem;
  color: #555;
  font-style: italic;
  margin-top: 0.4rem;
  max-width: 400px;
  line-height: 1.4;
}

/* ─── Multi-screenshot collage ──────────────────────────────── */

.project-screenshots {
  position: relative;
  /* height is driven by the tallest natural image; extra overlap spills below */
  margin-bottom: 0.5rem;
}

.project-screenshots__img {
  cursor: default;
}

.project-screenshots__img {
  position: absolute;
  width: 72%;
  max-width: 340px;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
  display: block;
  /* less overlap: larger step between images */
  top:  calc(var(--i) * 38px);
  left: calc(var(--i) * 44px);
  transition: transform 0.2s, box-shadow 0.2s, z-index 0s;
}

/* put later images behind earlier ones so img 0 is on top */
.project-screenshots__img:nth-child(1) { z-index: 3; }
.project-screenshots__img:nth-child(2) { z-index: 2; }
.project-screenshots__img:nth-child(3) { z-index: 1; }

/* hover each image individually — lift it above its siblings */
.project-screenshots__img:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  z-index: 10;
}

/* static height placeholder so the container doesn't collapse */
.project-screenshots::after {
  content: '';
  display: block;
  /* approximate: first image height + max offset */
  padding-top: calc(72% * 0.63 + 3rem);
}

/* ─── TKTK placeholder callout ─────────────────────────────── */
/* Any text node that starts with "TKTK" inside these elements gets
   highlighted so it's impossible to miss */
.project-item:has(.project-headline[href*="TKTK"]) {
  outline: 3px dashed #e55;
  padding: 0.5rem;
  background: #fff8f8;
}

/* ─── Mobile toggle ─────────────────────────────────────────── */

.mobile-toggle { display: none; }

/* ─── Mobile ────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .mobile-toggle {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ddd;
  }

  .mobile-toggle__btn {
    flex: 1;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    font-family: Georgia, serif;
    border: none;
    border-bottom: 3px solid transparent;
    background: #ebebeb;
    cursor: pointer;
    transition: background 0.2s;
  }

  .mobile-toggle__btn--active {
    background: #fafafa;
    border-bottom-color: #222;
    font-weight: bold;
  }

  .split-container {
    display: block;
    height: auto;
    overflow: visible;
  }

  .panel {
    width: 100%;
    height: auto;
    overflow-y: visible;
  }

  /* Default: show left panel, hide right */
  .panel--left  { display: block; }
  .panel--right { display: none; }

  .split-container[data-active="right"] .panel--left  { display: none; }
  .split-container[data-active="right"] .panel--right { display: block; }

  .divider { display: none; }
}