/* =========================================================
   Felipe Jácome Reyes — Design System Stylesheet
   Tokens: colors, type, spacing (see project brief .md)
   ========================================================= */

:root{
  --paper:#F2EEE3;
  --ink:#15130E;
  --amber:#C2712B;
  --amber-light:#E7A857;
  --stone:#4A463D;
  --signal:#D64526;
  --line: rgba(21,19,14,0.14);

  --space-xs:4px; --space-sm:8px; --space-md:16px;
  --space-lg:24px; --space-xl:40px; --space-2xl:64px; --space-3xl:96px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  height:100%;
  background:var(--paper);
  font-family:'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.stage{
  max-width:1400px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

/* faint 12-col grid guides, signal red, low opacity — kept literal per design system,
   spans the whole page (hero + body) */
.grid-guides{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(214,69,38,0.09) 0,
    rgba(214,69,38,0.09) 1px,
    transparent 1px,
    transparent calc(100% / 12)
  );
}

/* ============================= NAV ============================= */
nav{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.mark{ display:flex; align-items:center; gap:10px; }
.mark .stamp{
  width:34px; height:34px;
  border:1.6px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Courier New', monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  transform:rotate(-2deg);
}
.mark .name{
  font-size:13px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  font-weight:600;
}
.mark .name span{
  display:block;
  font-family:'Courier New', monospace;
  font-size:9px;
  letter-spacing:2px;
  color:var(--amber);
  font-weight:700;
  margin-top:2px;
}
.navlinks{ display:flex; gap:clamp(16px,2.6vw,40px); list-style:none; }
.navlinks a{
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  padding-bottom:6px;
  border-bottom:1.5px solid transparent;
  transition:border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.navlinks a:hover{ border-color:var(--amber); color:var(--amber); }
.navlinks .active{ border-color:var(--ink); }

/* ============================= HERO ============================= */
/* .hero fills whatever height is left after nav, so nav + frame + wordmark + substrip
   together equal exactly one screen (100svh) on load — no scrolling needed to read the name. */
.hero{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) 0;
}

.frame{
  position:relative;
  flex:1 1 auto;
  min-height:300px;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(231,168,87,0.55), transparent 55%),
    radial-gradient(90% 70% at 85% 80%, rgba(74,70,61,0.9), transparent 60%),
    linear-gradient(155deg, #1c1a15 0%, #3a3527 38%, #8a5a26 68%, #c2712b 100%);
}
/* stand-in texture: carved stone grain, swap this .frame background-image for a real photo */
.frame::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(25deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay;
}
.frame::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 -140px 160px -60px rgba(10,9,6,0.75);
}
.placeholder-tag{
  position:absolute; top:18px; left:18px;
  font-family:'Courier New', monospace;
  font-size:10px; letter-spacing:1.5px;
  color:rgba(255,255,255,0.72);
  text-transform:uppercase;
  border:1px dashed rgba(255,255,255,0.4);
  padding:5px 9px;
  z-index:3;
}

/* vertical plinth label, right edge — lives inside .frame so it always
   matches the frame's actual (flexible) height instead of a hardcoded one */
.plinth{
  position:absolute;
  right:clamp(16px,3vw,40px);
  top:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  z-index:3;
  pointer-events:none;
}
.plinth span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  padding-bottom:28px;
}

/* wordmark card: both name lines live together in one paper-colored box,
   which is what overlaps the bottom of the image. */
.wordmark{
  position:relative;
  left:20px;
  z-index:4;
  align-self:flex-start;
  margin-top:-9vw;
  background:var(--paper);
  padding:1.5rem;
  line-height:0.82;
  width:60%;
}
.wordmark .line{
  font-family:'Arial Black','Helvetica Neue', Arial, sans-serif;
  font-weight:900;
  font-size:clamp(52px,10.6vw,152px);
  letter-spacing:-0.015em;
  text-transform:uppercase;
  display:block;
}
/* "FELIPE" keeps its carved/outline treatment for texture, now sitting on the
   paper panel rather than directly on the image. */
.wordmark .line.carved{
  color:transparent;
  -webkit-text-stroke:1.6px var(--ink);
  text-stroke:1.6px var(--ink);
}
.wordmark .line.solid{ color:var(--ink); }

.substrip{
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:22px clamp(20px,4vw,56px) 40px;
  border-bottom:1px solid var(--line);
  margin-top:18px;
}
.substrip .role{
  font-size:13px;
  letter-spacing:1px;
  color:var(--stone);
  max-width:560px;
  line-height:1.5;
}
.substrip .role b{ color:var(--ink); }
.substrip .meta{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--amber);
  text-align:right;
}

/* ====================== SHARED / BODY BITS ====================== */
section{ position:relative; z-index:1; }

