:root{
  --ink:#0d0b10;
  --surface:#17131b;
  --surface-2:#1e1823;
  --line-hairline:#2c2530;
  --ember:#e08d3c;
  --ember-dim:#7a5326;
  --violet:#6a5a92;
  --paper:#ede7e2;
  --muted:#948c97;
  --muted-2:#5f5866;
  --display:'Fraunces', serif;
  --body:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ember);color:var(--ink);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--ember); outline-offset:3px;}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:300;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- cookie banner ---------- */
#cookieBanner{
  position:fixed;left:16px;right:16px;bottom:16px;
  max-width:560px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line-hairline);
  padding:20px 22px;
  z-index:400;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:translateY(140%);
  opacity:0;
  transition:transform .6s var(--ease), opacity .6s var(--ease);
}
#cookieBanner.show{transform:translateY(0);opacity:1;}
#cookieBanner p{font-size:.86rem;line-height:1.55;color:var(--muted);}
#cookieBanner p strong{color:var(--paper);}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  padding:10px 16px;border:1px solid var(--line-hairline);
  background:transparent;color:var(--paper);cursor:pointer;
  transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.btn:hover{border-color:var(--ember);color:var(--ember);}
.btn.primary{background:var(--ember);color:var(--ink);border-color:var(--ember);}
.btn.primary:hover{background:transparent;color:var(--ember);}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;
  background:linear-gradient(to bottom, rgba(13,11,16,.9), rgba(13,11,16,0));
}
.mark{
  font-family:var(--display);font-weight:500;font-size:1.15rem;
  letter-spacing:.01em;display:flex;align-items:center;gap:10px;
}
.mark svg{width:18px;height:18px;}
nav.links{display:none;gap:30px;font-size:.8rem;letter-spacing:.03em;color:var(--muted);}
@media(min-width:800px){ nav.links{display:flex;} }
nav.links a{position:relative;padding:4px 0;transition:color .3s ease;}
nav.links a:hover{color:var(--paper);}
nav.links a.current{color:var(--ember);}
nav.links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ember);transition:width .35s var(--ease);
}
nav.links a:hover::after{width:100%;}

/* ---------- intro (compact, above the fold together with selector) ---------- */
.intro{
  padding:96px 40px 28px;
  max-width:900px;
}
@media(min-width:900px){ .intro{padding-left:120px;} }
.eyebrow{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ember);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ember);}
h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);line-height:1.05;letter-spacing:-.01em;
}
h1 em{font-style:italic;font-weight:400;color:var(--muted);}
.intro p.lede{
  margin-top:16px;max-width:56ch;color:var(--muted);
  font-size:1rem;line-height:1.6;
}

/* ---------- selector: the three doors ---------- */
.selector{
  display:flex;flex-direction:column;
  min-height:56vh;
  border-top:1px solid var(--line-hairline);
}
@media(min-width:760px){ .selector{flex-direction:row;height:62vh;min-height:440px;} }

.door{
  position:relative;
  flex:1;
  min-height:150px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px 28px;
  overflow:hidden;
  cursor:pointer;
  border-bottom:1px solid var(--line-hairline);
  background:var(--surface);
  transition:flex .7s var(--ease);
  isolation:isolate;
}
@media(min-width:760px){
  .door{border-bottom:none;border-right:1px solid var(--line-hairline);}
  .door:last-child{border-right:none;}
}
.door:hover, .door:focus-visible, .door.expanded{ flex:1.5; }

.door-bg{
  position:absolute;inset:0;z-index:-2;
  background:var(--surface-2);
}
.door-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease;
}
.door-bg img.active{opacity:1;}
.door-glow{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(224,141,60,.16), transparent 60%);
  opacity:0;transition:opacity .4s ease;
}
.door:hover .door-glow, .door:focus-visible .door-glow{opacity:1;}
.door::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(13,11,16,0) 30%, rgba(13,11,16,.88) 100%);
}

