/* ==========================================================================
   Javier Galán Gallery — core stylesheet
   Dark gallery theme · soft-yellow lettering
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#09090b;
  --ink-2:#0f0f12;
  --ink-3:#161619;
  --ink-4:#1d1d21;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  --yellow:#ebd28a;
  --yellow-soft:#f3e2ad;
  --yellow-deep:#c9ab61;
  --yellow-glow:rgba(235,210,138,.22);

  --text:#efece4;
  --muted:#938e83;
  --muted-2:#6c6860;

  --display:"Cormorant Garamond",Georgia,serif;
  --ui:"Jost","Helvetica Neue",Arial,sans-serif;

  --gut:clamp(20px,5vw,72px);
  --maxw:1560px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

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

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--ui);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}

::selection{background:var(--yellow);color:#111}

/* ---------- ambient layers ---------- */
.grain{
  position:fixed;inset:-200px;z-index:9000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.8%22 numOctaves=%224%22/%3E%3C/filter%3E%3Crect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;filter:blur(110px);opacity:.3;will-change:transform}
.aurora span:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-8vw;background:radial-gradient(circle,rgba(235,210,138,.42),transparent 68%);animation:drift1 26s var(--ease) infinite alternate}
.aurora span:nth-child(2){width:40vw;height:40vw;right:-10vw;top:28vh;background:radial-gradient(circle,rgba(120,150,210,.34),transparent 68%);animation:drift2 32s var(--ease) infinite alternate}
.aurora span:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-14vw;background:radial-gradient(circle,rgba(200,110,90,.3),transparent 68%);animation:drift3 29s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(14vw,10vh) scale(1.25)}}
@keyframes drift2{to{transform:translate(-12vw,-8vh) scale(1.18)}}
@keyframes drift3{to{transform:translate(8vw,-12vh) scale(1.3)}}

.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 90% at 50% 0%,transparent 35%,rgba(0,0,0,.72) 100%);
}

/* ---------- cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .4s}
.cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid var(--yellow);
  transition:opacity .4s,width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .4s,border-color .4s}
.cursor-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--yellow)}
body.cursor-ready .cursor,body.cursor-ready .cursor-dot{opacity:1}
body.cursor-hover .cursor{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--yellow-glow);border-color:transparent}
body.cursor-hover .cursor-dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:9800;background:var(--ink);
  display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s;
}
.preloader.done{opacity:0;visibility:hidden}
.pre-inner{text-align:center;width:min(360px,72vw)}
.pre-mark{font-family:var(--display);font-size:clamp(34px,6vw,58px);color:var(--yellow);letter-spacing:.06em;line-height:1}
.pre-sub{font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}
.pre-bar{height:1px;background:var(--line-2);margin-top:30px;overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:var(--yellow);transition:width .25s linear}
.pre-num{font-size:11px;letter-spacing:.3em;color:var(--muted);margin-top:12px}

/* ---------- page curtain ---------- */
.curtain{position:fixed;inset:0;z-index:9700;pointer-events:none;display:flex}
.curtain i{flex:1;background:var(--ink-3);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out)}
.curtain.in i{transform:scaleY(1);transform-origin:bottom}
.curtain.out i{transform:scaleY(0);transform-origin:top}
.curtain i:nth-child(2){transition-delay:.05s}
.curtain i:nth-child(3){transition-delay:.1s}
.curtain i:nth-child(4){transition-delay:.15s}
.curtain i:nth-child(5){transition-delay:.2s}

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,10vw,150px);position:relative}
.section.tight{padding-block:clamp(48px,6vw,92px)}
.rule{height:1px;background:var(--line);width:100%}

.eyebrow{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--yellow-deep);
  display:flex;align-items:center;gap:14px;margin-bottom:22px;font-weight:400;
}
.eyebrow::before{content:"";width:46px;height:1px;background:currentColor;opacity:.6;flex:none}

