:root{
  --bg:#FAFAF7;--ink:#111;--mute:#666;--line:rgba(0,0,0,.1);
  --neon:#00FF66;
  --serif:"Instrument Serif","Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);--pad:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.45}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,iframe{display:block;width:100%;height:100%;object-fit:cover;border:0}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--mute)}

/* text selection highlight: neon green with black text */
::selection{
  background:var(--neon) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
::-moz-selection{
  background:var(--neon) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}
.brand ::selection,
.brand *::selection,
.logo-serif ::selection,
.logo-serif *::selection,
.logo-serif::selection{
  background:var(--neon) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

/* cursor — single dot with difference inversion */
@media (hover:hover) and (pointer:fine){
  body,a,button{cursor:none}
  .c-dot{
    position:fixed;top:0;left:0;
    width:8px;height:8px;
    background:#ffffff;
    mix-blend-mode:difference;
    border-radius:50%;
    pointer-events:none;
    z-index:999999;
    transform:translate(-50%,-50%);
    transition:width .22s var(--ease),height .22s var(--ease),opacity .2s;
  }
  .c-dot.hover{
    width:34px;height:34px;
  }
}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px var(--pad);background:rgba(250,250,247,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:16px;align-items:baseline}

/* creative hover interaction on B.Justi logo */
.logo-serif{
  font-family:var(--serif);
  font-size:clamp(26px,2.6vw,34px);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  position:relative;
  user-select:text;
  cursor:pointer;
}
.logo-b{
  display:inline-block;
  transition:transform .4s var(--ease);
}
.logo-expand{
  display:inline-block;
  max-width:0;
  opacity:0;
  overflow:hidden;
  vertical-align:baseline;
  font-style:italic;
  white-space:nowrap;
  letter-spacing:-.01em;
  transform:translateX(-6px);
  transition:max-width .45s var(--ease),opacity .35s var(--ease),transform .45s var(--ease);
}
.logo-dot{
  display:inline-block;
  color:var(--ink);
  transition:color .25s var(--ease),max-width .35s var(--ease),opacity .25s var(--ease),transform .35s var(--ease);
}
.logo-space{
  display:inline-block;
  max-width:0;
  overflow:hidden;
  transition:max-width .35s var(--ease);
}
.logo-last{
  display:inline-block;
  transition:transform .45s var(--ease),letter-spacing .35s var(--ease);
}
.logo-serif:hover .logo-expand{
  max-width:140px;
  opacity:1;
  transform:translateX(0);
}
.logo-serif:hover .logo-dot{
  color:var(--neon);
  opacity:0;
  max-width:0;
  transform:scale(.5);
}
.logo-serif:hover .logo-space{
  max-width:7px;
}
.logo-serif:hover .logo-last{
  letter-spacing:.03em;
}
.logo-serif:hover .logo-b{
  transform:translateY(-1px);
}

.brand .role{padding-left:14px;border-left:1px solid var(--line);font-size:11px}
.h-right{display:flex;justify-content:flex-end;gap:16px;align-items:center}
.h-sep{opacity:.35;font-size:11px}
.clock{display:flex;align-items:center;gap:8px}
.pulse{width:7px;height:7px;border-radius:50%;background:#1DB954;position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1DB954;animation:pulse 1.8s infinite}
@keyframes pulse{to{transform:scale(3);opacity:0}}
.lang button{opacity:.35;transition:opacity .3s}.lang button.on{opacity:1}

/* right-aligned nav button */
.nav-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 14px;border:1px solid var(--ink);border-radius:999px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.nav-btn:hover{background:var(--ink);color:var(--bg);transform:translateY(-1px)}
.nav-btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.nav-btn:hover .arr{transform:translateX(3px)}
.nav-btn.active:hover .arr{transform:translateX(-3px)}

main{padding:0;width:100%}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* grid — full-bleed edge-to-edge mosaic, zero gap, no stroke */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  padding:0;
  margin:0;
  width:100%;
}
.card{display:flex;flex-direction:column;cursor:pointer}
.card .img{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#e8e8e3;
  border:0;
  position:relative;
}
.card .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.card:hover .img img,
.card.is-active .img img{
  transform:scale(1.0175);
}
.card-hover-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:var(--ink);
  color:#ffffff;
  padding:clamp(7px,0.8vw,11px) clamp(12px,1.4vw,20px);
  transform:translateY(100%);
  transition:transform .35s var(--ease);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:4;
  pointer-events:none;
  box-sizing:border-box;
}
.card:hover .card-hover-bar,
.card.is-active .card-hover-bar{
  transform:translateY(0);
}
.card-hover-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(13px,1.1vw,17px);
  line-height:1;
  letter-spacing:-.01em;
  color:#ffffff;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-hover-meta{
  font-family:var(--mono);
  font-size:clamp(9px,0.72vw,11px);
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  flex-shrink:0;
}
.card-hover-meta .dot{
  opacity:.4;
}
@media (max-width: 520px){
  .card-hover-bar{
    padding:6px 10px;
    gap:8px;
  }
  .card-hover-title{
    font-size:13px;
  }
  .card-hover-meta .meta-year{
    display:none;
  }
}
.card-info{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:14px;
  padding-top:8px;
  border-top:1px solid var(--line);
}
.card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.1;
  letter-spacing:-.01em;
}
.card .meta{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.card .meta .dot{opacity:.35}

/* 8th static project teaser card */
.card-static,
.card-static *{
  cursor:default;
}
.card-fine-wrap{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0e0e0e;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,3vw,44px);
  box-sizing:border-box;
}
.fine-box{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,0.22);
}
.fine-box-text{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.8vw,42px);
  line-height:1.15;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#ffffff;
  display:inline-block;
  text-align:center;
}
.card-info-static{
  cursor:default;
}
.card-static-dash{
  opacity:.35;
  font-weight:400;
  font-size:clamp(18px,1.8vw,26px);
  line-height:1.1;
}

