/* ==========================================================================
   BARREIRO — sistema de diseño
   Tokens: ink #100F0D · paper #ECE7DC · stone #8D8573 · ember #A6432B · brass #A9884C · teal #1B2A30
   Display: Fraunces · Body: Inter · Utility: IBM Plex Mono
   ========================================================================== */

:root{
  --ink:#100F0D;
  --ink-soft:#1B1916;
  --paper:#ECE7DC;
  --paper-soft:#E2DCCC;
  --stone:#8D8573;
  --stone-dim:#5c574a;
  --ember:#A6432B;
  --ember-soft:#c15a3f;
  --brass:#A9884C;
  --teal:#1B2A30;
  --line: rgba(236,231,220,0.14);
  --line-strong: rgba(236,231,220,0.28);

  --bg:var(--ink);
  --bg-raised:var(--ink-soft);
  --fg:var(--paper);
  --fg-dim:var(--stone);
  --accent:var(--ember-soft);

  --serif:"Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --container: 1400px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 2px;
  --dur: 420ms;
  --ease: cubic-bezier(.19,1,.22,1);
}

[data-theme="light"]{
  --bg:var(--paper);
  --bg-raised:var(--paper-soft);
  --fg:var(--ink);
  --fg-dim:var(--stone-dim);
  --line: rgba(16,15,13,0.12);
  --line-strong: rgba(16,15,13,0.26);
  --accent:var(--ember);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x:hidden;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:1rem;}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

.eyebrow{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-0.01em;}

/* ---------------------------- Header / Nav ---------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gutter);
  background:linear-gradient(to bottom, rgba(16,15,13,0.55), transparent);
  transition:background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding-top:1rem; padding-bottom:1rem;
}
[data-theme="light"] .site-header{ background:linear-gradient(to bottom, rgba(236,231,220,0.7), transparent); }
[data-theme="light"] .site-header.scrolled{ background:var(--bg); }

.brand{
  font-family:var(--serif);
  font-size:1.15rem;
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:.5rem;
}
.brand small{font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; color:var(--fg-dim); text-transform:uppercase;}

.nav-desktop{display:flex; gap:2.1rem; align-items:center;}
.nav-desktop a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-dim); position:relative; padding:.3rem 0;
}
.nav-desktop a:hover, .nav-desktop a.active{color:var(--fg);}
.nav-desktop a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent);
}
.nav-tools{display:flex; align-items:center; gap:1.1rem;}
.theme-toggle{
  width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.menu-btn{display:none; flex-direction:column; gap:5px; width:26px;}
.menu-btn span{display:block; height:1px; background:var(--fg); width:100%;}

@media (max-width:980px){
  .nav-desktop{display:none;}
  .menu-btn{display:flex;}
}

.mobile-nav{
  position:fixed; inset:0; background:var(--bg); z-index:1200;
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem; padding:2rem var(--gutter);
  transform:translateY(-100%); transition:transform var(--dur) var(--ease);
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-family:var(--serif); font-size:2rem;}
.mobile-nav .close-btn{position:absolute; top:1.4rem; right:var(--gutter); font-family:var(--mono); font-size:.8rem;}

/* ------------------------------- Hero ---------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
.hero-media{position:absolute; inset:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 30%; transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;}
@keyframes heroZoom{to{transform:scale(1);}}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,15,13,.15) 0%, rgba(16,15,13,.15) 40%, rgba(16,15,13,.92) 100%);}
.hero-content{position:relative; z-index:2; padding:0 var(--gutter) 4.2rem; width:100%;}
.hero-eyebrow{color:#e7ddc8; opacity:.85; margin-bottom:1rem;}
.hero h1{
  font-size:clamp(3.2rem, 10vw, 8rem); color:#F7F3E8; line-height:.92; letter-spacing:-.02em;
  opacity:0; animation:riseIn 1.1s var(--ease) .3s forwards;
}
.hero .role{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-top:1.1rem; opacity:0; animation:riseIn 1.1s var(--ease) .55s forwards;
}
.hero .tagline{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2vw,1.4rem);
  max-width:34ch; color:#E7DFCB; margin-top:1.6rem; opacity:0; animation:riseIn 1.1s var(--ease) .75s forwards;
}
@keyframes riseIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
.hero-cta{
  margin-top:2.4rem; display:inline-flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#F7F3E8; border-bottom:1px solid rgba(247,243,232,.4); padding-bottom:.4rem;
  opacity:0; animation:riseIn 1.1s var(--ease) .95s forwards;
}
.hero-cta:hover{border-color:var(--accent); color:var(--accent);}
.scroll-cue{
  position:absolute; right:var(--gutter); bottom:2.4rem; z-index:2;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:.65rem; letter-spacing:.2em;
  color:#efe9d8; opacity:.65; display:flex; align-items:center; gap:.6rem;
}
.scroll-cue::after{content:""; width:1px; height:46px; background:currentColor; display:block;}

/* --------------------------- Section rhythm ----------------------------- */
section{padding:7.5rem 0;}
.section-tight{padding:4.5rem 0;}
.section-head{max-width:820px; margin-bottom:3.4rem;}
.section-head h2{font-size:clamp(2rem,4.4vw,3.4rem); margin-top:.7rem;}
.section-head p{color:var(--fg-dim); font-size:1.05rem; max-width:56ch; margin-top:1.2rem;}
.divider{height:1px; background:var(--line); border:none; margin:0;}

