/* ==========================================================================
   INDIGOFERA — v2
   Design system per brand guidelines:
   Minimal · Editorial · Timeless · Curated · Premium yet warm.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ivory:#F8F6F2;
  --ivory-deep:#EFEBE3;
  --indigo:#1F355D;
  --indigo-deep:#152744;
  --indigo-night:#0E1B31;
  --charcoal:#5B5B5B;
  --terracotta:#B36A4C;
  --terracotta-soft:#C98567;
  --line:rgba(31,53,93,.16);
  --line-light:rgba(248,246,242,.22);

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* curatorial micro-labels — see "Editorial micro-labels" at the end of this file */
  --label:"Cormorant Garamond",Georgia,serif;

  --maxw:1400px;
  --gutter:clamp(20px,5vw,72px);
  --section:clamp(64px,9vw,140px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--indigo);font-weight:500;line-height:1.08;margin:0;text-wrap:balance}
h1{font-size:clamp(2.8rem,6.4vw,5.6rem);letter-spacing:.005em}
h2{font-size:clamp(2rem,3.8vw,3.4rem)}
h3{font-size:clamp(1.5rem,2.4vw,2.1rem)}
h4{font-size:1.35rem}
p{margin:0 0 1.2em}
/* Headings carry margin:0 and paragraphs have no top margin, so a paragraph
   placed straight after a heading sat hard against its descenders — visible
   on the home intro and CTA, the artists columns, and every .split body.
   Components that already set their own spacing (.shead p, .pagehero p,
   .chapter__line) out-rank this on specificity and are unaffected. */
h1 + p,h2 + p,h3 + p,h4 + p{margin-top:1.15rem}
h1 + .lead,h2 + .lead{margin-top:1.35rem}
.lead{font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.7;color:var(--indigo);font-weight:350}

.eyebrow{
  font-family:var(--label);font-size:.92rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);
  margin:0 0 1.2rem;display:inline-block;
}
.eyebrow--light{color:var(--terracotta-soft)}
.rule{width:46px;height:1px;background:var(--terracotta);border:0;margin:1.4rem 0}
.rule--center{margin-inline:auto}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.center{text-align:center}
.measure{max-width:62ch}
.measure--center{max-width:60ch;margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.95em 1.9em;border:1px solid var(--indigo);
  background:var(--indigo);color:var(--ivory);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  cursor:pointer;
}
.btn:hover{background:transparent;color:var(--indigo)}
.btn--ghost{background:transparent;color:var(--indigo)}
.btn--ghost:hover{background:var(--indigo);color:var(--ivory)}
.btn--light{border-color:var(--ivory);background:transparent;color:var(--ivory)}
.btn--light:hover{background:var(--ivory);color:var(--indigo)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.textlink{
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--indigo);display:inline-flex;align-items:center;gap:.6em;
  padding-bottom:.35em;border-bottom:1px solid var(--line);
  transition:gap .35s var(--ease),border-color .35s var(--ease);
}
.textlink:hover{gap:1em;border-color:var(--terracotta)}
.textlink--light{color:var(--ivory);border-color:var(--line-light)}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transform:translateY(0);
  opacity:1;
  /* blur(0) rather than no backdrop-filter at all: the browser cannot
     interpolate from `none`, so declaring it here lets .is-solid fade its
     blur in instead of snapping to it */
  backdrop-filter:saturate(1) blur(0px);
  /* transform and opacity must live here, not on .is-hidden — a transition
     declared on the class being removed cannot animate the way back */
  transition:transform .55s var(--ease),
             opacity .3s var(--ease),
             background .4s var(--ease),
             backdrop-filter .4s var(--ease),
             padding .4s var(--ease),
             box-shadow .4s var(--ease);
  will-change:transform;
}
.header__brand{display:flex;align-items:center;gap:14px}
.header__brand img{height:34px;width:auto}
.header__word{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;
  letter-spacing:.22em;color:var(--indigo);line-height:1;
}
.header__nav{display:flex;align-items:center;gap:clamp(20px,2.4vw,42px)}
.header__nav a{
  font-size:.74rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--indigo);position:relative;padding:4px 0;transition:color .3s;
}
.header__nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--terracotta);transition:width .35s var(--ease);
}
.header__nav a:hover::after,.header__nav a[aria-current]::after{width:100%}
.header__nav a[aria-current]{color:var(--terracotta)}
/* nav CTA button */
.header__cta{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.62em 1.25em!important;border:1px solid var(--indigo);background:var(--indigo);color:var(--ivory)!important;
  transition:background .3s var(--ease),color .3s var(--ease)}
.header__cta::after{display:none!important}
.header__cta:hover{background:transparent;color:var(--indigo)!important}
.header--over .header__cta{border-color:var(--ivory);background:var(--ivory);color:var(--indigo)!important}
.header--over .header__cta:hover{background:transparent;color:var(--ivory)!important}

/* dark hero variant (before scroll) */
.header--over .header__word{color:var(--ivory)}
.header--over .header__nav a{color:var(--ivory)}
.header--over .header__nav a[aria-current]{color:var(--terracotta-soft)}
.header--over .burger span{background:var(--ivory)}