/* placeholder art */
.ph{width:100%;height:100%;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(135deg,#ecece6,#dcdcd4)}

/* overlay */
.project{position:fixed;inset:0;width:100vw;height:100vh;background:var(--bg);z-index:100;overflow-y:auto;transform:translateY(100%);transition:transform .9s var(--ease)}
.project.open{transform:translateY(0)}
.p-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);background:rgba(250,250,247,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.p-bar .ctr{display:flex;gap:22px;align-items:center}
.p-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,6vw,100px);padding:clamp(48px,10vh,120px) var(--pad) 64px}
.p-intro h2{font-weight:400;font-size:clamp(44px,7vw,110px);line-height:.95;letter-spacing:-.02em;margin:18px 0 32px}
.p-intro p{max-width:58ch;margin-bottom:1em}
.credits{border:1px solid var(--line);padding:24px;align-self:start}
.credits div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px}
.credits div:last-child{border:0}.credits span:first-child{color:var(--mute)}
.stream{display:flex;flex-direction:column;gap:var(--pad);padding:0 var(--pad) var(--pad)}
.s-row{display:grid;gap:var(--pad);align-items:start;max-width:1400px;width:100%;margin:0 auto}
.s-1{grid-template-columns:1fr}.s-2{grid-template-columns:1fr 1fr}.s-3{grid-template-columns:repeat(3,1fr)}.s-4{grid-template-columns:repeat(4,1fr)}
.s-row>*{overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,0.02)}
.m-img{width:100%;display:flex;justify-content:center}
.m-img img{width:100%;height:auto;max-height:88vh;object-fit:contain;display:block}
.m-video{width:100%;aspect-ratio:16/9;background:#000}
.m-short{width:100%;aspect-ratio:9/16;background:#000}
.s-1 .m-short{max-width:420px;margin:0 auto}
.m-video iframe,.m-short iframe,.m-video video{width:100%;height:100%;border:0;display:block}
.m-clickable{position:relative;cursor:pointer}
.m-clickable img{transition:transform .5s var(--ease)}
.m-clickable:hover img{transform:scale(1.02)}
.m-expand-btn{
  position:absolute;bottom:12px;right:12px;z-index:5;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(17,17,17,.76);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);border-radius:3px;color:#fff;
  pointer-events:none;opacity:.75;transform:scale(.96);
  transition:opacity .25s var(--ease),transform .25s var(--ease),background .25s,border-color .25s;
}
.m-clickable:hover .m-expand-btn{
  opacity:1;transform:scale(1.06);background:rgba(0,0,0,.94);border-color:rgba(255,255,255,.45);
}

/* Lightbox Modal */
.lightbox-modal{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:99999;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;pointer-events:none;transition:opacity .32s var(--ease);
}
.lightbox-modal.active{opacity:1;pointer-events:auto}
.lightbox-overlay{position:absolute;inset:0;background:rgba(10,10,10,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:1}
.lightbox-bar{
  position:relative;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:20px var(--pad);border-bottom:1px solid rgba(255,255,255,.1);color:#fff;
}
.lightbox-info{display:flex;align-items:baseline;gap:16px}
.lightbox-title{font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);font-weight:400;color:#fff;letter-spacing:-.01em}
.lightbox-counter{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.lightbox-actions{display:flex;gap:10px;align-items:center}
.lightbox-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  color:#fff;background:rgba(255,255,255,.06);font-family:var(--mono);font-size:14px;
  cursor:pointer;transition:background .25s var(--ease),color .25s,transform .25s,border-color .25s;
}
.lightbox-btn:hover{background:#fff;color:#000;border-color:#fff;transform:scale(1.06)}
.lightbox-content{
  position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;
  padding:16px var(--pad);cursor:pointer;overflow:hidden;
}
.lightbox-media-wrap{cursor:default;display:flex;align-items:center;justify-content:center;max-width:92vw;max-height:80vh}
.lightbox-media-wrap img{max-width:92vw;max-height:80vh;width:auto;height:auto;object-fit:contain;box-shadow:0 25px 60px rgba(0,0,0,.6);border-radius:2px}
.lightbox-media-wrap video{max-width:92vw;max-height:80vh;width:auto;height:auto;outline:none;box-shadow:0 25px 60px rgba(0,0,0,.6);border-radius:2px}
.lightbox-media-wrap iframe{width:86vw;max-width:1200px;aspect-ratio:16/9;max-height:80vh;border:0;box-shadow:0 25px 60px rgba(0,0,0,.6)}
.lightbox-media-wrap iframe.is-short{width:auto;height:80vh;aspect-ratio:9/16;max-width:440px}
.lightbox-hint{position:relative;z-index:10;text-align:center;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.38);padding:10px 0 16px}
.next{display:block;border-top:1px solid var(--line);padding:clamp(60px,14vh,160px) var(--pad);text-align:left;width:100%}
.next .big{font-size:clamp(40px,8vw,130px);line-height:1;transition:transform .8s var(--ease)}
.next:hover .big{transform:translateX(24px)}
/* ================================================================
   ABOUT PAGE — Proporções e tipografia de bernjusti.com + Títulos Serifados
   ================================================================ */
.about-page {
  font-family: "Futura PT", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.about-page main.page-wrap {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(20px, 5.2vw, 100px) clamp(48px, 8vh, 90px);
}

/* Photo Section */
.about-page .photo-section {
  display: flex;
  justify-content: center;
  padding: 40px 0 50px;
}
.about-page .photo-section img {
  width: 200px;
  height: 260px;
  object-fit: cover;
  display: block;
}
.about-page .photo-placeholder {
  width: 200px;
  height: 260px;
  background: #bfb9a8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.7rem;
  text-align: center;
}

/* Section Title — Títulos serifados em Instrument Serif (+30% tamanho) */
.about-page .section-title {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin-bottom: 9px;
  color: var(--ink);
}

/* Top Section: services (10%) / comissions (9%) / about (31%) with 3% gaps */
.about-page .top-section {
  display: grid;
  grid-template-columns: 10% 9% 31%;
  column-gap: 3%;
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-page .top-section p {
  font-size: 0.72rem;
  line-height: 1.36;
}
.about-page .top-section p + p {
  margin-top: 12px;
}

/* Padded Section: padding-left: 25% aligns with the 'about' column above */
.about-page .padded-section {
  padding: 40px 0 40px 25%;
  border-bottom: 1px solid var(--line);
}

/* Info & Favourites */
.about-page .info-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  column-gap: 30px;
}
.about-page .info-row {
  display: flex;
  gap: 16px;
  font-size: 0.72rem;
  line-height: 1.52;
}
.about-page .info-label {
  min-width: 125px;
  white-space: nowrap;
}
.about-page .info-value a:hover {
  opacity: 0.6;
}
.about-page .info-divider {
  height: 14px;
}

/* Clients / Artists / Awards */
.about-page .clients-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2.8fr;
  column-gap: 20px;
}
.about-page .client-names {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  column-gap: clamp(14px, 1.5vw, 24px);
  row-gap: 2px;
  font-size: 0.72rem;
  line-height: 1.52;
}
.about-page .client-names span {
  white-space: nowrap;
}
.about-page .artist-list,
.about-page .awards-list {
  font-size: 0.72rem;
  line-height: 1.52;
}
.about-page .awards-row {
  display: flex;
  gap: 16px;
}
.about-page .awards-label {
  min-width: 130px;
}
.about-page .text-underline {
  text-decoration: underline;
}

/* Experience: auto (labels) + 4x 1fr (cards) */
.about-page .experience-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr;
  column-gap: 20px;
}
.about-page .exp-labels {
  display: flex;
  flex-direction: column;
  font-size: 0.72rem;
  line-height: 1.52;
  padding-right: 10px;
}
.about-page .exp-card {
  font-size: 0.72rem;
  line-height: 1.52;
}
.about-page .exp-card .period {
  font-weight: 600;
}

/* Education: auto (labels) + 3x 1fr (cards) */
.about-page .education-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  column-gap: 20px;
}
.about-page .edu-card {
  font-size: 0.72rem;
  line-height: 1.52;
}
.about-page .edu-card .period {
  font-weight: 600;
}

/* Responsive */
@media (max-width: 900px) {
  .about-page .top-section {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .about-page .padded-section {
    padding-left: 5%;
  }
  .about-page .info-grid,
  .about-page .clients-grid {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }
  .about-page .experience-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .about-page .experience-grid .exp-labels {
    display: none;
  }
  .about-page .education-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .about-page .education-grid .exp-labels {
    display: none;
  }
}

@media (max-width: 820px) {
  body{font-size:17px}
  .site-header{padding:14px var(--pad)}
  .brand .role{display:none}
  .h-right{gap:10px}
  .h-sep{display:none}
  .nav-btn{padding:4px 10px;font-size:10px}
  .grid{grid-template-columns:1fr;gap:0;padding:0}
  .p-intro,.s-2,.s-3,.s-4{grid-template-columns:1fr}
  .credits div{grid-template-columns:130px 1fr}
  .p-bar .back-t{display:none}
}

@media (max-width: 768px) {
  .about-page .padded-section {
    padding-left: 0;
  }
  .about-page .experience-grid,
  .about-page .education-grid {
    grid-template-columns: 1fr;
  }
  .about-page .client-names {
    grid-template-columns: repeat(2, auto);
    column-gap: 20px;
    max-width: 100%;
  }
}