/* ==========================================================================
   Krishen Khanna — design system (always dark)
   A gallery-site scale, rhythm and motion; the colour tokens are dark.
   --white is the PAGE colour
   (near-black here), --ink the text colour. Text set over photographs uses --on-image.
   Plain CSS, no preprocessor. Sections:
   1 tokens · 2 fonts/reset · 3 typography · 4 layout · 5 header/nav
   6 footer · 7 components (section-head, grid, card, figure, feature, split,
   bleed, hero, btn, quote, prevnext, parrot) · 8 reveal/motion · 9 lightbox
   10 utilities/a11y · 11 dark theme
   ========================================================================== */

/* ------------------------------------------------------------ 1 tokens */
:root {
  --ff: "Montserrat", system-ui, sans-serif;
  --fw: 300;
  --fs-meta: max(11px, 1.15rem);
  --fs-nav: max(11px, 1.25rem);
  --fs-foot: max(11px, 1rem);
  --track: .16em;

  color-scheme: dark;       /* dark scrollbars, form controls, autofill, date pickers */
  /* grounds (contrast ratios are against --white #0A0A0A) */
  --white: #0A0A0A;         /* page. Not #000: no OLED smear while scrolling */
  --bg-soft: #141414;       /* raised: image placeholders, form fields, soft sections */
  --bg-raised: #141414;
  --bg-band: #000;          /* full-bleed bands, lightbox and zoom backdrops */
  /* text */
  --ink: #EDEBE7;           /* 16.6:1 — warm off-white; pure #fff glares on Montserrat 300 */
  --ink-2: #F5F0E8;         /* solid buttons, selection, hover fill */
  --grey-1: #A3A3A3;        /* 7.9:1 — nav, eyebrows, meta, captions */
  --grey-2: #8A8A8A;        /* 5.7:1 — footer, credits, fine print (11px floor) */
  --grey-3: #6B6B6B;        /* 3.7:1 — input borders, disabled; never text */
  --on-image: #F5F0E8;      /* type set over photographs (hero, lightbox) */
  /* the focus ring of a control that sits over a picture or a film: page black inside, light outside, so one of the two
     reads at 3:1 or better on any frame, pale or dark. Used as box-shadow, with outline none */
  --focus-on-image: 0 0 0 2px #0A0A0A, 0 0 0 4px #F5F0E8;
  /* lines */
  --hairline: #262626;
  --keyline: rgba(255, 255, 255, .08);   /* 1px edge for dark-edged works and covers */
  /* accent: the red of the Krishen Khanna seal — decorative only (rules, logo) */
  --seal: #BF2D28;          /* 3.4:1 — never text */
  --seal-text: #D0564B;     /* 4.8:1 — if the accent ever carries text (dates) */
  --red: var(--seal);       /* shared components (quote rule, shop.css) */
  --error: #E0625A;
  --gold-hw: #C9A96E;       /* Heritage Walk route line */

  --container: 1660px;
  --gutter: 80px;
  --gap-x: 40px;
  --gap-y: 50px;
  --cap-gap: 20px;
  /* vertical rhythm — every page uses these and nothing else:
     section block 60 + 60 = 120 between the content of two sections and above the footer line;
     --gap-y 50 under a section head and between grid rows; --cap-gap 20 image → caption;
     eyebrow → heading 1.2em (13px); heading → its sub-line .6em (12px); page title → first
     block 1.2em (25px); h2 → text .8em (16px); paragraph → whatever follows --para (23px);
     closing strip (prev/next, notes, back links): 60 → hairline → 30 */
  --section-y: 60px;
  --para: 2.32rem;
  --row-h: 420px;
  --feature: 640px;
  --header-h: 115px;

  --ease-reveal: cubic-bezier(.18, 1, .21, 1);
  --t-reveal: 900ms;
  --ease-header: cubic-bezier(.65, .06, .19, .96);
  --t-header: 600ms;
  --t-hover: 500ms;
  --t-menu: 900ms;
  --ease-menu: cubic-bezier(.015, .85, .225, 1);
}
@media (max-width: 1280px) { :root { --gutter: 40px; } }
@media (max-width: 1024px) { :root { --gutter: 30px; --header-h: 90px; } }
@media (max-width: 768px)  { :root { --row-h: 340px; } }
@media (max-width: 460px)  { :root { --gutter: 15px; } }

