:root {
  --fg: #111;
  --mute: #9a9a9a;
  --bg: #fff;
  --soft: #f3f3f3;
  --gutter: 24px;
  --side: 150px;   /* largura da coluna do menu lateral */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, button:hover, .on { font-style: italic; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sub { color: var(--mute); }

/* Topo: nome + Info */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; gap: 48px;
  padding: 22px var(--gutter);
  background: var(--bg);
}

/* Menu lateral: áreas */
.side {
  position: fixed; z-index: 10;
  left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 15px;
}

main { margin-left: var(--side); }
.page { padding: 110px var(--gutter) 100px 0; }

/* Página inicial: faixa de imagens */
.home {
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
}
html:has(.home), body:has(.home) { overscroll-behavior-x: none; } /* evita o "voltar atrás" do Mac ao deslizar */
.strip {
  height: clamp(220px, 52vh, 600px);
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.strip.grab { cursor: grabbing; }
.track {
  display: flex; gap: 14px; height: 100%;
  will-change: transform;
  transition: opacity .22s;
}
.track.fade { opacity: 0; }
.track a { flex: none; height: 100%; }
.track img { display: block; height: 100%; width: auto; pointer-events: none; }
.track a.crop { overflow: hidden; }
.track a.crop img { width: 100%; object-fit: cover; }
.cap { margin-top: 14px; min-height: 1.5em; color: var(--mute); }

/* Página Film: grelha */
.grid {
  display: grid; gap: 48px 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.th { aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); margin-bottom: 8px; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s; }
.grid a:hover { font-style: normal; }
.grid a:hover .t { font-style: italic; }
.grid a:hover img { opacity: .85; }

/* Página Photo: fotografias espalhadas */
.scatter { position: relative; }
.scatter .it { position: absolute; top: 0; left: 0; }
.scatter img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .4s; }
.scatter img.ok { opacity: 1; }
.scatter .loose { cursor: zoom-in; }
.scatter .proj .sub { display: block; margin-top: 6px; }
.scatter .proj:hover .sub { color: var(--fg); }

/* Fotografia em grande */
.lb {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px var(--gutter) 24px; cursor: zoom-out;
}
.lb img { max-width: 100%; max-height: calc(100vh - 140px); display: block; cursor: e-resize; }
.lb .x { position: absolute; top: 22px; right: var(--gutter); }
.lbmeta { display: flex; gap: 24px; margin-top: 16px; }

/* Projeto */
.proj {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 140px);
}
.page:has(.proj) { padding-top: 70px; padding-bottom: 28px; }
.stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 55vh;
}
.stage img { display: block; max-width: 100%; max-height: 74vh; cursor: e-resize; }
.video { --r: 16 / 9; width: min(100%, calc(74vh * var(--r))); aspect-ratio: var(--r); background: var(--soft); }
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.ph { display: flex; align-items: center; justify-content: center; color: var(--mute); }
.meta { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; margin-top: 24px; }
.meta .ctrl { display: flex; gap: 14px; align-self: start; white-space: nowrap; }
.meta .ctrl span { color: var(--mute); }
.desc { grid-column: 1 / -1; max-width: 52ch; margin-top: 10px; }
.credits { margin-top: 10px; }

/* Info */
.info { display: grid; grid-template-columns: minmax(0, 52ch) auto; gap: 40px 96px; }
.info p + p { margin-top: 1em; }
.info h3 { font-weight: normal; color: var(--mute); }
.info ul { list-style: none; }
.info section + section { margin-top: 24px; }

/* Palavra-passe */
.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.gate form { display: flex; flex-direction: column; gap: 12px; width: 240px; }
.gate input {
  font: inherit; border: 0; border-bottom: 1px solid var(--fg);
  padding: 6px 0; outline: none; background: none; border-radius: 0;
}
.gate .err { color: #b00; min-height: 1.5em; }

/* Telemóvel */
@media (max-width: 700px) {
  :root { --gutter: 16px; --side: 0px; }
  .top { padding: 18px var(--gutter) 6px; gap: 24px; }
  .side {
    top: 44px; transform: none; left: 0; right: 0;
    flex-direction: row; gap: 22px;
    padding: 0 var(--gutter) 12px; background: var(--bg);
  }
  main { margin-left: 0; }
  .page { padding: 104px var(--gutter) 80px; }
  .page:has(.proj) { padding-top: 96px; }
  .home { padding-top: 40px; }
  .strip { height: 46vh; }
  .track { gap: 10px; }
  .cap { padding-left: var(--gutter); }
  .info, .meta { grid-template-columns: 1fr; }
}

/* Stills a passar na faixa: a largura fica fixa e a imagem preenche */
.track a.flipping { overflow: hidden; }
.track a.flipping img { width: 100%; object-fit: cover; }