/* ----------------------------- Multitud motif --------------------------- */
.frieze{display:flex; align-items:flex-end; gap:3px; height:34px; overflow:hidden; margin:2.6rem 0;}
.frieze span{
  flex:1; background:var(--stone); opacity:.35; min-width:2px; border-radius:1px 1px 0 0;
}
.frieze span:nth-child(4n){background:var(--accent); opacity:.7;}

/* -------------------------------- Buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.95rem 1.6rem; border:1px solid var(--line-strong);
  border-radius:var(--radius); transition:border-color var(--dur), color var(--dur), background var(--dur);
}
.btn:hover{border-color:var(--accent); color:var(--accent);}
.btn-solid{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.btn-solid:hover{background:var(--accent); border-color:var(--accent); color:#fff;}

/* -------------------------------- Grids ---------------------------------- */
.works-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:1.6rem 1.4rem;
}
.work-card{grid-column:span 4; position:relative;}
.work-card.tall{grid-column:span 4;}
.work-card.wide{grid-column:span 8;}
.work-card figure{margin:0; overflow:hidden; background:var(--bg-raised); aspect-ratio:4/5;}
.work-card.wide figure{aspect-ratio:16/10;}
.work-card img{width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease), filter 900ms var(--ease);}
.work-card:hover img{transform:scale(1.045);}
.work-card figcaption{margin-top:.9rem;}
.work-card .wc-title{font-family:var(--serif); font-size:1.15rem;}
.work-card .wc-meta{font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; color:var(--fg-dim); margin-top:.35rem;}

@media (max-width:1100px){
  .work-card, .work-card.wide{grid-column:span 6;}
}
@media (max-width:640px){
  .work-card, .work-card.wide{grid-column:span 12;}
}

/* -------------------------------- Filters --------------------------------- */
.filters{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; padding:1.6rem 0 2.6rem;
  border-bottom:1px solid var(--line); margin-bottom:2.6rem;
}
.filters .fgroup{display:flex; gap:.4rem; flex-wrap:wrap;}
.chip{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .9rem; border:1px solid var(--line-strong); border-radius:20px; color:var(--fg-dim);
}
.chip.active{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.search-input{
  margin-left:auto; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color:var(--fg); padding:.5rem 0; min-width:200px; font-family:var(--mono); font-size:.8rem;
}
.results-count{font-family:var(--mono); font-size:.7rem; color:var(--fg-dim); margin-bottom:1.4rem;}

/* -------------------------------- Footer ---------------------------------- */
.site-footer{border-top:1px solid var(--line); padding:5rem 0 2.4rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.4rem;}
.footer-grid h4{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:1rem;}
.footer-grid li{margin-bottom:.55rem; font-size:.92rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; margin-top:4rem; padding-top:1.6rem;
  border-top:1px solid var(--line); font-family:var(--mono); font-size:.68rem; color:var(--fg-dim); flex-wrap:wrap; gap:1rem;
}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ------------------------------ Page hero (interior) ---------------------- */
.page-hero{padding:11.5rem 0 4rem;}
.page-hero .eyebrow{margin-bottom:1rem;}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.6rem);}
.page-hero p.lede{margin-top:1.4rem; max-width:60ch; color:var(--fg-dim); font-size:1.1rem;}

