/* ============================================================
   VICTOR RIBEIRO — FOTOGRAFIA FINE ART
   Tokens
   Paper   #F6F3EC   fine-art paper white
   Ink     #15181B   near-black, photographic
   Line    #CBC2AC   warm stone rule
   Bay     #24393B   deep Guanabara teal — accent / CTA
   Sand    #AD8352   sun-warmed sand — sparse marks
   Room    #101214   gallery-black (hero scrim / lightbox)
   ============================================================ */

:root{
  --paper:#F6F3EC;
  --ink:#15181B;
  --line:#CBC2AC;
  --line-soft:#DED7C4;
  --bay:#24393B;
  --bay-light:#3C5C5E;
  --sand:#AD8352;
  --room:#101214;
  --room-2:#191c1f;
  --serif:"Archivo", sans-serif;
  --sans:"Hanken Grotesk", sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* film-grain texture overlay, fixed, very subtle */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bay);
}
.eyebrow--light{color:var(--sand);}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.25rem, 4vw, 3rem);
  color:#fff;
  mix-blend-mode:difference;
}
.nav__mark{
  font-family:var(--serif); font-weight:700; font-size:1.1rem;
  letter-spacing:.08em;
}
.nav__links{display:flex; gap:clamp(1.2rem,2.5vw,2.4rem);}
.nav__links a, .nav__insta{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1); transform-origin:left;}
@media (max-width:640px){ .nav__links{display:none;} }

/* ---------- HERO ---------- */
.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero__img{
  position:absolute; inset:0;
  background-size:cover; background-position:42% 55%;
  transform:scale(1.06);
  animation:heroIn 1.8s var(--ease) forwards;
}
@keyframes heroIn{ from{transform:scale(1.12); filter:saturate(.85) brightness(.9);} to{transform:scale(1.06); filter:saturate(1) brightness(1);} }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(16,18,20,.92) 0%, rgba(16,18,20,.55) 32%, rgba(16,18,20,.12) 58%, rgba(16,18,20,.35) 100%);
}
.hero__content{
  position:relative; z-index:2; color:#fff;
  padding:0 clamp(1.25rem,5vw,4rem) clamp(2.5rem,6vw,4.5rem);
  max-width:900px;
}
.hero__eyebrow{color:#E7DFCB; margin-bottom:1.1rem; opacity:0; animation:riseIn .9s .3s var(--ease) forwards;}
.hero__title{
  font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:clamp(3.4rem, 10vw, 7.2rem);
  line-height:.92; letter-spacing:-.01em;
  opacity:0; animation:riseIn 1s .45s var(--ease) forwards;
}
.hero__tagline{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.05rem,2vw,1.3rem);
  color:#E7DFCB; margin-top:1.1rem;
  opacity:0; animation:riseIn .9s .65s var(--ease) forwards;
}
.hero__meta{
  margin-top:1.6rem; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#C9C2AE;
  opacity:0; animation:riseIn .9s .8s var(--ease) forwards;
}
.hero__meta .dot{color:var(--sand);}
.hero__cta{margin-top:2.4rem; opacity:0; animation:riseIn .9s .95s var(--ease) forwards;}
@keyframes riseIn{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.6rem;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; transition:all .3s var(--ease);
  cursor:pointer; border:1px solid transparent;
}
.btn--ghost{border-color:rgba(255,255,255,.55); color:#fff;}
.btn--ghost:hover{background:#fff; color:var(--room); gap:.9rem;}
.btn--solid{background:var(--bay); color:#F6F3EC;}
.btn--solid:hover{background:var(--bay-light);}
.btn--outline-light{border-color:rgba(246,243,236,.4); color:var(--paper);}
.btn--outline-light:hover{border-color:var(--paper);}
.btn--small{padding:.7rem 1.2rem; font-size:.7rem;}

/* ---------- ABOUT ---------- */
.about{padding:clamp(5rem,10vw,8rem) clamp(1.25rem,5vw,4rem);}
.about__inner{max-width:1180px; margin:0 auto;}
.about__inner > .eyebrow{margin-bottom:.9rem;}
.about__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:center; margin-top:1rem;
}
.about__text h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.4vw,2.8rem);
  margin-bottom:1.4rem; letter-spacing:-.01em;
}
.about__text p{color:#3B3F3A; font-size:1.02rem; line-height:1.75; margin-bottom:1.1rem; max-width:52ch;}
.about__figure{position:relative;}
.about__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(21,24,27,.35);
}
@media (max-width:840px){
  .about__grid{grid-template-columns:1fr;}
  .about__figure{order:-1; max-width:340px;}
}

/* ---------- SERIES INDEX ---------- */
.series-index{padding:clamp(2rem,6vw,3rem) clamp(1.25rem,5vw,4rem) clamp(5rem,8vw,7rem); background:var(--paper);}
.series-index__head{max-width:1180px; margin:0 auto 2.4rem; border-bottom:1px solid var(--line-soft); padding-bottom:1.6rem;}
.series-index__head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.6vw,2.9rem); margin-top:.6rem; letter-spacing:-.01em;
}
.series-list{max-width:1180px; margin:0 auto; display:flex; flex-direction:column;}
.series-row{
  display:grid; grid-template-columns:64px 1fr auto 96px; align-items:center; gap:1.6rem;
  padding:1.8rem 0; border-bottom:1px solid var(--line-soft);
  cursor:pointer; transition:padding .35s var(--ease);
  text-decoration:none; color:inherit;
}
.series-row:hover{padding-left:.6rem; background:linear-gradient(to right, rgba(36,57,59,.04), transparent);}
.series-row__num{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:1.4rem; color:var(--sand);
}
.series-row__text h3{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.4vw,1.75rem);
}
.series-row__text p{color:#5B6058; font-size:.92rem; margin-top:.3rem;}
.series-row__count{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bay); white-space:nowrap;}
.series-row__thumb{
  width:96px; height:72px; overflow:hidden; border-radius:2px; background:#e7e2d3;
}
.series-row__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.series-row:hover .series-row__thumb img{transform:scale(1.08);}
@media (max-width:640px){
  .series-row{grid-template-columns:40px 1fr; row-gap:.6rem;}
  .series-row__thumb, .series-row__count{display:none;}
}

