/* Visual replicado do Exposure (tema classic): titulos em sans geometrica bold caixa-alta, texto em EB Garamond */
:root{
  --ink:#292525;
  --sans:'Outfit','GTWalsheim',system-ui,sans-serif;
  --serif:'EB Garamond',Garamond,'Times New Roman',serif;
  --text-w:700px;
  --set-w:1200px;
  --gap:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:25px;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.col{width:var(--text-w);max-width:calc(100% - 40px);margin-left:auto;margin-right:auto}

/* ---------- HOME ---------- */
.site-nav{display:flex;justify-content:space-between;align-items:center;padding:40px 32px 0}
.nav-left,.nav-right{display:flex;align-items:center;gap:6px}
.icon-btn,.social a{display:inline-flex;width:36px;height:20px;align-items:center;justify-content:center;color:var(--ink);transition:opacity .2s,transform .2s}
.icon-btn svg,.social svg{width:20px;height:20px}
.icon-btn:hover,.social a:hover{opacity:.6;transform:translateY(-1px)}
.pill-btn{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:2.1px;text-transform:uppercase;padding:8px 16px;border-radius:50px;color:#111;transition:opacity .2s}
.pill-btn:hover{opacity:.6}
.cat-wrap{position:relative}
.cat-menu{display:none;position:absolute;top:44px;left:0;z-index:20;list-style:none;margin:0;padding:10px 0;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.12);border-radius:6px;min-width:220px}
.cat-menu.open{display:block}
.cat-menu a{display:block;padding:8px 18px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase}
.cat-menu a:hover{background:#f4f4f4}
.search-box{display:none;border:0;border-bottom:1px solid var(--ink);font:16px var(--sans);padding:4px 2px;outline:0;width:220px}
.search-box.open{display:inline-block}

.profile{text-align:center;padding:62px 20px 0}
.avatar{width:90px;height:90px;border-radius:100%;object-fit:cover;margin:0 auto}
.profile h1{font-family:var(--sans);font-weight:700;font-size:57.6px;line-height:1.1;text-transform:uppercase;margin:24px auto 0;max-width:720px}
.tagline{font-family:var(--serif);font-size:20px;margin:14px 0 0}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 24px;margin:70px auto 0}
.card{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111}
.card-link{position:absolute;inset:0;display:block;color:#fff;text-decoration:none}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,opacity .4s}
.card:hover img{transform:scale(1.04)}
.card-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.18) 100%)}
.card-meta{position:absolute;left:0;right:0;bottom:0;padding:16px 32px 24px;text-align:center}
.card-meta h2{font-family:var(--sans);font-weight:700;font-size:24px;line-height:30px;letter-spacing:3px;text-transform:uppercase;margin:0}
.card-meta h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:22px;margin:8px 0 0}
.card-cat{font-family:var(--sans)!important;font-weight:400}
.card-cat{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;margin:12px 0 0}
.card-cat span{font-weight:700}
.card.hide{display:none}

.site-footer{text-align:center;padding:90px 20px 70px;font-size:14px}
.footer-avatar img{width:48px;height:48px;border-radius:100%;object-fit:cover;margin:0 auto 14px}
.site-footer p{margin:0;letter-spacing:.3px}

