/* Nikolina Jerić — "La Galería" (concepto museo moderno / exposición) */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#EDEAE3;
  --concrete:#DCD8CE;
  --ink:#1C1A17;
  --ink-soft:#57534A;
  --ink-faint:#8A8578;
  --gold:#B8912F;
  --gold-deep:#8F6F1F;
  --line:rgba(28,26,23,.16);
  --white:#FFFFFF;
  --shadow:0 14px 34px rgba(28,26,23,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:'Archivo',sans-serif; background:var(--paper); color:var(--ink); cursor:none;}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* spotlight cursor */
#spotlight{
  position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:90;
  background:radial-gradient(circle 220px at var(--sx,50%) var(--sy,50%), transparent 0%, rgba(28,26,23,.0) 40%, rgba(28,26,23,.06) 100%);
  mix-blend-mode:multiply;
}
@media (max-width:900px){ #spotlight{display:none;} body{cursor:auto;} }

/* nav */
.topnav{position:sticky; top:0; z-index:80; background:var(--paper); border-bottom:2px solid var(--ink);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; gap:16px; flex-wrap:wrap;}
.nav-logo{font-weight:800; font-size:1.05rem; text-decoration:none; color:var(--ink); text-transform:uppercase; letter-spacing:.03em;}
.nav-logo span{color:var(--gold-deep);}
.nav-links{display:flex; align-items:center; gap:22px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;}
.nav-links a{text-decoration:none; color:var(--ink-soft);}
.nav-links a:hover, .nav-links a.active{color:var(--gold-deep);}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px; background:none; border:2px solid var(--ink); border-radius:4px; cursor:pointer;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); margin:0 auto;}
@media (max-width:800px){
  .nav-toggle{display:flex;}
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:2px solid var(--ink); flex-direction:column; align-items:flex-start; gap:0; max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .nav-links.open{max-height:320px;}
  .nav-links a{width:100%; padding:14px 24px; border-bottom:1px solid var(--line);}
}

/* hero */
.hero{padding:70px 0 60px; border-bottom:2px solid var(--ink); position:relative;}
.catalog-num{
  position:absolute; top:20px; left:24px; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--gold-deep);
  animation:blink 1.6s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;} 50%,100%{opacity:.15;}}
.frame{
  border:10px solid var(--white); outline:2px solid var(--ink); box-shadow:var(--shadow); background:var(--white);
  padding:48px 44px; text-align:center; max-width:760px; margin:0 auto;
}
.frame-photo{width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid var(--ink); margin:0 auto 20px;}
.frame-label{font-family:'IBM Plex Mono',monospace; font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); margin:0 0 16px;}
.hero-name{font-weight:800; font-size:clamp(2rem,5vw,3.1rem); margin:0 0 18px; letter-spacing:-.01em;}
.hero-lede{font-size:1.05rem; color:var(--ink-soft); line-height:1.65; max-width:560px; margin:0 auto 24px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; border:1.5px solid var(--ink); border-radius:2px; padding:6px 12px; background:var(--paper);}

/* plaque (career CTA) */
.plaque{
  max-width:560px; margin:32px auto 0; background:linear-gradient(180deg,#D8B94E,#B8912F); border:2px solid var(--ink);
  border-radius:4px; padding:18px 24px; text-align:center; text-decoration:none; display:block; color:#2A1E05;
  box-shadow:var(--shadow);
}
.plaque .pl-label{font-family:'IBM Plex Mono',monospace; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 4px; opacity:.75;}
.plaque .pl-title{font-weight:800; font-size:1.05rem;}

/* rooms (sections) */
.room{padding:68px 0; border-bottom:2px solid var(--line);}
.room-num{font-family:'IBM Plex Mono',monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-deep); margin:0 0 8px;}
.room h2{font-weight:800; font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0 0 18px; letter-spacing:-.01em;}
.room-sub{color:var(--ink-soft); max-width:640px; line-height:1.65; font-size:1.02rem;}