/* ---------- GALLERY ---------- */
.gallery{background:var(--room); color:var(--paper); padding:clamp(4rem,8vw,6rem) clamp(1.25rem,5vw,4rem) clamp(6rem,10vw,8rem);}
.gallery__head{max-width:1400px; margin:0 auto 2.6rem;}
.gallery__head h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem,3.6vw,2.9rem); margin-top:.6rem; letter-spacing:-.01em;
}
.eyebrow.gallery-eyebrow{color:var(--sand);}
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem;}
.filter-btn{
  padding:.55rem 1.1rem; border:1px solid rgba(246,243,236,.28); border-radius:999px;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#C9C2AE;
  background:transparent; cursor:pointer; transition:all .25s var(--ease);
}
.filter-btn:hover{border-color:rgba(246,243,236,.6); color:#fff;}
.filter-btn.active{background:var(--paper); color:var(--room); border-color:var(--paper);}

.grid{
  max-width:1400px; margin:0 auto;
  column-count:1; column-gap:14px;
}
@media (min-width:560px){ .grid{column-count:2;} }
@media (min-width:900px){ .grid{column-count:3;} }
@media (min-width:1300px){ .grid{column-count:4;} }

.tile{
  break-inside:avoid; margin-bottom:14px; position:relative; overflow:hidden;
  border-radius:2px; cursor:pointer; background:#1c1f22;
  opacity:0; transform:translateY(18px);
}
.tile.in-view{ animation:tileIn .7s var(--ease) forwards; }
@keyframes tileIn{ to{opacity:1; transform:translateY(0);} }
.tile img{
  width:100%; display:block; transition:transform .8s var(--ease), filter .5s var(--ease);
}
.tile:hover img{transform:scale(1.045);}
.tile__overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,18,20,.82) 0%, rgba(16,18,20,0) 40%);
  opacity:0; transition:opacity .35s var(--ease);
  display:flex; align-items:flex-end; padding:1rem 1.1rem;
}
.tile:hover .tile__overlay{opacity:1;}
.tile__code{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#F6F3EC;}
.tile__plus{
  position:absolute; top:.9rem; right:.9rem; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(246,243,236,.55); display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.8); transition:all .3s var(--ease); color:#fff;
}
.tile:hover .tile__plus{opacity:1; transform:scale(1);}

/* ---------- ACQUIRE ---------- */
.acquire{
  background:var(--bay); color:var(--paper);
  padding:clamp(5rem,10vw,8rem) clamp(1.25rem,5vw,4rem);
  position:relative;
}
.acquire__inner{max-width:820px; margin:0 auto; text-align:left;}
.acquire h2{
  font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:clamp(2.4rem,5.5vw,4rem); line-height:1.03; margin:.7rem 0 1.6rem; letter-spacing:-.01em;
}
.acquire__body{font-size:1.05rem; line-height:1.75; color:#DCE3DF; max-width:56ch; margin-bottom:2.4rem;}
.acquire__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem;}
.acquire__contacts{
  display:flex; flex-wrap:wrap; gap:1.6rem; font-size:.85rem; color:#C7D2CC;
  border-top:1px solid rgba(246,243,236,.2); padding-top:1.6rem;
}
.acquire__contacts a:hover{color:#fff;}

/* ---------- FOOTER ---------- */
.footer{
  background:var(--room); color:#8A8F89;
  padding:1.6rem clamp(1.25rem,5vw,4rem) 2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  border-top:1px solid rgba(246,243,236,.08);
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(9,10,11,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease);
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox__stage{
  max-width:min(90vw, 900px); max-height:68vh; display:flex; align-items:center; justify-content:center;
}
.lightbox__stage img{
  max-width:100%; max-height:68vh; object-fit:contain; box-shadow:0 40px 90px -20px rgba(0,0,0,.6);
  opacity:0; transform:scale(.98); transition:all .45s var(--ease);
}
.lightbox.open .lightbox__stage img{opacity:1; transform:scale(1);}
.lightbox__plaque{
  margin-top:1.6rem; text-align:center; color:var(--paper);
  border-top:1px solid rgba(246,243,236,.18); padding-top:1.2rem; width:min(90vw,420px);
}
.lightbox__plaque-row{display:flex; align-items:center; justify-content:center; gap:.7rem; margin-bottom:.35rem;}
.lightbox__code{font-family:var(--serif); font-weight:700; font-style:italic; font-size:1.15rem;}
.lightbox__series{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sand);}
.lightbox__detail{font-size:.78rem; color:#9CA39D; margin-bottom:1rem;}
.lightbox__close{
  position:absolute; top:1.4rem; right:1.4rem; color:#fff; background:none; border:none; cursor:pointer;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center; opacity:.8; transition:opacity .2s;
}
.lightbox__close:hover{opacity:1;}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#fff; cursor:pointer; opacity:.6; transition:opacity .2s;
  width:52px; height:80px; display:flex; align-items:center; justify-content:center;
}
.lightbox__nav:hover{opacity:1;}
.lightbox__nav--prev{left:.4rem;}
.lightbox__nav--next{right:.4rem;}
@media (max-width:640px){
  .lightbox__nav{width:36px;}
}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--sand); outline-offset:3px;}