.door[data-cat="ilustracoes"] .door-bg{
  background:
    repeating-linear-gradient(115deg, transparent 0 8px, rgba(224,141,60,.06) 8px 9px),
    radial-gradient(circle at 30% 20%, rgba(106,90,146,.28), transparent 60%),
    var(--surface-2);
}
.door[data-cat="design"] .door-bg{
  background:var(--surface-2);
  background-image:
    linear-gradient(var(--line-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-hairline) 1px, transparent 1px);
  background-size:18px 18px;
}
.door[data-cat="impressao-3d"] .door-bg{
  background:conic-gradient(from 210deg at 50% 65%, rgba(224,141,60,.14), transparent 45%), var(--surface-2);
}

.door-num{font-family:var(--mono);font-size:.7rem;color:var(--ember);letter-spacing:.05em;margin-bottom:10px;}
.door-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);
  transition:transform .5s var(--ease);
}
.door:hover .door-title, .door:focus-visible .door-title{transform:translateX(6px);}
.door-mat{
  font-family:var(--mono);font-size:.68rem;color:var(--muted);
  margin-top:8px;letter-spacing:.02em;
}
.door-cta{
  margin-top:16px;font-family:var(--mono);font-size:.72rem;
  display:flex;align-items:center;gap:8px;color:var(--paper);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
.door:hover .door-cta, .door:focus-visible .door-cta{opacity:1;transform:translateY(0);}
.door-cta svg{width:14px;height:14px;transition:transform .4s var(--ease);}
.door:hover .door-cta svg{transform:translateX(4px);}

.scroll-cue{
  display:flex;align-items:center;gap:10px;justify-content:center;
  padding:18px;font-family:var(--mono);font-size:.66rem;color:var(--muted-2);
  letter-spacing:.1em;text-transform:uppercase;
}
.scroll-cue .line{width:34px;height:1px;background:var(--muted-2);position:relative;overflow:hidden;}
.scroll-cue .line::after{content:"";position:absolute;left:-100%;top:0;width:100%;height:100%;background:var(--ember);animation:slide 2.2s ease-in-out infinite;}
@keyframes slide{ to{ left:100%; } }

/* ---------- gallery page header ---------- */
.page-header{
  padding:140px 40px 40px;
  border-bottom:1px solid var(--line-hairline);
}
@media(min-width:900px){ .page-header{padding-left:120px;padding-right:80px;} }
.back-link{
  font-family:var(--mono);font-size:.72rem;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
  transition:color .3s ease;
}
.back-link:hover{color:var(--ember);}
.back-link svg{width:13px;height:13px;transition:transform .3s var(--ease);}
.back-link:hover svg{transform:translateX(-3px);}
.page-header h1{font-size:clamp(2rem,5vw,3rem);}
.page-header p.lede{margin-top:14px;}

/* ---------- media (blur-up thumbs + lightbox) ---------- */
.card-visual{cursor:zoom-in;}
.card-visual video.thumb{
  width:100%;height:100%;object-fit:cover;
}
.card-visual img.thumb{
  width:100%;height:100%;object-fit:cover;
  filter:blur(2px) saturate(.95);
  transform:scale(1.02);
  transition:filter .5s ease, transform .5s ease, opacity .5s ease;
}
.card-visual img.thumb.sharp{filter:blur(0) saturate(1);transform:scale(1);}
.card-visual .zoom-hint{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,11,16,.72);border:1px solid var(--line-hairline);
  opacity:0;transition:opacity .3s ease;
}
.card:hover .zoom-hint{opacity:1;}
.zoom-hint svg{width:13px;height:13px;}
.card-visual .video-badge{
  position:absolute;left:10px;top:10px;z-index:2;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:rgba(13,11,16,.6);border:1px solid var(--line-hairline);
  pointer-events:none;
}
.card-visual .video-badge svg{width:16px;height:16px;opacity:.9;}
.card-visual .other-badge{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;
  background:var(--surface-2);font-family:var(--mono);font-size:.66rem;color:var(--muted);text-align:center;padding:10px;
}