/* ------------------------------------------------------------ 2 fonts / reset */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-300-latin.woff2") format("woff2");
}
/* quotations in the artist's and his writers' words (.quote-quiet) */
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/montserrat-300-italic-latin.woff2") format("woff2");
}
/* the rupee of every price and the arrows of the cross-links, which Google's latin subset above leaves out: the same Montserrat 9.000 (variable source, OFL), subset to U+20B9 U+2190-2193 U+2197 with fontTools
   (pyftsubset, then varLib.instancer wght 300:500, the italic at 300). Declared after the faces above, so the browser
   looks here first for these characters, and fetches the 1 KB file only on a page that shows one */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-symbols.woff2") format("woff2");
  unicode-range: U+20B9, U+2190, U+2192, U+2197;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/montserrat-symbols-italic.woff2") format("woff2");
  unicode-range: U+20B9, U+2190, U+2192, U+2197;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 60.9375%;   /* 9.75px at the 16px default; follows a larger default font size set by the visitor */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);   /* anchors and keyboard focus stop below the sticky header (WCAG 2.4.11) */
}
body {
  margin: 0;
  font-family: var(--ff);
  font-weight: var(--fw);
  font-size: 1.45rem;
  line-height: 3.1rem;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
picture img { width: 100%; }
a { color: inherit; text-decoration: none; }
/* running-text links underline; :where() keeps specificity at 0,0,1 so any classed link (.card__link,
   .exh-list__link, .site-footer a …) can opt out with a single class rule */
:where(p) a, :where(li:not(.nav__list li):not(.nav-overlay__list li)) > a:where(:not(.btn)) { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 40px 0; }
::selection { background: var(--ink-2); color: var(--white); }
/* a raised placeholder (not the work's average colour) while lazy images load: no bright flashes on dark */
picture img { background-color: var(--bg-raised); }

/* ------------------------------------------------------------ 3 typography */
h1, h2, h3, .eyebrow, .card__title, .btn, .nav, .site-footer__meta, .site-footer__social,
.figcaption, .card__meta, .section-head__link, .prevnext__dir, .hero__credit, .menu-btn, .cart-link {
  text-transform: uppercase;
  letter-spacing: var(--track);
}
h1, h2, h3, h4 { font-weight: var(--fw); margin: 0 0 .8em; color: var(--ink); }
h1 { font-size: 2.1rem; line-height: 1.5; margin-bottom: 1.2em; }   /* never larger; 25px to the first block on every page */
h2 { font-size: 2.1rem; line-height: 1.5; }        /* same cap as h1: the scale never inverts */
h3 { font-size: 1.65rem; line-height: 1.6; }
h4 { font-size: 1.45rem; line-height: 1.6; text-transform: uppercase; letter-spacing: var(--track); }
h1, h2, h3, h4, .prevnext__title { text-wrap: balance; }   /* a wrapped heading never leaves one word alone on its last line; same line count */
p { margin: 0 0 var(--para); }
.prose, .lede, .feature__body p, .split__body p, main > .section p { max-width: 62ch; }
.lede { font-size: 1.65rem; line-height: 3.2rem; }
.eyebrow { font-size: var(--fs-meta); color: var(--grey-1); margin-bottom: 1.2em; }
.meta, .card__meta, .figcaption { font-size: var(--fs-meta); line-height: 2.1rem; color: var(--grey-1); }
small, .small { font-size: var(--fs-meta); }
strong { font-weight: 500; }

blockquote, .quote {
  font-size: 2.4rem;
  line-height: 3.4rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  border-left: 1px solid var(--red);   /* the one expressive gesture */
  padding-left: 30px;
  width: 85%;
  margin: 2em 0;
}
blockquote p { margin: 0; max-width: none; }
/* figure.quote holds the rule and the type; its blockquote is only the words */
.quote > blockquote { border: 0; padding: 0; margin: 0; width: auto; font: inherit; color: inherit; }
.quote__by a { color: inherit; text-decoration: underline; text-decoration-color: var(--grey-3); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.quote__by a:hover, .quote__by a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }
.quote__by cite { font-style: normal; }
.quote__src { white-space: nowrap; }   /* the book and its year wrap as one: never a year alone on a line */
/* phones: the book on its own line under the name, rather than a title broken after it */
@media (max-width: 768px) { .quote__sep { display: none; } .quote__src { display: block; white-space: normal; } }
blockquote cite, .quote__by {
  display: block;
  font-style: normal;
  font-size: var(--fs-meta);
  line-height: 2.1rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--grey-1);
  margin-top: 1.4em;
}
@media (max-width: 768px) { blockquote, .quote { width: 100%; padding-left: 20px; } }
/* the quiet quotation: italic Montserrat, no rule, one attribution line */
.quote-quiet { margin: 0; }
.quote-quiet blockquote { font-style: italic; font-size: 1.65rem; line-height: 3.1rem; color: var(--ink); border: 0; padding: 0; margin: 0; width: auto; }
.quote-quiet blockquote p { max-width: 72ch; }
@media (max-width: 768px) { .quote-quiet blockquote { line-height: 2.6rem; } }
.quote-quiet__by { font-size: var(--fs-meta); line-height: 2.1rem; color: var(--grey-1); margin-top: 1.4em; }