/* scrolled / solid */
.header.is-solid{
  background:rgba(248,246,242,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding-block:14px;
}
.header.is-solid .header__word,.header.is-solid .header__nav a{color:var(--indigo)}
.header.is-solid .header__nav a[aria-current]{color:var(--terracotta)}
.header.is-solid .burger span{background:var(--indigo)}
.header.is-solid .header__brand .logo-ivory{display:none}
.header.is-solid .header__brand .logo-indigo{display:block}
.header__brand .logo-indigo{display:none}
.header--over .header__brand .logo-indigo{display:none}
.header--over .header__brand .logo-ivory{display:block}
.header:not(.header--over):not(.is-solid) .logo-ivory{display:none}
.header:not(.header--over):not(.is-solid) .logo-indigo{display:block}

/* End state only — the transition itself lives on .header so it plays both
   ways. It also parks at the solid padding: the header is invisible here, and
   holding the height constant stops translateY(-100%) from being a moving
   target while the padding animates during the reveal. */
.header.is-hidden{transform:translateY(-100%);opacity:0;pointer-events:none;padding-block:14px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.6px;background:var(--indigo);transition:.3s var(--ease)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;background:var(--indigo-night);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease);
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--serif);font-size:2rem;color:var(--ivory);
  letter-spacing:.04em;padding:.3em;
}
.drawer a:hover{color:var(--terracotta-soft)}
.drawer__close{position:absolute;top:24px;right:var(--gutter);background:none;border:0;color:var(--ivory);font-size:2rem;cursor:pointer;line-height:1}

/* ==========================================================================
   HERO — immersive collage (home)
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;height:100svh;
  background:var(--indigo-night);
  color:var(--ivory);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__tile{
  position:absolute;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:scale(1.04);
  transition:opacity 1.3s var(--ease),transform 1.6s var(--ease);
}
.hero.ready .hero__tile{opacity:1;transform:scale(1)}
.hero__tile img{width:100%;height:100%;object-fit:cover;filter:saturate(1.03)}
/* indigo wash — dark left (for headline), collage visible centre */
.hero__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(14,27,49,.93) 0%, rgba(14,27,49,.62) 28%, rgba(14,27,49,.34) 48%, rgba(14,27,49,.5) 66%, rgba(14,27,49,.24) 100%),
    linear-gradient(to bottom, rgba(14,27,49,.66) 0%, rgba(14,27,49,0) 16%),
    radial-gradient(90% 80% at 40% 70%, rgba(179,106,76,.20), transparent 60%);
}
.hero__grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.6) .5px,transparent .5px);background-size:3px 3px}

/* ---- top bar: 2-row hairline table (mirrors the reference) ---- */
.hero__bar{position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:stretch;padding:16px var(--gutter) 0;
  opacity:0;transform:translateY(-10px);transition:opacity 1s var(--ease) .2s,transform 1s var(--ease) .2s}
.hero.ready .hero__bar{opacity:1;transform:none}
.hbar__cell{display:flex;flex-direction:column;text-decoration:none;transition:background .3s}
.hbar__cell + .hbar__cell{border-left:1px solid var(--line-light)}
.hbar__t{display:flex;align-items:center;height:34px;padding:0 clamp(16px,1.5vw,28px);
  border-bottom:1px solid var(--line-light);
  font-size:.56rem;font-weight:500;letter-spacing:.22em;color:rgba(248,246,242,.42)}
.hbar__b{display:flex;align-items:center;height:46px;padding:0 clamp(16px,1.5vw,28px);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,246,242,.82);white-space:nowrap;transition:color .3s}
.hbar__brand{padding-right:8px}
.hbar__brand .hbar__t{padding-left:0}
.hbar__brand .hbar__b{padding-left:0}
.hbar__word{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:.22em;color:var(--ivory);line-height:1}
.hbar__sub{gap:.4em}
a.hbar__cell:hover{background:rgba(248,246,242,.045)}
a.hbar__cell:hover .hbar__b,.hbar__sub:hover{color:var(--ivory)}
.hbar__cell.is-active .hbar__b{color:var(--terracotta-soft)}
.hbar__cell.is-active .hbar__t{color:var(--terracotta)}
.hbar__burger{display:none;flex-direction:column;justify-content:center;gap:6px;margin-left:auto;
  border:0;border-left:1px solid var(--line-light);background:none;padding:0 4px 0 clamp(24px,2vw,36px);cursor:pointer}
.hbar__burger span{width:28px;height:1.5px;background:var(--ivory);display:block;transition:.3s}
.hbar__burger:hover span{background:var(--terracotta-soft)}
/* inline page nav in the hero bar (hairline cells, mirrors the reference styling) */
.hbar__nav{display:flex;align-items:stretch;margin-left:auto}
.hbar__link{display:flex;align-items:center;padding:0 clamp(13px,1.3vw,24px);
  border-left:1px solid var(--line-light);
  font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(248,246,242,.82);white-space:nowrap;transition:color .3s,background .3s}
.hbar__link:hover,.hbar__link:focus-visible{color:var(--ivory);background:rgba(248,246,242,.05)}
.hbar__link.is-active{color:var(--terracotta-soft)}
.hbar__cta{border-left:0;margin-left:12px;background:var(--terracotta-soft);color:var(--indigo-night);
  padding-inline:20px;font-weight:600}
.hbar__cta:hover,.hbar__cta:focus-visible{background:var(--ivory);color:var(--indigo-night)}

/* ---- stage ---- */
.hero__stage{position:absolute;inset:96px 0 0 0;z-index:5}

