/* ============================================================
   KANISHK ART GALLERY — theme layer (loads after styles.css)
   Palette: espresso ink · ochre gold · terracotta · ivory canvas
   Token names (--navy/--gold) are kept so all existing page CSS re-themes.
   ============================================================ */
:root{
  --navy:#2A1E17;        /* espresso — primary ink */
  --navy-deep:#1A120D;
  --gold:#C58B3C;        /* ochre */
  --gold-soft:#E8C99A;
  --terra:#B5532E;       /* terracotta accent */
  --sage:#6F8A6A;
  --cream:#FBF7F1;       /* canvas */
  --cream-2:#F2EADF;
  --ink:#231A14;
  --muted:#75685C;
  --line:#E7DCCD;
  --shadow:0 18px 40px rgba(42,30,23,.12);
  --serif:"Cormorant Garamond",Georgia,serif;
}
body{background:var(--cream)}
.eyebrow--gold{color:var(--terra)}
.btn--gold{color:#fff;box-shadow:0 8px 20px rgba(197,139,60,.3)}
.btn--gold:hover{background:#b07a30}
.hero__cta:hover{background:var(--navy-deep)}
.page-banner{background:linear-gradient(135deg,var(--navy) 0%,#3b2a1f 60%,var(--terra) 140%)}

/* ---------- Brand (header + footer) ---------- */
.brand{display:flex;align-items:center;gap:12px}
.brand .brand__logo,.brand__logo{width:46px!important;height:46px;border-radius:50%}
.brand__text{display:block!important}
.brand__text strong{font-family:var(--serif);font-size:24px;letter-spacing:.2em;color:var(--navy);line-height:1}
.brand__text small{display:block;font-size:10px;letter-spacing:.42em;color:var(--terra);margin-top:4px}
.nav a.is-active{color:var(--terra)}
.nav a.is-active::after{width:100%}
.footer__brandmark{display:flex;align-items:center;gap:12px;margin-bottom:16px;color:#fff}
.footer__brand .footer__logo{width:48px!important;height:48px;margin:0}
.footer__brandmark strong{display:block;font-family:var(--serif);font-size:22px;letter-spacing:.2em;line-height:1}
.footer__brandmark small{display:block;font-size:9.5px;letter-spacing:.42em;color:var(--gold-soft);margin-top:4px}
.footer__col span{line-height:1.6}
@media (max-width:760px){
  .brand__text strong{font-size:19px}
  .brand__text small{font-size:8.5px;letter-spacing:.32em}
  .brand .brand__logo{width:38px!important;height:38px}
  .footer__brandmark{justify-content:center}
}

/* ---------- Painted canvases (no photos needed) ---------- */
.canvas{position:relative;overflow:hidden;background:#e9dccb}
.canvas::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px);pointer-events:none}
.canvas--sunset{background:
  radial-gradient(circle at 70% 38%,#F4C06A 0 11%,transparent 12%),
  linear-gradient(180deg,#E9895A 0%,#D9623F 38%,#7B3B35 60%,#3B2A2E 61%,#2A1E17 100%)}
.canvas--abstract{background:
  radial-gradient(circle at 25% 30%,#B5532E 0 22%,transparent 23%),
  radial-gradient(circle at 72% 64%,#C58B3C 0 26%,transparent 27%),
  linear-gradient(120deg,transparent 45%,#2A1E17 45% 49%,transparent 49%),
  #EFE4D3}
.canvas--lotus{background:
  radial-gradient(ellipse 18% 30% at 50% 55%,#E7A3A0 0 98%,transparent 100%),
  radial-gradient(ellipse 30% 16% at 38% 62%,#D98580 0 98%,transparent 100%),
  radial-gradient(ellipse 30% 16% at 62% 62%,#D98580 0 98%,transparent 100%),
  linear-gradient(180deg,#2F4B52 0%,#1D3439 100%)}
.canvas--portrait{background:
  radial-gradient(ellipse 20% 25% at 50% 40%,#D9B08C 0 97%,transparent 100%),
  radial-gradient(ellipse 36% 30% at 50% 100%,#3A2A22 0 97%,transparent 100%),
  linear-gradient(160deg,#C9C0B0,#9C8F7C)}
.canvas--sketch{background:
  repeating-linear-gradient(-30deg,rgba(40,30,25,.18) 0 1px,transparent 1px 7px),
  radial-gradient(circle at 50% 45%,transparent 0 26%,rgba(40,30,25,.5) 27%,transparent 28%),
  #F6F1E8}
.canvas--hills{background:
  radial-gradient(ellipse 70% 40% at 20% 100%,#4E6B4A 0 98%,transparent 100%),
  radial-gradient(ellipse 70% 45% at 85% 100%,#6F8A6A 0 98%,transparent 100%),
  radial-gradient(circle at 78% 26%,#FFF3D6 0 7%,transparent 8%),
  linear-gradient(180deg,#A9C4C8,#E6D8BD)}

/* ---------- Home hero ---------- */
.g-hero{position:relative;background:var(--cream);padding:64px 0 72px;overflow:hidden}
.g-hero::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(197,139,60,.18),transparent 65%)}
.g-hero__inner{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.g-hero h1{font-size:clamp(40px,5.6vw,76px);font-weight:500;line-height:1.02;margin-bottom:20px}
.g-hero h1 em{font-style:italic;color:var(--terra)}
.g-hero__text{max-width:460px;color:var(--muted);font-size:16px;margin-bottom:28px}
.g-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
.g-hero__stats{display:flex;gap:36px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.g-hero__stats strong{display:block;font-family:var(--serif);font-size:32px;color:var(--navy);line-height:1}
.g-hero__stats span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.g-wall{position:relative;height:520px}
.g-frame{position:absolute;padding:12px;background:#fff;box-shadow:0 24px 50px rgba(42,30,23,.22);border:1px solid #efe6d8}
.g-frame .canvas{width:100%;height:100%}
.g-frame--a{left:4%;top:0;width:52%;height:62%;transform:rotate(-2deg)}
.g-frame--b{right:0;top:12%;width:42%;height:48%;transform:rotate(2.5deg);background:#2A1E17;border-color:#2A1E17}
.g-frame--c{left:26%;bottom:0;width:48%;height:40%;transform:rotate(1deg)}
.g-frame__tag{position:absolute;right:-10px;bottom:-14px;background:var(--gold);color:#fff;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;font-weight:600}

/* ---------- Categories ---------- */
.g-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g-cat{display:block;background:#fff;border:1px solid var(--line);padding:12px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.g-cat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.g-cat .canvas{aspect-ratio:4/3}
.g-cat h3{font-size:24px;margin:14px 4px 2px}
.g-cat p{font-size:13.5px;color:var(--muted);margin:0 4px 6px}

/* ---------- Process ---------- */
.g-process{background:var(--navy);color:rgba(255,255,255,.75);padding-block:80px}
.g-process h2{color:#fff}
.g-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;counter-reset:s}
.g-steps li{border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.g-steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:42px;color:var(--gold);display:block;line-height:1;margin-bottom:12px}
.g-steps h4{color:#fff;font-size:21px;margin-bottom:6px}
.g-steps p{font-size:14px}

/* ---------- Artist / about split ---------- */
.g-about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.g-about__art{padding:14px;background:#fff;box-shadow:var(--shadow)}
.g-about__art .canvas{aspect-ratio:4/5}
.g-about p{color:var(--muted);margin-bottom:16px}
.g-about__list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:22px 0 28px}
.g-about__list li{font-size:14px;color:var(--navy);display:flex;gap:8px}
.g-about__list li::before{content:"✦";color:var(--gold)}

/* ---------- Visit strip ---------- */
.g-visit{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g-visit__card{background:#fff;border:1px solid var(--line);padding:26px}
.g-visit__card h4{font-size:20px;margin-bottom:6px}
.g-visit__card p,.g-visit__card a{font-size:14.5px;color:var(--muted)}
.g-visit__card a:hover{color:var(--terra)}

.quiz-box .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.quiz-box .chip.is-active,.quiz-box .chip:hover{background:var(--gold);border-color:var(--gold);color:#fff}

@media (max-width:960px){
  .g-hero__inner,.g-about{grid-template-columns:1fr;gap:40px}
  .g-wall{height:420px}
  .g-steps{grid-template-columns:repeat(2,1fr)}
  .g-cats,.g-visit{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .g-hero{padding:40px 0 56px}
  .g-hero__stats{gap:22px}
  .g-hero__stats strong{font-size:26px}
  .g-wall{height:340px}
  .g-cats,.g-visit,.g-steps,.g-about__list{grid-template-columns:1fr}
}

/* ---------- Collections slider (single row) ---------- */
.g-slider{position:relative}
.g-slider .g-cats{display:flex;grid-template-columns:none;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 14px}
.g-slider .g-cats::-webkit-scrollbar{display:none}
.g-slider .g-cat{flex:0 0 calc((100% - 66px)/4);scroll-snap-align:start;min-width:0}
.g-cat__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.g-cat__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.g-cat:hover .g-cat__img img{transform:scale(1.05)}
.g-slider__nav{position:absolute;top:38%;z-index:2;width:42px;height:42px;border-radius:50%;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);color:var(--navy);font-size:24px;line-height:1;display:grid;place-items:center}
.g-slider__nav:hover{background:var(--navy);color:#fff}
.g-slider__nav--prev{left:-18px}
.g-slider__nav--next{right:-18px}
@media (max-width:960px){ .g-slider .g-cat{flex-basis:calc((100% - 22px)/2.3)} }
@media (max-width:600px){
  .g-slider .g-cat{flex-basis:78%}
  .g-slider__nav{width:36px;height:36px;font-size:20px}
  .g-slider__nav--prev{left:-6px}.g-slider__nav--next{right:-6px}
}
.g-cat--skel{aspect-ratio:4/3.9;background:linear-gradient(90deg,var(--cream-2),#fff,var(--cream-2));background-size:200% 100%;animation:gskel 1.4s infinite;border:0}
@keyframes gskel{to{background-position:-200% 0}}
.g-cat__img--empty{display:grid;place-items:center;font-family:var(--serif);font-size:56px;color:var(--gold)}