/* ------------------------------------------------------------ 4 layout */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
/* a full-bleed hero has no block padding of its own: the section under it supplies both halves */
.hero + .section, .hero-figure + .section { padding-top: calc(2 * var(--section-y)); }
/* the last block of a text column carries no trailing margin, so a column taller than its image
   does not push the next section 23px further away */
.split__body > :last-child, .feature__body > :last-child { margin-bottom: 0; }
/* a section that is only a pull quote: the blockquote's prose margin would add to the block */
.section--quote .quote { margin: 0; }
.section--soft { background: var(--bg-soft); }
/* short pages (empty cart, 404): the footer rests on the bottom of the window instead of floating
   a fixed 60vh down the page; every other page is taller than the window and is unaffected */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1 0 auto; }
main:focus { outline: none; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-x);
  padding-bottom: 18px;
  margin-bottom: var(--gap-y);
  border-bottom: 1px solid var(--hairline);
}
.section-head h2, .section-head h3 { margin: 0; }
.section-head__link { font-size: var(--fs-meta); color: var(--grey-1); white-space: nowrap; padding-bottom: .2em; }
/* a split head: the heading left, a short brief or a quotation right; stacked on a phone */
.section-head--split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--gap-x); align-items: start; }
.section-head__brief { margin: 0; color: var(--grey-1); text-wrap: balance; }
@media (min-width: 769px) { .section-head--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* grid */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid, .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .grid, .grid--3, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .grid, .grid--3, .grid--2, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* art grid: fixed row height, images sit on the bottom edge */
.grid--art .card__img { height: var(--row-h); }
.grid--art .card__img picture, .grid--art .figure__media picture { position: absolute; inset: 0; }
.grid--art .card__img img, .grid--art .figure__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  background: transparent !important;
}

