/* ============================================================
   NYC ART GROUP | CHROMA
   Scroll brings color back to a colorless society.
   ============================================================ */
:root{
  --cream:#efe9dd; --grey:#9a978f; --grey-2:#6f6c64; --gold:#f0c14b; --ox:#2a0a0e;
  --line:rgba(239,233,221,.14);
  --disp:"Bricolage Grotesque",sans-serif; --mono:"Space Mono",monospace; --body:Inter,-apple-system,sans-serif;
  --spring:cubic-bezier(.22,1,.36,1);
  --g:0; /* page is full color by default */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#2c0a0f;color:var(--cream);font-family:var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:#1a1206}

/* imagery in full, slightly-punchy color */
.chromatic,.hero__media video,.film video,.artist__img img,.gallery img{filter:grayscale(var(--g)) saturate(1.12)}

/* black & white lens that tracks the cursor */
.lens{position:fixed;top:0;left:0;width:186px;height:186px;border-radius:50%;translate:-50% -50%;pointer-events:none;z-index:9998;will-change:transform;
  backdrop-filter:grayscale(1) contrast(1.04) brightness(.975);
  -webkit-backdrop-filter:grayscale(1) contrast(1.04) brightness(.975);
  -webkit-mask-image:radial-gradient(circle,#000 50%,rgba(0,0,0,.4) 70%,transparent 82%);
  mask-image:radial-gradient(circle,#000 50%,rgba(0,0,0,.4) 70%,transparent 82%)}
@media(hover:none){.lens{display:none}}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;z-index:90}

/* custom cursor */
.cur{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--cream);border-radius:50%;translate:-50% -50%;pointer-events:none;z-index:9999;mix-blend-mode:difference;transition:width .25s,height .25s}
@media(hover:none){.cur{display:none}}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;height:72px;padding:0 clamp(18px,4vw,46px);mix-blend-mode:difference;color:#fff}
.nav .brand{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;font-size:1rem;text-transform:uppercase}
.nav ul{display:flex;gap:1.6rem}
.nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.nav__toggle span{width:24px;height:1.5px;background:#fff;transition:.3s}
.nav__toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:820px){
  .nav{mix-blend-mode:normal;background:rgba(16,16,16,.6);backdrop-filter:blur(12px)}
  .nav__toggle{display:flex}
  .nav ul{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:#0e0e0e;max-height:0;overflow:hidden;transition:max-height .4s var(--spring);border-bottom:1px solid var(--line)}
  .nav ul.open{max-height:80vh}
  .nav ul li{padding:1.1rem clamp(18px,4vw,46px);border-top:1px solid var(--line)}
  .nav ul a{font-size:1rem}
}

/* edge labels */
.edge{position:fixed;z-index:50;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.edge.l{left:14px;bottom:18px;writing-mode:vertical-rl;transform:rotate(180deg)}
.edge.r{right:16px;bottom:18px}
@media(max-width:820px){.edge{display:none}}

/* HERO (video) */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0c0c0c}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,12,12,.5),rgba(12,12,12,.4) 40%,rgba(12,12,12,.86))}
.hero__in{position:relative;z-index:2}
.meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.coin{width:64px;aspect-ratio:1;border-radius:50%;background:url("../images/labyrinth.png") center/112% no-repeat;animation:spin 9s linear infinite;margin:1.6rem 0;filter:grayscale(var(--g))}
@keyframes spin{to{transform:rotateY(360deg)}}
.h-hero{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,13vw,12rem);line-height:.86;letter-spacing:-.04em;text-transform:uppercase}
.color{background:linear-gradient(92deg,#f0c14b,#e0913f,#e4574c,#c64b9a,#6f7ce6);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin-top:1.8rem;max-width:44ch;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--cream);opacity:.9}
.cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.play{display:inline-flex;align-items:center;gap:.7rem;background:var(--gold);color:#2a0a0d;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;padding:1rem 1.7rem;border-radius:100px;transition:.3s}
.play:hover{background:var(--cream)}
.ghost{display:inline-flex;align-items:center;gap:.5rem;color:var(--cream);font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;padding:1rem 1.4rem;border:1px solid var(--line);border-radius:100px}
.cue{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:2;font-family:var(--mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grey)}

/* SECTIONS */
.sect{padding-block:clamp(70px,12vw,150px)}
.idxlabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.big{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,6vw,5rem);line-height:.98;letter-spacing:-.03em;max-width:18ch}
.big em{font-style:normal;background:linear-gradient(92deg,#f0c14b,#e4574c,#c64b9a);-webkit-background-clip:text;background-clip:text;color:transparent}

/* index list (disciplines / shows) */
.idx{border-top:1px solid var(--line)}
.idx__row{display:grid;grid-template-columns:64px 1fr auto;gap:1.4rem;align-items:baseline;padding:clamp(1.3rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--spring)}
.idx__row:hover{padding-left:1rem}
.idx__no{font-family:var(--mono);font-size:.78rem;color:var(--gold)}
.idx__title{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4vw,3rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.idx__desc{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--grey);text-align:right;max-width:30ch}
@media(max-width:680px){.idx__row{grid-template-columns:42px 1fr}.idx__desc{grid-column:2;text-align:left;margin-top:.4rem}}
.idx--plain .idx__row{grid-template-columns:1fr}

/* swatches */
.swatches{display:flex;gap:12px;margin-top:2.2rem;flex-wrap:wrap}
.swatches i{width:48px;height:48px;border-radius:50%}

/* FILMS */
.film{margin-top:clamp(28px,4vw,52px);border-radius:8px;overflow:hidden;background:#101010;border:1px solid var(--line)}
.film video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;background:#000}
.film figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding:.9rem 1.1rem;display:flex;justify-content:space-between;gap:1rem}

/* ARTISTS GRID */
.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media(max-width:900px){.artist-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.artist-grid{grid-template-columns:1fr}}
.artist{display:block}
.founder{display:inline-block;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:100px;padding:.14rem .5rem;margin-left:.5rem;vertical-align:middle}
.artist__img{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#1a1a1a}
.artist__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--spring)}
.artist:hover .artist__img img{transform:scale(1.05)}
.artist__row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:.8rem;padding-top:.6rem;gap:1rem}
.artist__name{font-family:var(--disp);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;text-transform:uppercase}
.artist__no{font-family:var(--mono);font-size:.72rem;color:var(--gold)}
.artist__role{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-top:.3rem}

/* MANIFESTO STRIP */
.creed-list{display:grid;gap:0;max-width:62rem}
.creed-list p{display:grid;grid-template-columns:48px 1fr;gap:1.2rem;padding:clamp(1.1rem,2.2vw,1.7rem) 0;border-top:1px solid var(--line);font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.42}
.creed-list p:last-child{border-bottom:1px solid var(--line)}
.creed-list p>span{font-family:var(--mono);color:var(--gold);font-size:.78rem;padding-top:.4rem}

/* CTA + FOOTER */
.cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.cta-row h2{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4.5vw,3.4rem);line-height:1;letter-spacing:-.02em;max-width:16ch;text-transform:uppercase}
.link-arrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:5px;display:inline-flex;gap:.5rem;transition:.3s}
.link-arrow:hover{color:var(--gold);border-color:var(--gold)}
.footer{border-top:1px solid var(--line);margin-top:clamp(60px,10vw,140px)}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;padding-block:clamp(40px,6vw,80px)}
@media(max-width:760px){.footer__cols{grid-template-columns:1fr 1fr;gap:2.4rem 1rem}}
.footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer__brand p{color:var(--grey);max-width:34ch;margin-top:.8rem;font-size:.9rem}
.footer li{margin-bottom:.55rem}
.footer li a,.footer li{color:var(--grey);font-size:.9rem}
.footer li a:hover{color:var(--cream)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.4rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--grey-2)}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);filter:blur(6px);transition:opacity 1s var(--spring),transform 1s var(--spring),filter 1s}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.1s}.reveal[data-delay="2"]{transition-delay:.2s}

