/* =========================================================
   Matt Brown — "After-hours exhibition"
   Design system
   ========================================================= */
:root{
  /* palette */
  --bg:        #0B0B0C;
  --bg-soft:   #141416;
  --ink:       #F2F0EC;
  --ink-dim:   #9a978f;
  --ink-faint: #5a574f;
  --line:      rgba(242,240,236,.12);
  --red:       #E5341E;   /* ZENKi accent */

  /* type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* fluid scale */
  --step--1: clamp(.72rem, .68rem + .2vw, .82rem);
  --step-0:  clamp(.95rem, .9rem + .25vw, 1.05rem);
  --step-1:  clamp(1.2rem, 1rem + .8vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
  --step-3:  clamp(2.4rem, 1.4rem + 4vw, 4.5rem);
  --hero:    clamp(3.6rem, 1rem + 16vw, 15rem);

  /* layout */
  --pad: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1600px;
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:var(--step-0);
  line-height:1.5;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
canvas{ display:block; }

/* persistent WebGL stage */
#stage{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}

main, .nav, .footer{ position:relative; z-index:2; }

/* ===================== LOADER ===================== */
.loader{
  position:fixed; inset:0; z-index:60;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--font-mono); }
.loader__count{ font-size:clamp(3rem,12vw,9rem); font-weight:700; line-height:1; }
.loader__label{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.35em; color:var(--ink-dim); }

/* ===================== CURSOR ===================== */
.cursor{
  position:fixed; top:0; left:0; z-index:55;
  width:10px; height:10px; border-radius:50%;
  background:var(--ink); mix-blend-mode:difference;
  transform:translate(-50%,-50%); pointer-events:none;
  transition:width .3s var(--ease), height .3s var(--ease), background .3s;
}
.cursor.is-hover{ width:54px; height:54px; background:var(--red); mix-blend-mode:normal; opacity:.85; }
@media (hover:none){ .cursor{ display:none; } }

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  mix-blend-mode:difference;
}
.nav__brand{ display:flex; align-items:center; gap:.55rem; font-weight:500; letter-spacing:.02em; }
.nav__ghost{ width:26px; height:26px; filter:invert(1); }
.nav__links{ display:flex; gap:1.6rem; align-items:center; font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em; }
.nav__links a{ position:relative; }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{ border:1px solid currentColor; border-radius:100px; padding:.45em 1em; }
.nav__toggle{ display:none; width:34px; height:34px; background:none; border:0; cursor:pointer; flex-direction:column; gap:6px; align-items:center; justify-content:center; }
.nav__toggle span{ display:block; width:24px; height:2px; background:currentColor; transition:transform .35s var(--ease), opacity .35s; }
@media (max-width:720px){
  .nav__toggle{ display:flex; }
  .nav__links{ position:fixed; inset:0; background:var(--bg); flex-direction:column; justify-content:center; gap:2rem; font-size:1.4rem; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; mix-blend-mode:normal; }
  body.nav-open .nav__links{ opacity:1; visibility:visible; }
  body.nav-open .nav__toggle span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
}

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--pad);
}
.hero__meta{
  position:absolute; top:calc(var(--pad) + 3.2rem);
  font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--ink-dim); text-transform:uppercase; letter-spacing:.12em;
  display:flex; flex-direction:column; gap:.2rem;
}
.hero__meta--tl{ left:var(--pad); text-align:left; }
.hero__meta--tr{ right:var(--pad); text-align:right; }
@media (max-width:720px){ .hero__meta{ display:none; } }

.hero__title{
  font-weight:700; font-size:var(--hero); line-height:.82;
  letter-spacing:-.03em; text-transform:uppercase;
  mix-blend-mode:difference;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; will-change:transform; }