/* exhibit card */
.exhibit-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px;}
.exhibit{background:var(--white); border:2px solid var(--ink); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr; }
.exhibit-canvas{
  padding:26px 24px; border-bottom:2px dashed var(--line); min-height:80px;
  display:flex; align-items:center;
}
.exhibit-canvas p{margin:0; font-style:italic; font-size:1rem; color:var(--ink); line-height:1.55;}
.exhibit-label{padding:16px 24px; background:var(--concrete);}
.exhibit-label .el-row{display:flex; justify-content:space-between; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ink-soft); padding:3px 0;}
.exhibit-label .el-row b{color:var(--ink); font-weight:600;}
@media (max-width:800px){ .exhibit-grid{grid-template-columns:1fr;} }

/* single-column exhibits (quotes) */
.exhibit-solo{margin-top:28px; display:flex; flex-direction:column; gap:22px;}

/* colleague testimonials */
.testimonial-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px;}
.testimonial{background:var(--white); border:2px solid var(--ink); padding:22px 24px; box-shadow:var(--shadow);}
.testimonial-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.testimonial-head img{width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--ink);}
.testimonial-head b{display:block; font-size:.94rem;}
.testimonial-head span{font-size:.76rem; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
.testimonial p{font-size:.92rem; color:var(--ink-soft); line-height:1.55; margin:0;}
@media (max-width:800px){ .testimonial-grid{grid-template-columns:1fr;} }

/* stat rail */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--ink); border:2px solid var(--ink); margin-top:32px;}
.stat-cell{background:var(--paper); padding:26px 16px; text-align:center;}
.stat-cell b{display:block; font-weight:800; font-size:1.9rem;}
.stat-cell span{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-family:'IBM Plex Mono',monospace;}
@media (max-width:700px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }

/* sig list */
.sig-list{display:flex; flex-direction:column; margin-top:24px; border-top:1px solid var(--line);}
.sig-row{display:grid; grid-template-columns:220px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start;}
.sg-url{font-family:'IBM Plex Mono',monospace; font-size:.84rem; color:var(--gold-deep); word-break:break-word;}
.sg-desc{font-size:.92rem; color:var(--ink-soft); line-height:1.5;}
@media (max-width:640px){ .sig-row{grid-template-columns:1fr;} }

/* ticket booth (contact CTA) */
.booth{
  margin-top:24px; border:2px solid var(--ink); background:var(--white); box-shadow:var(--shadow);
  padding:40px; text-align:center;
}
.btn{display:inline-block; font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; font-size:.83rem; padding:13px 26px; border-radius:2px; text-decoration:none; border:2px solid var(--ink);}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--gold-deep); border-color:var(--gold-deep);}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

/* footer */
footer{padding:40px 0; text-align:center; font-size:.82rem; color:var(--ink-faint);}
footer .links{margin-bottom:10px;}
footer .links a{margin:0 10px; text-decoration:none; color:var(--ink-soft);}
footer .links a:hover{color:var(--gold-deep);}

/* shared page bits */
.page-hero{padding:64px 0 44px; border-bottom:2px solid var(--ink);}
.contact-form{max-width:560px; margin-top:24px;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px;}
.form-row input, .form-row textarea{width:100%; border:2px solid var(--ink); border-radius:2px; padding:12px 14px; font-family:'Archivo',sans-serif; font-size:1rem; background:var(--white); color:var(--ink);}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--gold-deep);}
.form-note{font-size:.78rem; color:var(--ink-faint); margin-top:10px;}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:28px;}
.contact-card{border:2px solid var(--ink); padding:22px; background:var(--white);}
.contact-card h3{margin:0 0 8px; font-size:1.02rem;}
.contact-card p{font-size:.88rem; color:var(--ink-soft); margin:0 0 14px;}
@media (max-width:640px){ .contact-grid{grid-template-columns:1fr;} }

.timeline{display:flex; flex-direction:column; gap:12px; margin-top:24px;}
.t-row{background:var(--white); border:2px solid var(--ink); padding:16px 20px; box-shadow:var(--shadow);}
.t-when{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--ink-faint); margin-bottom:2px;}
.t-role{font-weight:700; margin-bottom:2px;}
.t-org{color:var(--ink-soft); font-size:.9rem;}
.t-sub{margin-top:8px; padding-left:16px; border-left:2px solid var(--line);}
.t-sub .t-row{border:none; box-shadow:none; padding:8px 0;}