:root { --bg:#000; --fg:#fff; --dim:#8f8f8f; }
* { margin:0; padding:0; box-sizing:border-box; }
html { background:var(--bg); }
body { background:var(--bg); color:var(--fg);
  font-family:"Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }

/* ---------- header ---------- */
header { position:fixed; top:0; left:0; z-index:50; padding:26px 30px;
  display:flex; gap:18px; align-items:flex-start; mix-blend-mode:difference; }
.brand { font-weight:700; letter-spacing:.04em; line-height:1.35; }
.brand span { display:block; color:var(--dim); font-weight:400; }
.burger { background:none; border:0; cursor:pointer; padding:4px 2px; margin-top:2px; }
.burger i { display:block; width:22px; height:2px; background:var(--fg); margin:5px 0; }

/* ---------- menu ---------- */
nav.menu { position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:40;
  display:none; align-items:center; justify-content:center; }
nav.menu.open { display:flex; }
nav.menu ul { list-style:none; text-align:center; }
nav.menu a { display:block; padding:10px 0; font-size:clamp(20px,3.2vw,30px);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dim);
  transition:color .2s; }
nav.menu a:hover, nav.menu a.active { color:var(--fg); }
nav.menu .social { margin-top:34px; font-size:14px; color:var(--dim); }
nav.menu .social a { display:inline; font-size:14px; padding:0 10px; text-transform:none; }

/* ---------- grid da home: painéis alternados ---------- */
.works { padding:110px 0 80px; }
.panel { display:block; position:relative; width:58%; margin:0 0 0 auto; } /* colado à direita */
.panel:nth-child(even) { margin:0 auto 0 0; }                              /* colado à esquerda */
.panel img { width:100%; aspect-ratio:16/9; object-fit:cover;
  transition:opacity .35s ease; }
.panel .caption { position:fixed; left:0; right:0; top:50%; transform:translateY(-50%);
  z-index:30; text-align:center; pointer-events:none; opacity:0; transition:opacity .25s;
  font-size:clamp(22px,3.6vw,52px); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fg); text-shadow:0 0 24px rgba(0,0,0,.9);
  padding:0 5vw; }
.panel:hover img { opacity:.32; }
.panel:hover .caption { opacity:1; }
/* telas estreitas OU touch: largura total, título sempre visível abaixo */
@media (max-width:700px), (hover:none) {
  .panel .caption { position:static; transform:none; opacity:1; font-size:14px;
    text-align:left; padding:12px 5vw 0; display:block; }
  .panel:hover img { opacity:1; }
  .panel, .panel:nth-child(even) { width:100%; margin:0 0 34px; }
}

/* ---------- página de projeto ---------- */
.project { max-width:1100px; margin:0 auto; padding:130px 24px 60px; }
.project h1 { font-size:clamp(22px,3vw,38px); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; text-align:center; margin-bottom:8px; }
.project .cats { text-align:center; color:var(--dim); font-size:13px;
  text-transform:uppercase; letter-spacing:.14em; margin-bottom:44px; }
.videowrap { position:relative; aspect-ratio:16/9; margin-bottom:16px; background:#0a0a0a; }
.videowrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.credits { max-width:640px; margin:44px auto; color:var(--dim);
  font-size:13.5px; line-height:1.9; white-space:pre-line; text-align:center; }
.credits strong { color:var(--fg); font-weight:700; }
.credits a { color:var(--dim); border-bottom:1px dotted #444; }
.credits a:hover { color:var(--fg); }
.stills { display:grid; grid-template-columns:1fr; gap:16px; margin-top:44px; }
.stills img { width:100%; }
.pn { display:flex; justify-content:space-between; gap:20px; margin:70px 0 10px;
  text-transform:uppercase; font-size:13px; letter-spacing:.1em; color:var(--dim); }
.pn a:hover { color:var(--fg); }

/* ---------- páginas de texto ---------- */
.page { max-width:640px; margin:0 auto; padding:150px 24px 80px; }
.page h1 { font-size:26px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:30px; }
.page p { margin-bottom:1.2em; color:#cfcfcf; }
.page a { border-bottom:1px solid var(--dim); }

footer { padding:40px 30px; color:#555; font-size:12px; text-align:center;
  letter-spacing:.06em; }