.hero__left{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:16;max-width:54%}
.hero__label{font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--terracotta-soft);display:block;margin-bottom:1.3rem;max-width:26ch}
.hero__title{font-family:var(--serif);color:var(--ivory);font-weight:500;line-height:.9;
  font-size:clamp(3rem,7vw,6.8rem);letter-spacing:.005em;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.hero__title em{font-style:italic;color:var(--terracotta-soft)}

/* ---- carousel (all art-form works, white background, drag / click-to-open) ---- */
.carousel-section{background:#fff;overflow:hidden}
.carousel{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;overflow-y:hidden;
  padding:4px var(--gutter) 20px;scroll-snap-type:x proximity;cursor:grab;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.carousel:active{cursor:grabbing}
.carousel img{height:clamp(260px,40vh,440px);width:auto;flex:0 0 auto;display:block;
  background:var(--ivory-deep);scroll-snap-align:center;user-select:none;-webkit-user-drag:none}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.carousel::-webkit-scrollbar-track{background:transparent}

/* ---- right cream panel ---- */
.hero__panel{position:absolute;top:96px;right:0;bottom:0;width:min(35%,540px);z-index:8;
  background:var(--ivory);color:var(--charcoal);overflow:hidden;
  padding:clamp(40px,7vh,84px) clamp(30px,3vw,54px) clamp(40px,6vh,72px);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateX(30px);transition:opacity 1.1s var(--ease) .1s,transform 1.1s var(--ease) .1s}
.hero.ready .hero__panel{opacity:1;transform:none}
/* The watermark used to start at the panel's top padding — exactly where the
   "Folk & Tribal Art of India" label sits — so the two ran through each other
   at every viewport from 1280 to 1920. The panel puts its label at the top and
   its paragraph at the bottom, so the watermark belongs in the gap between. */
.hero__ghost{position:absolute;left:clamp(30px,3vw,54px);right:0;top:50%;transform:translateY(-50%);z-index:0;
  font-family:var(--serif);font-weight:600;text-transform:uppercase;line-height:.86;letter-spacing:.01em;
  font-size:clamp(2.8rem,4.2vw,4.8rem);color:rgba(31,53,93,.07);pointer-events:none}
.hero__plabel{position:relative;z-index:1;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--indigo);line-height:1.7;max-width:16ch}
.hero__ptext{position:relative;z-index:1;font-size:clamp(1.15rem,1.5vw,1.55rem);line-height:1.4;color:var(--indigo);font-weight:400;margin:0 0 1.4rem}
.hero__panel .textlink{position:relative;z-index:1}

/* ==========================================================================
   GENERIC PAGE HERO (inner pages)
   ========================================================================== */
.pagehero{padding-top:calc(96px + var(--section));padding-bottom:var(--section);background:var(--ivory)}
.pagehero .eyebrow{margin-bottom:1.4rem}
.pagehero h1{max-width:16ch}
.pagehero p{max-width:56ch;margin-top:1.6rem}
.pagehero--art{background:var(--ivory-deep)}

/* ==========================================================================
   REUSABLE SECTION HEADER
   ========================================================================== */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(32px,4vw,60px)}
.shead__t{max-width:34ch}
.shead p{margin:1rem 0 0;max-width:46ch}

/* ==========================================================================
   FEATURED ART FORMS — grid
   ========================================================================== */
.forms{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,26px)}
.formcard{position:relative;overflow:hidden;background:var(--indigo);color:var(--ivory);display:block;min-height:380px}
.formcard:nth-child(1){grid-column:span 7}
.formcard:nth-child(2){grid-column:span 5}
.formcard:nth-child(3){grid-column:span 5}
.formcard:nth-child(4){grid-column:span 4}
.formcard:nth-child(5){grid-column:span 3}
.formcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s;filter:saturate(1.04)}
.formcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,27,49,.85) 0%,rgba(14,27,49,.15) 55%,rgba(14,27,49,.05) 100%);transition:opacity .5s}
.formcard:hover img{transform:scale(1.06)}
.formcard__t{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,2vw,32px)}
.formcard__t .n{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.4rem);color:var(--ivory);line-height:1;display:block}
.formcard__t .d{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta-soft);margin-top:.6rem;display:block}

/* ==========================================================================
   SPLIT / EDITORIAL BLOCKS
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,88px);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media--tall img{aspect-ratio:3/4}
.split__media .tag{position:absolute;left:0;bottom:0;background:var(--ivory);color:var(--indigo);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:.7em 1.2em;font-weight:600}
.split__body .eyebrow{margin-bottom:1rem}
.metaline{display:flex;flex-wrap:wrap;gap:8px 26px;margin:1.6rem 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.metaline div{min-width:110px}
.metaline dt{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:3px}
.metaline dd{margin:0;font-size:.92rem;color:var(--indigo)}

/* small representative-works strip */
.strip{display:flex;gap:12px;margin-top:1.8rem;overflow-x:auto;padding-bottom:6px}
.strip img{height:120px;width:auto;aspect-ratio:auto;flex:0 0 auto;object-fit:cover}

/* ==========================================================================
   GALLERY GRID + FILTERS + LIGHTBOX
   ========================================================================== */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3.5vw,48px)}
.filters button{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.7em 1.35em;border:1px solid var(--line);background:transparent;color:var(--indigo);
  cursor:pointer;transition:.3s var(--ease);
}
.filters button:hover{border-color:var(--indigo)}
.filters button[aria-pressed="true"]{background:var(--indigo);color:var(--ivory);border-color:var(--indigo)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
@media(max-width:1100px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gitem{position:relative;cursor:pointer;background:var(--ivory-deep);overflow:hidden;
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:clamp(10px,1vw,18px);margin:0}
.gitem img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--ease)}
.gitem:hover img{transform:scale(1.04)}
.gitem__cap{position:absolute;inset:auto 0 0 0;padding:14px 16px;
  background:linear-gradient(to top,rgba(14,27,49,.9),transparent);
  opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.gitem:hover .gitem__cap{opacity:1;transform:none}
/* Both spans must be block: left inline they run together into a single flow
   ("Pattachitra — No. 01PATTACHITRA · ODISHA") that wraps mid-title and lands
   the stray "01" on top of the tradition label. The carousel caption already
   sets display:block for the same reason. */
.gitem__cap .f{display:block;font-family:var(--serif);color:var(--ivory);font-size:1.15rem;line-height:1.1}
.gitem__cap .m{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta-soft);margin-top:2px}

