/* ===================================================
   ARTITOUT — Design tokens
   Deep maroon + gold, with rich emerald/indigo/ochre
   accents pulled from the Indian-textile world the
   paintings themselves come from.
   =================================================== */
:root{
  --wall:        #250D0E;   /* deep maroon — base background */
  --wall-2:      #340F12;   /* maroon, one step up */
  --wall-3:      #431419;   /* maroon panel / cards */
  --canvas:      #F7EFDD;   /* warm ivory canvas */
  --ink:         #F3E7D2;   /* warm off-white text on maroon */
  --ink-dim:     #CBAA9C;   /* dusty rose-taupe, muted text */
  --gold:        #D4AF37;   /* gallery gold — primary accent */
  --gold-deep:   #9A7B23;   /* deep antique gold, borders/shadow */
  --emerald:     #1F4D3E;   /* rich bottle green — secondary accent */
  --indigo:      #21243B;   /* deep indigo-navy — tertiary accent */
  --ochre:       #B4602E;   /* terracotta ochre — thread accent */
  --marigold:    #D97B29;   /* warm marigold — small highlight only */

  --display:     'Fraunces', serif;
  --body:        'Work Sans', sans-serif;

  --radius:      2px;
  --ease:        cubic-bezier(.22,.9,.32,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--wall);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
h1,h2{ font-family:var(--display); font-weight:500; margin:0; color:var(--canvas); }
p{ line-height:1.7; color:var(--ink-dim); }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
img{ max-width:100%; display:block; }

.section__num{
  font-family:var(--body); font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.9rem;
}
.section__head{ max-width:640px; margin:0 0 3rem; padding:0 6vw; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head h2{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.6rem; }

.btn{
  display:inline-block; padding:.9rem 1.9rem; font-family:var(--body); font-size:.9rem;
  letter-spacing:.03em; border-radius:var(--radius); border:1px solid transparent;
  cursor:pointer; transition:transform .35s var(--ease), background .3s, border-color .3s, color .3s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:var(--gold); color:var(--wall); font-weight:600; }
.btn--gold:hover{ background:#e6c458; }
.btn--ghost{ border-color:rgba(243,231,210,.35); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--outline{ border-color:var(--gold-deep); color:var(--gold); margin-top:.5rem; }
.btn--outline:hover{ background:var(--gold); color:var(--wall); }
.btn--wide{ width:100%; text-align:center; }

.brushline{ width:min(420px,70vw); height:20px; margin:1.1rem auto; display:block; }
.brushline path{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; }

/* ===================== ENQUIRY MODAL ===================== */
.enquiry{ position:fixed; inset:0; z-index:600; display:none; }
.enquiry.is-open{ display:block; }
.enquiry__backdrop{ position:absolute; inset:0; background:rgba(5,2,2,.88); backdrop-filter:blur(4px); }
.enquiry__panel{
  position:relative; z-index:1; max-width:460px; width:90vw; margin:8vh auto;
  background:var(--wall-3); border:1px solid rgba(212,175,55,.3); border-radius:8px;
  padding:2.4rem; box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
  max-height:84vh; overflow-y:auto;
}
.enquiry__close{
  position:absolute; top:.8rem; right:.9rem; width:34px; height:34px; border-radius:50%;
  background:rgba(21,6,7,.8); color:var(--ink); border:1px solid rgba(212,175,55,.3);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.enquiry__panel h3{ font-family:var(--display); font-size:1.5rem; margin-bottom:.3rem; }
.enquiry__painting{ color:var(--gold); font-size:.85rem; margin-bottom:1.4rem; }
#enquiryForm{ display:flex; flex-direction:column; gap:1rem; }
#enquiryForm label{ display:flex; flex-direction:column; gap:.4rem; font-size:.82rem; color:var(--ink-dim); }
#enquiryForm input, #enquiryForm textarea{
  font-family:var(--body); font-size:.95rem; padding:.7rem .85rem; background:rgba(0,0,0,.25);
  border:1px solid rgba(243,231,210,.18); border-radius:4px; color:var(--ink);
}
#enquiryForm input:focus, #enquiryForm textarea:focus{ border-color:var(--gold); }
.enquiry__note{ font-size:.74rem; color:var(--ink-dim); text-align:center; }
.enquiry__success p{ font-size:.98rem; line-height:1.7; color:var(--ink); }
.enquiry__success strong{ color:var(--gold); }

/* ===================== LOADER ===================== */
.loader{
  position:fixed; inset:0; z-index:1000; display:flex; pointer-events:auto;
}
.loader.is-done{ display:none; }
.loader__half{
  position:relative; width:50%; height:100%; background:var(--wall); display:flex; align-items:center; overflow:hidden;
}
.loader__half--left{ justify-content:flex-end; }
.loader__half--right{ justify-content:flex-start; }
.loader__half span{
  font-family:var(--display); font-style:italic; color:var(--canvas);
  font-size:clamp(2.6rem,9vw,7rem); white-space:nowrap; letter-spacing:-.01em;
  animation:loaderBlink 1.5s steps(1) 1;
}
@keyframes loaderBlink{
  0%, 18%, 22%, 38%, 42%, 100%{ opacity:1; }
  20%, 40%{ opacity:.12; }
}
.loader.is-tearing .loader__half--left{
  transform:translateX(-105%) rotate(-2.5deg); transition:transform .9s cubic-bezier(.65,0,.35,1);
}
.loader.is-tearing .loader__half--right{
  transform:translateX(105%) rotate(2.5deg); transition:transform .9s cubic-bezier(.65,0,.35,1);
}
@media (prefers-reduced-motion: reduce){
  .loader{ display:none; }
}

/* ===================== NAV ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 6vw; backdrop-filter:blur(8px);
  background:linear-gradient(to bottom, rgba(37,13,14,.9), rgba(37,13,14,0));
}
.nav__mark{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--canvas); }
.nav__logo{ width:34px; height:34px; border-radius:50%; }
.nav__links{ display:flex; gap:2.2rem; font-size:.85rem; letter-spacing:.03em; }
.nav__links a{ color:var(--ink-dim); transition:color .25s; }
.nav__links a:hover{ color:var(--gold); }
.nav__toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__toggle span{ width:22px; height:2px; background:var(--ink); }

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:6rem 6vw 3rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 34%, rgba(212,175,55,.12), transparent 70%),
    linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);
}
.hero__bg{
  position:absolute; inset:0; z-index:0; opacity:.16;
  background-size:cover; background-position:center;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 88%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.85), transparent 88%);
}
.hero__reveal{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center 32%;
  clip-path:circle(var(--r,0px) at var(--x,50%) var(--y,32%));
  transition:clip-path .22s cubic-bezier(.22,.9,.32,1), background-image .2s linear;
  animation:heroRevealDrift 10s ease-in-out infinite alternate;
}
@keyframes heroRevealDrift{
  0%{ background-position:center 28%; transform:scale(1.02); }
  100%{ background-position:center 38%; transform:scale(1.08); }
}
.hero__spotlight{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(circle 380px at var(--x,50%) var(--y,30%), rgba(212,175,55,.16), transparent 60%);
  transition:background .15s linear;
}
.eyebrow{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  position:relative; z-index:1;
}
.hero__title{
  font-size:clamp(3.4rem,13vw,8.5rem); line-height:.95; letter-spacing:-.01em;
  color:var(--canvas); position:relative; z-index:1; margin-top:.4rem;
}
.hero__title-it{ font-style:italic; color:var(--gold); }
.hero__sub{
  max-width:500px; margin:0 auto; position:relative; z-index:1; font-size:1.02rem;
}
.hero__cta{ display:flex; gap:1rem; margin-top:1.8rem; position:relative; z-index:1; flex-wrap:wrap; justify-content:center; }
.hero__scroll{
  position:absolute; bottom:2rem; font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--ink-dim); animation:bob 2.4s ease-in-out infinite; z-index:1;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(8px); opacity:1; } }

/* ===================== GALLERY — title card ===================== */
.gallery{ padding:0; min-height:78vh; display:flex; align-items:center; justify-content:center; }
.gallery__card{ text-align:center; padding:4rem 6vw; }
.gallery__title{
  font-size:clamp(3rem,9vw,6rem); font-style:italic; margin:.6rem 0 1rem; color:var(--canvas);
}
.gallery__sub{ font-size:1rem; margin-bottom:2.2rem; }
.gallery__enter{
  display:inline-flex; align-items:center; gap:.9rem; background:none; border:1px solid var(--gold-deep);
  color:var(--gold); font-family:var(--body); font-size:.95rem; letter-spacing:.06em; text-transform:uppercase;
  padding:1rem 1.8rem; border-radius:100px; cursor:pointer; transition:background .3s, transform .3s, border-color .3s;
}
.gallery__enter:hover{ background:rgba(212,175,55,.1); border-color:var(--gold); transform:translateY(-2px); }
.gallery__enter svg{ transition:transform .3s var(--ease); }
.gallery__enter:hover svg{ transform:translateX(6px); }

/* ===================== EXHIBITION — fullscreen black takeover ===================== */
.exhibit{
  position:fixed; inset:0; z-index:500; background:#000; display:none;
  flex-direction:column; align-items:center; justify-content:center;
}
.exhibit.is-open{ display:flex; }

.exhibit__body{
  width:100%; max-width:1500px; height:100%; display:grid; grid-template-columns:1.1fr 1fr;
  align-items:center; gap:4vw; padding:5vh 5vw;
}

.exhibit__stage{
  position:relative; height:78vh; perspective:2000px;
  display:flex; align-items:center; justify-content:center;
}
.exhibit__image{
  position:absolute; width:100%; height:100%; object-fit:contain;
  transition:transform .85s cubic-bezier(.65,0,.35,1), opacity .85s cubic-bezier(.65,0,.35,1);
  will-change:transform, opacity;
}

.exhibit__info{ color:#EDE6D8; max-width:480px; }
.exhibit__count{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1.4rem;
}
.exhibit__block{
  border:1px solid rgba(212,175,55,.4); border-radius:2px; padding:1.4rem 1.6rem; margin-bottom:1rem;
}
.exhibit__block--title h3{ font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--canvas); margin:0 0 .3rem; }
.exhibit__block--title p{ font-size:.82rem; color:var(--gold); letter-spacing:.03em; margin:0; }
.exhibit__block--desc p{ font-size:.95rem; line-height:1.75; color:#CBAA9C; margin:0; }
.exhibit__readmore{
  background:none; border:none; padding:.5rem 0 0; margin:0; display:block;
  font-family:var(--body); font-size:.8rem; letter-spacing:.04em; color:var(--gold);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; transition:color .2s;
}
.exhibit__readmore:hover{ color:var(--canvas); }

/* Read-more overlay: sits on top of the exhibition, painting dimmed behind it */
.exhibit__readmore-overlay{
  position:absolute; inset:0; z-index:20; display:none;
  align-items:center; justify-content:center; padding:6vh 6vw;
  background:rgba(0,0,0,.78);
}
.exhibit__readmore-overlay.is-open{ display:flex; }
.exhibit__readmore-panel{
  position:relative; width:100%; max-width:640px; max-height:80vh; overflow-y:auto;
  background:rgba(12,10,8,.94); border:1px solid rgba(212,175,55,.4); border-radius:2px;
  padding:2.6rem 2.4rem; color:#EDE6D8;
}
.exhibit__readmore-panel h3{ font-family:var(--display); font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--canvas); margin:0 0 .3rem; }
.exhibit__readmore-panel > p:first-of-type{ font-size:.82rem; color:var(--gold); letter-spacing:.03em; margin:0 0 1.3rem; }
#exhibitReadMoreDesc{ font-size:.98rem; line-height:1.8; color:#CBAA9C; margin:0; }
.exhibit__readmore-close{
  position:absolute; top:.9rem; right:1rem; width:36px; height:36px; border-radius:50%;
  background:none; border:1px solid rgba(212,175,55,.4); color:var(--gold);
  font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.exhibit__readmore-close:hover{ background:rgba(212,175,55,.12); }
.exhibit__facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1.6rem; }
.exhibit__fact{ border:1px solid rgba(212,175,55,.4); border-radius:2px; padding:.9rem .8rem; }
.exhibit__fact span{ display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.35rem; }
.exhibit__fact p{ font-size:.85rem; color:var(--canvas); margin:0; line-height:1.4; white-space:pre-line; }
.exhibit__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }

.exhibit__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:56px; height:56px; border-radius:50%; background:transparent; border:1px solid rgba(212,175,55,.4);
  color:var(--gold); font-size:2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .25s;
}
.exhibit__nav:hover{ background:rgba(212,175,55,.12); }
.exhibit__nav--prev{ left:2vw; }
.exhibit__nav--next{ right:2vw; }

.exhibit__exit{
  position:absolute; bottom:3vh; left:50%; transform:translateX(-50%);
  background:none; border:none; color:#CBAA9C; font-family:var(--body); font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:.6rem 1rem;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.exhibit__exit:hover{ color:var(--gold); border-color:var(--gold); }

@media (max-width:900px){
  .exhibit__body{ grid-template-columns:1fr; grid-template-rows:auto auto; gap:1.5rem; padding:4vh 6vw 8vh; overflow-y:auto; }
  .exhibit__stage{ height:44vh; }
  .exhibit__info{ max-width:none; }
  .exhibit__nav{ width:42px; height:42px; font-size:1.5rem; top:22vh; }
  .exhibit__nav--prev{ left:2vw; }
  .exhibit__nav--next{ right:2vw; }
}

/* ===================== ABOUT ===================== */
.about--full{ padding:6.5rem 6vw; background:var(--wall-2); }
.about__text--center{
  max-width:680px; margin-inline:auto; text-align:center;
}
.about__text--center p{ max-width:60ch; margin-inline:auto; }
.about__lede{
  font-family:var(--display); font-style:italic; font-size:1.5rem; line-height:1.5;
  color:var(--canvas); margin:.6rem 0 1.8rem;
}
.about__text--center .btn{ margin-top:.6rem; }

/* ===================== JOURNEY (education/experience/exhibitions) ===================== */
.journey{ padding:5rem 6vw; background:var(--wall); }
.journey__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:2.5rem; }
.journey__grid--single{ grid-template-columns:1fr; max-width:640px; margin-inline:auto; }
.journey__col h3{
  font-family:var(--display); font-size:1.2rem; color:var(--gold); margin:0 0 1rem; font-style:italic;
}
.journey__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; }
.journey__col li{ font-size:.88rem; color:var(--ink-dim); line-height:1.5; padding-left:1rem; position:relative; }
.journey__col li::before{ content:"—"; position:absolute; left:0; color:var(--gold-deep); }
.journey__col--emerald h3{ color:#5FA98E; }
.journey__col--emerald li::before{ color:var(--emerald); }

/* ===================== PRINTS / ORDER ===================== */
.prints{ padding:6rem 0; background:var(--wall-3); }
.order-card{
  max-width:640px; margin-inline:auto; padding:2.6rem;
  background:var(--indigo); border:1px solid rgba(212,175,55,.22); border-radius:6px;
  display:flex; flex-direction:column; gap:1.2rem;
}
.order-card__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.order-card label{ display:flex; flex-direction:column; gap:.45rem; font-size:.82rem; color:var(--ink-dim); letter-spacing:.02em; }
.order-card input, .order-card select, .order-card textarea{
  font-family:var(--body); font-size:.95rem; padding:.75rem .9rem; background:rgba(0,0,0,.2);
  border:1px solid rgba(243,231,210,.18); border-radius:4px; color:var(--ink);
}
.order-card input:focus, .order-card select:focus, .order-card textarea:focus{ border-color:var(--gold); }
.order-card__note{ font-size:.76rem; color:var(--ink-dim); text-align:center; }
.order-card__note-inline{
  font-size:.78rem; color:var(--gold); line-height:1.6; margin:.7rem 0 0;
  border-left:2px solid var(--gold-deep); padding-left:.8rem;
}
.order-card__price{
  border:1px solid rgba(212,175,55,.3); border-radius:4px; padding:1.1rem 1.4rem; text-align:center;
}
.order-card__price span{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.order-card__price p#printPriceValue{ font-family:var(--display); font-size:1.6rem; color:var(--canvas); margin:.3rem 0; }
.order-card__price-note{ font-size:.74rem; color:var(--ink-dim); margin:0; }
.order-card__hint{ font-weight:400; text-transform:none; letter-spacing:0; opacity:.75; }
.order-card__success{
  max-width:640px; margin-inline:auto; padding:2rem 2.6rem; text-align:center;
  background:var(--indigo); border:1px solid rgba(212,175,55,.22); border-radius:6px;
}
.order-card__success p{ color:var(--ink); font-size:.98rem; line-height:1.7; margin:0; }

/* ===================== CONNECT ===================== */
.connect{ padding:6rem 6vw; text-align:center; background:var(--wall); }
.connect__links{ display:flex; gap:2.2rem; flex-wrap:wrap; justify-content:center; margin-top:2rem; }
.connect__link{
  display:flex; align-items:center; gap:.6rem; font-size:.92rem; color:var(--ink-dim);
  border-bottom:1px solid transparent; padding-bottom:.2rem; transition:color .25s, border-color .25s;
}
.connect__link:hover{ color:var(--gold); border-color:var(--gold); }
.connect__icon{ color:var(--gold); font-size:1.05rem; }

.footer{ padding:2rem 6vw 3rem; text-align:center; font-size:.75rem; color:var(--ink-dim); opacity:.7; background:var(--wall); }

/* ===================== STACKING PANEL TRANSITIONS =====================
   Each major section is a "panel": pulled up over the one before it with
   a rounded top edge + lifted shadow, and slides/fades into place as it
   scrolls into view — reads as one sheet coming up over the last, on
   mouse-scroll, trackpad, or an upward swipe on mobile. */
.panel{
  position:relative;
  border-radius:32px 32px 0 0;
  box-shadow:0 -36px 70px -30px rgba(0,0,0,.55);
  opacity:0;
  transform:translateY(64px) scale(.986);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:transform, opacity;
}
.panel.is-visible{ opacity:1; transform:translateY(0) scale(1); }

.gallery.panel{ margin-top:-40px; z-index:2; background:var(--wall); }
.about--full.panel{ margin-top:-40px; z-index:3; }
.journey.panel{ margin-top:-40px; z-index:4; }
.prints.panel{ margin-top:-40px; z-index:5; }
.panel--final{ margin-top:-40px; z-index:6; }
.panel--final .connect{ border-radius:32px 32px 0 0; }
.panel--final .footer{ border-radius:0; }

@media (prefers-reduced-motion: reduce){
  .panel{ opacity:1; transform:none; transition:none; }
}
@media (max-width:680px){
  .panel{ border-radius:20px 20px 0 0; margin-top:-24px !important; box-shadow:0 -20px 40px -22px rgba(0,0,0,.5); }
}

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

/* ===================== RESPONSIVE ===================== */
@media (max-width:860px){
  .order-card__row{ grid-template-columns:1fr; }
  .journey__grid{ grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:680px){
  .nav__links{
    position:fixed; inset:0 0 auto auto; top:0; height:100svh; width:72vw; max-width:300px;
    background:var(--wall-2); flex-direction:column; padding:6rem 2rem 2rem; gap:1.6rem;
    transform:translateX(100%); transition:transform .35s var(--ease); font-size:1.05rem;
  }
  .nav__links.is-open{ transform:translateX(0); }
  .nav__toggle{ display:flex; z-index:110; }
}

/* Custom print size field shown when "Other" is selected */
#printSizeCustom{
  width:100%;
}
#printSizeCustom[hidden]{
  display:none;
}