h1,h2,h3,.display{font-family:var(--display);font-weight:300;line-height:1.02;letter-spacing:-.01em}
.h-lg{font-size:clamp(34px,5.6vw,80px)}
.h-md{font-size:clamp(26px,3.4vw,46px)}
.lead{font-size:clamp(16px,1.35vw,20px);color:var(--muted);max-width:62ch;font-weight:300}
.muted{color:var(--muted)}
em.accent{color:var(--yellow);font-style:italic}

/* ---------- header ---------- */
/* above the mobile menu overlay so the burger can act as its close button */
.site-header{position:relative;z-index:860}
.header-top{
  display:flex;align-items:center;gap:20px;
  padding:26px var(--gut) 22px;max-width:var(--maxw);margin-inline:auto;
}
.avatar{
  position:relative;width:62px;height:62px;border-radius:50%;flex:none;overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 0 0 5px rgba(235,210,138,.07);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--ease),transform .9s var(--ease)}
.avatar:hover{box-shadow:0 0 0 9px rgba(235,210,138,.12);transform:translateY(-2px)}
.avatar:hover img{filter:grayscale(0);transform:scale(1.08)}
.avatar::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--yellow);
  opacity:0;animation:pulseRing 3.4s var(--ease) infinite;
}
@keyframes pulseRing{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.35)}100%{opacity:0}}

.brand{line-height:1.25}
.brand b{display:block;font-family:var(--display);font-size:21px;font-weight:400;letter-spacing:.03em}
.brand span{display:block;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}

.header-side{margin-left:auto;display:flex;align-items:center;gap:26px}
.header-side .meta{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
@media(max-width:980px){.header-side .meta{display:none}}

.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;isolation:isolate;
  padding:13px 26px;border:1px solid var(--line-2);border-radius:999px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--text);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--yellow);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease-out);
}
.btn:hover{color:#15130d;border-color:var(--yellow)}
.btn:hover::after{transform:translateY(0)}
.btn.solid{background:var(--yellow);color:#15130d;border-color:var(--yellow)}
.btn.solid::after{background:#fff}
.btn-arrow{transition:transform .45s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(5px)}

/* ---------- navigation ---------- */
.nav-shell{padding:0 var(--gut) 8px;max-width:var(--maxw);margin-inline:auto}
.main-nav{
  display:flex;border:1px solid var(--line-2);
  background:rgba(14,14,17,.55);backdrop-filter:blur(16px);
}
.main-nav>li{flex:1;position:relative;border-right:1px solid var(--line-2)}
.main-nav>li:last-child{border-right:0}
.nav-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:19px 10px;text-align:center;position:relative;overflow:hidden;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text);
  transition:color .4s var(--ease);
}
.nav-link span{position:relative;z-index:2}
.nav-link::before{
  content:"";position:absolute;inset:0;background:var(--yellow);z-index:1;
  transform:translateY(100%);transition:transform .5s var(--ease-out);
}
.main-nav>li:hover .nav-link::before{transform:translateY(0)}
.main-nav>li:hover .nav-link{color:#15130d}
.nav-link.active{color:var(--yellow)}
.nav-link.active::after{content:"";position:absolute;left:18px;right:18px;bottom:11px;height:1px;background:currentColor;z-index:2}
.caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);position:relative;z-index:2;transition:transform .4s var(--ease)}
.main-nav>li:hover .caret{transform:rotate(45deg) translateY(1px)}

.submenu{
  position:absolute;top:100%;left:-1px;min-width:235px;z-index:60;
  background:rgba(13,13,16,.97);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-top:0;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.main-nav>li:nth-last-child(-n+2) .submenu{left:auto;right:-1px}
.main-nav>li:hover .submenu,.main-nav>li:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu-head{
  padding:13px 20px 9px;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2);
  border-bottom:1px solid var(--line);
}
.submenu a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 20px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);
  transition:color .35s var(--ease),background .35s var(--ease),padding-left .35s var(--ease);
}
.submenu a:last-child{border-bottom:0}
.submenu a i{font-style:normal;font-size:9.5px;color:var(--muted-2);letter-spacing:.1em}
.submenu a:hover{color:var(--yellow);background:rgba(235,210,138,.06);padding-left:27px}