/* split (text + sticky media) */
.split { display: grid; grid-template-columns: 1fr; gap: var(--gap-y) var(--gap-x); align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split__media { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* full-bleed */
.bleed {
  position: relative;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  max-width: 100vw;
}

/* ------------------------------------------------------------ 5 header / nav */
.skip-link {
  position: absolute; top: 0; left: 0; z-index: 200;
  padding: 10px 16px;
  background: var(--ink-2); color: var(--white);   /* light chip, dark text */
  font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; outline: none; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  min-height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--hairline);
  transition: transform var(--t-header) var(--ease-header),
              box-shadow var(--t-header) var(--ease-header),
              border-color var(--t-header) var(--ease-header);
  will-change: transform;
}
.site-header.is-hidden { transform: translate3d(0, -150%, 0); }
.site-header.is-scrolled { border-color: #1F1F1F; }   /* shadows vanish on black: the returning header keeps a rule */
.nav-open .site-header { transform: none; box-shadow: none; z-index: 130; background: transparent; border-color: transparent; }
.nav-open .site-logo img { filter: brightness(0) invert(1); }
.nav-open .cart-link { visibility: hidden; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 100%; }
.site-logo { flex: 0 0 auto; display: block; }
.site-logo img { width: auto; height: 88px; }   /* the round seal: 88 of the 115px header */
@media (max-width: 1024px) { .site-logo img { height: 68px; } }

.nav { font-size: var(--fs-nav); line-height: 1; }
.nav__list { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav__list li { margin-left: 25px; }
@media (max-width: 1100px) { .nav__list li { margin-left: 20px; } }   /* 1025–1100 with a cart badge: Contact stays on the one line */
/* nine items with the jewellery page's long label needed ~1300 px at full spacing: a little tighter on 1280–1439 screens kept
   one line. Eight since that page was deleted; the tighter spacing is kept until the nav is re-measured */
@media (min-width: 1280px) and (max-width: 1439px) { .nav__list li { margin-left: 15px; } .nav__list a { letter-spacing: .11em; } }
.nav__list a { color: var(--grey-1); padding: 8px 0; display: inline-block; }
.nav__list a.is-active { color: var(--ink); }
.nav__list a:hover { color: var(--grey-1); }   /* no hover colour change */
.nav__list a.is-active:hover { color: var(--ink); }

.site-header__tools { display: flex; align-items: center; gap: 25px; font-size: var(--fs-nav); line-height: 1; flex: 0 0 auto; }
.cart-link { color: var(--grey-1); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 0; } /* 44px hit area, label size unchanged */
.cart-link.is-empty { visibility: hidden; }   /* empty cart: link hidden but its space kept, so the nav stays where it was */
.cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--ink-2); color: var(--white);
  font-size: 10px; letter-spacing: 0; line-height: 1;
}
.menu-btn { display: none; align-items: center; min-height: 44px; color: var(--ink); position: relative; z-index: 130; padding: 8px 0; } /* 44px hit area; no side padding keeps the gutter edge */
.menu-btn__close { display: none; }
.nav-open .menu-btn { color: var(--on-image); }
.nav-open .menu-btn__open { display: none; }
.nav-open .menu-btn__close { display: inline; }
/* KK: nine nav items needed ~1260 px on one line (they wrapped to two lines below that), so the menu takes over below
   1280. The eight left since the jewellery page was deleted measure one line down to 1100 px in
   WebKit (two below ~1060); the breakpoint stays at 1280 for now, so the full nav does not show
   on 1180–1279 screens (iPad landscape, small laptop windows) */
@media (max-width: 1279px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}

/* overlay menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, .96);            /* opaque enough that hero type does not ghost through */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  overscroll-behavior: contain;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* the overlay and its items animate only once a visitor has opened the menu (main.js adds .nav-anim on that click):
   a style resolved before this sheet applied drew the closed overlay, which then faded out over the page
   (seen on WebKit phone loads of /murals/ and /biography/) */
.nav-anim .nav-overlay { transition: opacity var(--t-header) var(--ease-header), visibility 0s linear var(--t-header); }
.nav-open .nav-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-open { overflow: hidden; }
.nav-overlay__nav { margin: auto; padding: calc(var(--header-h) + 10px) 0 30px; }
.nav-overlay__list { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 20px; }
.nav-overlay__list li { opacity: 0; transform: translateY(-30px); }
.nav-anim .nav-overlay__list li {
  transition: opacity var(--t-menu) var(--ease-menu), transform var(--t-menu) var(--ease-menu);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.nav-open .nav-overlay__list li { opacity: 1; transform: none; }
.nav-overlay__list a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 1.6rem; line-height: 1.6;
  text-transform: uppercase; letter-spacing: var(--track);
  color: rgba(245, 240, 232, .6);
}
.nav-overlay__list a.is-active { color: var(--on-image); }
.nav-overlay .cart-count { background: var(--ink-2); color: var(--white); }

/* ------------------------------------------------------------ 6 footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 30px 0;
  margin-top: var(--section-y);
  font-size: var(--fs-foot);
  line-height: 2rem;
  color: var(--grey-1);
}
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 30px; }   /* one line: © | Instagram + email | legal */
.site-footer p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; margin: 0; }
.site-footer__social { display: flex; align-items: center; justify-content: center; gap: 25px; }
.site-footer__ig { display: inline-flex; line-height: 0; }
.site-footer__ig svg { width: 18px; height: 18px; }
.site-footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--ink); } }
@media (max-width: 768px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }   /* the 44px rows space themselves */
  .site-footer__copy { display: flex; align-items: center; min-height: 44px; }
  .site-footer__social { justify-content: flex-start; }
  .site-footer__legal { justify-content: flex-start; gap: 0 24px; }
  .site-footer__legal a, .site-footer__social a { display: inline-flex; align-items: center; min-height: 44px; }   /* 44px tap targets, text size unchanged */
}