.lightbox{position:fixed;inset:0;z-index:90;background:rgba(14,27,49,.94);
  display:flex;align-items:center;justify-content:center;padding:5vh 6vw;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease)}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__stage{max-width:1100px;width:100%;display:grid;grid-template-columns:1.4fr .6fr;gap:0;
  background:var(--indigo-night);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lightbox__img{background:#0a1424;display:flex;align-items:center;justify-content:center;min-height:200px}
.lightbox__img img{max-height:80vh;width:auto;object-fit:contain}
.lightbox__meta{padding:clamp(28px,3vw,48px);color:var(--ivory);align-self:center}
.lightbox__meta .f{font-family:var(--serif);font-size:2rem;color:var(--ivory);line-height:1.1;margin-bottom:.4rem}
.lightbox__meta .form{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--terracotta-soft);margin-bottom:1.6rem}
.lightbox__meta dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;margin:0 0 2rem;font-size:.9rem}
.lightbox__meta dt{color:rgba(248,246,242,.55);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.lightbox__meta dd{margin:0;color:var(--ivory)}
.lightbox__close{position:absolute;top:22px;right:5vw;background:none;border:0;color:var(--ivory);font-size:2rem;cursor:pointer;line-height:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:rgba(248,246,242,.7);font-size:2.4rem;cursor:pointer;padding:20px}
.lightbox__nav:hover{color:var(--ivory)}
.lightbox__nav.prev{left:1vw}.lightbox__nav.next{right:1vw}
.lightbox__count{position:absolute;top:26px;left:6vw;z-index:2;color:rgba(248,246,242,.7);font-size:.72rem;font-weight:500;letter-spacing:.2em}
/* photo mode (no artwork metadata): float the image full, no side panel */
.lightbox.no-meta .lightbox__stage{grid-template-columns:1fr;max-width:min(94vw,1300px);background:transparent;box-shadow:none}
.lightbox.no-meta .lightbox__meta{display:none}
.lightbox.no-meta .lightbox__img{background:transparent}
.lightbox.no-meta .lightbox__img img{max-height:86vh}

/* ==========================================================================
   EXHIBITIONS
   ========================================================================== */
.exb{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.exb__media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.exb__status{display:inline-flex;align-items:center;gap:.6em;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}
.exb__status .dot{width:7px;height:7px;border-radius:50%;background:var(--terracotta)}
.exb__status.is-live .dot{background:#3f9b6b;box-shadow:0 0 0 0 rgba(63,155,107,.5);animation:pulse 2s infinite}
.exb__status.is-live{color:#3f9b6b}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,155,107,.5)}70%{box-shadow:0 0 0 8px rgba(63,155,107,0)}100%{box-shadow:0 0 0 0 rgba(63,155,107,0)}}

.exgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px)}
.exgrid figure{position:relative;overflow:hidden;margin:0}
.exgrid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}

.pastlist{border-top:1px solid var(--line)}
.pastrow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;
  padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}
.pastrow:hover{padding-left:14px}
.pastrow h3{color:var(--indigo)}
.pastrow .yr{font-family:var(--serif);font-size:1.4rem;color:var(--terracotta)}
.pastrow .meta{grid-column:1/-1;color:var(--charcoal);font-size:.95rem;margin-top:.3rem}

/* press */
.press{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}
.press blockquote{margin:0;font-family:var(--serif);font-size:1.4rem;line-height:1.35;color:var(--indigo);font-style:italic}
.press cite{display:block;margin-top:1rem;font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}

/* ==========================================================================
   BRAND PILLARS
   ========================================================================== */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,40px)}
