/* ============================================================
   NewArtCentre · Roche Court
   ============================================================ */

:root{
  --ink:        #131211;   /* near-black gallery text */
  --ink-soft:   #56544f;
  --paper:      #fcfbf9;   /* gallery wall white */
  --paper-warm: #f3f1ec;   /* soft alternating wall */
  --cream:      #ffffff;
  --line:       #e6e2da;
  --accent:     #6b6450;   /* stone / olive */
  --gold:       #94774a;   /* muted, used sparingly */
  --white:      #ffffff;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --pad: clamp(1.25rem, 5vw, 6rem);
}

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

html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-weight:300;
  font-size:clamp(15px, 1.05vw, 17px);
  overflow-x:hidden;
}

img{ display:block; width:100%; height:100%; object-fit:cover; }

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--ink); color:var(--paper); }

/* ---------- Ticker ---------- */
.ticker{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:.6rem 0;
  white-space:nowrap;
  overflow:hidden;
  display:flex;
  gap:2.5rem;
  animation:scroll-x 38s linear infinite;
}
.ticker span{ flex-shrink:0; }
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  background:rgba(244,241,234,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), padding .4s var(--ease), background .4s var(--ease);
}
.site-header.scrolled{
  border-color:var(--line);
  padding-top:.8rem; padding-bottom:.8rem;
}
.brand{ display:flex; align-items:baseline; gap:.6rem; line-height:1; }
.brand-mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.45rem;
  letter-spacing:-.01em;
}
.brand-sub{
  font-family:var(--sans);
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent);
}
.nav{ display:flex; gap:2.1rem; }
.nav a{
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  position:relative; padding:.2rem 0; color:var(--ink-soft);
  transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--ink); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ width:100%; }
.nav-shop{ color:var(--gold) !important; }