/* sticky mini bar */
.sticky-nav{
  position:fixed;top:0;left:0;right:0;z-index:850;
  display:flex;align-items:center;gap:18px;
  padding:12px var(--gut);
  background:rgba(9,9,11,.86);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transform:translateY(-105%);transition:transform .55s var(--ease-out);
}
.sticky-nav.show{transform:translateY(0)}
.sticky-nav .s-brand{font-family:var(--display);font-size:17px;letter-spacing:.04em;color:var(--yellow)}
.sticky-nav .s-links{display:flex;gap:24px;margin-left:auto}
.sticky-nav .s-links a{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);transition:color .35s}
.sticky-nav .s-links a:hover{color:var(--yellow)}
@media(max-width:1080px){.sticky-nav{display:none}}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--yellow);z-index:900;transition:width .1s linear}

/* mobile nav */
.burger{display:none;width:46px;height:46px;border:1px solid var(--line-2);background:none;border-radius:50%;position:relative;cursor:pointer}
.burger i{position:absolute;left:14px;right:14px;height:1px;background:var(--text);transition:transform .4s var(--ease),opacity .3s}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){bottom:19px}
body.menu-open .burger i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:840;background:var(--ink-2);
  padding:118px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-2%);
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu ul{list-style:none;padding:0;margin:0}
.mobile-menu>ul>li{border-bottom:1px solid var(--line)}
.mobile-menu>ul>li>a{display:block;padding:20px 0;font-family:var(--display);font-size:clamp(26px,7vw,34px);color:var(--text)}
.mobile-menu .sub{padding:0 0 18px 14px;display:flex;flex-wrap:wrap;gap:8px 18px}
.mobile-menu .sub a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mobile-menu .sub a:hover{color:var(--yellow)}

@media(max-width:1080px){
  .nav-shell{display:none}
  .burger{display:block}
}
@media(min-width:1081px){.mobile-menu{display:none}}

/* keep the header on one line on phones */
@media(max-width:620px){
  .header-top{gap:13px;padding-top:18px;padding-bottom:16px}
  .avatar{width:50px;height:50px}
  .brand b{font-size:17px;white-space:nowrap}
  .brand span{font-size:8.5px;letter-spacing:.2em;white-space:nowrap}
  .header-side{gap:12px}
  .header-side .btn{padding:11px 17px;font-size:9.5px;letter-spacing:.2em}
  .burger{width:42px;height:42px}
  .burger i{left:12px;right:12px}
  .burger i:nth-child(1){top:17px}
  .burger i:nth-child(2){bottom:17px}
}
@media(max-width:430px){.header-side .btn{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(28px,5vw,60px);padding-bottom:clamp(40px,6vw,90px)}
.hero-title{
  font-family:var(--display);font-weight:300;color:var(--yellow);
  font-size:clamp(40px,10.2vw,170px);line-height:.94;letter-spacing:-.015em;
  text-align:center;position:relative;
  text-shadow:0 0 70px rgba(235,210,138,.2);
}
.hero-title .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);filter:blur(6px)}
.hero-title.lit .ch{animation:chIn .95s var(--ease-out) forwards}
@keyframes chIn{to{opacity:1;transform:none;filter:blur(0)}}

.hero-frame{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(26px,4vw,52px);padding:16px 2px;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2);
}
.hero-frame span{white-space:nowrap}
@media(max-width:760px){.hero-frame span:nth-child(2),.hero-frame span:nth-child(4){display:none}}

/* featured artwork stage */
.stage{position:relative;margin-top:clamp(34px,5vw,70px);max-width:540px;margin-left:auto;margin-right:auto}
.stage-art{
  position:relative;overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--ink-2);
  aspect-ratio:4/3.1;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 90px -30px rgba(235,210,138,.14);
}
@media(max-width:700px){.stage-art{aspect-ratio:4/3.4}}
.stage-art img{
  position:absolute;left:0;top:-9%;
  width:100%;height:118%;object-fit:cover;
  will-change:transform;
}
.stage-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,7,.8) 0%,rgba(5,5,7,.08) 46%,transparent 72%);
}
.stage-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(20px,3vw,44px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.stage-cap h2{font-size:clamp(26px,3.6vw,54px);color:var(--text)}
.stage-cap p{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--yellow);margin-top:8px}
.stage-badge{
  border:1px solid rgba(235,210,138,.4);border-radius:999px;padding:9px 20px;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--yellow);
  background:rgba(9,9,11,.5);backdrop-filter:blur(8px);
}