/* ------------------------------ Prose ------------------------------------- */
.prose{max-width:72ch; font-size:1.08rem; color:var(--fg);}
.prose p{margin:0 0 1.5rem;}
.prose h3{font-size:1.5rem; margin:2.6rem 0 1rem;}
.drop{
  font-family:var(--serif); font-size:1.3em; font-style:italic; color:var(--accent);
}

/* ------------------------------ Two column -------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start;}
@media (max-width:900px){.split{grid-template-columns:1fr; gap:2.6rem;}}

/* ------------------------------ Cards (exhibitions/press) ----------------- */
.timeline-item{
  display:grid; grid-template-columns:120px 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid var(--line);
}
.timeline-item .year{font-family:var(--mono); color:var(--accent); font-size:.9rem;}
.timeline-item h3{font-size:1.35rem; margin-bottom:.5rem;}
.timeline-item p{color:var(--fg-dim); margin:0; max-width:60ch;}
@media (max-width:640px){.timeline-item{grid-template-columns:1fr; gap:.6rem;}}

.card{border:1px solid var(--line); padding:2.2rem; border-radius:var(--radius); transition:border-color var(--dur);}
.card:hover{border-color:var(--line-strong);}
.card h3{font-size:1.3rem; margin-bottom:.8rem;}
.card p{color:var(--fg-dim); font-size:.95rem; margin:0;}

.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem;}
@media (max-width:900px){.cards-3{grid-template-columns:1fr;}}

/* ------------------------------ Forms -------------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem;}
.field{display:flex; flex-direction:column; gap:.5rem;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);}
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-strong); padding:.7rem 0; color:var(--fg);
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
.field textarea{resize:vertical; min-height:110px;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}

/* ------------------------------ Artwork detail ------------------------------ */
.artwork-hero{padding-top:9rem; display:grid; grid-template-columns:1.3fr 1fr; gap:4rem;}
.artwork-img{background:var(--bg-raised); overflow:hidden;}
.artwork-img img{width:100%; height:auto; cursor:zoom-in;}
.artwork-meta .eyebrow{margin-bottom:1rem;}
.artwork-meta h1{font-size:clamp(2.1rem,4vw,3.1rem); margin-bottom:1rem;}
.wall-label{
  font-family:var(--mono); font-size:.78rem; color:var(--fg-dim); line-height:2; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:1.2rem 0; margin:1.6rem 0 2rem;
}
.wall-label span{display:block;}
.wall-label b{color:var(--fg); font-weight:400;}
@media (max-width:900px){.artwork-hero{grid-template-columns:1fr; gap:2rem; padding-top:7.5rem;}}

.related-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;}
@media (max-width:900px){.related-strip{grid-template-columns:repeat(2,1fr);}}

/* ------------------------------ Blog ------------------------------ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem;}
@media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}
.post-card{border-top:1px solid var(--line); padding-top:1.4rem;}
.post-card .cat{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.post-card h3{margin-top:.7rem; font-size:1.4rem; line-height:1.25;}
.post-card p{color:var(--fg-dim); font-size:.92rem; margin-top:.7rem;}

.idea-list{columns:3; column-gap:2.4rem;}
.idea-list li{break-inside:avoid; padding:.5rem 0; border-bottom:1px dashed var(--line); font-size:.92rem; color:var(--fg-dim);}
@media (max-width:900px){.idea-list{columns:2;}}
@media (max-width:600px){.idea-list{columns:1;}}

/* ------------------------------ Utilities ------------------------------ */
.mt-0{margin-top:0;}
.tac{text-align:center;}
.stat-row{display:flex; gap:3.2rem; flex-wrap:wrap; margin-top:2.4rem;}
.stat{}
.stat .n{font-family:var(--serif); font-size:2.4rem; color:var(--accent);}
.stat .l{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); margin-top:.3rem;}

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

.lang-strip{display:flex; gap:.9rem; font-family:var(--mono); font-size:.68rem; color:var(--fg-dim); text-transform:uppercase;}
.lang-strip a.active{color:var(--fg); border-bottom:1px solid var(--accent);}

.badge{
  display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-dim); border:1px solid var(--line-strong); padding:.25rem .6rem; border-radius:14px;
}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(8,7,6,.96); z-index:2000; display:none; align-items:center; justify-content:center; padding:3rem;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain;}
.lightbox .lb-close{position:absolute; top:1.6rem; right:2rem; font-family:var(--mono); color:#fff; font-size:.8rem;}