.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.menu-toggle span{ width:26px; height:1.5px; background:var(--ink); transition:.35s var(--ease); }
.menu-toggle[aria-expanded="true"] span:first-child{ transform:translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:1.4rem;
  transform:translateY(-100%); transition:transform .55s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{
  font-family:var(--serif); font-size:2rem; font-weight:400;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:94vh;
  display:flex; align-items:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(3rem,7vw,6rem);
  color:var(--white);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:-1; background:#2a2824; }
.hero-media img{ transform:scale(1.06); animation:slow-zoom 18s ease-out forwards; }
@keyframes slow-zoom{ to{ transform:scale(1); } }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,14,12,.72) 0%, rgba(15,14,12,.15) 45%, rgba(15,14,12,.25) 100%);
}
.hero-inner{ position:relative; max-width:60rem; }
.eyebrow{
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  margin-bottom:1.4rem; color:rgba(255,255,255,.82);
}
.eyebrow-dark{ color:var(--gold); }
.hero-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.6rem, 7vw, 6rem);
  line-height:1.02; letter-spacing:-.02em;
}
.hero-title span{ display:block; }
.hero-title .italic{ font-style:italic; font-weight:400; color:#f0e7d2; }
.hero-lede{
  max-width:34rem; margin-top:1.8rem;
  font-size:1.05rem; color:rgba(255,255,255,.9); line-height:1.7;
}
.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.hero-scroll{
  position:absolute; right:var(--pad); bottom:clamp(3rem,7vw,6rem);
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  font-size:.66rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.hero-scroll i{ width:1px; height:48px; background:rgba(255,255,255,.5); animation:drop 2s var(--ease) infinite; transform-origin:top; }
@keyframes drop{ 0%{transform:scaleY(0)} 40%{transform:scaleY(1)} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-size:.76rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05rem 2.1rem; border:1px solid currentColor; border-radius:0;
  transition:.4s var(--ease); cursor:pointer; font-family:var(--sans); font-weight:400;
}
.btn-light{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-light:hover{ background:transparent; color:var(--white); border-color:var(--white); }
.btn-ghost{ color:var(--white); background:transparent; }
.btn-ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-dark:hover{ background:transparent; color:var(--ink); }

/* ---------- Links ---------- */
.link-underline{
  position:relative; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:.25rem; color:var(--ink); align-self:flex-start;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform .4s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(0); transform-origin:left; }

/* ---------- Statement ---------- */
.statement{
  padding:clamp(4.5rem,11vw,9rem) var(--pad);
  max-width:72rem;
  display:flex; flex-direction:column; gap:2.2rem;
}
.statement p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  line-height:1.4; letter-spacing:-.01em; color:var(--ink);
}
.drop{
  font-size:1.15em; font-weight:400; color:var(--gold);
}

/* ---------- Generic section ---------- */
.section{ padding:clamp(3.5rem,8vw,7rem) var(--pad); }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:3rem;
  border-top:1px solid var(--line); padding-top:1.6rem;
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.01em;
}

/* ---------- What's On ---------- */
.shows{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem; }
.show-img{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--paper-warm);
  /* works hung on the wall — fine frame + soft cast shadow */
  border:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(19,18,17,.5);
}
.show-img img{ transition:transform 1.1s var(--ease); }
.show:hover .show-img img{ transform:scale(1.05); }
.show-flag{
  position:absolute; top:1rem; left:1rem;
  background:rgba(252,251,249,.94); color:var(--ink);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.4rem .9rem;
}
/* gallery wall label */
.show-body{
  margin-top:1.4rem; padding:1.1rem 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.show-dates{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.show-name{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.5rem; line-height:1.15; }
.show-name em{ font-style:normal; }
.show-room{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.show-text{ color:var(--ink-soft); font-size:.95rem; max-width:32ch; margin-top:.2rem; }

/* ---------- Feature split ---------- */
.feature{
  display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch;
  background:var(--paper-warm);
}
.feature-media{ min-height:460px; overflow:hidden; }
.feature-media img{ transition:transform 1.4s var(--ease); }
.feature:hover .feature-media img{ transform:scale(1.04); }
.feature-body{
  padding:clamp(3rem,6vw,6rem) var(--pad);
  display:flex; flex-direction:column; justify-content:center; gap:1.5rem;
}
.feature-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.2; letter-spacing:-.01em;
}
.feature-body p{ color:var(--ink-soft); max-width:42ch; }
.feature-body .btn{ align-self:flex-start; margin-top:.5rem; }

/* ---------- Artists ---------- */
.artist-list{ list-style:none; border-top:1px solid var(--line); }
.artist-list li{ border-bottom:1px solid var(--line); }
.artist-list a{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.4rem 0; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:-.01em;
  color:var(--ink); transition:color .35s var(--ease), padding-left .4s var(--ease);
}
.artist-list a span{
  font-family:var(--sans); font-size:.72rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  align-self:center;
}
.artist-list a:hover{ color:var(--gold); padding-left:1.2rem; }

/* ---------- Visit ---------- */
.visit{
  display:grid; grid-template-columns:1fr 1.05fr;
  background:var(--ink); color:var(--paper);
}
.visit-media{ min-height:520px; overflow:hidden; }
.visit-body{
  padding:clamp(3rem,6vw,6rem) var(--pad);
  display:flex; flex-direction:column; gap:1.6rem; justify-content:center;
}
.visit .eyebrow{ color:var(--gold); margin-bottom:0; }
.visit-title{ font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; }
.visit-intro{ color:rgba(244,241,234,.78); max-width:40ch; }
.visit-facts{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 2rem; margin:.6rem 0 1rem; }
.visit-facts dt{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; }
.visit-facts dd{ font-size:.95rem; color:rgba(244,241,234,.9); line-height:1.6; }
.visit-facts a{ border-bottom:1px solid rgba(244,241,234,.3); transition:border-color .3s; }
.visit-facts a:hover{ border-color:var(--gold); }
.visit .btn-light{ align-self:flex-start; }

/* ---------- News / signup ---------- */
.news{ padding:clamp(4rem,9vw,8rem) var(--pad); background:var(--cream); }
.news-inner{ max-width:46rem; display:flex; flex-direction:column; gap:1.2rem; align-items:flex-start; }
.news-title{ font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.12; letter-spacing:-.01em; }
.news-text{ color:var(--ink-soft); max-width:46ch; }
.signup{ display:flex; gap:.6rem; width:100%; max-width:30rem; margin-top:.8rem; flex-wrap:wrap; }
.signup input{
  flex:1; min-width:14rem; padding:1.05rem 1.3rem; border:1px solid var(--line);
  background:var(--white); border-radius:0; font-family:var(--sans);
  font-size:.95rem; color:var(--ink); transition:border-color .3s;
}
.signup input:focus{ outline:none; border-color:var(--ink); }
.signup-msg{ font-size:.85rem; color:var(--gold); min-height:1.2rem; letter-spacing:.04em; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); padding:clamp(3.5rem,7vw,6rem) var(--pad) 2.5rem; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(244,241,234,.15); }
.foot-brand .brand-mark{ font-size:1.6rem; display:block; margin-bottom:1.2rem; }
.foot-brand p{ color:rgba(244,241,234,.65); font-size:.9rem; margin-bottom:1rem; line-height:1.7; }
.foot-brand a{ transition:color .3s; }
.foot-brand a:hover{ color:var(--gold); }
.foot-col h4{ font-family:var(--sans); font-weight:400; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.foot-col a{ display:block; color:rgba(244,241,234,.7); font-size:.92rem; padding:.35rem 0; transition:color .3s, padding-left .3s var(--ease); }
.foot-col a:hover{ color:var(--paper); padding-left:.4rem; }
.foot-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:2rem; font-size:.78rem; letter-spacing:.05em; color:rgba(244,241,234,.45); }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-toggle{ display:flex; }
  .shows{ grid-template-columns:1fr 1fr; }
  .feature{ grid-template-columns:1fr; }
  .feature-media{ min-height:340px; }
  .visit{ grid-template-columns:1fr; }
  .visit-media{ min-height:340px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .shows{ grid-template-columns:1fr; }
  .visit-facts{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:2rem; }
  .hero{ min-height:90vh; }
  .hero-scroll{ display:none; }
  .brand-sub{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}