/* ------------------------------------------------------------ 7 components */
/* card */
.card { position: relative; }
.card__link { display: block; color: inherit; }
.card__img { position: relative; overflow: hidden; background: transparent; }
.card__img picture { width: 100%; }
.card__img--alt {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--t-hover) ease;
  pointer-events: none;
}
.card__img--alt img { width: 100%; height: 100%; object-fit: inherit; object-position: inherit; }
.card:hover .card__img--alt, .card:focus-within .card__img--alt { opacity: 1; }
.card__body { padding-top: var(--cap-gap); }
.card__title { font-size: 1.65rem; line-height: 2.4rem; margin: 0 0 .3em; color: var(--ink); overflow-wrap: break-word; }   /* a larger default font: a long word breaks rather than leaving a narrow column */
.card__meta { margin: 0; }
.card__meta--sub { color: var(--grey-2); }
.card .eyebrow { margin-bottom: .4em; }

/* figure */
.figure { position: relative; }
.figure__media { position: relative; }
.figure__media[data-lightbox] { cursor: zoom-in; }
.figcaption { display: flex; flex-wrap: wrap; gap: 0 14px; padding-top: var(--cap-gap); }
.figcaption__credit { color: var(--grey-2); }

/* feature (50/50) */
.feature { display: grid; grid-template-columns: 1fr; gap: var(--gap-y) 0; align-items: center; }
.feature__media { width: 100%; max-width: var(--feature); }
.feature__media .figure__media { aspect-ratio: 1 / 1; overflow: hidden; }
.feature__media .figure__media picture, .feature__media .figure__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { align-self: center; }
.feature--flip .feature__media { order: 2; }
@media (min-width: 1025px) {
  .feature { grid-template-columns: minmax(0, var(--feature)) minmax(0, 1fr); }
  .feature__body { padding-left: 50px; }
  .feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, var(--feature)); }
  .feature--flip .feature__body { padding-left: 0; padding-right: 50px; }
}

/* hero */
.hero {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: var(--bg-band);
  color: var(--on-image);
}
.hero__media, .hero > picture { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__overlay {
  position: absolute; bottom: 0;
  padding: 40px var(--gutter);
  text-shadow: 0 0 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .45);
  z-index: 2;
}
.hero__overlay--left { left: 0; max-width: 60%; }
.hero__overlay--top { top: 0; left: 0; bottom: auto; max-width: 60%; }
.hero__overlay--right { right: 0; text-align: right; }
.hero h1, .hero h2, .hero p { color: var(--on-image); }
.hero h1 { margin-bottom: .6em; }
.hero__tagline { font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; margin: 0; }   /* = .meta: a wrapped subtitle reads as one item */
.hero__credit { font-size: var(--fs-foot); line-height: 2.1rem; letter-spacing: var(--track); color: rgba(245, 240, 232, .75); }
.hero::after {   /* fades into the page colour, so the hero's foot dissolves into the site */
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1;
  background: linear-gradient(to top, rgba(10, 10, 10, .62), rgba(10, 10, 10, .28) 40%, rgba(10, 10, 10, 0));
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero__overlay--left { max-width: 100%; }
  .hero__overlay--right { position: absolute; top: auto; bottom: 12px; padding-block: 0; }
  .hero__overlay--left { padding-bottom: 50px; }
}

