/* ============================================
   DAVIDE PAGANELLI — sitemap-as-interface
   black / red · Helvetica · uppercase
   ============================================ */

:root {
  --red: #ff1e1e;
  --bg: #000000;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--red);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  text-transform: uppercase;
  cursor: text;
}

body.map {
  overflow: hidden;
  height: 100vh;
}

a {
  color: var(--red);
  text-decoration: none;
  cursor: text;
}

a:hover,
.toggle:hover {
  background: var(--red);
  color: #000;
  text-decoration: underline;
}

::selection { background: var(--red); color: #000; }

/* ---------- index: the map ---------- */
#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.node {
  position: absolute;
  z-index: 1;
  white-space: nowrap;
}

.hidden { display: none; }

#name {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: underline;
}

#name:hover { background: var(--red); color: #000; }

#about    { top: 24vh; left: 20vw; }
#video    { top: 22vh; left: 66vw; text-decoration: underline; }
#photo    { top: 48vh; left: 80vw; }
#magazine { top: 72vh; left: 17vw; text-decoration: underline; }
#contacts { top: 74vh; left: 68vw; text-decoration: underline; }

#v1 { top: 7vh;  left: 74vw; }
#v2 { top: 12vh; left: 79vw; }
#v3 { top: 17vh; left: 84vw; }

#g1 { top: 80vh; left: 5vw; }
#g2 { top: 85vh; left: 9vw; }
#g3 { top: 90vh; left: 13vw; }
#g4 { top: 95vh; left: 17vw; }

#c1 { top: 84vh; left: 76vw; }
#c2 { top: 90vh; left: 81vw; }

#credit {
  position: absolute;
  z-index: 1;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 70%;
  opacity: 0.6;
  text-align: center;
  white-space: nowrap;
}

#credit a { text-decoration: underline; }

/* ---------- subpages ---------- */
body.page { min-height: 100vh; }

.home-link {
  position: fixed;
  top: 5vw;
  left: 5vw;
  text-decoration: underline;
  z-index: 2;
  background: var(--bg);
}

.page-wrap {
  position: relative;
  margin: 22vh auto 12vh;
  width: 80vw;
  max-width: 1100px;
}

.piece { margin-bottom: 8vh; }

.frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--red);
  background: #000;
}

a.frame { display: block; }

.frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.piece .cap { margin-top: 1.2vh; }
.piece .cap:hover { background: var(--red); color: #000; }

/* single work page */
.single .title { margin-bottom: 3vh; }

.single .frame.portrait {
  aspect-ratio: 4 / 5;
  max-width: 520px;
  margin: 0 auto;
}

.single .desc {
  margin-top: 3.5vh;
  max-width: 75ch;
  text-align: justify;
}

.single .desc p { margin: 0 0 2vh; line-height: 1.7; }

.single .desc a { text-decoration: underline; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 4vw;
  margin-top: 7vh;
}

/* magazine grid */
.mag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
}

.mag-grid .frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: block;
}

.mag-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s;
}
.slideshow img.on { opacity: 1; }

.no-signal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--red);
  background: #000;
  font-size: 80%;
  letter-spacing: 0.1em;
}
.no-signal .bar { width: 40%; height: 1px; background: var(--red); opacity: 0.5; }

/* photo gallery placeholder (shown until real photos are uploaded) */
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-size: 80%;
  letter-spacing: 0.1em;
  background:
    repeating-linear-gradient(45deg,
      transparent, transparent 16px,
      rgba(255, 30, 30, 0.16) 16px, rgba(255, 30, 30, 0.16) 17px);
}

/* ---------- about ---------- */
#profile {
  position: absolute;
  top: 20vh;
  left: 20vw;
  width: 60vw;
  height: 68vh;
  overflow: auto;
  text-align: justify;
  text-indent: 5vw;
  z-index: 1;
}

#profile::-webkit-scrollbar { display: none; }

#profile p { margin: 0 0 2.2vh; line-height: 1.6; }

#profile em { font-style: italic; }

#profile .say-hi {
  margin-top: 5vh;
  text-indent: 0;
}

#profile .say-hi a { text-decoration: underline; }

.foot {
  position: fixed;
  bottom: 2vh;
  left: 5vw;
  font-size: 70%;
  opacity: 0.6;
  z-index: 2;
  background: var(--bg);
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  body { font-size: 70%; }

  /* bigger tap targets without moving the text */
  .node { padding: 8px; margin: -8px; }

  #credit { white-space: normal; width: 92vw; }

  .page-wrap { width: 90vw; margin-top: 18vh; }

  .mag-grid { grid-template-columns: 1fr; }

  #profile {
    top: 14vh;
    left: 5vw;
    width: 90vw;
    height: 76vh;
  }
}

/* phones: rebuild the map on a two-column vertical rhythm so that
   expanded branches never overlap. right column = video + contacts,
   left column = about + magazine, with generous vertical gaps. */
@media (max-width: 640px) {
  body.map { font-size: 64%; }

  /* video group — top, right column */
  #v1 { top: 4vh;  left: 52vw; }
  #v2 { top: 10vh; left: 57vw; }
  #v3 { top: 16vh; left: 60vw; }
  #video { top: 24vh; left: 66vw; }

  /* about — upper left */
  #about { top: 31vh; left: 8vw; }

  /* photo — mid right, no branches */
  #photo { top: 44vh; left: 72vw; }

  /* name stays centred at 50vh */

  /* magazine group — lower, left column */
  #magazine { top: 59vh; left: 8vw; }
  #g1 { top: 66vh; left: 5vw; }
  #g2 { top: 72vh; left: 9vw; }
  #g3 { top: 78vh; left: 13vw; }
  #g4 { top: 84vh; left: 17vw; }

  /* contacts group — lower, right column */
  #contacts { top: 59vh; left: 62vw; }
  #c1 { top: 68vh; left: 64vw; }
  #c2 { top: 74vh; left: 68vw; }

  #credit { bottom: 1.5vh; }
}

/* short screens (landscape phones): shrink so nothing collides */
@media (max-height: 560px) {
  body.map { font-size: 60%; }
  #credit { display: none; }
}