/* Paliienko — portfolio. Typography and layout mirror the moodboard reference. */

@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/Lora-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #fff; color: #000; }

body {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

#nav, #list, #back { user-select: none; white-space: nowrap; }

/* category tabs: gray, black when focused. project names: black, orange when focused */
#nav a { color: #999; }
#nav a.active { color: #000; }
#list a.active { color: #EC4926; }

@media (hover: hover) {
  #nav a:hover { color: #000; }
  #list a:hover, #back:hover { color: #EC4926; }
}

/* ---------- navigation (fixed top-left) ---------- */

#nav {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10;
}
#nav a { display: block; }
#nav .spacer { display: block; height: 24px; }

/* ---------- image stage ---------- */

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  padding: 124px 16px 40px;   /* top: image starts just below the "Hello" tab (~y112) */
  display: flex;
  align-items: center;
  justify-content: center;
}
#stage .slide {
  display: flex;
  gap: 16px;
  width: 100%;
  height: 100%;
  align-items: flex-start;    /* top-align images to the nav line */
  justify-content: center;
}
#stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
#stage .diptych img { max-width: calc(50% - 8px); }

/* images are display-only on the category page, click-to-advance in a project */
body[data-view="category"] #stage { pointer-events: none; }
body[data-view="project"] #stage { cursor: pointer; }

/* ---------- project list (wide: columns of 4 across the top) ---------- */

#list {
  position: fixed;
  top: 16px;
  left: 260px;          /* clear gap after the nav column */
  right: 16px;
  z-index: 10;
  display: grid;
  grid-template-rows: repeat(2, 24px);   /* 2 rows -> laid out as columns */
  grid-auto-flow: column;
  grid-auto-columns: max-content;        /* columns hug their titles */
  column-gap: 28px;                      /* tight, even gap between title columns */
  overflow: hidden;
}
#list a { display: block; overflow: hidden; }

/* ---------- mobile project strip, back link, about ---------- */

#back, #strip, #about { display: none; }

#about {
  max-width: 560px;
  margin: 112px 16px 32px;
}
#about p { margin-bottom: 32px; }

/* about: full orange background, black text on top (mirrors the reference) */
html:has(body[data-view="about"]) { background: #EC4926; }
body[data-view="about"] { background: transparent; }
/* on the orange, closed category tabs turn white; the open "About" stays black */
body[data-view="about"] #nav a { color: #fff; }
body[data-view="about"] #nav a.active { color: #000; }
@media (hover: hover) {
  body[data-view="about"] #nav a:hover { color: #000; }
}

body[data-view="about"] #about { display: block; }
body[data-view="about"] #stage,
body[data-view="about"] #list,
body[data-view="about"] #strip,
body[data-view="about"] #back { display: none; }

/* ============ tablet / narrow desktop ============ */

@media (max-width: 999px) {
  #list {
    position: static;
    display: block;
    margin: 52vh 16px 45vh;
    max-width: 44%;
    overflow: visible;
  }
  #stage {
    left: 42%;
    right: 16px;
    top: 16px;
    bottom: auto;
    height: 60vh;
    padding: 0;
  }
  #stage .slide {
    align-items: flex-start;
    justify-content: flex-end;
  }
}

/* ============ mobile ============ */

@media (max-width: 599px) {
  #stage {
    left: auto;
    right: 16px;
    top: 16px;
    width: 47vw;
    height: 58vw;
  }
  #list {
    margin: 55vh 16px 45vh;
    max-width: none;
  }

  /* project view: back link + vertical photo strip */
  body[data-view="project"] #nav,
  body[data-view="project"] #list,
  body[data-view="project"] #stage { display: none; }
  body[data-view="project"] #back {
    display: block;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10;
  }
  body[data-view="project"] #strip {
    display: block;
    padding: 25vh 16px 32px;
  }
  #strip .slide { margin-bottom: 24px; display: flex; gap: 8px; }
  #strip img { width: 100%; height: auto; }
  #strip .diptych img { width: calc(50% - 4px); }
}