/* ---------- HISTORIA ---------- */
.story-nav{position:absolute;top:0;left:0;right:0;z-index:5;padding:22px 28px}
.story-nav .back{color:#fff;text-decoration:none;font-size:26px;line-height:1;opacity:.9}
.story-nav .back:hover{opacity:.6}

.cover{position:relative;height:100vh;min-height:520px;overflow:hidden;background:#1a1a1a;color:#fff;margin-bottom:60px}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cover-shade{position:absolute;inset:0;background:rgba(0,0,0,.3)}
.cover-titles{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 5%;animation:fadeUp 1s .5s both}
.cover h1{font-family:var(--sans);font-weight:700;font-size:64px;line-height:1.15;letter-spacing:3px;text-transform:uppercase;margin:0;max-width:1188px}
.cover h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:32px;line-height:1.25;margin:8px 0 0}
.byline{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none;animation:fadeUp 1s .9s both}
.byline img{width:56px;height:56px;border-radius:100%;object-fit:cover}
.byline span{font-weight:700;font-size:14px;letter-spacing:2.1px;text-transform:uppercase}
.byline em{font-family:var(--serif);font-weight:400;letter-spacing:0;text-transform:none;font-size:15px}
.toc .toc-title{font-family:var(--sans);font-weight:700;font-size:32px;line-height:40px;letter-spacing:3px;text-transform:uppercase;margin:0 0 18px}
.toc ul{list-style:none;margin:0;padding:0 0 0 16px;border-left:2px solid #ddd}
.toc li{font-family:var(--sans);font-size:16px;line-height:1.4;margin:0 0 10px}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
.group-title{scroll-margin-top:30px}

.blk{margin:0 0 60px}
.blk.text{margin-bottom:42px}
.group-title{font-family:var(--sans);font-weight:700;font-size:40px;line-height:50px;letter-spacing:3px;text-transform:uppercase;margin:0 0 32px}
.rich{font-family:var(--serif);font-size:18px;line-height:1.52;color:var(--ink)}
.rich p{margin:0 0 18px}
.overlay .rich p,.cs-side .rich p{text-align:inherit}
.rich p:last-child{margin-bottom:0}
.rich h1,.rich h2,.rich h3{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:2px;line-height:1.25;margin:34px 0 16px}
.rich h1{font-size:32px}.rich h2{font-size:26px}.rich h3{font-size:21px}
.rich ul,.rich ol{margin:0 0 18px;padding-left:26px}
.rich li{margin:0 0 4px}
.rich blockquote{margin:30px 0;padding:0 0 0 22px;border-left:3px solid var(--ink);font-style:italic;font-size:22px;line-height:1.45}
.rich a{text-decoration:underline;text-underline-offset:3px}
.rich a:hover{opacity:.7}
.cols-2 .col{width:1000px}
.cols-2 .rich{column-count:2;column-gap:48px}

.set-wrap{width:var(--set-w);max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;gap:var(--gap)}
.ph{margin:0;position:relative;overflow:hidden;background:#eee;min-width:0}
.ph img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.ph a img{cursor:pointer}
.set-caption{font-family:var(--serif);font-style:italic;font-size:16px;line-height:23.68px;text-align:center;width:var(--text-w);max-width:calc(100% - 40px);margin:16px auto 0}
.set .col{margin-top:32px}

.full{margin:0;width:100%;background:#eee}
.full img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.single .col{margin-top:32px}

.cs-inner{width:var(--text-w);max-width:calc(100% - 40px);margin:0 auto}
.cs-wide .cs-inner{width:1180px}
.cs-vertical .cs-inner{width:520px}
.photo-caption{font-family:var(--sans);font-size:18px;line-height:26.64px;margin:12px 0 0}
.cs-text .group-title{margin-top:28px;font-size:32px;line-height:40px}
.cap-text{margin-top:14px}
.cs-side .cs-inner{width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cs-right .cs-inner .ph{order:0}
.cs-left .cs-inner .ph{order:2}
.cs-side .cs-text{max-width:520px}

.overlay{position:relative;min-height:700px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;padding:90px 0}
.overlay-bg{position:absolute;inset:0;background:var(--bg) center/cover no-repeat fixed}
.overlay-shade{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.overlay-content{position:relative;text-align:center}
.overlay .rich{color:#fff}
.overlay .group-title{color:#fff}

.embed-wrap{width:var(--set-w);max-width:100%;margin:0 auto}
.embed-wrap iframe{display:block;width:100%;border:0}

.footnotes{border-top:1px solid #e6e6e6;padding-top:40px;margin-top:20px;margin-bottom:80px}
.footnotes h4,.more h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 14px}
.footnotes p{font-family:var(--serif);font-size:18px;margin:0}
.more{padding-top:10px}
.more h4{text-align:center;margin-bottom:0}
.more .grid{margin-top:26px}

/* revelar ao rolar (igual o fade dos blocos no Exposure) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,8,8,.97);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:90vh;object-fit:contain}
.lightbox button{position:absolute;color:#fff;font-size:44px;line-height:1;opacity:.75;padding:14px}
.lightbox button:hover{opacity:1}
.lb-close{top:10px;right:18px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%)}
.lb-next{right:10px;top:50%;transform:translateY(-50%)}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- responsivo ---------- */
@media (max-width:1240px){
  .set-wrap,.embed-wrap{width:auto;margin:0 20px}
  .cs-wide .cs-inner,.cs-side .cs-inner{width:auto}
}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cover h1{font-size:44px}
  .cover h2{font-size:24px}
  .cs-side .cs-inner{grid-template-columns:1fr;gap:20px}
  .cols-2 .rich{column-count:1}
  .overlay-bg{background-attachment:scroll}
}
@media (max-width:600px){
  .site-nav{padding:22px 16px 0}
  .profile h1{font-size:40px}
  .grid{grid-template-columns:1fr;padding:0 12px}
  .cover h1{font-size:32px;letter-spacing:2px}
  .cover h2{font-size:20px}
  .group-title{font-size:28px;line-height:36px;letter-spacing:2px}
  .set-wrap,.embed-wrap{margin:0 8px}
  .row{gap:3px}.set-wrap{gap:3px}
  .overlay{min-height:520px}
}