.index-number{
  font-family:'Courier New', monospace;
  font-size:12px;
  letter-spacing:2px;
  color:var(--signal);
  text-transform:uppercase;
  margin-bottom:var(--space-sm);
}
.tag{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border:1px solid var(--ink);
  padding:5px 10px;
  white-space:nowrap;
  line-height:1;
}
.tag.amber{ border-color:var(--amber); color:var(--amber); }

.btn-outline{
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:15px;
  font-family:inherit;
  transition:background .2s ease, color .2s ease;
  flex:0 0 auto;
}
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline:disabled{ opacity:0.3; cursor:default; }
.btn-outline:disabled:hover{ background:transparent; color:var(--ink); }

.view-all{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.view-all:hover{ color:var(--amber); border-color:var(--amber); }

/* ---------- 00 — artist statement ---------- */
.statement{
  padding:var(--space-3xl) clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.statement .headline{
  font-family:'Helvetica Neue', Arial, sans-serif;
  font-weight:800;
  font-size:clamp(24px,3.2vw,38px);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.15;
  max-width:90%;
  margin-bottom:var(--space-lg);
}
.statement .body-copy{
  font-size:17px;
  line-height:1.6;
  max-width:90%;
  color:var(--stone);
}
.statement .body-copy + .body-copy{ margin-top:var(--space-md); }
.statement .body-copy b{ color:var(--ink); font-weight:600; }

.statement-photo{
  margin-top:var(--space-xl);
  max-width:720px;
}
.statement-photo .frame-img{
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  background:var(--stone);
  border:1px solid var(--line);
}
.statement-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s ease; }
.statement-photo figcaption{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink);
  padding-top:10px;
}
.statement-photo figcaption span{
  color:var(--amber);
  margin-left:8px;
}

.curatorial-info{
  display:flex;
}
.curatorial-text{
  flex:1;
}

/* ---------- 01 — curatorial / exhibition block ---------- */
.curatorial{ background:rgba(194,113,43,0.05); }
.artist-list-block{
  flex:1;
  margin-top:var(--space-xl);
}
.artist-list-label{
  display:block;
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:var(--space-sm);
}
.artist-list{
  list-style:none;
  max-width:60ch;
}
.artist-list li{
  font-size:15px;
  line-height:1.8;
  color:var(--ink);
  border-top:1px solid var(--line);
  padding:10px 0;
}
.artist-list li:last-child{ border-bottom:1px solid var(--line); }
.artist-list .work{ color:var(--stone); }
.artist-list .country{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1px;
  color:var(--amber);
  margin-left:4px;
}
.curator-credit{
  margin-top:var(--space-lg);
  font-family:'Courier New', monospace;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--stone);
}

/* ---------- gallery head (used above a .gallery-grid that isn't inside a .project-head) ---------- */
.gallery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  flex-wrap:wrap;
  margin:var(--space-xl) 0 var(--space-md);
}
.gallery-label{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--stone);
}

/* ---------- project sections ---------- */
.project-section{
  padding:var(--space-3xl) clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
}
.project-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-lg);
  flex-wrap:wrap;
  margin-bottom:var(--space-xl);
}
.project-title-block{ min-width:0; }
.project-title-row{
  display:flex;
  align-items:baseline;
  gap:var(--space-md);
  flex-wrap:wrap;
}
.project-title{
  font-family:'Arial Black','Helvetica Neue', Arial, sans-serif;
  font-weight:900;
  font-size:clamp(30px,5vw,58px);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:0.95;
}
.project-title.carved{ color:transparent; -webkit-text-stroke:1.4px var(--ink); }
.project-title.solid{ color:var(--ink); }
.project-year{
  font-family:'Courier New', monospace;
  font-size:13px;
  letter-spacing:1px;
  color:var(--signal);
}

.project-controls{
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  flex:0 0 auto;
}
.arrow-group{ display:flex; gap:var(--space-sm); }

.project-desc{
  font-size:15px;
  line-height:1.6;
  max-width:64ch;
  color:var(--stone);
  margin:0 0 var(--space-xl);
}
.project-desc b{ color:var(--ink); font-weight:600; }

/* ---------- slider (caption-below-image cards) ---------- */
.slider{
  display:flex;
  gap:var(--space-md);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-sm);
  scrollbar-width:none;
}
.slider::-webkit-scrollbar{ display:none; }