/* ------------------------------------------------------------ page heroes (partials/page-hero.html)
   A hero image on every page. full = a photograph across the screen with the title on it (Murals),
   at the Exhibitions hero's height and scrim; split = the piece whole on the page colour beside the title, as on
   Publications and Biography (Public Art, Heritage Walk, Shop, Contact), never taller than the
   first screen. */
.hero--page { height: min(78svh, 900px); }
.no-anim .hero--page { height: 720px; }
.hero--page::after {
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .56) 40%, rgba(0, 0, 0, 0) 100%);   /* title + tagline at 4.5:1 over the pale vault */
}
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y) var(--gap-x); align-items: center; }
.page-hero__media { margin: 0; display: flex; flex-direction: column; align-items: center; }
.page-hero__media picture { display: block; max-width: 100%; }
.page-hero__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(62svh, 560px); }
.page-hero__media .figcaption { text-align: center; }
/* a photograph on pure black (the timepiece): its margins fade into the page colour instead of showing as a box */
.page-hero--feather .page-hero__media img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.page-hero__body > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .page-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page-hero__body { padding-left: 50px; }
  .page-hero__media img { max-height: min(calc(100svh - var(--header-h) - 170px), 720px); }
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                        /* touch target; .btn--small keeps this floor */
  font-size: var(--fs-meta);               /* 11px floor */
  line-height: 1.4;
  padding: 13px 22px;
  border: 1px solid var(--ink-2);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-decoration: none;
  transition: background var(--t-hover) ease, color var(--t-hover) ease;
  margin: 0;
}
/* button rows wrap as a flex line, so a button adds nothing to the gap above or below it */
p:has(> .btn), .btn-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.btn-row { list-style: none; margin: 0; padding: 0; }
.btn-row li { margin: 0; }
.btn-row .btn { margin: 0; }
@supports not selector(:has(*)) { .btn { margin: 0 8px 8px 0; } }
.btn:focus-visible { background: var(--ink-2); color: var(--white); }
.btn--solid { background: var(--ink-2); color: var(--white); }
.btn--solid:focus-visible { background: transparent; color: var(--ink); }
.btn--light { border-color: var(--on-image); color: var(--on-image); }
/* hover fills only where a pointer hovers: on a touch screen a tapped button kept its hover state until the next tap */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-2); color: var(--white); }
  .btn--solid:hover { background: transparent; color: var(--ink); }
  .btn--light:hover { background: var(--on-image); color: var(--white); }
}

/* prev / next */
.prevnext {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: var(--gap-x);   /* start: Previous/Next share a line when their titles wrap differently */
  border-top: 1px solid var(--hairline);
  padding-top: 30px; margin-top: var(--section-y);
}
.prevnext__next { text-align: right; }
.prevnext a { display: inline-block; }
.prevnext__dir { display: block; font-size: var(--fs-meta); color: var(--grey-2); }
.prevnext__title { display: block; font-size: 1.65rem; line-height: 2.4rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--ink); }
.prevnext__up { font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); align-self: center; }
@media (max-width: 768px) { .prevnext__up { display: inline-flex; align-items: center; min-height: 44px; } }   /* 44px tap target */
@media (max-width: 460px) { .prevnext { grid-template-columns: 1fr 1fr; } .prevnext__up { grid-column: 1 / -1; order: 3; } }
/* a lone Previous or Next (the first or last page of a run) takes the whole row on a phone, not half of it beside an
   empty cell (a long title ran to four lines in 162 px) */
@media (max-width: 460px) {
  .prevnext__prev:not(:has(a)), .prevnext__next:not(:has(a)) { display: none; }
  .prevnext:not(:has(.prevnext__next a)) .prevnext__prev, .prevnext:not(:has(.prevnext__prev a)) .prevnext__next { grid-column: 1 / -1; }
}