.pillar{text-align:center}
.pillar .ic{width:84px;height:84px;margin:0 auto 1.4rem;color:var(--indigo)}
.pillar .ic svg{width:100%;height:100%;stroke:var(--indigo);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pillar h4{font-size:1.2rem;margin-bottom:.9rem}
.pillar .rule{margin:.9rem auto}
.pillar p{font-size:.92rem;line-height:1.6}
.pillars--dark .pillar h4{color:var(--ivory)}
.pillars--dark .pillar p{color:rgba(248,246,242,.72)}
.pillars--dark .pillar .ic svg{stroke:var(--terracotta-soft)}

/* ==========================================================================
   QUOTE / MISSION band
   ========================================================================== */
.band{background:var(--indigo);color:var(--ivory)}
.band h2{color:var(--ivory)}
.band .lead{color:rgba(248,246,242,.85)}
.band--night{background:var(--indigo-night)}
.quote{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.32;
  color:var(--ivory);font-weight:400;max-width:22ch;margin:0 auto;text-align:center}
.quote em{color:var(--terracotta-soft);font-style:italic}

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.founders{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.founders__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%}
.names{display:flex;gap:36px;margin-top:1.6rem;flex-wrap:wrap}
.names .nm{font-family:var(--serif);font-size:1.5rem;color:var(--indigo)}
.names .nm span{display:block;font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-top:.2rem}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px)}
.field{margin-bottom:1.6rem}
.field label{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.6rem;font-weight:600}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:1rem;color:var(--indigo);padding:.6em 0;transition:border-color .3s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--terracotta)}
.field textarea{resize:vertical;min-height:120px}
.cinfo dl{margin:0}
.cinfo dt{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);margin-bottom:.4rem;font-weight:600}
.cinfo dd{margin:0 0 1.8rem;font-size:1.05rem;color:var(--indigo)}
.cinfo dd a:hover{color:var(--terracotta)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--indigo-night);color:rgba(248,246,242,.75);padding-block:clamp(56px,7vw,96px) 40px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-light)}
.footer__brand img{height:52px;margin-bottom:20px}
.footer__brand p{max-width:38ch;font-size:.95rem;color:rgba(248,246,242,.7)}
.footer h5{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta-soft);margin:0 0 1.2rem;font-weight:600}
.footer__col a{display:block;padding:.35em 0;color:rgba(248,246,242,.78);font-size:.95rem;transition:color .3s}
.footer__col a:hover{color:var(--ivory)}
.footer__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:28px;font-size:.78rem;color:rgba(248,246,242,.5)}
.footer__bot a:hover{color:var(--ivory)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}
.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}
.reveal[data-d="4"]{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  .reveal,.hero__tile,.hero__bar,.hero__panel{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* hero mobile: drop the absolute video composition, stack cleanly */
@media(max-width:900px){
  .hero{height:auto;min-height:100svh}
  .hbar__nav{display:none}
  .hbar__burger{display:flex}
  .hero__bar{min-height:74px}
  .hero__stage{position:relative;inset:auto;min-height:calc(100svh - 128px);
    padding:clamp(122px,17vh,156px) var(--gutter) 48px;display:flex;flex-direction:column;justify-content:flex-start}
  .hero__left{position:relative;left:auto;top:auto;transform:none;max-width:none}
  .hero__badge,.hero__ghost{display:none}
  .hero__panel{position:relative;top:auto;right:auto;bottom:auto;width:auto;
    margin-top:2.4rem;padding:30px 26px;opacity:1;transform:none;
    box-shadow:0 24px 60px rgba(0,0,0,.4)}
}
/* A phone on its side is only 320–430px tall, and the stacked hero above is
   tuned for portrait: 122px of top padding under a two-line display title put
   the "Explore the art forms" button below the fold on a 568x320 iPhone SE.
   When height is the scarce axis, tighten the vertical rhythm instead. */
@media(max-width:900px) and (max-height:450px){
  .hero__stage{padding-top:86px;padding-bottom:28px}
  .hero__title{font-size:clamp(2rem,8vw,2.9rem)}
  .hero__label{margin-bottom:.7rem;line-height:1.35}
  .hero__left .btn{margin-top:1.2rem}
}
@media(max-width:960px){
  .header__nav{display:none}
  .burger{display:flex}
  .split,.founders,.contact,.exb{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .founders__img{max-width:440px}
  .forms{grid-template-columns:1fr 1fr}
  .formcard:nth-child(n){grid-column:span 1}
  .formcard:first-child{grid-column:1/-1}
  .pillars{grid-template-columns:1fr 1fr}
  .press{grid-template-columns:1fr}
  .exgrid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .lightbox__stage{grid-template-columns:1fr}
  .lightbox__meta{display:none}
  .shead{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16px}
  .header{padding-inline:20px}
  .header__word{font-size:1.15rem;letter-spacing:.12em}
  .header__brand img{height:28px}
  .hero__bar{padding-inline:20px}
  .hbar__word{font-size:1.2rem;letter-spacing:.16em}
  .hbar__burger{padding-left:20px}
  .hero__title{font-size:clamp(2.9rem,15vw,4.6rem)}
  .forms{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:flex-start}
}

/* ==========================================================================
   EDITORIAL MICRO-LABELS
   Curatorial labels are set in the display serif, the way a gallery wall label
   is — not in the UI sans. Interactive chrome (.btn, .textlink, header nav,
   .filters) deliberately stays in Inter so clickable things read as clickable.
   Cormorant runs small and light for its point size, so these sit larger and
   with less tracking than the Inter versions they replace.
   Placed last so it wins over the per-component sizes set earlier.
   ========================================================================== */
.hero__label,
.hero__plabel,
.formcard__t .d,
.metaline dt,
.split__media .tag,
.gitem__cap .m,
.lightbox__meta .form,
.lightbox__meta dt,
.exb__status,
.press cite,
.names .nm span,
.field label,
.cinfo dt,
.footer h5{
  font-family:var(--label);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.16em;
}
.hero__label{font-size:1rem;letter-spacing:.2em;line-height:1.5;max-width:30ch}
.hero__plabel{font-size:1rem;letter-spacing:.16em;line-height:1.5;max-width:18ch}
.lightbox__meta .form{font-size:1rem;letter-spacing:.2em}
.metaline dt,.gitem__cap .m{font-size:.88rem}

/* The gallery drops to two columns below 760px, so a tile is only ~130-180px
   wide. The caption sizes above are tuned for a ~300px desktop tile; at phone
   width they wrap to four lines and bury the painting they label. Since the
   caption is now permanently visible on touch, it has to earn its space. */
@media(max-width:1100px){          /* three columns — ~220px tiles */
  .gitem__cap{padding:11px 12px 10px}
  .gitem__cap .f{font-size:.92rem;line-height:1.2}
  .gitem__cap .m{font-size:.6rem;letter-spacing:.1em;margin-top:1px}
}
@media(max-width:760px){           /* two columns — ~130-180px tiles */
  .gitem__cap{padding:10px 11px 9px}
  .gitem__cap .f{font-size:.8rem;line-height:1.2}
  .gitem__cap .m{font-size:.56rem;letter-spacing:.09em;margin-top:1px}
}

/* ==========================================================================
   HERO — ambient drift
   A very slow Ken Burns inside each frame so the collage breathes. The tiles
   themselves are left alone (they carry the entrance transition and a shadow);
   only the images inside them move.
   ========================================================================== */
@keyframes tile-drift{
  0%  {transform:scale(1.005) translate3d(0,0,0)}
  50% {transform:scale(1.055) translate3d(0,-1.1%,0)}
  100%{transform:scale(1.005) translate3d(0,0,0)}
}
.hero__tile img{animation:tile-drift 44s ease-in-out infinite;will-change:transform}
.hero__tile:nth-child(2) img{animation-duration:52s;animation-delay:-6s}
.hero__tile:nth-child(3) img{animation-duration:38s;animation-delay:-14s}
.hero__tile:nth-child(4) img{animation-duration:58s;animation-delay:-3s}
.hero__tile:nth-child(5) img{animation-duration:46s;animation-delay:-20s}
.hero__tile:nth-child(6) img{animation-duration:63s;animation-delay:-9s}
.hero__tile:nth-child(7) img{animation-duration:41s;animation-delay:-27s}
.hero__tile:nth-child(8) img{animation-duration:55s;animation-delay:-16s}

/* Ghost wordmark sat at .07 alpha and vanished against the ivory panel. */
.hero__ghost{color:rgba(179,106,76,.17)}

/* CTA out of the hero — a bordered button, not a bare text link */
.hero__left .btn{margin-top:2.1rem}

/* ==========================================================================
   STICKY HEADER
   The hero carries its own hairline top bar at rest. The moment the page
   moves, that bar hands over to the fixed header, which then stays for the
   rest of the scroll — so there is never a stretch with no navigation.
   ========================================================================== */
.hero__bar{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero.is-past-top .hero__bar{opacity:0;transform:translateY(-14px);pointer-events:none}

/* ==========================================================================
   ART FORMS GRID — staggered reveal
   The whole grid used to be a single .reveal, so five cards lurched up
   together as one block. Each card now wipes open from the bottom while its
   image settles out of a slight over-scale, 90ms apart.
   ========================================================================== */
.reveal--cards{opacity:1;transform:none;transition:none}
.reveal--cards .formcard{
  clip-path:inset(0 0 100% 0);
  opacity:0;
  transition:clip-path 1.05s var(--ease),opacity .6s var(--ease);
}
.reveal--cards .formcard img{transform:scale(1.14);transition:transform 1.6s var(--ease)}
.reveal--cards.in .formcard{clip-path:inset(0 0 0 0);opacity:1}
.reveal--cards.in .formcard img{transform:scale(1)}
/* restore the hover zoom, which the .in rule above would otherwise outrank */
.reveal--cards.in .formcard:hover img{transform:scale(1.06);transition:transform .9s var(--ease)}
.reveal--cards.in .formcard:nth-child(1),
.reveal--cards.in .formcard:nth-child(1) img{transition-delay:0s}
.reveal--cards.in .formcard:nth-child(2),
.reveal--cards.in .formcard:nth-child(2) img{transition-delay:.09s}
.reveal--cards.in .formcard:nth-child(3),
.reveal--cards.in .formcard:nth-child(3) img{transition-delay:.18s}
.reveal--cards.in .formcard:nth-child(4),
.reveal--cards.in .formcard:nth-child(4) img{transition-delay:.27s}
.reveal--cards.in .formcard:nth-child(5),
.reveal--cards.in .formcard:nth-child(5) img{transition-delay:.36s}
.reveal--cards.in .formcard:hover img{transition-delay:0s}

/* ==========================================================================
   CAROUSEL — auto-scrolling marquee
   Scroll-snap is dropped because it fights a continuous scroll, and the
   scrollbar is hidden since it would crawl on its own. site.js recycles items
   from the front to the back, so the strip loops with no duplicated markup.
   ========================================================================== */
.carousel{scroll-snap-type:none;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.cwork{
  flex:0 0 auto;margin:0;cursor:zoom-in;
  display:flex;flex-direction:column;
}
.cwork img{
  height:clamp(260px,40vh,440px);width:auto;display:block;
  background:var(--ivory-deep);
  user-select:none;-webkit-user-drag:none;
}
/* The caption sits under the work and travels with it. width:0 + min-width
   keeps a long title from making the figure wider than its image, which would
   otherwise open gaps in the strip and throw off the recycling measurement. */
.cwork__cap{
  width:0;min-width:100%;box-sizing:border-box;
  padding:.95rem .1rem 0;
}
.cwork__cap .f{display:block;font-family:var(--serif);font-size:1.15rem;
  color:var(--indigo);line-height:1.25}
.cwork__cap .m{display:block;font-family:var(--label);font-size:.82rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);margin-top:.25rem}

/* ==========================================================================
   ART FORMS — typographic index hero
   An oversized serif list of the five traditions; the plate beside it follows
   whichever name is hovered, and auto-cycles otherwise (which is also the
   whole behaviour on touch, where there is no hover to drive it).
   ========================================================================== */
.findex{
  background:var(--ivory);
  min-height:100svh;display:flex;align-items:center;
  padding-block:calc(96px + clamp(24px,4vh,56px)) clamp(48px,7vh,96px);
}
.findex__inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(32px,6vw,96px);align-items:center;width:100%;
}
.findex__h{font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:.98;margin-bottom:clamp(26px,4vh,48px)}
.findex__names{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.findex__name{
  display:flex;align-items:baseline;
  padding:clamp(.5rem,1.5vh,1rem) 0;border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:1.1;
  color:var(--indigo);opacity:.42;
  transition:opacity .45s var(--ease),padding-left .45s var(--ease);
}
.findex__name span{flex:0 0 auto}
.findex__name::after{
  content:"";flex:1 1 auto;height:1px;margin-left:1em;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.findex__name.is-on{opacity:1;padding-left:.32em}
.findex__name.is-on::after{transform:scaleX(1)}
.findex__name:focus-visible{outline:1px solid var(--terracotta);outline-offset:4px}

.findex__stage{position:relative;display:block;height:min(72svh,640px);padding-bottom:2.9rem}
.findex__plate{
  position:absolute;left:0;right:0;top:0;bottom:2.9rem;margin:0;
  background:var(--ivory-deep);
  opacity:0;transform:scale(1.025);
  transition:opacity .85s var(--ease),transform 1.6s var(--ease);
}
.findex__plate.is-on{opacity:1;transform:none}
.findex__plate img{width:100%;height:100%;object-fit:contain;display:block}
.findex__wall{
  position:absolute;left:0;right:0;bottom:0;
  font-family:var(--label);font-size:.95rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);
}

/* ==========================================================================
   ART FORMS — one full-screen chapter per tradition
   The chapter is taller than the viewport and both columns are sticky, so the
   whole spread holds while the images cycle, then releases into the next.
   ========================================================================== */
.chapter{border-top:1px solid var(--line);background:var(--ivory)}
.chapter__inner{
  min-height:100svh;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,88px);align-items:center;
}
.chapter__text{
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(72px,12vh,120px);
}
.chapter__name{font-size:clamp(2.3rem,4.4vw,3.8rem);margin-bottom:.45rem}
.chapter__line{
  font-family:var(--serif);color:var(--charcoal);
  font-size:clamp(1.1rem,1.6vw,1.45rem);margin:0 0 1.7rem;
}
.chapter__facts{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 2rem;
  margin:0 0 1.7rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
.chapter__facts div{min-width:0}
.chapter__facts dt{
  font-family:var(--label);font-size:.85rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terracotta);margin-bottom:.2rem;
}
.chapter__facts dd{margin:0;font-size:.97rem;line-height:1.5;color:var(--indigo)}
.chapter__body{max-width:46ch}

.chapter__media{
  height:min(78svh,720px);display:flex;align-items:center;
  padding-block:clamp(24px,4vh,48px);
}
.cycstage{position:relative;width:100%;height:100%}

/* A chapter arrives rather than appearing: the text rises, the plate settles
   out of a slight over-scale. Driven by the existing .reveal observer. */
.chapter__media.reveal{transform:none;opacity:0;transition:opacity 1.1s var(--ease)}
.chapter__media.reveal .cycstage{
  transform:scale(1.035);transition:transform 1.6s var(--ease);
}
.chapter__media.reveal.in{opacity:1}
.chapter__media.reveal.in .cycstage{transform:none}

/* Where the browser supports scroll-driven animation this runs entirely on the
   compositor, so the drift costs nothing and cannot stutter. Browsers without
   it simply get a still image — no JS scroll listener, which is what made the
   previous sticky version feel jerky. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .chapter__media{
      animation:chapter-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes chapter-drift{
      from{transform:translate3d(0,3.2%,0)}
      to{transform:translate3d(0,-3.2%,0)}
    }
  }
}
.cyc{
  position:absolute;inset:0;margin:0;
  opacity:0;pointer-events:none;transform:scale(1.02);
  transition:opacity 1.2s var(--ease),transform 2.6s var(--ease);
}
/* only the visible slide takes the click — the stack is absolutely positioned,
   so without this the last one in the DOM would swallow every press */
.cyc.is-on{opacity:1;pointer-events:auto;transform:none;cursor:zoom-in}
.cyc img{width:100%;height:100%;object-fit:contain;display:block}

@media(max-width:960px){
  .findex{min-height:0}
  .findex__inner{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
  .findex__stage{height:min(58svh,460px)}
  .chapter__inner{min-height:0;grid-template-columns:1fr;gap:clamp(24px,4vh,40px)}
  .chapter__text{padding-block:clamp(56px,8vh,88px) 0}
  .chapter__media{height:min(62svh,520px);padding-block:0 clamp(56px,8vh,88px)}
}
@media(max-width:560px){
  .chapter__facts{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .hero__tile img{animation:none}
  .reveal--cards .formcard{clip-path:none;opacity:1;transition:none}
  .reveal--cards .formcard img{transform:none;transition:none}
  .findex__plate,.cyc{transition:opacity .01s;transform:none}
  .chapter__media{animation:none}
}

/* ==========================================================================
   DEVICES — phones first, then the platform quirks
   Everything below is corrective: it assumes the layouts above are right and
   fixes what breaks on a hand-held, a notch, or a WebKit browser.
   ========================================================================== */

/* iOS inflates body text in landscape unless told not to */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* the grey box iOS flashes over every tap reads as a rendering fault on a
   site this quiet — replace it with a faint brand tint */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(31,53,93,.12)}

/* Safari still needs the prefix; without it the header has no blur at all */
.header{-webkit-backdrop-filter:saturate(1) blur(0px)}
.header.is-solid{-webkit-backdrop-filter:saturate(1.2) blur(10px)}

/* Notch and home indicator. env() resolves to 0 where there is no inset, so
   these are inert on every other device. */
.wrap{
  padding-inline:max(var(--gutter),env(safe-area-inset-left))
                 max(var(--gutter),env(safe-area-inset-right));
}
.header,.hero__bar{
  padding-inline:max(var(--gutter),env(safe-area-inset-left))
                 max(var(--gutter),env(safe-area-inset-right));
}
.drawer{
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer__close{top:max(24px,env(safe-area-inset-top))}

/* Horizontal drags inside the strip must not trigger Safari's back-swipe. */
.carousel{overscroll-behavior-x:contain;touch-action:pan-x pan-y}
/* Scrolling the lightbox must not chain through to the page behind it. */
.lightbox{overscroll-behavior:contain}
.drawer{overscroll-behavior:contain}

/* ---------- Touch targets ----------
   Anything tappable needs ~44px. Where padding would move a visible rule or
   underline, the hit area is grown with a transparent pseudo-element instead,
   so the design is untouched and only the target grows. */
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0;margin-right:-10px}
.drawer__close,.lightbox__close{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;
}
.lightbox__nav{min-width:52px;min-height:64px}
.header__brand{min-height:44px}

@media(hover:none) and (pointer:coarse){
  /* The gallery caption is a hover reveal, and a touch screen has no hover —
     so on every phone and tablet the grids read as unlabelled paintings. The
     title is in the lightbox a tap away, but the grid itself should say what
     each work is. Show it at rest wherever hover cannot happen. */
  .gitem__cap{opacity:1;transform:none}
  .textlink,.cinfo dd a,.footer__bot a{position:relative}
  .textlink::before,.cinfo dd a::before,.footer__bot a::before{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  .footer__col a{padding-block:.6em}
  .hbar__link{padding-block:.4em}
  /* the hero bar's brand cell is pinned to a 34px row by design */
  .hbar__t{min-height:44px}
}

/* ---------- Lightbox on a phone ----------
   The metadata panel used to be display:none below 960px, so tapping a work
   on the device most people use gave a bare image: no title, no medium, no
   artist, no way to enquire. It now stacks under the image and the whole
   sheet scrolls. */
@media(max-width:960px){
  .lightbox{padding:0;align-items:stretch;justify-content:stretch;overflow-y:auto}
  .lightbox__stage{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    max-width:none;width:100%;align-content:start;
    padding-top:max(56px,calc(env(safe-area-inset-top) + 44px));
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  .lightbox__img{min-height:0}
  .lightbox__img img{max-height:52dvh;width:100%;object-fit:contain}
  /* beats the display:none set in the 960px block above */
  .lightbox__meta{
    display:block;align-self:start;
    padding:22px max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));
    /* reserve the band the fixed prev/next sit in, so they never land on top
       of the enquire button */
    padding-bottom:76px;
  }
  .lightbox__meta .f{font-size:1.6rem}
  .lightbox__meta .form{margin-bottom:1rem}
  .lightbox__meta dl{gap:.4rem 1rem;margin-bottom:1.5rem;font-size:.95rem}
  .lightbox__meta .btn{width:100%;justify-content:center}
  /* controls stay put while the sheet scrolls */
  .lightbox__close{position:fixed;top:max(10px,env(safe-area-inset-top));right:8px;z-index:4}
  .lightbox__count{position:fixed;top:max(24px,calc(env(safe-area-inset-top) + 14px));left:16px;z-index:4}
  .lightbox__nav{
    position:fixed;top:auto;transform:none;z-index:4;
    bottom:calc(10px + env(safe-area-inset-bottom));
    background:rgba(14,27,49,.72);border-radius:2px;
  }
  .lightbox__nav.prev{left:10px}
  .lightbox__nav.next{right:10px}
  .lightbox.no-meta .lightbox__img img{max-height:78dvh}
}

/* ---------- Home hero collage on a phone ----------
   The tiles are placed as percentages tuned for a wide viewport. At 393px a
   30%-wide tile is a 118px slice of a 476px-tall box, so object-fit:cover
   crops each painting into an unreadable stripe. On phones the collage becomes
   a plain 2x3 grid instead, which gives every work a crop you can actually
   read. The inline left/top/width/height need !important to be overridden. */
@media(max-width:700px){
  .hero__bg{
    display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);
  }
  .hero__tile{
    position:static!important;left:auto!important;top:auto!important;
    width:auto!important;height:auto!important;
    box-shadow:none;
  }
  .hero__tile:nth-child(n+7){display:none}
  /* the headline sits over artwork rather than the dark left column, so the
     wash has to carry more of the contrast */
  .hero__wash{
    background:
      linear-gradient(180deg, rgba(14,27,49,.82) 0%, rgba(14,27,49,.55) 34%, rgba(14,27,49,.62) 68%, rgba(14,27,49,.86) 100%),
      radial-gradient(120% 60% at 30% 40%, rgba(14,27,49,.5), transparent 70%);
  }
}


/* Landscape phones are short: full-height sections would leave no room to
   read, so they relax to content height. */
@media(max-height:520px) and (orientation:landscape){
  .findex,.chapter__inner{min-height:0}
  .chapter__media{height:min(70dvh,420px)}
  .drawer a{font-size:1.35rem;padding:.18em}

  /* A short, wide screen has no room to stack image over metadata — side by
     side is the only arrangement that fits, so revert to the desktop shape
     and put the arrows back on the flanks. */
  .lightbox{padding:0 44px}
  .lightbox__stage{
    grid-template-columns:1.1fr .9fr;grid-template-rows:1fr;
    align-items:center;padding-top:0;padding-bottom:0;
    max-height:100dvh;
  }
  .lightbox__img img{max-height:100dvh}
  .lightbox__meta{
    padding:16px 20px;overflow-y:auto;max-height:100dvh;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  .lightbox__meta .f{font-size:1.25rem}
  .lightbox__meta dl{margin-bottom:1rem;font-size:.88rem}
  .lightbox__nav{
    position:fixed;top:50%;bottom:auto;transform:translateY(-50%);
    min-height:56px;background:none;
  }
  .lightbox__nav.prev{left:2px}
  .lightbox__nav.next{right:2px}
  .lightbox__count{top:8px;left:52px}
  .lightbox__close{top:4px;right:44px}
}

/* Anchor jumps must clear the fixed header rather than landing under it. */
section[id],[id]:target{scroll-margin-top:92px}

/* ---------- Plain text-column groups ----------
   These were .forms carrying an inline grid-template-columns. An inline style
   beats every media query, so they could never collapse: on a 320px screen the
   third column of the artists section started at x=232 and ran 24px off the
   edge. Chromium hid it by quietly widening the viewport to 344px when asked
   for 320; WebKit honoured the 320 and overflowed, which is how it surfaced. */
.cols2,.cols3{display:grid}
.cols3{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.cols2{grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,72px)}
@media(max-width:960px){.cols3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.cols2,.cols3{grid-template-columns:1fr}}

/* A visible keyboard focus ring everywhere, not just on the index names. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--terracotta);outline-offset:3px;
}