@media(prefers-reduced-motion:reduce){
  .hero__media video{filter:none}.coin{animation:none}
  .chromatic,.artist__img img,.gallery img,.film video{filter:none!important}
  .reveal{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}

/* ---------- accessibility ---------- */
.skip-link { position: absolute; left: 0; top: -100px; z-index: 2000; background: var(--gold); color: #2c0a0f; padding: 0.7rem 1.1rem; font-family: "Space Mono", monospace; font-size: 0.8rem; font-weight: 700; text-decoration: none; border-radius: 0 0 6px 0; transition: top 0.2s ease; }
.skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
[id="main"]:focus { outline: none; }

/* ---------- cart drawer ---------- */
.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1400; }
.cart-overlay[hidden] { display: none; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 90vw); background: #1c0a0d; border-left: 1px solid var(--gold); z-index: 1500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cart-drawer.open { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 1.5rem; border-bottom: 1px solid rgba(240,193,75,0.25); }
.cart-drawer__title { font-family: "Bricolage Grotesque", sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); margin: 0; }
.cart-drawer__close { background: none; border: none; color: var(--gold); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 .3rem; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem 1.5rem; }
.cart-drawer__foot { padding: 1.3rem 1.5rem; border-top: 1px solid rgba(240,193,75,0.25); }
.cart-empty { color: rgba(239,233,221,0.6); font-family: "Space Mono", monospace; font-size: .85rem; text-align: center; padding: 2rem 0; }
.cart-item { padding: 1rem 0; border-bottom: 1px solid rgba(239,233,221,0.1); }
.cart-item__info { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.cart-item__name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; color: #efe9dd; font-size: .98rem; }
.cart-item__price { color: var(--gold); font-family: "Space Mono", monospace; font-size: .85rem; white-space: nowrap; }
.cart-item__qty { display: flex; align-items: center; gap: .55rem; }
.qty-btn { width: 28px; height: 28px; border: 1px solid rgba(239,233,221,0.3); background: transparent; color: #efe9dd; cursor: pointer; border-radius: 4px; font-size: 1rem; line-height: 1; }
.qty-btn:hover { border-color: var(--gold); color: var(--gold); }
.cart-item__qty span { min-width: 1.4rem; text-align: center; font-family: "Space Mono", monospace; color: #efe9dd; }
.cart-item__remove { margin-left: auto; background: none; border: none; color: rgba(239,233,221,0.5); font-family: "Space Mono", monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.cart-item__remove:hover { color: #a31f2d; }
.cart-total { display: flex; justify-content: space-between; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.1rem; color: #efe9dd; margin-bottom: 1rem; }
.cart-checkout { width: 100%; justify-content: center; }
.cart-note { font-family: "Space Mono", monospace; font-size: .62rem; color: rgba(239,233,221,0.45); text-align: center; margin-top: .8rem; line-height: 1.5; }
.cart-flash { position: fixed; bottom: 1.5rem; left: 50%; transform: translate(-50%, 1rem); background: var(--gold); color: #2c0a0f; font-family: "Space Mono", monospace; font-weight: 700; font-size: .78rem; padding: .7rem 1.2rem; border-radius: 6px; z-index: 1600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.cart-flash.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- connect / forms ---------- */
.connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 760px) { .connect { grid-template-columns: 1fr; } }
.connect__kicker { font-family: "Space Mono", monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.6rem; }
.connect__title { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 0.7rem; }
.connect__lead { color: rgba(239,233,221,0.78); max-width: 42ch; margin: 0 0 1.6rem; line-height: 1.55; }
.connect__direct { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.6rem; }
.form { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.form__field { display: flex; flex-direction: column; gap: 0.35rem; }
.form__field label { font-family: "Space Mono", monospace; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(239,233,221,0.6); }
.form__field input, .form__field textarea { background: rgba(239,233,221,0.04); border: 1px solid rgba(239,233,221,0.18); border-radius: 4px; padding: 0.8rem 0.9rem; color: #efe9dd; font-family: "Inter", sans-serif; font-size: 0.95rem; transition: border-color 0.25s ease; }
.form__field input:focus, .form__field textarea:focus { outline: none; border-color: var(--gold); }
.form__field textarea { resize: vertical; }
.form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form__status { font-family: "Space Mono", monospace; font-size: 0.74rem; min-height: 1.1rem; margin: 0.3rem 0 0; }
.form__status.ok { color: var(--gold); }
.form__status.err { color: #e8857f; }
.form--inline .btn { align-self: flex-start; }

/* ---------- buttons (match CHROMA pill style) ---------- */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.82rem; padding: 1rem 1.7rem; border: 1px solid var(--cream); color: var(--cream); border-radius: 100px; background: transparent; cursor: pointer; transition: 0.3s; text-decoration: none; }
.btn:hover { background: var(--cream); color: #2a0a0d; }
.btn--solid { background: var(--gold); border-color: var(--gold); color: #2a0a0d; }
.btn--solid:hover { background: var(--cream); border-color: var(--cream); }
.btn .arr { transition: transform 0.3s; }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- smooth in-page scrolling ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- artnet-style people cards (home) ---------- */
.art-people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.4vw,34px)}
@media(max-width:1000px){.art-people{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.art-people{grid-template-columns:repeat(2,1fr)}}
.person{display:block}
.person__img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:#1a1a1a;border:1px solid var(--line);transition:border-color .3s var(--spring)}
.person__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--spring)}
.person:hover .person__img img{transform:scale(1.05)}
.person:hover .person__img{border-color:var(--gold)}
.person__name{display:block;margin-top:.7rem;font-family:var(--disp);font-weight:700;font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:-.01em;color:var(--cream);transition:color .25s var(--spring)}
.person:hover .person__name{color:var(--gold)}
.person__role{display:block;margin-top:.15rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.person__medium{display:block;margin-top:.25rem;font-family:var(--body);font-size:.82rem;line-height:1.35;color:var(--grey);opacity:.95}