/* about-the-painting panel */
.about-painting{
  margin-top:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),var(--ink));
  display:grid;grid-template-columns:1.25fr .85fr;
}
@media(max-width:900px){.about-painting{grid-template-columns:1fr}}
.ap-body{padding:clamp(24px,3.4vw,46px);border-right:1px solid var(--line)}
@media(max-width:900px){.ap-body{border-right:0;border-bottom:1px solid var(--line)}}
.ap-body p+p{margin-top:16px}
.ap-specs{padding:clamp(24px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center;gap:2px}
.spec{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px dashed var(--line)}
.spec:last-child{border-bottom:0}
.spec dt{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}
.spec dd{font-size:13.5px;color:var(--text);text-align:right}
.spec dd.gold{color:var(--yellow)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;display:flex}
.marquee-track{display:flex;flex:none;gap:46px;padding-right:46px;animation:marq 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marquee-track span{
  font-family:var(--display);font-size:clamp(24px,3.4vw,46px);color:var(--muted-2);
  white-space:nowrap;display:flex;align-items:center;gap:46px;
}
.marquee-track span::after{content:"\25C6";font-size:10px;color:var(--yellow);font-family:var(--ui)}
.marquee-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--yellow-deep)}

/* ---------- section head ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.sec-head .right{text-align:right}
@media(max-width:700px){.sec-head .right{text-align:left}}

/* ---------- collection cards ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,26px)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1000px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-3,.g-2{grid-template-columns:1fr}}

.card{
  position:relative;display:block;overflow:hidden;border:1px solid var(--line);
  background:var(--ink-2);aspect-ratio:4/5;
  transition:border-color .6s var(--ease),transform .7s var(--ease-out);
}
.card.wide{aspect-ratio:16/10}
.card:hover{border-color:rgba(235,210,138,.42);transform:translateY(-6px)}
.card img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.45) brightness(.78);
  transform:scale(1.02);
  transition:transform 1.5s var(--ease),filter .9s var(--ease);
}
.card:hover img{transform:scale(1.1);filter:grayscale(0) brightness(.95)}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,8,.92),rgba(6,6,8,.12) 52%,transparent);
}
.card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,30px)}
.card-body h3{font-size:clamp(22px,2.3vw,34px);color:var(--text);transition:color .5s var(--ease)}
.card:hover .card-body h3{color:var(--yellow)}
.card-body .k{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:9px}
.card-body .d{
  font-size:13px;color:var(--muted);margin-top:8px;max-width:38ch;
  opacity:0;max-height:0;transform:translateY(8px);overflow:hidden;
  transition:opacity .5s var(--ease),max-height .6s var(--ease),transform .6s var(--ease);
}
.card:hover .card-body .d{opacity:1;max-height:100px;transform:none}
.card-no{
  position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);z-index:2;
  font-size:10px;letter-spacing:.24em;color:var(--muted-2);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 12px;
  background:rgba(9,9,11,.45);backdrop-filter:blur(6px);
}

/* ---------- gallery grid (works) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3vw,44px)}
.chip{
  border:1px solid var(--line-2);border-radius:999px;background:none;cursor:pointer;
  padding:11px 22px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.chip:hover{color:var(--text)}
.chip.on{background:var(--yellow);border-color:var(--yellow);color:#15130d}

/* true masonry: artworks are never cropped, and the columns never leave holes */
.works{
  --wgap:clamp(12px,1.4vw,22px);
  columns:3;column-gap:var(--wgap);
}
@media(max-width:1000px){.works{columns:2}}
@media(max-width:560px){.works{columns:1}}
.work{
  position:relative;overflow:hidden;cursor:pointer;display:block;width:100%;
  border:1px solid var(--line);background:var(--ink-2);
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin-bottom:var(--wgap);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);
}
.work img{width:100%;height:auto;display:block;filter:grayscale(.3) brightness(.8);transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.work:hover img{transform:scale(1.07);filter:grayscale(0) brightness(1)}
.work:hover{border-color:rgba(235,210,138,.4)}
.work-meta{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:18px 20px;
  background:linear-gradient(to top,rgba(6,6,8,.94),transparent);
  transform:translateY(12px);opacity:0;transition:transform .55s var(--ease),opacity .45s var(--ease);
}
.work:hover .work-meta{transform:none;opacity:1}
.work-meta h4{font-family:var(--display);font-size:22px;font-weight:400;line-height:1.1}
.work-meta p{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--yellow);margin-top:5px}
.work-zoom{
  position:absolute;top:16px;left:16px;z-index:2;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(9,9,11,.5);backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;transform:scale(.7);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.work:hover .work-zoom{opacity:1;transform:none}
.work-zoom::before,.work-zoom::after{content:"";position:absolute;background:var(--yellow)}
.work-zoom::before{width:12px;height:1px}
.work-zoom::after{width:1px;height:12px}
.work.hide{display:none}
.work.fade{opacity:0;transform:scale(.97)}
.empty-note{padding:60px 0;text-align:center;color:var(--muted-2);letter-spacing:.24em;text-transform:uppercase;font-size:11px}

/* ---------- timeline (installations) ---------- */
.tl{position:relative;padding-left:clamp(22px,4vw,64px)}
.tl::before{content:"";position:absolute;left:0;top:6px;bottom:0;width:1px;background:var(--line)}
.tl-year{position:relative;padding-bottom:clamp(44px,6vw,86px)}
.tl-year::before{
  content:"";position:absolute;left:calc(-1 * clamp(22px,4vw,64px));top:16px;
  width:9px;height:9px;border-radius:50%;background:var(--yellow);margin-left:-4px;
  box-shadow:0 0 0 6px rgba(235,210,138,.12);
}
.tl-y{font-family:var(--display);font-size:clamp(34px,5vw,68px);color:var(--yellow);line-height:1}
.tl-sub{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 26px}

/* ---------- poetry ---------- */
.poem{
  border:1px solid var(--line);background:linear-gradient(180deg,var(--ink-2),transparent);
  padding:clamp(26px,3.4vw,52px);position:relative;overflow:hidden;
  transition:border-color .6s var(--ease),transform .6s var(--ease-out);
}
.poem:hover{border-color:rgba(235,210,138,.35);transform:translateY(-4px)}
.poem::before{
  content:"\201C";position:absolute;top:-30px;right:18px;
  font-family:var(--display);font-size:170px;color:rgba(235,210,138,.07);line-height:1;
}
.poem h3{font-size:clamp(23px,2.4vw,34px);color:var(--yellow)}
.poem .verse{
  font-family:var(--display);font-size:clamp(17px,1.6vw,22px);line-height:1.85;
  color:var(--text);margin-top:20px;white-space:pre-line;opacity:.92;
}
.poem .sig{margin-top:22px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- about ---------- */
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(26px,4vw,76px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.portrait{position:relative;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--ink-2)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 1s var(--ease),transform 1.6s var(--ease)}
.portrait:hover img{filter:grayscale(0);transform:scale(1.05)}
.portrait .tag{
  position:absolute;left:0;bottom:0;background:var(--yellow);color:#15130d;
  padding:11px 20px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink);padding:clamp(22px,2.6vw,36px) clamp(16px,2vw,28px)}
.stat b{display:block;font-family:var(--display);font-size:clamp(34px,4.4vw,62px);color:var(--yellow);font-weight:300;line-height:1}
.stat span{display:block;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}

.tline li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){.tline li{grid-template-columns:1fr;gap:5px}}
.tline li b{font-size:11px;letter-spacing:.26em;color:var(--yellow-deep);font-weight:400;padding-top:4px}
.tline li p{color:var(--muted);font-size:14.5px}
.tline li p strong{color:var(--text);font-weight:400}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:9600;background:rgba(5,5,7,.97);backdrop-filter:blur(10px);
  display:grid;grid-template-rows:1fr auto;padding:clamp(16px,3vw,44px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.lb.open{opacity:1;visibility:visible}
/* the stage is a 1fr grid row, so a percentage max-height on the image has no
   definite box to resolve against — absolute positioning gives it one */
.lb-stage{position:relative;overflow:hidden;min-height:0}
.lb-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 40px 90px rgba(0,0,0,.95));
  transform:scale(.94);opacity:0;transition:transform .6s var(--ease-out),opacity .5s var(--ease);
}
.lb.open .lb-stage img{transform:none;opacity:1}
.lb-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);margin-top:20px}
.lb-bar h3{font-size:clamp(22px,2.6vw,36px)}
.lb-bar .m{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--yellow);margin-top:7px}
.lb-bar .d{font-size:13.5px;color:var(--muted);max-width:52ch;margin-top:10px}
.lb-nav{display:flex;gap:10px;align-items:center}
.lb-btn{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;
  display:grid;place-items:center;color:var(--text);font-size:18px;line-height:1;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.lb-btn:hover{background:var(--yellow);color:#15130d;border-color:var(--yellow)}
.lb-close{position:absolute;top:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);z-index:3}
.lb-count{font-size:10px;letter-spacing:.26em;color:var(--muted-2);min-width:62px;text-align:center}

/* ---------- newsletter / contact ---------- */
.cta{
  border:1px solid var(--line);
  background:radial-gradient(90% 140% at 12% 0%,rgba(235,210,138,.09),transparent 60%),var(--ink-2);
  padding:clamp(30px,4.6vw,78px);text-align:center;
}
.field{display:flex;gap:10px;max-width:540px;margin:28px auto 0;flex-wrap:wrap;justify-content:center}
.field input{
  flex:1;min-width:230px;background:none;border:0;border-bottom:1px solid var(--line-2);
  padding:14px 4px;font-size:13px;letter-spacing:.08em;outline:none;transition:border-color .4s;
}
.field input::placeholder{color:var(--muted-2);letter-spacing:.2em;text-transform:uppercase;font-size:10.5px}
.field input:focus{border-color:var(--yellow)}
.note{font-size:11px;letter-spacing:.14em;color:var(--yellow);margin-top:16px;min-height:20px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(50px,7vw,110px);padding-top:clamp(44px,5vw,78px)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,54px)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2);font-family:var(--ui);font-weight:400;margin-bottom:18px}
.foot-grid li{margin-bottom:11px}
.foot-grid li a{font-size:13px;color:var(--muted);transition:color .35s,padding-left .35s}
.foot-grid li a:hover{color:var(--yellow);padding-left:6px}
.foot-mark{font-family:var(--display);font-size:clamp(26px,3vw,40px);color:var(--yellow);line-height:1.1}
.foot-bottom{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:26px 0 34px;margin-top:clamp(34px,4vw,60px);border-top:1px solid var(--line);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
}
.to-top{display:inline-flex;align-items:center;gap:9px;color:var(--muted);transition:color .35s}
.to-top:hover{color:var(--yellow)}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="scale"]{transform:scale(.96)}
[data-rv].in{opacity:1;transform:none}
/* sideways reveals would push past the viewport on narrow screens */
@media(max-width:900px){
  [data-rv="left"],[data-rv="right"]{transform:translateY(34px)}
}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding-block:clamp(40px,6vw,96px) clamp(26px,3.4vw,52px);border-bottom:1px solid var(--line)}
.crumb{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);margin-bottom:22px}
.crumb a{color:var(--yellow-deep)}
.crumb a:hover{color:var(--yellow)}
.page-hero h1{font-size:clamp(40px,7.6vw,116px);color:var(--yellow);line-height:.96}
.page-hero .lead{margin-top:22px}