#lightbox{
  position:fixed;inset:0;z-index:500;
  background:rgba(13,11,16,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  padding:60px 20px;
}
#lightbox.open{opacity:1;pointer-events:auto;}
#lightbox .lb-content{max-width:min(90vw,1100px);max-height:80vh;position:relative;}
#lightbox img, #lightbox video{max-width:min(90vw,1100px);max-height:80vh;width:auto;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.6);}
#lightbox .lb-caption{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-align:center;margin-top:14px;}
.lb-btn{
  position:absolute;background:rgba(23,19,27,.8);border:1px solid var(--line-hairline);
  color:var(--paper);width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:border-color .3s ease,color .3s ease;
}
.lb-btn:hover{border-color:var(--ember);color:var(--ember);}
.lb-btn svg{width:16px;height:16px;}
#lbClose{top:-56px;right:0;}
#lbPrev{left:-56px;top:50%;transform:translateY(-50%);}
#lbNext{right:-56px;top:50%;transform:translateY(-50%);}
@media(max-width:760px){
  #lbPrev{left:0;top:auto;bottom:-56px;transform:none;}
  #lbNext{right:0;top:auto;bottom:-56px;transform:none;}
  #lbClose{top:-50px;right:0;}
}

/* ---------- galleries ---------- */
.chapter{padding:110px 40px 70px;}
@media(min-width:900px){ .chapter{padding-left:120px;padding-right:80px;} }
.chapter-head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin-bottom:48px;border-bottom:1px solid var(--line-hairline);padding-bottom:22px;
}
.chapter-num{font-family:var(--mono);font-size:.76rem;color:var(--ember);letter-spacing:.05em;}
.chapter-title{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:500;}
.chapter-desc{margin-left:auto;max-width:34ch;color:var(--muted);font-size:.86rem;line-height:1.6;}

.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill, minmax(230px,1fr));padding:0 40px 100px;}
@media(min-width:900px){ .grid{padding-left:120px;padding-right:80px;} }
.chapter .grid{padding:0;}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line-hairline);
  overflow:hidden;opacity:0;transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease, border-color .4s ease;
}
.card.in{opacity:1;transform:translateY(0);}
.card:hover{border-color:var(--ember-dim);}
.card-visual{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--surface-2);}
.card-visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.card:hover .card-visual img{transform:scale(1.05);}
.card-visual .empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.68rem;color:var(--muted-2);letter-spacing:.06em;text-align:center;padding:16px;
}
.card-meta{padding:14px 16px 16px;border-top:1px solid var(--line-hairline);}
.card-meta p{font-family:var(--mono);font-size:.68rem;color:var(--muted);}

/* ---------- sobre ---------- */
.about{padding:110px 40px;border-top:1px solid var(--line-hairline);display:grid;gap:44px;}
@media(min-width:900px){ .about{padding-left:120px;padding-right:80px;grid-template-columns:.9fr 1.1fr;} }
.about h2{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.6vw,2.4rem);max-width:16ch;line-height:1.18;}
.about-copy p{color:var(--muted);line-height:1.75;font-size:.96rem;max-width:60ch;}
.about-copy p + p{margin-top:14px;}
.about-copy strong{color:var(--paper);font-weight:500;}

.tag-group{margin-top:24px;}
.tag-label{font-family:var(--mono);font-size:.68rem;color:var(--ember);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{
  font-family:var(--mono);font-size:.7rem;color:var(--muted);
  border:1px solid var(--line-hairline);padding:6px 11px;
  transition:border-color .3s ease, color .3s ease;
}
.tag:hover{border-color:var(--ember-dim);color:var(--paper);}

/* ---------- footer ---------- */
footer{
  padding:36px 40px;display:flex;flex-wrap:wrap;gap:18px;
  justify-content:space-between;align-items:center;
  border-top:1px solid var(--line-hairline);
  font-family:var(--mono);font-size:.7rem;color:var(--muted-2);letter-spacing:.03em;
}
@media(min-width:900px){ footer{padding-left:120px;padding-right:80px;} }
.contact-links{display:flex;gap:22px;flex-wrap:wrap;}
.contact-links a{color:var(--muted);transition:color .3s ease;}
.contact-links a:hover{color:var(--ember);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .scroll-cue .line::after{animation:none;}
  .card, .door, .door-title, .door-cta, .door-bg img{transition:none;}
  .card{opacity:1;transform:none;}
}