/* decorative parrot */
.parrot {
  position: absolute;
  width: clamp(120px, 12vw, 220px);
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
.parrot img { width: 100%; height: auto; }
.parrot--tl { top: 0; left: 0; }
.parrot--tr { top: 0; right: 0; }
.parrot--bl { bottom: 0; left: 0; }
.parrot--br { bottom: 0; right: 0; }
.parrot--flip { transform: scaleX(-1); }

/* ------------------------------------------------------------ 8 reveal / motion */
/* only blocks main.js armed are ever hidden: those still below the window once the page has loaded, its fonts are in
   and two frames have painted. The first screen is never drawn below full opacity, and if
   main.js does not run every block simply shows. The hidden state applies at once (no transition); only the reveal fades. */
.js [data-reveal].is-armed { opacity: 0; transform: translate3d(0, -50px, 0); }
.js [data-reveal].is-armed.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--t-reveal) var(--ease-reveal), transform var(--t-reveal) var(--ease-reveal);
  transition-delay: var(--stagger, 0ms);
}
.js [data-reveal].is-armed:focus-within { opacity: 1; transform: none; transition: none; }   /* keyboard focus never lands on a block still at opacity 0 */

.no-anim [data-reveal], .no-anim .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.no-anim .hero { height: 800px; }
.no-anim .site-header, .no-anim .nav-overlay, .no-anim .nav-overlay__list li, .no-anim .card__img--alt { transition: none !important; }
.no-anim html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal].is-armed { opacity: 1; transform: none; transition: none; }
  .site-header, .nav-overlay, .nav-overlay__list li, .card__img--alt, .btn { transition: none !important; }
  .nav-overlay__list li { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 9 lightbox */
.lightbox {
  border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  background: transparent;
  color: var(--on-image);
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: #0A0A0A; }   /* the page colour, opaque: a bronze's frame vanishes here too, as in the zoom viewer. A literal: before Safari 17.4 ::backdrop cannot read :root's custom properties */
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 60px var(--gutter) 90px; }
.lightbox__stage:focus { outline: none; }   /* focus starts here, so nothing rings on opening; Tab reaches Close */
.lightbox picture, .lightbox img { max-width: 100%; max-height: min(92vh, calc(100vh - 150px)); width: auto; height: auto; object-fit: contain; }
.lightbox picture img { width: auto; }
.lightbox__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px var(--gutter);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.lightbox__text {   /* the caption is alt text: sentence case, at most two lines */
  text-transform: none; letter-spacing: 0; font-size: 1.3rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.lightbox__credit { color: rgba(255, 255, 255, .55); }
.lightbox__count { color: rgba(255, 255, 255, .55); }
.lightbox__btn {
  position: absolute; z-index: 2;
  font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  padding: 14px 18px;
  background: transparent;
}
.lightbox__btn:focus-visible { color: #fff; }
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { color: #fff; } }
/* wider screens, where the buttons sit over the image: the opaque page black of .zoomer__btn, so a label reads at
   4.5:1 or better over any picture (the phone row below the image stands on the page colour, so it needs none) */
@media (min-width: 769px) { .lightbox__btn { background: var(--white); color: var(--ink); } }
/* keyboard focus there: the chip inverts (as .btn does) inside the two-tone ring, unmistakable over a pale wall or a dark
   canvas alike (the 1px light ring alone was lost on pale frames) */
@media (min-width: 769px) {
  .lightbox .lightbox__btn:focus-visible { outline: none; background: var(--ink-2); color: var(--white); box-shadow: var(--focus-on-image); }
}
.lightbox__close { top: 16px; right: var(--gutter); }
.lightbox__prev { left: var(--gutter); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--gutter); top: 50%; transform: translateY(-50%); }
.lightbox__btn[disabled] { opacity: .3; cursor: default; }
@media (max-width: 768px) {
  /* phones: image, caption and the Prev · count · Next row stack without overlapping;
     dvh keeps that row above Safari's toolbar */
  .lightbox { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
  .lightbox__stage { flex-direction: column; padding-bottom: 60px; }
  .lightbox.is-single .lightbox__stage { padding-bottom: 18px; }
  .lightbox picture { flex: 1 1 0; min-height: 0; width: 100%; max-height: none; display: flex; align-items: center; justify-content: center; }
  .lightbox picture img { max-height: 100%; }
  .lightbox__caption { position: static; flex: 0 0 auto; width: 100%; padding: 12px 0 0; gap: 2px 20px; }
  .lightbox__btn { padding: 7px 18px; }   /* 44px tall */
  .lightbox__close { top: 8px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 8px; transform: none; }
  .lightbox__count { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); line-height: 44px; }
}

/* ------------------------------------------------------------ 10 utilities / a11y */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 3px; }
.hero :focus-visible, .nav-overlay :focus-visible, .lightbox :focus-visible { outline-color: var(--on-image); }
.lightbox :focus-visible { outline-width: 1px; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: var(--gap-y); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------ 11 artworks on dark, print */
/* dark-edged works and covers get a hairline so they do not dissolve into the page (pipeline tags edge:dark) */
.is-edge-dark img, img.is-edge-dark { box-shadow: 0 0 0 1px var(--keyline); }
/* printing: back to the light palette */
@media print {
  :root { color-scheme: light; --white: #fff; --bg-soft: #f6f6f6; --bg-raised: #f6f6f6; --ink: #010101; --ink-2: #151515;
          --grey-1: #585858; --grey-2: #737373; --hairline: #ebebeb; --on-image: #fff; }
  .site-header, .nav-overlay, .site-footer__social { display: none !important; }
}

/* ------------------------------------------------------------ in-page index (murals, shop): anchors to the sections below */
.page-index { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0; list-style: none;
              font-size: var(--fs-meta); letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }
.page-index a { display: inline-block; padding: 6px 0; text-decoration: none; }
.page-index a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {   /* a tapped in-page link would keep its hover underline */
  .page-index a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
}

/* ------------------------------------------------------------ a phone held sideways (iPhone 15: 734 × 343) */
/* a shorter header and no hero floor, so the page title is on the first screen. The lightbox puts Close, Prev and Next
   in side columns beside the image (as on wider screens) and the count in the caption row, so the image gets the
   height: the phone's rows above and below it left ~205 of the 343px */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 60px; }
  .site-logo img { height: 48px; }
  .hero { min-height: 0; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 768px) {
  .lightbox__stage, .lightbox.is-single .lightbox__stage { padding: 8px calc(var(--gutter) + 90px); }
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__count { position: static; transform: none; line-height: inherit; }
}

/* ------------------------------------------------------------ touch tap targets (every touch screen)
   small text links keep their look; an invisible pad takes the touch area to 44px tall without moving the layout. Keyed
   to the input as well as the width: an iPad (820 to 1366px wide) is a touch screen too. Every standalone small link
   belongs here (a hero tagline, a quotation's or a caption's book, the contact rows, a credit line); links inside running
   text need none */
@media (max-width: 768px), (pointer: coarse) {
  .section-head__link, .bio-timeline__pdf a, .pa-links__pdf a, .hero__tagline a, .quote__by a, .quote-quiet__by a,
  .figcaption__text a, .bio-fig__src a, .contact-ways a, .pub-note a { position: relative; }
  .section-head__link::after, .pa-links__pdf a::after {
    content: ""; position: absolute; inset: -12px -8px;
  }
  .hero__tagline a::after, .quote__by a::after, .quote-quiet__by a::after, .figcaption__text a::after, .bio-fig__src a::after,
  .contact-ways a::after, .pub-note a::after {
    content: ""; position: absolute; inset: -15px -8px;
  }
  /* a book's PDF link: its own 12px padding (biography.css) gives the height; a pad above and below covered the next row */
  .bio-timeline__pdf a::after { content: ""; position: absolute; inset: 0 -8px; }
}
/* wider touch screens (iPads): the footer and the prev / next row keep their one-line look, padded invisibly (a phone
   gets 44px rows instead: sections 6 and 7) */
@media (min-width: 769px) and (pointer: coarse) {
  .site-footer a, .prevnext a { position: relative; }
  .site-footer a::after { content: ""; position: absolute; inset: -15px -10px; }
  .prevnext a::after { content: ""; position: absolute; inset: -8px 0; }
}

/* the lightbox opener after a pointer close: focus returns to it without the keyboard ring (lightbox.js) */
[data-lightbox].is-quiet-focus:focus-visible { outline: none; }