.card{
  flex:0 0 auto;
  width:min(300px,72vw);
  scroll-snap-align:start;
}
.card .frame-img{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--stone);
  border:1px solid var(--line);
  cursor:pointer;
}
.card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, opacity .35s ease;
}
.card figcaption{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  padding:14px;
  background:linear-gradient(to top, rgba(21,19,14,0.8), transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--paper);
  pointer-events:none;
}
.card .frame-img:hover img{ opacity:0.6; transform:scale(1.04); }
.card .frame-img:hover figcaption{ opacity:1; }
.card figcaption .cap-title{ color:var(--paper); display:block; }
.card figcaption .cap-year{ color:var(--amber-light); }
.card figcaption .cap-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.card figcaption .cap-desc{
  color:var(--paper);
  opacity:0.85;
  text-transform:none;
  letter-spacing:0.2px;
  line-height:1.4;
  font-size:10.5px;
}

/* ---------- gallery-grid (photo-essay layout: 1 tall image + 2x2 squares, repeating) ---------- */
.gallery-grid{
  display:flex;
  gap:var(--space-md);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:var(--space-sm);
  scrollbar-width:none;
}
.gallery-grid::-webkit-scrollbar{ display:none; }

.gallery-unit{
  flex:0 0 auto;
  display:flex;
  gap:var(--space-md);
  scroll-snap-align:start;
}
.g-stack{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  width:min(220px,42vw);
}

.g-big, .g-square{
  margin:0;
}
.g-big{ width:min(320px,60vw); }

.g-big .g-img, .g-square .g-img{
  position:relative;
  overflow:hidden;
  background:var(--stone);
  border:1px solid var(--line);
  cursor:pointer;
}
.g-big .g-img{ aspect-ratio:3/4; height:100%; }
.g-square .g-img{ aspect-ratio:1/1; }
.g-stack .g-square{ flex:1 1 0; display:flex; }
.g-stack .g-square .g-img{ flex:1 1 auto; }

.g-big img, .g-square img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease, opacity .35s ease;
}

.g-big figcaption, .g-square figcaption{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  padding:14px;
  background:linear-gradient(to top, rgba(21,19,14,0.78), transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color:var(--paper);
  pointer-events:none;
}

.g-big .g-img:hover img, .g-square .g-img:hover img{
  opacity:0.6;
  transform:scale(1.04);
}
.g-big .g-img:hover figcaption, .g-square .g-img:hover figcaption{
  opacity:1;
}

/* every clickable artwork thumbnail — card slider, gallery-grid, statement photo — shares one cursor language */
.frame-img, .g-img{ cursor:zoom-in; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2xl);
  background:var(--paper);
  padding:clamp(60px,6vw,90px) clamp(24px,5vw,80px) clamp(30px,5vw,60px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.lightbox-stage{
  flex:1 1 auto;
  height:100%;
  max-width:66%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-img{
  max-width:100%;
  max-height:78vh;
  object-fit:contain;
  border:1px solid var(--line);
  background:var(--stone);
}
.lightbox-info{
  flex:0 0 clamp(200px,26vw,360px);
}
.lightbox-index{
  font-family:'Courier New', monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--signal);
  margin-bottom:var(--space-sm);
}
.lightbox-title{
  font-family:'Arial Black','Helvetica Neue', Arial, sans-serif;
  font-weight:900;
  font-size:clamp(22px,2.4vw,32px);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1.1;
  color:var(--ink);
}
.lightbox-close,
.lightbox-expand{
  position:absolute;
  top:22px;
  background:transparent;
  border:none;
  color:var(--ink);
  font-size:20px;
  line-height:1;
  padding:8px;
  cursor:pointer;
}
.lightbox-close{ right:22px; }
.lightbox-expand{ left:22px; font-size:16px; }
.lightbox-close:hover,
.lightbox-expand:hover{ color:var(--amber); }

.lightbox-prev,
.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.lightbox-prev:hover,
.lightbox-next:hover{ background:var(--ink); color:var(--paper); }
.lightbox-prev{ left:22px; }
.lightbox-next{ right:22px; }
.lightbox-prev[hidden],
.lightbox-next[hidden]{ display:none; }

.lightbox.expanded .lightbox-info{ display:none; }
.lightbox.expanded .lightbox-stage{ max-width:100%; }
.lightbox.expanded .lightbox-img{ max-height:88vh; }

/* ============================= RESPONSIVE ============================= */
@media (max-width:640px){
  .navlinks{ display:none; }
  .plinth{ display:none; }
  .wordmark{ margin-top:-38px; }
  .project-controls{ width:100%; justify-content:space-between; }
  .g-big{ width:min(220px,58vw); }
  .g-stack{ width:min(150px,40vw); }
  .lightbox{ flex-direction:column; gap:var(--space-md); padding:56px 20px 24px; }
  .lightbox-stage{ max-width:100%; max-height:55vh; }
  .lightbox-info{ flex:0 0 auto; }
  .lightbox.expanded .lightbox-stage{ max-height:80vh; }
}

@media (max-width:800px){
  .curatorial-info{
    flex-direction:column;
  }
}