.hero__tagline{
  margin-top:1.6rem; max-width:42ch;
  font-family:var(--font-mono); font-size:var(--step--1);
  color:var(--ink-dim); text-transform:uppercase; letter-spacing:.18em;
}
.hero__scroll{
  position:absolute; bottom:calc(var(--pad)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.25em; color:var(--ink-dim);
}
.hero__scrollline{ width:1px; height:54px; background:linear-gradient(var(--ink-dim),transparent); animation:scrollpulse 2.4s var(--ease) infinite; }
@keyframes scrollpulse{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ===================== SECTIONS ===================== */
.section{ padding:clamp(5rem,12vh,11rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.section__head{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:clamp(2rem,5vw,4rem); }
.section__index{ font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.25em; color:var(--red); }
.section__title{ font-family:var(--font-serif); font-weight:400; font-size:var(--step-3); line-height:1; letter-spacing:-.01em; }

.placeholder-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:clamp(.6rem,1.4vw,1.2rem); }
.placeholder-grid .cell{ aspect-ratio:3/4; background:var(--bg-soft); border:1px solid var(--line); overflow:hidden; position:relative; }
.placeholder-grid .cell img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .9s var(--ease); filter:grayscale(.15); }
.placeholder-grid .cell:hover img{ transform:scale(1.06); filter:grayscale(0); }
.placeholder-grid .cell figcaption{ position:absolute; left:.8rem; bottom:.7rem; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em; mix-blend-mode:difference; }

/* film filters */
.film-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.chip{
  font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:.5em 1em; cursor:pointer; transition:color .3s, border-color .3s, background .3s;
}
.chip:hover{ color:var(--ink); border-color:var(--ink-dim); }
.chip.is-active{ color:var(--bg); background:var(--ink); border-color:var(--ink); }

/* film grid */
.film-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:clamp(1rem,2vw,1.8rem); }
.film{ display:flex; flex-direction:column; gap:.8rem; background:none; border:0; padding:0; text-align:left; cursor:pointer; color:inherit; }
.film__media{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:6px; background:var(--bg-soft); border:1px solid var(--line); }
.film__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), filter .9s var(--ease); filter:grayscale(.25) brightness(.85); }
.film:hover .film__media img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.film__play{ position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%; background:rgba(11,11,12,.55); backdrop-filter:blur(4px); border:1px solid rgba(242,240,236,.5); transition:transform .4s var(--ease), background .3s; }
.film__play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--ink); }
.film:hover .film__play{ transform:scale(1.12); background:var(--red); }
.film:hover .film__play::after{ border-left-color:#fff; }
.film__dur{ position:absolute; right:.6rem; bottom:.6rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; background:rgba(11,11,12,.7); padding:.2em .5em; border-radius:4px; }
.film__meta{ display:flex; flex-direction:column; gap:.15rem; }
.film__title{ font-size:var(--step-0); font-weight:500; letter-spacing:-.01em; }
.film__sub{ font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.15em; color:var(--red); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:rgba(5,5,6,.94); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; padding:var(--pad); }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__stage{ width:min(100%,1200px); aspect-ratio:16/9; display:flex; }
.lightbox__stage video{ width:100%; height:100%; border-radius:8px; background:#000; box-shadow:0 30px 120px rgba(0,0,0,.7); }
.lightbox__cap{ font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.18em; color:var(--ink-dim); }
.lightbox__close{ position:absolute; top:var(--pad); right:var(--pad); width:48px; height:48px; border-radius:50%; background:transparent; border:1px solid var(--line); color:var(--ink); font-size:1.1rem; cursor:pointer; transition:background .3s, border-color .3s; }
.lightbox__close:hover{ background:var(--red); border-color:var(--red); }

/* shop */
.shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:clamp(.8rem,2vw,1.6rem); }
.product{ display:flex; flex-direction:column; gap:.7rem; }
.product__media{ aspect-ratio:5/6; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; }
.product__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.product:hover .product__media img{ transform:scale(1.05); }
.product__row{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.06em; }
.product__price{ color:var(--red); }
@media (max-width:560px){ .shop-grid{ grid-template-columns:1fr 1fr; gap:.7rem; } }

/* generic cta link */
.link-cta{ display:inline-block; margin-top:2.4rem; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.18em; color:var(--ink); border-bottom:1px solid var(--red); padding-bottom:.3rem; transition:color .3s; }
.link-cta:hover{ color:var(--red); }

/* press */
.press{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(1.5rem,4vw,3.5rem); }
.press__item{ border-top:1px solid var(--line); padding-top:1.5rem; }
.press__quote{ font-family:var(--font-serif); font-size:var(--step-2); line-height:1.2; letter-spacing:-.01em; }
.press__src{ display:block; margin-top:1.2rem; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.18em; color:var(--red); font-style:normal; }

/* about / contact */
.section--about{ min-height:60vh; display:flex; align-items:center; }
.about__lede{ font-family:var(--font-serif); font-size:var(--step-2); line-height:1.25; max-width:24ch; }
.contact__big{ display:block; font-family:var(--font-serif); font-size:clamp(1.5rem,6vw,4rem); line-height:1.15; letter-spacing:-.01em; transition:color .3s; }
.contact__big:hover{ color:var(--red); }

/* contact form */
.cform{ margin-top:3rem; max-width:640px; display:flex; flex-direction:column; gap:1rem; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cform__field{ width:100%; background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; color:var(--ink); font-family:var(--font-display); font-size:var(--step-0); padding:.9rem 1rem; transition:border-color .3s; }
.cform__field::placeholder{ color:var(--ink-faint); }
.cform__field:focus{ outline:none; border-color:var(--ink-dim); }
textarea.cform__field{ resize:vertical; }
.cform__submit{ align-self:flex-start; margin-top:.4rem; background:var(--ink); color:var(--bg); border:0; border-radius:100px; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.18em; padding:.9em 1.8em; cursor:pointer; transition:background .3s, color .3s; }
.cform__submit:hover{ background:var(--red); color:#fff; }
@media (max-width:560px){ .cform__row{ grid-template-columns:1fr; } }

/* footer */
.footer{ display:flex; justify-content:space-between; padding:2rem var(--pad); border-top:1px solid var(--line); font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-dim); }

/* hero intro */
.hero__title .line > span{ transform:translateY(115%); transition:transform 1.1s var(--ease); }
body.is-ready .hero__title .line > span{ transform:translateY(0); }
.hero__title .line:nth-child(2) > span{ transition-delay:.09s; }
.hero__tagline, .hero__scroll, .hero__meta{ opacity:0; transition:opacity 1.1s var(--ease) .55s; }
body.is-ready .hero__tagline, body.is-ready .hero__scroll, body.is-ready .hero__meta{ opacity:1; }

/* reveal util */
[data-reveal]{ opacity:0; transform:translateY(30px); }
[data-reveal].is-visible{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }

/* =========================================================
   EDITORIAL LAYER (Editions-inspired) — chaptered index, serif accents
   ========================================================= */
:root{ --paper:#efe9dd; --paper-ink:#1a1612; --paper-dim:#6c6456; --paper-line:rgba(26,22,18,.14); }
.it, em{ font-family:var(--font-serif); font-style:italic; font-weight:400; }

/* hero editorial lede */
.hero__lede{ margin-top:1.5rem; max-width:30ch; font-family:var(--font-serif); font-size:var(--step-1); line-height:1.3; color:var(--ink); }
body.is-ready .hero__lede{ opacity:1; }
.hero__lede{ opacity:0; transition:opacity 1.1s var(--ease) .6s; }

/* INDEX (chaptered table of contents) */
.index{ padding:clamp(4rem,10vh,9rem) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.index__head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:1.1rem; margin-bottom:.5rem;
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.25em; text-transform:uppercase; color:var(--ink-dim); }
.chapters{ list-style:none; }
.chapter{ border-bottom:1px solid var(--line); }
.chapter a{ display:grid; grid-template-columns:3.2rem 1fr auto; align-items:baseline; gap:1.4rem; padding:clamp(1rem,2.6vw,2.1rem) 0;
  transition:padding .55s var(--ease); }
.chapter__num{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.1em; color:var(--ink-faint); }
.chapter__title{ font-family:var(--font-serif); font-weight:400; font-size:clamp(1.9rem,5.4vw,4.4rem); line-height:.96; letter-spacing:-.015em;
  transition:color .4s var(--ease); }
.chapter__desc{ justify-self:end; text-align:right; font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-dim); transition:color .4s; }
.chapter a:hover{ padding-left:1.3rem; }
.chapter a:hover .chapter__title{ font-style:italic; color:var(--red); }
.chapter a:hover .chapter__desc{ color:var(--ink); }
@media (max-width:600px){ .chapter a{ grid-template-columns:2rem 1fr; } .chapter__desc{ display:none; } }

/* SUB-PAGE header (lighter, no WebGL) */
.pagehead{ padding:clamp(7rem,16vh,12rem) var(--pad) clamp(2.5rem,6vh,5rem); max-width:var(--maxw); margin-inline:auto; border-bottom:1px solid var(--line); }
.pagehead__kicker{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.25em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:1.2rem; }
.pagehead__title{ font-family:var(--font-serif); font-weight:400; font-size:var(--hero); line-height:.9; letter-spacing:-.02em; }
.pagehead__lede{ margin-top:1.6rem; max-width:46ch; font-family:var(--font-serif); font-size:var(--step-1); line-height:1.35; color:var(--ink-dim); }

/* prev / next chapter footer-nav */
.chapnav{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:clamp(4rem,10vh,8rem); border-top:1px solid var(--line); }
.chapnav a{ background:var(--bg); padding:clamp(1.6rem,4vw,3rem) var(--pad); display:flex; flex-direction:column; gap:.5rem; transition:background .4s; }
.chapnav a:last-child{ text-align:right; align-items:flex-end; }
.chapnav a:hover{ background:var(--bg-soft); }
.chapnav__label{ font-family:var(--font-mono); font-size:var(--step--1); text-transform:uppercase; letter-spacing:.2em; color:var(--ink-faint); }
.chapnav__name{ font-family:var(--font-serif); font-size:var(--step-2); }
.chapnav a:hover .chapnav__name{ font-style:italic; color:var(--red); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
}