@import url("../fonts/fonts.css");

/* ==========================================================================
   Angono Ateliers Association
   Palette drawn from the association's ink-on-paper mermaid logo, with
   accents taken from the natural dyes the ateliers actually paint with:
   mahogany bark, luyang dilaw (yellow ginger) and indigo.
   ========================================================================== */

:root {
  /* Ink & paper — straight from the logo */
  --ink:          #12100e;
  --ink-2:        #26221e;
  --ink-3:        #4a443c;
  --ink-muted:    #6f675c;
  --paper:        #f7f3ea;
  --paper-2:      #efe8db;
  --paper-3:      #e4dbc9;
  --paper-line:   #d6cbb5;

  /* Natural-dye accents */
  --clay:         #a1442a;   /* mahogany bark */
  --clay-deep:    #7d3320;
  --ochre:        #c08a2e;   /* luyang dilaw */
  --indigo:       #223547;

  --focus:        #a1442a;

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --measure: 68ch;
  --radius: 2px;

  --shadow-soft: 0 1px 2px rgba(18, 16, 14, .04), 0 8px 28px rgba(18, 16, 14, .07);
  --shadow-lift: 0 2px 6px rgba(18, 16, 14, .06), 0 26px 60px rgba(18, 16, 14, .16);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { max-width: 100%; display: block; }
img { height: auto; background: var(--paper-2); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.1; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--ink); color: var(--paper);
  font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- layout -- */
.shell { width: min(100% - (var(--gutter) * 2), 1360px); margin-inline: auto; }
.shell--narrow { width: min(100% - (var(--gutter) * 2), 900px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--paper2 { background: var(--paper-2); }

/* Editorial section heading: eyebrow + display title + hairline */
.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.section-head__eyebrow {
  display: block;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 1rem;
}
.section--ink .section-head__eyebrow { color: var(--ochre); }

.section-head__title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  font-weight: 400; letter-spacing: -.015em; line-height: 1.02;
  max-width: 20ch;
}
.section-head__title em { font-style: italic; color: var(--clay); }
.section--ink .section-head__title em { color: var(--ochre); }

.section-head__lead {
  margin-top: 1.5rem; max-width: 52ch;
  color: var(--ink-muted); font-size: 1.0625rem;
}
.section--ink .section-head__lead { color: rgba(247, 243, 234, .68); }

.rule { height: 1px; background: var(--paper-line); border: 0; margin: 0; }
.section--ink .rule { background: rgba(247, 243, 234, .16); }

/* --------------------------------------------------------------- links -- */
.link-quiet {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--paper-line);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.link-quiet:hover { color: var(--clay); border-color: var(--clay); gap: .9rem; }
.link-quiet .arrow { transition: transform .3s var(--ease); }
.link-quiet:hover .arrow { transform: translateX(3px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: 1rem 2.1rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--clay); border-color: var(--clay); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }

.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(247, 243, 234, .4); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* -------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--paper-line); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 78px;
}
@media (min-width: 900px) { .site-header__inner { gap: 1.5rem; } }
@media (min-width: 900px) { .site-header__inner { min-height: 92px; } }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--paper);
  border: 1px solid var(--paper-line);
}
@media (min-width: 900px) { .brand__mark { width: 54px; height: 54px; } }

/* The wordmark reads at every width; it just sets tighter on a phone. */
.brand__text { display: block; line-height: 1.15; min-width: 0; }
.brand__name {
  font-family: var(--display);
  /* Grows with the viewport; the floor keeps the narrowest phones clear of
     the menu button. */
  font-size: clamp(.95rem, 4.4vw, 1.3rem);
  letter-spacing: .01em; white-space: nowrap;
}
.brand__sub {
  font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: .15rem; white-space: nowrap;
}
@media (min-width: 640px) {
  .brand__name { font-size: 1.2rem; }
  .brand__sub { font-size: .5625rem; letter-spacing: .3em; }
}

/* Desktop nav */
.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .nav-desktop ul { display: flex; align-items: center; gap: clamp(1.1rem, 1.8vw, 2.1rem); list-style: none; margin: 0; padding: 0; }
  .nav-desktop a {
    position: relative; display: block; padding: .3rem 0;
    white-space: nowrap;
    font-size: .78rem; font-weight: 500;
    letter-spacing: .13em; text-transform: uppercase;
    text-decoration: none; color: var(--ink-2);
    transition: color .28s var(--ease);
  }
  .nav-desktop a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 1px; background: var(--clay);
    transform: scaleX(0); transform-origin: right;
    transition: transform .34s var(--ease);
  }
  .nav-desktop a:hover { color: var(--clay); }
  .nav-desktop a:hover::after,
  .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .nav-desktop a[aria-current="page"] { color: var(--ink); }
}

.header-actions { display: flex; align-items: center; gap: .35rem; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-2); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.icon-btn:hover { background: var(--paper-3); color: var(--clay); }
.icon-btn svg { width: 20px; height: 20px; }

.nav-toggle { display: inline-flex; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.nav-mobile {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr min(82vw, 340px);
  visibility: hidden; pointer-events: none;
}
.nav-mobile.is-open { visibility: visible; pointer-events: auto; }

.nav-mobile__scrim {
  background: rgba(18, 16, 14, .5);
  opacity: 0; transition: opacity .4s var(--ease);
  border: 0; padding: 0; cursor: pointer;
}
.nav-mobile.is-open .nav-mobile__scrim { opacity: 1; }

.nav-mobile__panel {
  background: var(--paper); padding: 1.1rem 1.4rem 1.2rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  box-shadow: var(--shadow-lift);
}
.nav-mobile.is-open .nav-mobile__panel { transform: translateX(0); }

.nav-mobile__head { display: flex; justify-content: flex-end; margin-bottom: .9rem; }

/* Seven items at 1.6rem filled a phone screen on their own and pushed the
   address and the social row off the bottom. Set at a size where the whole
   drawer — menu, address, icons — fits without scrolling. */
.nav-mobile__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.nav-mobile__list li { border-bottom: 1px solid var(--paper-line); }
.nav-mobile__list a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .72rem 0; text-decoration: none;
  font-family: var(--display); font-size: 1.2rem; letter-spacing: -.005em;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.nav-mobile__list a:hover { color: var(--clay); padding-left: .4rem; }
.nav-mobile__list a[aria-current="page"] { color: var(--clay); }
.nav-mobile__list .idx {
  font-family: var(--sans); font-size: .625rem;
  letter-spacing: .16em; color: var(--ink-muted);
}

.nav-mobile__meta { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--paper-line); }
.nav-mobile__meta h3 {
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .6rem;
}
.nav-mobile__meta ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.nav-mobile__meta a { font-size: .875rem; text-decoration: none; color: var(--ink-2); }
.nav-mobile__meta a:hover { color: var(--clay); }
.nav-mobile__meta p { font-size: .8125rem; line-height: 1.55; color: var(--ink-muted); }

/* Facebook, email and search — the header's own actions, which the drawer
   covers while it is open. */
.nav-mobile__social { display: flex; gap: .6rem; margin-top: .9rem; }
.nav-mobile__social .icon-btn { width: 40px; height: 40px; }
.nav-mobile__social .icon-btn svg { width: 17px; height: 17px; }

body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- hero -- */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }

/* ------------------------------------------------------------- slides -- */
/* All three stack in one grid cell and cross-fade; the grid gives the strip
   its height without anything being absolutely positioned. */
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; opacity: .46; }

/* The wash that keeps the headline legible over any photograph. */
.hero__slides::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(18,16,14,.72) 0%, rgba(18,16,14,.34) 42%, rgba(18,16,14,.88) 100%),
    radial-gradient(120% 80% at 15% 0%, rgba(161,68,42,.28), transparent 60%);
}

.hero__inner {
  position: relative; z-index: 2;
  min-height: clamp(560px, 86vh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(4.5rem, 9vh, 6.5rem);
}

/* --------------------------------------------------------------- copy -- */
/* The three texts share one grid cell, so the block is as tall as the
   longest of them and the button below never shifts as they change. */
.hero__copy { display: grid; max-width: 34rem; }
.hero__text {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.hero__text.is-active { opacity: 1; visibility: visible; }

.hero__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(3rem, 1.4rem + 7vw, 5.5rem);
  line-height: .96; letter-spacing: -.03em;
  max-width: 11ch; margin: 0 0 1.5rem;
}
.hero__title .accent { font-style: italic; color: var(--ochre); }

.hero__sub {
  max-width: 34ch; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.55; color: rgba(247, 243, 234, .82); margin: 0;
}

/* Two calls to action, sitting clear of the text block above them. */
.hero__actions {
  grid-area: 2 / 1;
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: 2.25rem;
}
.hero__cta { background: var(--clay); border-color: var(--clay); }
.hero__cta:hover { background: var(--clay-deep); border-color: var(--clay-deep); }

/* Stacked on a phone, matching each other rather than their label lengths. */
@media (max-width: 559px) {
  .hero__actions { display: grid; grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* Slide counter, as the wireframe marks it: 01 / 03. */
.hero__count {
  grid-area: 3 / 1;
  margin-top: 2rem;
  font-size: .8125rem; letter-spacing: .18em;
  font-variant-numeric: tabular-nums; color: rgba(247, 243, 234, .5);
}
.hero__count b { font-weight: 500; color: var(--paper); }

/* The association's stamp across the foot of the strip. */
.hero__est {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(1.1rem, 3vh, 1.9rem);
  text-align: center;
  font-size: .625rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(247, 243, 234, .46);
}
@media (max-width: 559px) { .hero__est { letter-spacing: .16em; font-size: .5625rem; } }

.hero__scroll {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: flex; align-items: center; gap: .9rem;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247, 243, 234, .5);
}
.hero__scroll span.line {
  width: 44px; height: 1px; background: currentColor;
  transform-origin: left; animation: scrollHint 2.6s var(--ease) infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleX(.35); opacity: .4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* Page banner (inner pages) */
.page-hero { background: var(--ink); color: var(--paper); padding-block: clamp(4.5rem, 12vh, 8rem) clamp(3rem, 7vh, 5rem); }
.page-hero__eyebrow {
  font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ochre); display: block; margin-bottom: 1.4rem;
}
.page-hero__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5.75rem);
  line-height: 1; letter-spacing: -.025em; max-width: 18ch;
}
.page-hero__lead {
  margin-top: 1.75rem; max-width: 56ch;
  color: rgba(247, 243, 234, .72); font-size: 1.0625rem;
}
.page-hero__meta {
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(247, 243, 234, .16);
  display: flex; flex-wrap: wrap; gap: 2.25rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 243, 234, .55);
}
.page-hero__meta b { display: block; color: var(--paper); font-weight: 500; font-size: 1.5rem; font-family: var(--display); letter-spacing: 0; text-transform: none; margin-top: .35rem; }

/* ------------------------------------------------------------- welcome -- */
.feature {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) { .feature { grid-template-columns: 1.05fr 1fr; } }

.feature__media { position: relative; }
.feature__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.feature__media::before {
  content: ""; position: absolute;
  inset: clamp(14px, 2vw, 26px) auto auto clamp(-14px, -2vw, -26px);
  width: 100%; height: 100%;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius); z-index: -1;
}

.feature__eyebrow {
  display: block; font-size: .75rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--clay); margin-bottom: 1.1rem;
}
.feature__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.015em; margin-bottom: 1.5rem;
}
.feature__body { color: var(--ink-3); max-width: 54ch; margin-bottom: 2rem; }

/* Mission — pull-quote treatment */
.mission { background: var(--ink); color: var(--paper); }
.mission__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .mission__inner { grid-template-columns: auto 1fr; align-items: start; } }
.mission__label {
  font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-style: italic; color: var(--ochre); white-space: nowrap;
}
.mission__body {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.6rem);
  line-height: 1.28; letter-spacing: -.01em; max-width: 30ch;
}

/* ------------------------------------------------------- artwork cards -- */
.artist-block { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--paper-line); }
.artist-block:first-of-type { border-top: 0; }

.artist-block__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.artist-block__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.25rem);
  line-height: 1.05; letter-spacing: -.015em;
}
.artist-block__count {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
}

.art-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}

.art-card { display: flex; flex-direction: column; }

.art-card__frame {
  position: relative; display: block;
  background: var(--paper-2);
  border-radius: var(--radius); overflow: hidden;
  cursor: zoom-in; border: 0; padding: 0; width: 100%;
  box-shadow: var(--shadow-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.art-card__frame img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .8s var(--ease), filter .5s var(--ease);
}
.art-card__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,16,14,.42), transparent 45%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.art-card__frame:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.art-card__frame:hover img { transform: scale(1.045); }
.art-card__frame:hover::after { opacity: 1; }

.art-card__zoom {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.art-card__frame:hover .art-card__zoom { opacity: 1; transform: translateY(0); }
.art-card__zoom svg { width: 16px; height: 16px; }

.art-card__body { padding-top: 1.15rem; }
.art-card__title {
  font-family: var(--display); font-size: 1.3rem;
  line-height: 1.24; margin-bottom: .5rem;
}
.art-card__meta { list-style: none; margin: 0; padding: 0; }
.art-card__meta li {
  font-size: .875rem; color: var(--ink-muted); line-height: 1.55;
}
.art-card__price {
  margin-top: .6rem; display: inline-block;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay);
}
.art-card__link {
  margin-top: .85rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  transition: color .25s var(--ease);
}
.art-card__link:hover { color: var(--clay); }
.art-card__link svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------ E-Catalog -- */
.ecatalog {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  display: grid; gap: 1.5rem; align-items: center;
  background: var(--paper-2);
}
@media (min-width: 760px) { .ecatalog { grid-template-columns: 1fr auto; } }
.ecatalog__title {
  font-family: var(--display); font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
}
.ecatalog__status {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: .75rem;
}
.ecatalog__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ochre); flex-shrink: 0;
}

/* ------------------------------------------------------------- gallery -- */
.mosaic {
  display: grid; gap: clamp(.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
  /* Later tiles backfill any cell a feature span steps over. */
  grid-auto-flow: dense;
}

/* On a phone it is a swipe, like the rows above it. Not the .rail class:
   that hands back to a grid at 680px, and the mosaic's feature spans are
   built for 700px — the two breakpoints must not disagree. */
@media (max-width: 699px) {
  .mosaic {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: .4rem;
  }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic__item { scroll-snap-align: start; }
}
@media (min-width: 700px)  { .mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .mosaic { grid-template-columns: repeat(4, 1fr); } }

.mosaic__item {
  position: relative; padding: 0; border: 0; width: 100%;
  background: var(--paper-2); border-radius: var(--radius);
  overflow: hidden; cursor: zoom-in;
  /* The tile owns its shape so spans keep every row the same height. */
  aspect-ratio: 1;
}
.mosaic__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), opacity .5s var(--ease);
}
.mosaic__item::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(18, 16, 14, .18);
  opacity: 0; transition: opacity .4s var(--ease);
}
.mosaic__item:hover img { transform: scale(1.06); }
.mosaic__item:hover::after { opacity: 1; }
/*
 * Two feature tiles for editorial rhythm, sized so the eight images tile
 * exactly with no trailing hole: one 2x2 (4 cells) + one 2x1 (2 cells) +
 * six singles = 12 cells — four rows of three, or three rows of four.
 */
@media (min-width: 700px) {
  /* Two columns wide and two rows tall — still square. */
  .mosaic__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  /*
   * Two columns wide, one row tall. A 2-column tile is wider than 2x a
   * single by exactly one gap, so no fixed ratio fits. Instead its image is
   * taken out of flow: the tile then contributes no height of its own and
   * simply stretches to the row the square tiles beside it define.
   */
  .mosaic__item:nth-child(6) { grid-column: span 2; aspect-ratio: auto; min-height: 0; }
  .mosaic__item:nth-child(6) img { position: absolute; inset: 0; }
}

/* ------------------------------------------------------------ exhibits -- */
.exhibit { border-top: 1px solid var(--paper-line); padding-block: clamp(3rem, 7vw, 5.5rem); }
.exhibit:first-of-type { border-top: 0; padding-top: 0; }

.exhibit__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem;
  justify-content: space-between; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.exhibit__index {
  font-family: var(--display); font-size: 1.1rem; font-style: italic;
  color: var(--clay); flex-shrink: 0;
}
.exhibit__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.4rem);
  line-height: 1.06; letter-spacing: -.015em; flex: 1 1 20ch;
}

/* -------------------------------------------------------------- journal -- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filters a {
  display: inline-block; padding: .55rem 1.15rem;
  font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--paper-line); border-radius: 99px;
  transition: all .28s var(--ease);
}
.filters a:hover { border-color: var(--ink); color: var(--ink); }
.filters a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.post-grid {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--paper-2);
  box-shadow: var(--shadow-soft);
  transition: box-shadow .5s var(--ease);
}
.post-card__media img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover;
  transition: transform .9s var(--ease);
}
.post-card:hover .post-card__media { box-shadow: var(--shadow-lift); }
.post-card:hover .post-card__media img { transform: scale(1.05); }

.post-card__tag {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  padding: .4rem .85rem; border-radius: 99px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}

.post-card__body { padding-top: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.post-card__date {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .7rem;
}
.post-card__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem);
  line-height: 1.18; letter-spacing: -.01em; margin-bottom: .7rem;
}
.post-card__title a { text-decoration: none; background-image: linear-gradient(var(--clay), var(--clay)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease), color .3s var(--ease); }
.post-card:hover .post-card__title a { background-size: 100% 1px; color: var(--clay); }
/* The cards carry the title alone, so "Continue Reading" — pushed to the
   bottom of the card by `margin-top: auto` — would otherwise sit right under
   the headline on a short title and a long way off on a tall one. This is the
   minimum gap it keeps from the title. */
.post-card__more { margin-top: auto; padding-top: 1.15rem; }

/* Featured first card on the journal page */
@media (min-width: 900px) {
  .post-grid--lead { grid-template-columns: repeat(6, 1fr); }
  .post-grid--lead > .post-card:first-child { grid-column: span 6; }
  .post-grid--lead > .post-card:first-child { flex-direction: row; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .post-grid--lead > .post-card:first-child .post-card__media { flex: 1 1 58%; }
  .post-grid--lead > .post-card:first-child .post-card__media img { aspect-ratio: 3 / 2; }
  .post-grid--lead > .post-card:first-child .post-card__body { flex: 1 1 42%; padding-top: 0; }
  .post-grid--lead > .post-card:first-child .post-card__title { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
  .post-grid--lead > .post-card:not(:first-child) { grid-column: span 3; }
}
@media (min-width: 1200px) {
  .post-grid--lead > .post-card:not(:first-child) { grid-column: span 2; }
}

/* ---------------------------------------------------------- post article -- */
.article { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem); }

.article__back {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted); text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.article__back:hover { color: var(--clay); gap: .85rem; }

.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1.4rem;
}
.article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--paper-line); }
.article__meta .cat { color: var(--clay); font-weight: 600; }

.article__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  line-height: 1.04; letter-spacing: -.02em;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 22ch;
}

.prose { max-width: var(--measure); font-size: 1.0625rem; color: var(--ink-2); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  line-height: 1.12; letter-spacing: -.015em;
  margin-top: 2.4em; color: var(--ink);
}
.prose h3 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  line-height: 1.2; margin-top: 2em; color: var(--ink);
}
.prose h4 {
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); margin-top: 2em;
}
.prose ul, .prose ol { padding-left: 1.4em; margin-block: 1.3em; }
.prose li { margin-bottom: .6em; }
.prose li::marker { color: var(--clay); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--clay); text-decoration-color: color-mix(in srgb, var(--clay) 40%, transparent); }
.prose a:hover { text-decoration-color: var(--clay); }
.prose hr { border: 0; height: 1px; background: var(--paper-line); margin-block: 2.5em; }

.prose figure { margin: 2.2em 0; }
.prose figure img {
  width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.prose figure a { display: block; }
.prose figcaption {
  margin-top: .85rem; font-size: .875rem;
  color: var(--ink-muted); line-height: 1.6;
  padding-left: 1rem; border-left: 2px solid var(--paper-line);
}

/* Wide figures break the measure for impact */
@media (min-width: 1000px) {
  .prose figure { width: min(118%, calc(var(--measure) + 12rem)); margin-inline: calc((100% - min(118%, calc(var(--measure) + 12rem))) / 2); }
}

.artist-statement {
  margin-top: 2.2em; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-2); border-left: 2px solid var(--clay);
  border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.75; color: var(--ink-2);
}

/* Preserved verbatim from the original post source (see README). */
.post-raw-fragment {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem; color: var(--ink-muted);
  word-break: break-all; opacity: .55;
}

.article__share { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--paper-line); }
.article__share h2 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1rem;
}
.share-list { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.share-list a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--paper-line); color: var(--ink-2);
  transition: all .28s var(--ease);
}
.share-list a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share-list svg { width: 17px; height: 17px; }

/* Post sidebar */
.article-layout { display: grid; gap: clamp(3rem, 6vw, 5rem); }
@media (min-width: 1024px) { .article-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

.sidebar { display: grid; gap: 2.75rem; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 120px; } }
.sidebar h2 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1.1rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--paper-line);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sidebar__cats a { font-size: .9375rem; text-decoration: none; color: var(--ink-2); transition: color .25s var(--ease); }
.sidebar__cats a:hover { color: var(--clay); }

.mini-post { display: flex; gap: .9rem; align-items: flex-start; text-decoration: none; }
.mini-post img { width: 62px; height: 62px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.mini-post__title { font-family: var(--display); font-size: 1.0625rem; line-height: 1.25; margin-bottom: .25rem; transition: color .25s var(--ease); }
.mini-post:hover .mini-post__title { color: var(--clay); }
.mini-post__date { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* --------------------------------------------------------- the ateliers -- */
.master { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 950px) { .master { grid-template-columns: .85fr 1fr; } }

.master__media img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.master__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  line-height: 1; letter-spacing: -.025em; margin-bottom: 1.25rem;
}
.master__epithet {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.85rem);
  color: var(--clay); margin-bottom: 2.5rem; line-height: 1.35;
}
.master__label {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 1.1rem;
  padding-bottom: .75rem; border-bottom: 1px solid var(--paper-line);
}
.master__body { color: var(--ink-3); max-width: 58ch; }
.master__body p + p { margin-top: 1.2em; }
.master__truncated {
  display: block; margin-top: 1.5rem; padding: .9rem 1.15rem;
  background: var(--paper-2); border-left: 2px solid var(--ochre);
  border-radius: var(--radius);
  font-size: .8125rem; color: var(--ink-muted); line-height: 1.6;
}

/* ------------------------------------------------------------ announce -- */
.announce-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 800px) { .announce-grid { grid-template-columns: repeat(2, 1fr); } }

.announce__media { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); transition: box-shadow .5s var(--ease); }
.announce__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.announce:hover .announce__media { box-shadow: var(--shadow-lift); }
.announce:hover .announce__media img { transform: scale(1.04); }
.announce__body { padding-top: 1.35rem; }
.announce__body p { font-size: .9375rem; color: var(--ink-3); line-height: 1.7; margin-bottom: .25rem; }
.announce__body a { color: var(--clay); }

/* ---------------------------------------------------------- newsletter -- */
.newsletter { background: var(--ink); color: var(--paper); }
.newsletter__inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .newsletter__inner { grid-template-columns: 1fr 1fr; } }

.newsletter__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  line-height: 1.04; letter-spacing: -.02em; margin-bottom: 1rem;
}
.newsletter__note { color: rgba(247, 243, 234, .7); max-width: 40ch; }

.subscribe-form { display: grid; gap: 1rem; }
@media (min-width: 520px) { .subscribe-form { grid-template-columns: 1fr auto; align-items: end; } }

.field { display: grid; gap: .5rem; }
.field label {
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 243, 234, .6);
}
.field input, .field textarea {
  width: 100%; padding: .95rem 0;
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(247, 243, 234, .28);
  border-radius: 0; font: inherit;
  transition: border-color .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(247, 243, 234, .38); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ochre); }

/* ------------------------------------------------------------- contact -- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 950px) { .contact__grid { grid-template-columns: 1fr 1fr; } }

.contact__intro h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  line-height: 1.15; margin-bottom: .9rem;
}
.contact__intro p { color: var(--ink-muted); max-width: 42ch; }

.info-block { margin-top: 2.75rem; }
.info-block h4 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .85rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--paper-line);
}
.info-block__name { font-family: var(--display); font-size: 1.5rem; margin-bottom: .35rem; }
.info-block__addr { color: var(--ink-3); }
.info-block__mail { display: inline-block; margin-top: .6rem; color: var(--clay); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); }
.info-block__mail:hover { border-bottom-color: var(--clay); }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .6rem 0; border-bottom: 1px solid var(--paper-3);
  font-size: .9375rem;
}
.hours li:last-child { border-bottom: 0; }
.hours .day { font-weight: 500; color: var(--ink-2); }
.hours .val { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.hours li.is-today { color: var(--ink); }
.hours li.is-today .day { color: var(--clay); }
.hours li.is-today .val { color: var(--ink); font-weight: 500; }


.contact__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Contact form card */
.contact-card {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--shadow-lift);
}
.contact-card h2,
.contact-card h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  margin-bottom: 1.75rem;
}
/* When a lead follows, the heading hands its spacing to the paragraph. */
.contact-card h2:has(+ .contact-card__lead),
.contact-card h3:has(+ .contact-card__lead) { margin-bottom: .55rem; }
.contact-card .field + .field { margin-top: 1.5rem; }
.contact-card textarea { min-height: 118px; resize: vertical; }

.file-field { margin-top: 1.75rem; }
.file-field__label {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .7rem 1.15rem; cursor: pointer;
  border: 1px dashed rgba(247, 243, 234, .32); border-radius: var(--radius);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247, 243, 234, .78);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.file-field__label:hover { border-color: var(--ochre); color: var(--ochre); }
.file-field input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-field__count { display: block; margin-top: .7rem; font-size: .75rem; color: rgba(247, 243, 234, .5); }

.legal { margin-top: 1.75rem; font-size: .75rem; line-height: 1.65; color: rgba(247, 243, 234, .5); }
.legal a { color: rgba(247, 243, 234, .78); }

.contact-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.btn--quiet {
  background: transparent; border-color: transparent;
  color: rgba(247, 243, 234, .6); padding-inline: .5rem;
}
.btn--quiet:hover { background: transparent; border-color: transparent; color: var(--paper); transform: none; }

.form-note {
  margin-top: 1.25rem; padding: .85rem 1.1rem;
  background: rgba(192, 138, 46, .12); border-left: 2px solid var(--ochre);
  border-radius: var(--radius);
  font-size: .8125rem; line-height: 1.6; color: rgba(247, 243, 234, .78);
}

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--ink); color: rgba(247, 243, 234, .7); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }

.footer__top { display: grid; gap: clamp(2.25rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 800px)  { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; text-decoration: none; color: var(--paper); }
.footer__brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.footer__brand span { font-family: var(--display); font-size: 1.3rem; line-height: 1.2; }
.footer__blurb { max-width: 34ch; font-size: .9375rem; }

.footer h2 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247, 243, 234, .45); margin-bottom: 1.15rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer a { color: rgba(247, 243, 234, .7); text-decoration: none; font-size: .9375rem; transition: color .25s var(--ease); }
.footer a:hover { color: var(--ochre); }

.footer__social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(247, 243, 234, .2);
  transition: all .28s var(--ease);
}
.footer__social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.footer__social svg { width: 17px; height: 17px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid rgba(247, 243, 234, .14);
  font-size: .8125rem; color: rgba(247, 243, 234, .5);
}

/* -------------------------------------------------------- cookie notice -- */
.cookie {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 130;
  right: auto; width: min(520px, calc(100% - 2rem)); padding: 1.5rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  transform: translateY(calc(100% + 2rem)); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.cookie.is-visible { transform: translateY(0); opacity: 1; }
.cookie[hidden] { display: none; }
.cookie h2 { font-family: var(--display); font-size: 1.35rem; margin-bottom: .6rem; }
.cookie p { font-size: .875rem; color: var(--ink-muted); line-height: 1.65; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------- lightbox -- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(10, 9, 8, .95);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox[hidden] { display: none; }

.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); color: rgba(247,243,234,.6); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.lightbox__stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lightbox__stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: var(--radius);
  transform: scale(.97); opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.lightbox.is-open .lightbox__stage img { transform: scale(1); opacity: 1; }

.lightbox__caption {
  padding: 1.25rem var(--gutter) 2rem;
  color: rgba(247, 243, 234, .75);
  font-size: .875rem; line-height: 1.6; text-align: center;
  max-width: 70ch; margin-inline: auto;
}
.lightbox__caption strong { display: block; font-family: var(--display); font-size: 1.25rem; color: var(--paper); font-weight: 400; margin-bottom: .35rem; }

.lightbox__close, .lightbox__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: rgba(247, 243, 234, .08); color: var(--paper);
  border: 1px solid rgba(247, 243, 234, .18); border-radius: 50%;
  cursor: pointer; transition: background .25s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(247, 243, 234, .2); }
.lightbox__close svg, .lightbox__nav svg { width: 18px; height: 18px; }

.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox__nav--prev { left: max(.75rem, calc(var(--gutter) - 2.5rem)); }
.lightbox__nav--next { right: max(.75rem, calc(var(--gutter) - 2.5rem)); }
@media (max-width: 600px) {
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
  .lightbox__caption { padding-bottom: 5rem; }
}

/* ------------------------------------------------------------- reveal -- */
/* Only hide ahead of the animation when JS is running — without it the
   page must still show every section. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal-d1.is-in { transition-delay: .07s; }
.js .reveal-d2.is-in { transition-delay: .14s; }
.js .reveal-d3.is-in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- print -- */
@media print {
  .site-header, .nav-mobile, .cookie, .lightbox, .site-footer, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ==========================================================================
   REDESIGN COMPONENTS
   Museum + contemporary-gallery layer built on the tokens above, following
   the association's wireframes and the Navigation / CTA guide.
   ========================================================================== */

/* ------------------------------------------------------------- header -- */
.header-social { display: none; }
@media (min-width: 1100px) { .header-social { display: inline-flex; } }

/* Light page banner (inner pages) */
.page-hero--light {
  background: var(--paper-2); color: var(--ink);
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--paper-line);
}
.page-hero--light .page-hero__eyebrow { color: var(--clay); }
.page-hero--light .page-hero__lead { color: var(--ink-muted); }
.page-hero__note { margin-top: .85rem; max-width: 56ch; color: var(--ink-muted); font-size: .9375rem; }

.section--top { padding-top: clamp(2.5rem, 5vw, 4rem); }
.section-lead { max-width: 62ch; color: var(--ink-muted); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

/* ----------------------------------------------------------- row head -- */
.row-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .75rem 2rem;
  padding-bottom: 1.1rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--paper-line);
}
.row-head__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.015em;
}
.section--paper2 .row-head { border-bottom-color: var(--paper-3); }
.mission .row-head { border-bottom-color: rgba(247, 243, 234, .18); }

.result-count { font-size: .8125rem; letter-spacing: .04em; color: var(--ink-muted); margin: 0 0 1.5rem; }
/* A search that found nothing still offers two ways on, so this is a block
   with buttons rather than a line of text. */
.empty-state {
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  text-align: center;
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper-2);
}
.empty-state[hidden] { display: none; }

.empty-state__msg {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.25; color: var(--ink);
}
.empty-state__clear { margin-top: .85rem; }
.empty-state__lead {
  max-width: 34ch; margin: .85rem auto 0;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-muted);
}

.empty-state__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-top: 1.75rem;
}
@media (max-width: 479px) {
  .empty-state__actions { display: grid; }
  .empty-state__actions .btn { width: 100%; }
}

/* -------------------------------------------------------- breadcrumbs -- */
.crumbs { padding-block: 1.5rem .25rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .08em; color: var(--ink-muted); }
.crumbs li + li::before { content: "/"; color: var(--paper-line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--clay); }
.crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------- artist cards -- */
.artist-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.artist-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }

/*
 * Five across on desktop: the fifteen members land as three clean rows.
 * The 3-column step tiles evenly too (five rows), so no width leaves a
 * ragged last row.
 */
/* ---------------------------------------------------------------- rails -- */
/*
 * The homepage rows the wireframe draws as a swipeable strip. On a phone this
 * is a real horizontal scroller that snaps card to card; from tablet width up
 * it becomes an ordinary grid, because a mouse has nothing to swipe with.
 *
 * It is plain overflow scrolling — no JavaScript, no cloned nodes — so the
 * reading order, the keyboard order and the card markup are all unchanged.
 */
.rail {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Full-bleed on a phone, so a card can sit half off the screen edge and
     read as "there is more this way". */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: .4rem;
  /* Snap points sit at the scrollport edge, which ignores padding — without
     this the rail scrolls itself sideways by one gutter on load and the first
     card starts flush against the screen edge. */
  scroll-padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }

/* A second card peeking in is the whole cue; below that the cards get silly. */
@media (min-width: 420px) { .rail { grid-auto-columns: 58%; } }

/* From tablet up it is a grid again: no scrolling, no snapping, no bleed.
   Rows get far more room than columns — each card carries a caption, and with
   one gap doing both jobs the caption of one row sat almost against the
   picture of the next. */
@media (min-width: 680px) {
  .rail {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
    column-gap: clamp(1.5rem, 3.2vw, 3.25rem);
    row-gap: clamp(2.75rem, 4vw, 4rem);
  }
}
@media (min-width: 680px) {
  .show-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .work-rail   { grid-template-columns: repeat(4, 1fr); }
  .show-rail   { grid-template-columns: repeat(4, 1fr); }
  .artist-rail { grid-template-columns: repeat(5, 1fr); }
  .artist-rail .artist-card--compact .artist-card__name  { font-size: 1.1rem; }
  .artist-rail .artist-card--compact .artist-card__focus { font-size: .8125rem; }
}

.artist-card { display: flex; flex-direction: column; height: 100%; }
.artist-card__media {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--ink); border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .5s var(--ease);
}
.artist-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* A small lift opens the shadows on the dark-backdrop portraits without
     blowing out the one shot against a light wall. */
  filter: grayscale(1) brightness(1.06) contrast(1.03);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.artist-card:hover .artist-card__media { box-shadow: var(--shadow-lift); }
.artist-card:hover .artist-card__media img { transform: scale(1.05); filter: grayscale(0) contrast(1); }

.artist-card__initials {
  font-family: var(--display); font-size: 2.4rem;
  color: var(--ochre); letter-spacing: .04em;
}

.artist-card__body { padding-top: .9rem; }
.artist-card__name { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.artist-card__name a { text-decoration: none; transition: color .25s var(--ease); }
.artist-card:hover .artist-card__name a { color: var(--clay); }
.artist-card__focus { font-size: .8125rem; color: var(--ink-muted); margin-top: .2rem; }
.artist-card__count { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-top: .5rem; }
.artist-card__cta {
  display: inline-block; margin-top: .75rem;
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay);
}
.artist-card--compact .artist-card__name { font-size: 1.0625rem; }

/* ------------------------------------------------------ artwork cards -- */
.work-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr));
}
.work-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

.work-card { display: flex; flex-direction: column; height: 100%; }
.work-card__media {
  display: block; overflow: hidden; background: var(--paper-2);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
  transition: box-shadow .5s var(--ease);
}
.work-card__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform .8s var(--ease);
}
.work-card:hover .work-card__media { box-shadow: var(--shadow-lift); }
.work-card:hover .work-card__media img { transform: scale(1.045); }

.work-card__body { padding-top: 1rem; display: flex; flex-direction: column; flex: 1; }
.work-card__title { font-family: var(--display); font-size: 1.25rem; line-height: 1.22; }
.work-card__title a { text-decoration: none; transition: color .25s var(--ease); }
.work-card:hover .work-card__title a { color: var(--clay); }
.work-card__artist { font-size: .875rem; color: var(--ink-3); margin-top: .15rem; }
.work-card__artist a { text-decoration: none; }
.work-card__artist a:hover { color: var(--clay); }
.work-card__meta { font-size: .8125rem; color: var(--ink-muted); margin-top: .4rem; }
.work-card__price { margin-top: .7rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.work-card__cta { margin-top: auto; align-self: flex-start; }
.work-card .work-card__cta { margin-top: 1rem; }

.price { font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.price__label { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

.tag-inquire, .tag-available {
  display: inline-block; padding: .3rem .7rem; border-radius: 99px;
  font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.tag-inquire  { background: var(--paper-3); color: var(--ink-2); }
.tag-available{ background: rgba(75, 127, 82, .14); color: #3c6b43; }

/* --------------------------------------------------- exhibition cards -- */
.show-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.show-card { display: flex; flex-direction: column; height: 100%; }
.show-card__media {
  display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-2); box-shadow: var(--shadow-soft);
  transition: box-shadow .5s var(--ease);
}
.show-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.show-card:hover .show-card__media { box-shadow: var(--shadow-lift); }
.show-card:hover .show-card__media img { transform: scale(1.05); }
.show-card__body { padding-top: 1rem; }
.show-card__title { font-family: var(--display); font-size: 1.2rem; line-height: 1.22; }
.show-card__title a { text-decoration: none; transition: color .25s var(--ease); }
.show-card:hover .show-card__title a { color: var(--clay); }
.show-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: .45rem; font-size: .75rem; letter-spacing: .06em; color: var(--ink-muted);
}
.show-card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--paper-line); }

.show-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.25rem; }
.show-meta__item { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-muted); }
.show-meta__item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ------------------------------------------------------ inquiry band -- */
.inquiry-band { background: var(--ink); color: var(--paper); }
.inquiry-band__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.5rem 2.5rem;
}
.inquiry-band h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.1;
}
.inquiry-band p { margin-top: .5rem; color: rgba(247, 243, 234, .7); max-width: 46ch; }

/* ---------------------------------------------------------- toolbar -- */
.toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 1.5rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--paper-line);
}

.toolbar__controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.select { position: relative; display: inline-flex; }
.select select {
  appearance: none; -webkit-appearance: none;
  padding: .7rem 2.4rem .7rem 1rem;
  font: inherit; font-size: .875rem; color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: 99px; cursor: pointer;
  transition: border-color .3s var(--ease);
}
.select select:hover { border-color: var(--ink-muted); }
.select::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg); pointer-events: none;
}

/* --------------------------------------------------- artist profile -- */
/* Portrait beside the text on a wide screen, stacked on a phone — the
   wireframe's single column, widened. The highlights sidebar it used to carry
   is not in the wireframe and has gone. */
.profile { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .profile { grid-template-columns: .85fr 1.15fr; } }

.profile__media {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.profile__media img { width: 100%; height: 100%; object-fit: cover; }
.profile__initials { font-family: var(--display); font-size: 4rem; color: var(--ochre); }

.profile__name {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  line-height: 1.02; letter-spacing: -.025em;
}
.profile__focus { margin-top: .6rem; font-size: .9375rem; color: var(--ink-muted); }
.profile__epithet {
  margin-top: .9rem; font-family: var(--display); font-style: italic;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); color: var(--clay);
}
.profile__place {
  display: flex; align-items: center; gap: .5rem;
  margin-top: 1.1rem; font-size: .8125rem; color: var(--ink-muted);
}
.profile__place svg { width: 15px; height: 15px; }

.profile__label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); padding-bottom: .7rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--paper-line);
}
.profile__bio { margin-top: 2.25rem; color: var(--ink-3); max-width: 62ch; }
.profile__bio p + p { margin-top: 1.1em; }
.profile__nobio {
  margin-top: 2rem; padding: 1rem 1.25rem;
  background: var(--paper-2); border-left: 2px solid var(--ochre);
  border-radius: var(--radius); font-size: .875rem; color: var(--ink-muted);
}
.profile__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.profile__follow { display: flex; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.profile__follow span { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.profile__follow a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--paper-line); color: var(--ink-2);
  transition: all .28s var(--ease);
}
.profile__follow a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.profile__follow svg { width: 15px; height: 15px; }


/* -------------------------------------------------- artwork detail -- */
.work-detail { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px)  { .work-detail { grid-template-columns: 1.2fr 1fr; } }
@media (min-width: 1180px) { .work-detail { grid-template-columns: 1.3fr 1fr .8fr; } }

.work-detail__frame {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  position: relative; overflow: hidden;
  background: var(--paper-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.work-detail__frame img { width: 100%; height: auto; }
.work-detail__frame:hover .art-card__zoom { opacity: 1; transform: translateY(0); }

.work-detail__title {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.02em;
}
.work-detail__by { margin-top: .6rem; font-size: 1.0625rem; color: var(--ink-muted); }
.work-detail__by a { color: var(--clay); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--clay) 35%, transparent); }
.work-detail__by a:hover { border-bottom-color: var(--clay); }
.work-detail__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.work-detail__bio { margin-top: 1.1rem; font-size: .875rem; color: var(--ink-muted); line-height: 1.7; }

.spec { margin-top: 2rem; }
.spec > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--paper-3);
}
.spec dt { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.spec dd { margin: 0; text-align: right; color: var(--ink-2); }
.spec__price { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.as-published {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem;
  background: var(--paper-2); border-radius: var(--radius);
}
.as-published ul { list-style: none; margin: 0; padding: 0; }
.as-published li { font-size: .8125rem; color: var(--ink-muted); line-height: 1.7; }

.mini-artist { display: flex; gap: .9rem; align-items: center; text-decoration: none; }
.mini-artist img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mini-artist__initials {
  display: grid; place-items: center; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--ink); color: var(--ochre);
  font-family: var(--display); font-size: 1.3rem;
}
.mini-artist__name { display: block; font-family: var(--display); font-size: 1.15rem; transition: color .25s var(--ease); }
.mini-artist:hover .mini-artist__name { color: var(--clay); }
.mini-artist__focus { display: block; font-size: .75rem; color: var(--ink-muted); margin-top: .1rem; }

/* ------------------------------------------------ exhibition detail -- */
.show-detail { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 950px) { .show-detail { grid-template-columns: 1.3fr 1fr; } }

.show-detail__frame {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  overflow: hidden; background: var(--paper-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.show-detail__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; margin-top: .75rem; }
.thumbs__item {
  padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  background: var(--paper-2); border-radius: var(--radius);
  transition: opacity .3s var(--ease);
}
.thumbs__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumbs__item:hover { opacity: .78; }

.show-detail__story { margin-top: 2.25rem; }
.show-detail__story p { color: var(--ink-3); }

/* ---------------------------------------------- mission / vision / about -- */
.mv-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 760px) { .mv-grid { grid-template-columns: repeat(2, 1fr); } }

.mv-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(247, 243, 234, .06);
  border: 1px solid rgba(247, 243, 234, .14);
  border-radius: var(--radius);
}
.mv-card--wide { margin-top: clamp(1.25rem, 3vw, 2rem); }
.mv-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(192, 138, 46, .16); color: var(--ochre);
  margin-bottom: 1.1rem;
}
.mv-card__icon svg { width: 20px; height: 20px; }
.mv-card h3 { font-family: var(--display); font-size: 1.4rem; margin-bottom: .6rem; color: var(--paper); }
.mv-card p { color: rgba(247, 243, 234, .74); font-size: .9375rem; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) {
  .timeline { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
}
.timeline__item {
  position: relative; padding: 0 0 2rem 1.75rem;
  border-left: 1px solid var(--paper-line);
}
@media (min-width: 900px) {
  .timeline__item { padding: 2.25rem 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--paper-line); }
}
.timeline__dot {
  position: absolute; left: -5px; top: .25rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--clay);
}
@media (min-width: 900px) { .timeline__dot { left: 0; top: -5px; } }
.timeline__year { display: block; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.timeline__body { display: block; margin-top: .4rem; font-size: .875rem; color: var(--ink-muted); max-width: 30ch; }

.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.4fr 1fr; } }
.split__aside {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-2); border-radius: var(--radius);
}
.split__aside .mv-card__icon { background: rgba(161, 68, 42, .12); color: var(--clay); }
.split__aside h3 { font-family: var(--display); font-size: 1.35rem; margin-bottom: .6rem; }
.split__aside p { font-size: .9375rem; color: var(--ink-muted); }

/* ---------------------------------------------------------- visit -- */
.info-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 640px)  { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .info-grid { grid-template-columns: repeat(4, 1fr); } }

.info-card {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--paper-2); border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}
.info-card__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--paper); color: var(--clay); margin-bottom: 1rem;
}
.info-card__icon svg { width: 19px; height: 19px; }
.info-card h2 {
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .7rem;
}
.info-card p { font-size: .9375rem; }
.info-card__muted { color: var(--ink-muted); font-size: .8125rem; margin-top: .35rem; }
.info-card .hours { margin-top: .75rem; }
.info-card .hours li { padding: .4rem 0; font-size: .8125rem; border-bottom-color: var(--paper-3); }

.tick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tick-list li {
  position: relative; padding-left: 1.3rem; font-size: .875rem; color: var(--ink-3); line-height: 1.55;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--clay);
}

.find-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 800px) { .find-grid { grid-template-columns: 1fr 1.2fr; } }
.find-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--radius);
}
.howto > div { padding: .9rem 0; border-bottom: 1px solid var(--paper-3); }
.howto > div:last-child { border-bottom: 0; }
.howto dt { font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.howto dd { margin: 0; font-size: .875rem; color: var(--ink-muted); line-height: 1.6; }

.plan-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 640px)  { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }
.plan-card {
  padding: clamp(1.4rem, 2.5vw, 1.9rem); text-align: center;
  background: var(--paper-2); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
}
.plan-card h3 { font-family: var(--display); font-size: 1.25rem; }
.plan-card p { font-size: .875rem; color: var(--ink-muted); }
.plan-card .btn { margin-top: auto; }

/* --------------------------------------------------------- contact -- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 950px) { .contact-grid { grid-template-columns: 1.25fr 1fr; } }

.contact-card__lead { color: rgba(247, 243, 234, .65); font-size: .9375rem; margin-top: 0; margin-bottom: 1.75rem; }
.contact-card .field select {
  width: 100%; padding: .95rem 0; background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(247, 243, 234, .28);
  border-radius: 0; font: inherit; appearance: none; -webkit-appearance: none;
}
.contact-card .field select:focus { outline: none; border-bottom-color: var(--ochre); }
.contact-card .field select option { color: var(--ink); background: var(--paper); }
.btn--block { width: 100%; margin-top: 1.75rem; }
.btn--sm { padding: .65rem 1.3rem; font-size: .6875rem; }

.inquiry-about {
  display: flex; gap: 1rem; align-items: center;
  padding: .9rem; margin-bottom: 1.75rem;
  background: rgba(247, 243, 234, .07);
  border: 1px solid rgba(247, 243, 234, .16);
  border-radius: var(--radius);
}
.inquiry-about img { width: 58px; height: 58px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.inquiry-about__label { display: block; font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
.inquiry-about__title { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--paper); margin-top: .15rem; }
.inquiry-about__meta { display: block; font-size: .75rem; color: rgba(247, 243, 234, .6); margin-top: .1rem; }

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper-2); color: var(--clay);
}
.contact-list__icon svg { width: 18px; height: 18px; }
.contact-list strong {
  display: block; font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: .3rem;
}
.contact-list span:last-child { font-size: .9375rem; color: var(--ink-2); line-height: 1.6; }
.contact-list a { color: var(--clay); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- faq -- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: var(--radius); overflow: hidden;
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 500; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__mark { position: relative; width: 13px; height: 13px; flex-shrink: 0; }
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: var(--ink-muted); transition: transform .3s var(--ease);
}
.faq__mark::after { transform: rotate(90deg); }
.faq__item[open] .faq__mark::after { transform: rotate(0deg); }
.faq__body { padding: 0 1.35rem 1.25rem; font-size: .9375rem; color: var(--ink-muted); line-height: 1.7; }
.faq__body a { color: var(--clay); }

/* ---------------------------------------------------------- footer -- */
.footer__top { grid-template-columns: 1fr; }
@media (min-width: 720px)  { .footer__top { grid-template-columns: 1.3fr 1fr; } }
@media (min-width: 1024px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.footer__contact { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.footer__contact li { font-size: .9375rem; color: rgba(247, 243, 234, .7); }


/* ==========================================================================
   POLISH LAYER
   Motion and editorial furniture layered on top of the base system. Every
   effect here is decorative: it is gated behind `.js`, never hides content,
   and is switched off entirely by prefers-reduced-motion at the end.
   ========================================================================== */

/* ------------------------------------------------------ scroll progress -- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 110;
  pointer-events: none; background: transparent;
}
.scroll-progress__bar {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--clay), var(--ochre));
}

/* ---------------------------------------------------------- back to top -- */
.to-top {
  position: fixed; z-index: 85;
  right: clamp(1rem, 3vw, 2.25rem);
  /* Stacked above the Virtual Gallery button, which holds the corner. */
  bottom: calc(clamp(1rem, 3vw, 2.25rem) + 4.25rem);
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .3s var(--ease);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--clay); }
.to-top svg { width: 18px; height: 18px; }

/* ------------------------------------------------------- hero entrance -- */
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes kenBurns { from { transform: scale(1.03); } to { transform: scale(1.13); } }
@keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Only the first slide's copy animates in; later slides cross-fade instead,
   which is what .hero__text handles. */
.js .hero__actions,
.js .hero__count { opacity: 0; animation: riseIn .95s var(--ease) forwards; }
.js .hero__actions { animation-delay: .34s; }
.js .hero__count   { animation-delay: .46s; }

/* A very slow drift keeps the hero from feeling like a flat photograph. */
.hero__media img { animation: kenBurns 26s var(--ease) forwards; transform-origin: 55% 45%; }

/* --------------------------------------------------- media fade reveal -- */
/* Every large image — portraits, artworks, exhibition and feature shots —
   simply fades up. The base .reveal also travels 22px, which reads as motion
   rather than as a picture coming into view; this drops the travel and
   changes opacity alone. */
.js .reveal--fade { opacity: 0; transform: none; }
.js .reveal--fade.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease);
}

/* ------------------------------------------------ section rule that draws -- */
.row-head { position: relative; }
.row-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--clay);
  transform: scaleX(0); transform-origin: 0 50%;
}
.js .row-head.is-in::after { animation: drawLine 1.1s var(--ease) .15s forwards; }

/* ----------------------------------------------------------- marquee -- */
/* A slow band of member names — the association reading as a collective. */
.marquee {
  overflow: hidden; padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink); color: rgba(247, 243, 234, .82);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem; width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee__item {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  white-space: nowrap; letter-spacing: -.01em;
}
.marquee__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ochre); flex-shrink: 0; }

/* -------------------------------------------------------- quote band -- */
.quote-band {
  background: var(--paper);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
}
/* `ch` is measured on the display font's zero, which is far narrower than
   this text actually sets — a rem measure keeps the quote to three lines. */
.quote-band__inner { max-width: min(46rem, 100%); margin-inline: auto; text-align: center; }
/* The UA gives blockquote 40px side margins, which was quietly eating 80px
   of the measure — most visible on a phone. */
.quote-band blockquote { margin: 0; }
.quote-band__mark {
  display: block; font-family: var(--display); font-size: 4rem;
  line-height: 1; color: var(--clay); opacity: .35; margin-bottom: -.5rem;
}
.quote-band__text {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.32; letter-spacing: -.01em; color: var(--ink);
}
.quote-band__cite {
  display: block; margin-top: 1.5rem;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); font-style: normal;
}

/* ------------------------------------------------- refined interactions -- */
/* Artwork frames lift a touch more decisively. */
.work-card__media, .show-card__media, .artist-card__media,
.post-card__media, .mosaic__item {
  will-change: transform;
}
.link-quiet { position: relative; }

/* Buttons get a soft sheen on hover rather than only a colour swap. */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.14) 50%, transparent 80%);
  transform: translateX(-120%);
}
.js .btn:hover::after { transition: transform .8s var(--ease); transform: translateX(120%); }

/* Focus ring reads clearly on both grounds. */
.section--ink :focus-visible, .mission :focus-visible,
.inquiry-band :focus-visible, .marquee :focus-visible,
.site-footer :focus-visible, .contact-card :focus-visible { outline-color: var(--ochre); }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__actions, .js .hero__count { opacity: 1; animation: none; }
  .hero__slide { transition: none; }
  .hero__text  { transition: none; }
  .hero__media img { animation: none; }
  .marquee__track { animation: none; }
  .js .reveal--fade, .js .reveal--fade.is-in { opacity: 1; transition: none; }
  .js .row-head.is-in::after { animation: none; transform: scaleX(1); }
  .scroll-progress { display: none; }
  .js .btn:hover::after { transition: none; transform: translateX(-120%); }
}

/* ==========================================================================
   INNER PAGE HEADERS
   One header language for every page below the homepage: a textured paper
   band carrying the breadcrumb trail, eyebrow, title and lead, with an
   oversized ghost word behind it and a clay rule that draws along the base.
   ========================================================================== */

/* Shared ground for both the tall page hero and the compact crumb band. */
.page-hero--light,
.inner-head {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}

/* Faint diagonal hatching — the tooth of a sheet of drawing paper. */
.page-hero--light::before,
.inner-head::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 24px,
    rgba(18, 16, 14, .022) 24px 25px
  );
  pointer-events: none;
}

/* A warm wash in the upper right, as if light were falling across the page. */
.page-hero--light::after,
.inner-head::after {
  content: ""; position: absolute; z-index: -2;
  top: -60%; right: -12%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 138, 46, .13), transparent 62%);
  pointer-events: none;
}
.inner-head::after { top: -180%; }

.page-hero--light > .shell,
.inner-head > .shell { position: relative; z-index: 1; }

/* ------------------------------------------------------------ page hero -- */
.page-hero--light {
  color: var(--ink);
  padding-block: clamp(2rem, 5vh, 3rem) clamp(2.5rem, 6vh, 4rem);
  border-bottom: 1px solid var(--paper-line);
}
.page-hero--light .page-hero__eyebrow { color: var(--clay); }
.page-hero--light .page-hero__lead { color: var(--ink-muted); }

/* Oversized watermark of the page name, set in the display face. */
.page-hero__ghost {
  position: absolute; z-index: -1;
  right: -.06em; bottom: -.30em;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(7rem, 20vw, 17rem);
  line-height: .8; letter-spacing: -.04em; white-space: nowrap;
  color: var(--ink); opacity: .045;
  pointer-events: none; user-select: none;
}
@media (max-width: 760px) { .page-hero__ghost { display: none; } }

/* The clay rule along the base of every inner header. */
.page-hero--light > .accent-rule,
.inner-head > .accent-rule {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--clay), var(--ochre) 45%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; z-index: 2;
}
.js .page-hero--light > .accent-rule,
.js .inner-head > .accent-rule { animation: drawLine 1.4s var(--ease) .2s forwards; }

/* ---------------------------------------------------- compact crumb band -- */
.inner-head {
  padding-block: .85rem;
  border-bottom: 1px solid var(--paper-line);
}
.inner-head .crumbs { padding-block: 0; }

/* ----------------------------------------------------------- breadcrumbs -- */
.crumbs { padding-block: 0; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  list-style: none; margin: 0; padding: 0;
}
.crumbs li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
/* A chevron reads as direction where a slash reads as punctuation. */
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; flex-shrink: 0;
  border-right: 1.5px solid var(--paper-line);
  border-bottom: 1.5px solid var(--paper-line);
  transform: rotate(-45deg);
}
.crumbs a {
  text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.crumbs a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .js .page-hero--light > .accent-rule,
  .js .inner-head > .accent-rule { animation: none; transform: scaleX(1); }
}
.page-hero__crumbs { margin-bottom: 1.5rem; }

/* ------------------------------------------------- in-page anchor offset -- */
/* The header is sticky, so anchor targets need to stop below it rather than
   under it. Covers #members, #journal, #works, #contact and friends. */
section[id],
div[id="members"] {
  scroll-margin-top: clamp(86px, 11vh, 104px);
}
a.artist-card__cta { text-decoration: none; transition: color .25s var(--ease), gap .25s var(--ease); }
a.artist-card__cta:hover { color: var(--clay-deep); }

/* ------------------------------------------------------ expandable text -- */
/* Long biographies open at a readable height with a Read more toggle.
   Gated behind .js: without it the full text is simply shown. */
.bio { --bio-clamp: 17rem; }
.js .bio.is-clamped {
  max-height: var(--bio-clamp);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.js .bio.is-open { max-height: none; }

.bio__toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: 0 0 .3rem;
  background: none; border: 0; border-bottom: 1px solid var(--paper-line);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay); cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.bio__toggle:hover { color: var(--clay-deep); border-color: var(--clay); }
.bio__toggle svg { width: 13px; height: 13px; transition: transform .35s var(--ease); }
.bio__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .bio__toggle svg { transition: none; }
}

/* --------------------------------------------------- compact cookie note -- */
/* Full-width on a phone, the notice was tall enough to sit over the hero's
   second CTA on a first visit. Tighten it so both buttons stay reachable. */
@media (max-width: 559px) {
  .cookie { padding: 1.1rem 1.15rem; }
  .cookie h2 { font-size: 1.1rem; margin-bottom: .35rem; }
  .cookie p { font-size: .8125rem; line-height: 1.5; margin-bottom: .9rem; }
  .cookie .btn { padding: .7rem 1.4rem; font-size: .6875rem; }
}

/* On a phone the notice spans the width, so while it is up the hero lifts its
   content clear of it. Reverts the moment the visitor accepts. */
@media (max-width: 559px) {
  body.has-cookie .hero__inner { padding-bottom: 15rem; }
}

/* ==========================================================================
   GALLERY LAYOUT
   Artwork-first browsing, one column at every width: search, then the medium
   shortcuts, then an even grid of works. The detailed filters rise from the
   foot of the screen as a sheet.
   ========================================================================== */

/* Search and the medium chips run full width above this. Below 900px the
   works have the row to themselves and the detailed filters are a sheet; from
   900px up the filter list returns as a sticky sidebar beside them. */
.gallery-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .gallery-layout { grid-template-columns: 232px minmax(0, 1fr); } }

.filters-panel { position: relative; }
@media (min-width: 900px) { .filters-panel { position: sticky; top: 110px; } }

.filters-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--paper-line);
}
.filters-panel__head h2 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.filters-panel__clear {
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay); text-decoration: none;
}
.filters-panel__clear:hover { text-decoration: underline; }

.filter-group { padding-block: 1.1rem; border-bottom: 1px solid var(--paper-3); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group > h3 {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .8rem;
}
.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.filter-list a {
  display: flex; align-items: center; gap: .6rem;
  padding: .38rem 0; font-size: .875rem; color: var(--ink-3);
  text-decoration: none; transition: color .22s var(--ease);
}
.filter-list a:hover { color: var(--clay); }

/* A square that fills in when the filter is on — reads as a checkbox but is
   a plain link, so filtering still works with JavaScript off. */
.filter-list a::before {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  border: 1px solid var(--paper-line); border-radius: 2px;
  background: var(--paper); transition: all .22s var(--ease);
}
.filter-list a[aria-current="true"] { color: var(--ink); font-weight: 500; }
.filter-list a[aria-current="true"]::before {
  background: var(--clay); border-color: var(--clay);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.filter-list .count { margin-left: auto; font-size: .75rem; color: var(--ink-muted); }

/* ------------------------------------------------------- results header -- */
.gallery-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--paper-line);
}
.gallery-head__count { font-size: .8125rem; color: var(--ink-muted); }
.gallery-head__count b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------- gallery results -- */
/* Every work in the same 4:5 crop, so the rows line up all the way down. */
/* Two up on a phone, as the wireframe draws it, then as many as fit. */
.work-grid--gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
@media (min-width: 620px) {
  .work-grid--gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
}

/* At two-up on a small screen the caption has about 160px to work with. */
@media (max-width: 619px) {
  .work-grid--gallery .work-card__title { font-size: 1rem; line-height: 1.2; }
  .work-grid--gallery .work-card__artist { font-size: .875rem; }
  .work-grid--gallery .work-card__meta { display: none; }
  .work-grid--gallery .work-card__price { margin-top: .4rem; }
  .work-grid--gallery .price { font-size: .9375rem; }
  .work-grid--gallery .price__label { display: none; }
}

/* Title in clay, artist in the display italic beneath — the work reads first,
   the maker immediately after. */
.work-grid--gallery .work-card__body { padding-top: .85rem; }
.work-grid--gallery .work-card__title { font-size: 1.15rem; line-height: 1.25; }
.work-grid--gallery .work-card__title a { color: var(--clay); }
.work-grid--gallery .work-card:hover .work-card__title a { color: var(--clay-deep); }
.work-grid--gallery .work-card__artist {
  font-family: var(--display); font-style: italic;
  font-size: 1rem; color: var(--ink-muted); margin-top: .1rem;
}
.work-grid--gallery .work-card__meta { font-size: .75rem; margin-top: .45rem; }
.work-grid--gallery .work-card__price { margin-top: .55rem; }

/* The whole card already leads to the work; a button on every tile would
   just repeat itself twenty-eight times. */
.work-grid--gallery .work-card__cta { display: none; }

/* ------------------------------------------------- filters as a widget -- */
/*
 * Two shapes for one element. From 900px up this apparatus is inert and the
 * panel is simply the sidebar. Below it the summary becomes a floating button
 * and the contents a sheet that rises over the gallery, so opening the
 * filters never pushes the artwork down a phone screen.
 */
.filters-panel__summary::-webkit-details-marker { display: none; }
.filters-panel__summary { list-style: none; }

@media (min-width: 900px) {
  .filters-panel__summary,
  .filters-panel__x,
  .filters-panel__foot { display: none; }
}

@media (max-width: 899px) {

  /* -------------------------------------------------------- the trigger -- */
  /* Bottom-left: back to top holds the right corner. */
  .filters-panel__summary {
    position: fixed; z-index: 105;
    left: clamp(1rem, 4vw, 1.75rem); bottom: clamp(1rem, 3vw, 2.25rem);
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .85rem 1.25rem; cursor: pointer;
    background: var(--ink); color: var(--paper);
    border-radius: 999px; box-shadow: var(--shadow-lift);
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .filters-panel__summary svg { width: 16px; height: 16px; }
  .filters-panel__summary:active { transform: scale(.97); }

  /* How many filters are on, without opening the sheet to find out. */
  .filters-panel__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 .3rem;
    background: var(--clay); border-radius: 999px;
    font-size: .625rem; letter-spacing: 0;
  }

  /* While the sheet is up the button would sit on top of it. */
  .filters-panel__box[open] .filters-panel__summary {
    opacity: 0; pointer-events: none;
  }

  /* ---------------------------------------------------------- the scrim -- */
  .filters-panel__box[open]::before {
    content: ""; position: fixed; inset: 0; z-index: 110;
    background: rgba(18, 16, 14, .5);
  }

  /* ---------------------------------------------------------- the sheet -- */
  .filters-panel__sheet { display: none; }
  .filters-panel__box[open] .filters-panel__sheet {
    display: flex; flex-direction: column;
    position: fixed; z-index: 111;
    inset: auto 0 0 0; max-height: 84vh;
    background: var(--paper);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(18, 16, 14, .26);
    animation: sheetUp .34s var(--ease);
  }

  /* The grab handle above the heading, so the sheet reads as draggable-ish
     furniture rather than a page section that appeared out of nowhere. */
  .filters-panel__box[open] .filters-panel__sheet::before {
    content: ""; flex-shrink: 0;
    width: 38px; height: 4px; margin: .7rem auto .2rem;
    background: var(--paper-line); border-radius: 999px;
  }

  .filters-panel__head {
    flex-shrink: 0; align-items: center;
    padding: .5rem 1.25rem .9rem; margin-bottom: 0;
  }
  .filters-panel__head h2 { font-size: .8125rem; }

  .filters-panel__x {
    margin-left: auto; display: inline-flex; padding: .35rem;
    background: none; border: 0; cursor: pointer; color: var(--ink-muted);
  }
  .filters-panel__x svg { width: 20px; height: 20px; }

  /* Only this scrolls, so the heading and the Show button stay put. */
  .filters-panel__body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 0 1.25rem; -webkit-overflow-scrolling: touch;
  }

  /* Sized for a thumb, since the sheet is the only way in on a phone. */
  .filters-panel__body .filter-list a { padding: .62rem 0; font-size: .9375rem; }

  .filters-panel__foot {
    flex-shrink: 0;
    padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--paper-line); background: var(--paper);
  }
  .filters-panel__foot .btn { width: 100%; }

  /* The page behind must not scroll while the sheet is up. */
  body.has-sheet { overflow: hidden; }
}

/* Between tablet and the sidebar breakpoint the sheet is still the way in,
   but a full-width one would be absurd — it becomes a centred panel. */
@media (min-width: 720px) and (max-width: 899px) {
  .filters-panel__box[open] .filters-panel__sheet {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(30rem, calc(100% - 3rem));
    border-radius: 18px 18px 0 0;
  }
}

@keyframes sheetUp {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* ==========================================================================
   ARTWORK DETAIL — THE BUY BLOCK
   Price and the inquiry CTA sit directly beneath the artist's name, above
   the specifications, so the two questions a buyer actually has — what does
   it cost, how do I ask — are answered without scrolling past dimensions.
   ========================================================================== */

.work-detail__buy {
  margin-top: 1.75rem; padding: 1.4rem 1.5rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
}

.work-detail__price { display: grid; gap: .15rem; margin: 0; }

.work-detail__amount {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* No published price is a different statement, not a smaller one — it keeps
   the same weight but drops to the display italic so it never reads as a
   number the association has not given. */
.work-detail__onask {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 1.9rem); line-height: 1.1;
  color: var(--ink);
}

.work-detail__pricelabel {
  font-size: .75rem; letter-spacing: .08em;
  color: var(--ink-muted);
}

/* The buy block supplies the spacing above the buttons. "Inquire About This
   Artwork" is a long label for a narrow column, so the two CTAs sit side by
   side only when both fit; otherwise they stack at equal width rather than
   leaving a ragged edge. */
.work-detail__buy .work-detail__actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem; margin-top: 1.15rem;
}
.work-detail__buy .work-detail__actions .btn { justify-content: center; text-align: center; }

@media (max-width: 560px) {
  .work-detail__buy { padding: 1.15rem; }
  .work-detail__buy .work-detail__actions { grid-template-columns: 1fr; }
}

/* Back to top sits bottom-right, so on a phone — where the cookie notice
   spans almost the full width — it would land on the notice. It stays out of
   the way until the visitor has dismissed it. */
@media (max-width: 700px) {
  body.has-cookie .to-top { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ==========================================================================
   SEARCH
   Two entry points into the collection: a field in the hero, where most
   visitors land, and an icon in the header that drops one down on every
   other page. Both are plain GET forms to the gallery.
   ========================================================================== */

/* ------------------------------------------------------ header search -- */
.header-search {
  border-top: 1px solid var(--paper-line);
  background: var(--paper);
  overflow: hidden;
  /* Its own stacking context and an opaque ground, so the header's
     backdrop-filter never has to repaint under a changing input value —
     the same iOS artifact the hero field hit. */
  position: relative; z-index: 1; isolation: isolate;
}
.header-search[hidden] { display: none; }

/* Animates open from nothing rather than fading, so the header grows into
   it instead of the page jumping. */
.js .header-search { max-height: 0; transition: max-height .38s var(--ease); }
.js .header-search.is-open { max-height: 5.5rem; }

.header-search__form {
  display: flex; align-items: center; gap: .7rem;
  padding-block: .9rem;
}
.header-search__form > svg { flex-shrink: 0; width: 19px; height: 19px; color: var(--ink-muted); }
.header-search__form input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none; padding: .5rem 0;
  font-family: var(--body); font-size: .9375rem; color: var(--ink);
}
.header-search__form input::placeholder { color: var(--ink-muted); }
.header-search__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search__form .btn { flex-shrink: 0; }

/* The icon reads as pressed while its panel is down. */
.icon-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 480px) {
  .header-search__form .btn { display: none; }   /* Enter submits; the row is tight */
}


/* ==========================================================================
   EXPLORE — SEARCH AND MEDIUM CHIPS
   The wireframe opens the gallery with a search field and a row of medium
   shortcuts, the same at every width. The detailed filters stay in the sheet.
   ========================================================================== */

.gallery-search {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; margin-bottom: 1rem;
  padding: .3rem .4rem .3rem 1.1rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.gallery-search:focus-within { border-color: var(--clay); background: var(--paper); }
.gallery-search > svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--ink-muted); }
.gallery-search input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none; padding: .78rem 0;
  font-family: var(--body); font-size: .9375rem; color: var(--ink);
}
.gallery-search input::placeholder { color: var(--ink-muted); }
.gallery-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gallery-search .btn { flex-shrink: 0; border-radius: 999px; }

/* ------------------------------------------------------- medium chips -- */
/* A scrolling row on a phone rather than a wrapping block, so the shortcuts
   never push the artwork further down the page. */
.chips {
  display: flex; gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 680px) {
  .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.chip {
  flex-shrink: 0;
  padding: .55rem 1.1rem;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--paper-line); border-radius: 999px;
  font-size: .8125rem; text-decoration: none; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover { border-color: var(--clay); color: var(--clay); }
.chip.is-on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* ==========================================================================
   ARTWORK DETAIL — TABS, ROOM VIEW, ACCORDIONS
   The wireframe's screens 4 and 5: the work takes the stage, with its own
   views tabbed above it and the buying details beside (desktop) or below
   (phone) it.
   ========================================================================== */

/* ------------------------------------------------------------- layout -- */
.work-detail { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .work-detail { grid-template-columns: 1.15fr .85fr; } }
@media (min-width: 900px) { .work-detail__main { position: sticky; top: 110px; } }

/* --------------------------------------------------------------- tabs -- */
.tabs__list {
  display: flex; gap: 1.5rem;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 1.25rem;
}
.tabs__tab {
  position: relative;
  padding: 0 0 .8rem; border: 0; background: none; cursor: pointer;
  font-family: var(--body); font-size: .8125rem; font-weight: 500;
  letter-spacing: .06em; color: var(--ink-muted);
  transition: color .25s var(--ease);
}
.tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--clay);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab.is-on { color: var(--ink); }
.tabs__tab.is-on::after { transform: scaleX(1); }

/* With no JavaScript every panel is simply shown, one after another, each
   under its own tab label — nothing is ever hidden without a way back. */
.tabs__panel[hidden] { display: none; }
.js .tabs__panel { display: none; }
.js .tabs__panel.is-on { display: block; }

/* ------------------------------------------------------- the room view -- */
/* A drawing, not a photograph. Everything is sized off a standard 84in sofa
   against a 96in ceiling, which is what lets the artwork's own dimensions
   mean something on screen. */
.room {
  position: relative; aspect-ratio: var(--room-ratio, 120 / 84);
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(to bottom, #efe9dd 0%, #efe9dd 88%, #d8cdba 88%, #cfc2ac 100%);
}
.room__wall { position: absolute; inset: 0; }

.room__art { position: absolute; left: 50%; transform: translateX(-50%); }
.room__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The frame, drawn as a border so it scales with the work. */
  border: .5vw solid #2b2118;
  box-shadow: 0 .6vw 1.6vw rgba(18, 16, 14, .22);
}

/* The bench you judge the artwork against. Its width is set inline, from the
   same inches as the artwork, so the comparison stays honest as the view
   crops in on smaller works. */
.room__sofa {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0;
}
/* A thin top slab over an inset body, so it reads as a console rather than a
   block of colour sitting on the floor. */
.room__sofa-back {
  position: absolute; left: 0; right: 0; top: 0; height: 15%;
  background: #c4b49c; border-radius: 2px;
}
.room__sofa-seat {
  position: absolute; left: 7%; right: 7%; top: 15%; bottom: 0;
  background: #d5c8b2; border-radius: 0 0 2px 2px;
}

/* A floor plant, for a second thing the eye can measure against. */
.room__plant {
  position: absolute; right: 5%; bottom: 0; width: 7%; height: 42%;
  background: linear-gradient(to top, #b9a88f 0 22%, #7d8f6a 22% 100%);
  border-radius: 40% 40% 4px 4px;
}

.room__scale {
  margin-top: .9rem; text-align: center;
  font-size: .8125rem; color: var(--ink-2);
}
.room__note {
  margin-top: .5rem; text-align: center;
  font-size: .75rem; line-height: 1.6; color: var(--ink-muted);
}

/* ---------------------------------------------------------- the price -- */
.work-detail__price { display: grid; gap: .15rem; margin: 1.25rem 0 0; }
.work-detail__line { margin-top: .85rem; font-size: .875rem; color: var(--ink-2); }

/* Status dot, per the wireframe. */
.status {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .6rem; font-size: .875rem; color: var(--ink-2);
}
.status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4f7a4f; box-shadow: 0 0 0 3px rgba(79, 122, 79, .18);
}

.btn--wide { width: 100%; justify-content: center; }

/* ------------------------------------------------------- accordions -- */
.accordions { margin-top: 1.75rem; border-top: 1px solid var(--paper-line); }
.acc { border-bottom: 1px solid var(--paper-line); }
.acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-size: .9375rem; color: var(--ink);
}
.acc > summary::-webkit-details-marker { display: none; }

/* The plus that becomes a minus. */
.acc__mark { position: relative; flex-shrink: 0; width: 14px; height: 14px; }
.acc__mark::before,
.acc__mark::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 14px; height: 1px; background: var(--ink-2);
}
.acc__mark::after { transform: rotate(90deg); transition: transform .3s var(--ease); }
.acc[open] .acc__mark::after { transform: rotate(0deg); }

.acc__body { padding-bottom: 1.15rem; }
.acc__body p { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.acc__body p + p { margin-top: .8rem; }
.acc__body .spec { margin-top: 0; }

/* The artist, as a card at the foot of the details column. */
.work-detail__main .mini-artist { margin-top: 1.75rem; }

/* ==========================================================================
   ARTIST PROFILE — THE WIREFRAME'S SCREEN 6
   ========================================================================== */

/* "Painter · Angono, Rizal" — discipline and place on one quiet line. */
.profile__meta {
  margin-top: .5rem;
  font-size: .9375rem; line-height: 1.6; color: var(--ink-muted);
}

.profile__name { margin-top: .35rem; }

/* Full-width stacked buttons, as the wireframe draws them. */
.profile__actions { display: grid; gap: .7rem; margin-top: 1.75rem; }
@media (min-width: 560px) {
  .profile__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* An odd number of buttons leaves the last one alone on its row with a hole
     beside it. It spans the row instead, so the block always squares off. */
  .profile__actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.profile__actions .btn { justify-content: center; text-align: center; }

/* ==========================================================================
   INQUIRE — THE WIREFRAME'S SCREEN 7
   One narrow column: the work being asked about, how to reach whom, then the
   three fields. Identical at every width — there is nothing here that wants a
   second column.
   ========================================================================== */

.inquire { max-width: 34rem; margin-inline: auto; }
.inquire__title { font-family: var(--display); font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.15; }
.inquire__lead { margin-top: 1rem; color: var(--ink-2); }

/* -------------------------------------------- the work being asked about -- */
.pick {
  display: grid; grid-template-columns: 76px 1fr; gap: 1rem; align-items: center;
  margin-top: 1.5rem; padding: .75rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .25s var(--ease);
}
.pick:hover { border-color: var(--clay); }
.pick__media { overflow: hidden; border-radius: 6px; }
.pick__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pick__body { display: grid; gap: .15rem; min-width: 0; }
.pick__title { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.pick__artist { font-size: .875rem; color: var(--ink-muted); }
.pick__price { margin-top: .2rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ------------------------------------------------------- route chooser -- */
.inquire__form { margin-top: 1.75rem; }

.choice { border: 0; padding: 0; margin: 0 0 1.5rem; }
.choice__legend {
  padding: 0; margin-bottom: .85rem;
  font-size: .9375rem; font-weight: 500; color: var(--ink);
}

.choice__opt {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start;
  padding: 1rem; cursor: pointer;
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.choice__opt + .choice__opt { margin-top: .6rem; }
.choice__opt:hover { border-color: var(--clay); }

/* The native control is hidden but still focusable and still the thing the
   keyboard drives; the ring is mirrored onto the drawn mark. */
.choice__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__mark {
  margin-top: .15rem; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--paper-line); background: var(--paper);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.choice__opt input:checked ~ .choice__mark {
  border-color: var(--clay);
  box-shadow: inset 0 0 0 4px var(--clay);
}
.choice__opt input:focus-visible ~ .choice__mark {
  outline: 2px solid var(--ochre); outline-offset: 2px;
}
.choice__opt:has(input:checked) { border-color: var(--clay); background: var(--paper-2); }

.choice__text { display: grid; gap: .2rem; }
.choice__name { font-size: .9375rem; color: var(--ink); }
.choice__hint { font-size: .8125rem; line-height: 1.5; color: var(--ink-muted); }

.inquire__note {
  margin-top: 1rem;
  font-size: .8125rem; line-height: 1.6; color: var(--ink-muted);
}

/* The base .field is built for the dark contact card — paper-coloured text on
   ink. On the inquire screen's paper ground that is invisible, so the whole
   set is restated in ink here. */
.inquire .field + .field,
.inquire .choice + .field { margin-top: 1.35rem; }

.inquire .field label { color: var(--ink-muted); }

.inquire .field input,
.inquire .field textarea {
  padding: .85rem 1rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.inquire .field input::placeholder,
.inquire .field textarea::placeholder { color: var(--ink-muted); }
.inquire .field input:focus,
.inquire .field textarea:focus {
  outline: none; border-color: var(--clay); background: var(--paper);
}
.inquire .field textarea { resize: vertical; min-height: 6.5rem; }

.inquire .btn--wide { margin-top: 1.75rem; }

/* ==========================================================================
   CARD GRID BREATHING ROOM
   Every grid below holds a picture with a caption under it. With one gap doing
   both jobs, the caption of one row sat almost against the picture of the
   next and the rows read as a single block — worst in the fifteen-member
   artist row, five across. Rows now get noticeably more room than columns,
   which is what separates one row of cards from the next.
   ========================================================================== */

@media (min-width: 680px) {
  .artist-grid,
  .work-grid,
  .work-grid--gallery,
  .show-grid,
  .post-grid {
    column-gap: clamp(1.5rem, 3.2vw, 3.25rem);
    row-gap: clamp(2.75rem, 4vw, 4rem);
  }
}

/* On a phone the grids are one or two up. The columns stay tighter — there is
   only so much width to give away — but the rows still open up. */
@media (max-width: 679px) {
  .artist-grid,
  .work-grid,
  .work-grid--gallery,
  .show-grid,
  .post-grid {
    column-gap: 1.1rem;
    row-gap: 2.25rem;
  }
}

/* Two routes off each card in the homepage artist row: the person, or their
   work. Stacked, because at five across there is no room to sit them side by
   side and a half-width button reads as broken. */
.artist-card__actions {
  display: grid; gap: .45rem;
  margin-top: auto; padding-top: .9rem;
}
.artist-card__actions .btn {
  width: 100%; justify-content: center;
  padding: .62rem .8rem;
  font-size: .625rem; letter-spacing: .12em;
}
/* The lift would push a button out from under the cursor in a tight stack. */
.artist-card__actions .btn:hover { transform: none; }

/* ==========================================================================
   VIRTUAL GALLERY
   The collection hung on a wall, one work at a time. A warm wall, a spotlight
   above, the work casting its own shadow, and a thumbnail rail along the foot.
   ========================================================================== */

.vgal {
  background: linear-gradient(to bottom, #2a231c 0%, #3a3128 55%, #2e2820 100%);
  color: var(--paper);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------------ bar -- */
.vgal__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem var(--gutter);
}
.vgal__back {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8125rem; color: rgba(247, 243, 234, .8); text-decoration: none;
  transition: color .25s var(--ease);
}
.vgal__back:hover { color: var(--paper); }
.vgal__title {
  font-size: .625rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(247, 243, 234, .5);
}

/* ---------------------------------------------------------------- stage -- */
.vgal__stage {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(340px, 56vh, 620px);
  padding: clamp(2rem, 5vh, 4rem) clamp(3.5rem, 9vw, 7rem);
}

/* The light. A soft cone from above, brightest where the work hangs. */
.vgal__spot {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 12%, rgba(255, 244, 222, .30), transparent 70%),
    radial-gradient(38% 40% at 50% 38%, rgba(255, 246, 228, .18), transparent 72%);
}

/* --------------------------------------------------------------- slides -- */
.vgal__slide { position: relative; z-index: 1; margin: 0; }
.vgal__slide[hidden] { display: none; }

/* The work keeps the photograph's own shape — a tall piece is tall and a wide
   one is wide. Deliberately no `aspect-ratio` from the published dimensions:
   the two rarely agree to the pixel (a 24x36in work photographed at 1000x1257
   is not 0.667), and forcing the box to the published figure letterboxed the
   picture inside its own frame. */
.vgal__slide img {
  display: block;
  max-height: clamp(240px, 44vh, 520px);
  max-width: min(100%, 40rem);
  width: auto; height: auto;
  /* Frame and the shadow it throws on the wall beneath the light. */
  border: clamp(6px, .8vw, 12px) solid #221a13;
  box-shadow:
    0 2px 2px rgba(0, 0, 0, .35),
    0 18px 38px rgba(0, 0, 0, .45);
}

/* On a phone the arrows sit close in, so the work gives them room. */
@media (max-width: 559px) {
  .vgal__slide img { max-width: min(100%, 17rem); max-height: 46vh; }
}

.js .vgal__slide { animation: vgalIn .5s var(--ease); }
@keyframes vgalIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- arrows -- */
.vgal__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(40px, 5vw, 54px); aspect-ratio: 1;
  background: var(--paper); color: var(--ink);
  border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.vgal__arrow:hover { background: var(--ochre); transform: translateY(-50%) scale(1.06); }
.vgal__arrow--prev { left: clamp(.6rem, 2.5vw, 2rem); }
.vgal__arrow--next { right: clamp(.6rem, 2.5vw, 2rem); }
.vgal__arrow svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------- caption -- */
.vgal__caption { text-align: center; padding-inline: var(--gutter); }
.vgal__cap[hidden] { display: none; }

.vgal__work {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
}
/* The rule under the title, as the design draws it. */
.vgal__work::after {
  content: ""; display: block; width: 34px; height: 1px;
  margin: .7rem auto 0; background: rgba(247, 243, 234, .35);
}
.vgal__by { margin-top: .7rem; font-size: 1rem; }
.vgal__by a { color: rgba(247, 243, 234, .88); text-decoration: none; }
.vgal__by a:hover { color: var(--ochre); }
.vgal__meta {
  margin-top: .45rem;
  font-size: .8125rem; color: rgba(247, 243, 234, .55);
}
.vgal__details {
  margin-top: 1.35rem;
  background: var(--clay); border-color: var(--clay);
}
.vgal__details:hover { background: var(--clay-deep); border-color: var(--clay-deep); }

.vgal__count {
  margin-top: 1.5rem; text-align: center;
  font-size: .75rem; letter-spacing: .2em;
  font-variant-numeric: tabular-nums; color: rgba(247, 243, 234, .45);
}
.vgal__count b { font-weight: 500; color: var(--paper); }

/* --------------------------------------------------------------- thumbs -- */
/* A rail along the foot, scrolling when the collection is long. */
/* Centred when the set fits, and only then. Plain `center` on an overflowing
   flex row pushes the first items past the scroll origin where they cannot be
   reached; `safe` falls back to flex-start exactly in that case. */
.vgal__thumbs {
  display: flex; gap: .5rem;
  justify-content: center;
  justify-content: safe center;
  margin-top: 1rem; padding: .5rem var(--gutter) .75rem;
  overflow-x: auto; scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.vgal__thumbs::-webkit-scrollbar { display: none; }

.vgal__thumb {
  flex: 0 0 auto; width: clamp(48px, 6vw, 68px);
  border-radius: 3px; overflow: hidden;
  outline: 1px solid rgba(247, 243, 234, .18); outline-offset: -1px;
  opacity: .5; transition: opacity .25s var(--ease), outline-color .25s var(--ease);
}
.vgal__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.vgal__thumb:hover { opacity: .85; }
.vgal__thumb.is-on { opacity: 1; outline: 2px solid var(--clay); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .js .vgal__slide { animation: none; }
  .vgal__arrow:hover { transform: translateY(-50%); }
}

/* The way onto the gallery wall, beside the result count. */
.gallery-head__wall { margin-left: auto; }
@media (max-width: 559px) { .gallery-head__wall { margin-left: 0; } }

/* ==========================================================================
   VIRTUAL GALLERY BUTTON
   A standing way onto the wall from anywhere on the site. Bottom right, with
   back to top stacked above it — the filter widget holds the left corner on
   the artworks page, so the two never meet.
   ========================================================================== */

.gal-fab {
  position: fixed; z-index: 86;
  right: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.15rem;
  background: var(--clay); color: var(--paper);
  border-radius: 999px; box-shadow: var(--shadow-lift);
  text-decoration: none;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.gal-fab:hover { background: var(--clay-deep); transform: translateY(-2px); }
.gal-fab:active { transform: translateY(0) scale(.98); }
.gal-fab svg { flex-shrink: 0; width: 18px; height: 18px; }

/* On a narrow phone the label would crowd the screen; the icon carries it,
   and the accessible name comes from the text, which is only visually gone. */
@media (max-width: 479px) {
  .gal-fab { padding: .85rem; }
  .gal-fab span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* Round again, so back to top clears a smaller button. */
  .to-top { bottom: calc(clamp(1rem, 3vw, 2.25rem) + 4rem); }
}

@media print { .gal-fab { display: none !important; } }

/* ==========================================================================
   SHARE SHEET
   One dialog for both jobs: a filtered set of works, or a single work. Rises
   from the foot on a phone, a centred panel from tablet up.
   ========================================================================== */

/* Scrim and panel share one grid cell, so the panel is placed by the grid
   rather than by a transform. That matters: the entrance animation moves
   `transform`, and when the same property was also doing the centring the
   panel started in the lower right and only snapped to the middle as the
   animation ended. */
.share {
  position: fixed; inset: 0; z-index: 140;
  display: grid;
}
.share[hidden] { display: none; }

.share__scrim {
  grid-area: 1 / 1;
  background: rgba(18, 16, 14, .55);
  border: 0; padding: 0; cursor: pointer;
}

.share__panel {
  grid-area: 1 / 1;
  /* The close button is absolutely placed inside this; without a position
     here it would resolve against .share and sit at the top of the screen. */
  position: relative;
  align-self: end;                       /* a sheet off the foot, on a phone */
  width: 100%;
  max-height: 92vh; overflow-y: auto;
  padding: 1.6rem 1.35rem calc(1.6rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 50px rgba(18, 16, 14, .3);
  animation: sheetUp .34s var(--ease);
}
@media (min-width: 620px) {
  .share__panel {
    place-self: center;                  /* centred from the first frame */
    width: min(28rem, calc(100% - 3rem));
    max-height: min(92vh, 44rem);
    padding-bottom: 1.6rem;
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(18, 16, 14, .3);
    animation: shareIn .28s var(--ease);
  }
}

/* Opacity and a touch of scale only — nothing that fights the placement. */
@keyframes shareIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

.share__x {
  position: absolute; top: .9rem; right: .9rem;
  display: inline-flex; padding: .35rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-muted);
}
.share__x svg { width: 20px; height: 20px; }

.share__heading {
  font-family: var(--display); font-size: 1.4rem; text-align: center;
  padding-inline: 2rem;
}
.share__lead {
  margin-top: .35rem; text-align: center;
  font-size: .8125rem; color: var(--ink-muted);
}

/* ------------------------------------------------- what is being shared -- */
.share__card {
  display: grid; grid-template-columns: 58px 1fr; gap: .85rem; align-items: center;
  margin-top: 1.25rem; padding: .7rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
}
.share__thumb { overflow: hidden; border-radius: 4px; }
.share__thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.share__meta { display: grid; gap: .1rem; min-width: 0; }
.share__title { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.share__sub   { font-size: .8125rem; color: var(--ink-2); }
.share__note  { font-size: .75rem; color: var(--ink-muted); }

/* ------------------------------------------------------------- the link -- */
.share__link {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .85rem; padding: .25rem .25rem .25rem .85rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
}
.share__link input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: none; padding: .6rem 0;
  font: inherit; font-size: .8125rem; color: var(--ink-2);
  text-overflow: ellipsis;
}
.share__copy {
  flex-shrink: 0; display: inline-flex; padding: .55rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper-line); border-radius: 6px; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.share__copy:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.share__copy svg { width: 16px; height: 16px; }

/* Empty until the copy lands, so it never takes space it is not using. */
.share__said {
  min-height: 1.1rem; margin-top: .4rem; text-align: center;
  font-size: .75rem; color: var(--clay);
}

/* ------------------------------------------------------------- networks -- */
.share__nets {
  list-style: none; margin: .85rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem;
}
.share__net {
  display: grid; justify-items: center; gap: .4rem;
  text-decoration: none; color: var(--ink-muted); font-size: .625rem;
}
.share__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; aspect-ratio: 1; border-radius: 50%;
  color: #fff; transition: transform .25s var(--ease);
}
.share__ico svg { width: 21px; height: 21px; }
.share__net:hover .share__ico { transform: translateY(-2px); }
.share__net:hover { color: var(--ink); }

.share__net--fb   .share__ico { background: #1877f2; }
.share__net--msgr .share__ico { background: linear-gradient(135deg, #00b2ff, #a033ff); }
.share__net--wa   .share__ico { background: #25d366; }
.share__net--x    .share__ico { background: #000; }
.share__net--mail .share__ico { background: var(--ink-muted); }

/* --------------------------------------------------------------- extras -- */
.share__extras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .55rem; margin-top: 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--paper-line);
}
.share__extras .btn { justify-content: center; gap: .45rem; }

/* The button that opens it. */
.share-open { display: inline-flex; align-items: center; gap: .45rem; }
.share-open svg { width: 15px; height: 15px; }

body.has-share { overflow: hidden; }

/* Messenger only answers on a device with its app, so on a computer it is
   dimmed and a click explains itself rather than doing nothing. */
.share__net.is-unavailable .share__ico { filter: grayscale(.45); opacity: .72; }
.share__net.is-unavailable:hover .share__ico { transform: none; }

.share__said--warn {
  margin-top: .6rem; padding: .6rem .8rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  font-size: .75rem; line-height: 1.55; color: var(--ink-2);
  text-align: left;
}

/* ==========================================================================
   FIND ART FOR YOUR SPACE
   The homepage browser. Without JavaScript every group is simply visible and
   each option is a link that applies that one filter; the script folds them
   into tabs and lets several be combined.
   ========================================================================== */

.finder {
  position: relative;
  /* Little at the foot: the section below brings its own top padding, and the
     two together left 240px between the panel and the next heading. */
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(1.75rem, 3vw, 2.5rem);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(161, 68, 42, .07), transparent 62%),
    var(--paper-2);
  border-top: 1px solid var(--paper-line);
}

.finder__head { text-align: center; }
.finder__eyebrow {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--clay); margin-bottom: .85rem;
}
.finder__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.1;
}
.finder__lead {
  max-width: 50ch; margin: .85rem auto 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem); color: var(--ink-muted);
  text-wrap: balance;                    /* no lone word on the last line */
}

/* ------------------------------------------------------------ the layout -- */
/* A single centred column on a phone. From 900px the option cards become a
   menu down the side and the panel sits beside them, which is what fills the
   width a 34rem column was leaving empty on a desktop. */
/* One column, always: the three choices sit across the top and the panel
   opens beneath them. */
.finder__grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 34rem; margin: clamp(2rem, 4vw, 3rem) auto 0;
}
@media (min-width: 900px) { .finder__grid { max-width: none; } }

/* ------------------------------------------------------- the option cards -- */
/* Three across at every width — they are the three steps, side by side. */
.finder__quick {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (min-width: 720px) { .finder__quick { gap: .9rem; } }



/* At three across on a phone the hint has nowhere to go. */
@media (max-width: 479px) {
  .finder__opt { padding: .9rem .5rem; gap: .5rem; }
  .finder__opthint { display: none; }
  .finder__optname { font-size: .8125rem; }
}

.finder__opt {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: .6rem;
  padding: 1.15rem .9rem;
  background: var(--paper);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.finder__opt:hover { border-color: var(--clay); transform: translateY(-2px); }

/* The chosen one carries a clay edge down its side, so which step you are on
   is obvious at a glance rather than a faint border change. */
.finder__opt.is-on {
  border-color: var(--clay); box-shadow: var(--shadow-soft);
}
.finder__opt.is-on::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--clay);
}

.finder__opticon {
  display: grid; place-items: center;
  width: 36px; aspect-ratio: 1; border-radius: 50%;
  background: var(--paper-2); color: var(--clay);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.finder__opticon svg { width: 18px; height: 18px; }
.finder__opt.is-on .finder__opticon { background: var(--clay); color: var(--paper); }

.finder__optwords { display: grid; justify-items: center; gap: .15rem; text-align: center; }
.finder__optname { font-size: .875rem; font-weight: 500; }
.finder__opthint { font-size: .6875rem; color: var(--ink-muted); }

/* --------------------------------------------------------------- panels -- */
.finder__body {
  display: flex; flex-direction: column;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(18, 16, 14, .07);
}

/* The button sits at the foot whatever the panel holds, so the three panels
   are the same height and nothing jumps as you switch between them. */
.finder__go { margin-top: auto; }



.finder__tabs {
  display: flex; gap: .4rem; margin-bottom: 1.25rem;
  padding: .28rem; background: var(--paper-2);
  border-radius: 999px;
}
.finder__tabs[hidden] { display: none; }
.finder__tab {
  flex: 1; padding: .68rem .5rem;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-size: .875rem; font-weight: 500;
  color: var(--ink-muted);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.finder__tab.is-on { background: var(--clay); color: var(--paper); }

.finder__panel + .finder__panel { margin-top: 2rem; }
.js .finder__panel + .finder__panel { margin-top: 0; }
.finder__panel[hidden] { display: none; }

.finder__q {
  font-size: .9375rem; font-weight: 500; color: var(--ink); margin-bottom: .9rem;
}
.finder__q span { font-weight: 400; color: var(--ink-muted); }

/* --------------------------------------------------------- artist picks -- */
.finder__search {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .85rem; padding: .1rem .9rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: 999px;
}
.finder__search svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--ink-muted); }
.finder__search input {
  flex: 1; min-width: 0; padding: .6rem 0;
  background: none; border: 0; outline: none;
  font: inherit; font-size: .875rem; color: var(--ink);
}
.finder__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.finder__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 18rem; overflow-y: auto;
}
.finder__pick {
  display: grid; grid-template-columns: 18px 36px 1fr; gap: .7rem; align-items: center;
  padding: .5rem .2rem; text-decoration: none; border-radius: 6px;
  transition: background .2s var(--ease);
}
.finder__pick:hover { background: var(--paper-2); }

/* Drawn, not a real checkbox — these are links so they work with no script. */
.finder__box {
  width: 17px; height: 17px; border-radius: 3px;
  border: 1px solid var(--paper-line); background: var(--paper);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.finder__pick.is-on .finder__box {
  background: var(--clay); border-color: var(--clay);
  box-shadow: inset 0 0 0 2px var(--paper);
}

.finder__face { width: 36px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.finder__face img { width: 100%; height: 100%; object-fit: cover; }
.finder__initials {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: .6875rem; letter-spacing: .05em; color: var(--ink-muted);
}
.finder__who { display: grid; gap: .05rem; min-width: 0; }
.finder__name { font-size: .875rem; color: var(--ink); }
.finder__count { font-size: .75rem; color: var(--ink-muted); }

.finder__none { padding: 1rem 0; font-size: .875rem; color: var(--ink-muted); }

/* ---------------------------------------------------------- price bands -- */
.finder__bands { display: grid; gap: .5rem; }
.finder__band {
  display: grid; grid-template-columns: 18px 1fr auto; gap: .7rem; align-items: center;
  padding: .85rem 1rem;
  border: 1px solid var(--paper-line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-size: .875rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.finder__band:hover { border-color: var(--clay); }
.finder__band.is-on { border-color: var(--clay); background: var(--paper-2); }
.finder__dot {
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--paper-line); background: var(--paper);
}
.finder__band.is-on .finder__dot {
  border-color: var(--clay); box-shadow: inset 0 0 0 4px var(--clay);
}
.finder__num { font-size: .75rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.finder__note { margin-top: .8rem; font-size: .75rem; line-height: 1.5; color: var(--ink-muted); }

/* -------------------------------------------------------- medium chips -- */
.finder__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.finder__chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.1rem;
  font-weight: 500;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--paper-line); border-radius: 999px;
  text-decoration: none; font-size: .8125rem;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.finder__chip:hover { border-color: var(--clay); color: var(--clay); }
.finder__chip.is-on { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.finder__chip.is-on .finder__num { color: rgba(247, 243, 234, .75); }

/* ------------------------------------------------------ what is chosen -- */
.finder__chosen { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--paper-line); }
.finder__chosen[hidden] { display: none; }
.finder__chosen-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .75rem;
}
.finder__chosen-head h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.finder__clear {
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .75rem; color: var(--clay);
}
.finder__clear:hover { text-decoration: underline; }

.finder__tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.finder__tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem .4rem .8rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line); border-radius: 999px;
  font-size: .75rem; color: var(--ink-2);
}
.finder__tag button {
  display: inline-flex; padding: .1rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-muted);
  font-size: .875rem; line-height: 1;
}
.finder__tag button:hover { color: var(--clay); }

.finder__go {
  width: 100%; justify-content: center; margin-top: 1.5rem;
  background: var(--clay); border-color: var(--clay);
}
.finder__go:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.finder__go[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Placed after .finder__tabs sets display:flex, so this wins: on a wide
   screen the side cards already are the tabs, and the strip would say it
   twice. */
/* The three cards above are the tabs, at every width — the strip would say
   the same thing twice. */
.finder__tabs { display: none; }

@media (min-width: 900px) {
  /* Several columns, so the room the side menu freed is actually used. A
     grid, not `columns`: a multi-column box with a capped height overflows
     sideways, which put a horizontal scrollbar under the list. */
  .finder__list {
    max-height: 24rem;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem; align-content: start;
  }
  .finder__bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Room for the panel to be a panel, not a strip. */
  .finder__body { padding: clamp(1.5rem, 2vw, 1.9rem); }
  .finder__q { font-size: .9375rem; margin-bottom: 1rem; }
  .finder__chip { padding: .72rem 1.15rem; font-size: .8125rem; }
  .finder__band { padding: .85rem 1.05rem; font-size: .875rem; }
}

@media (min-width: 1100px) {
  /* The panel now spans the page, so the artist list runs four across and
     the bands four, rather than two long columns with air beside them. */
  .finder__list { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 17rem; }
  .finder__bands { grid-template-columns: repeat(4, minmax(0, 1fr)); }

}

/* ------------------------------------------------ a glimpse of the works -- */
/* An abstract filter becomes a promise you can see. It also gives the shorter
   panels something to fill the height with, instead of a gap above the CTA. */
.finder__preview { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid var(--paper-line); }
.finder__preview[hidden] { display: none; }

.finder__preview-head {
  margin-bottom: .75rem;
  font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}

/* One row, filled: every tile takes an equal share of whatever width there
   is, and the script puts in exactly as many as fit. */
.finder__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  justify-content: start;                /* a short set keeps its tile size */
  gap: .5rem;
}

.finder__shot {
  border-radius: 4px; overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-soft);
  transition: transform .3s var(--ease);
}
.finder__shot img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.finder__shot:hover { transform: translateY(-2px); }

/* The last tile carries what the row had no room for. */
.finder__shot--more { position: relative; }
.finder__shot-count {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(18, 16, 14, .58);
  color: var(--paper);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* Six tiles (five plus the "+N") on one row at phone width, rather than
   wrapping to a stubby second line. */
@media (max-width: 479px) { .finder__strip { gap: .4rem; } }

/* Placed after .finder__optwords sets its own centring, so this wins. On a
   wide card the icon sits beside the words and the pair is centred together —
   an icon pinned to the left edge with the text floating in the middle read
   as two unrelated things. */
@media (min-width: 720px) {
  .finder__opt {
    display: flex; align-items: center; justify-content: center;
    gap: .85rem; padding: 1.05rem 1.35rem;
  }
  .finder__optwords { justify-items: start; text-align: left; }
}

/* Whatever follows the browser starts closer than a full section gap — the
   band's own foot padding already separates them. */
.finder + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* How much the chosen category leaves, beside the categories themselves. */
.filters__count {
  margin-left: auto; align-self: center;
  font-size: .8125rem; color: var(--ink-muted);
}
@media (max-width: 559px) { .filters__count { margin-left: 0; width: 100%; } }

/* ------------------------------------------------------------ turnstile -- */
.field--turnstile { margin-top: 1.5rem; }
.field--turnstile .cf-turnstile { min-height: 65px; }

.field__note {
  margin-top: .5rem;
  font-size: .75rem; line-height: 1.5; color: var(--ink-muted);
}
.field__note.is-bad { color: var(--clay); }

/* The contact form sits on the dark card, where ink-muted disappears. */
.contact-card .field__note { color: rgba(247, 243, 234, .6); }
.contact-card .field__note.is-bad { color: var(--ochre); }

/* The honeypot: off-screen rather than display:none, since some bots skip
   anything hidden outright. No person will ever reach it. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden;
}

.field__note.is-good { color: #4f7a4f; }
.contact-card .field__note.is-good { color: #9ec79e; }

/* ------------------------------------------------- the no-script result -- */
.sent { max-width: 34rem; margin-inline: auto; text-align: center; }
.sent__mark {
  display: grid; place-items: center;
  width: 54px; aspect-ratio: 1; margin: 0 auto 1.25rem;
  border-radius: 50%; background: var(--clay); color: var(--paper);
  font-size: 1.5rem; line-height: 1;
}
.sent__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.18;
}
.sent__lead { margin-top: .85rem; color: var(--ink-2); line-height: 1.65; }
.sent__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
  margin-top: 1.75rem;
}

/* ===================================================== upcoming events == */
/*
 * The agenda from the association's wireframe, screen 05: a date chip, the
 * event, and a chevron — scannable in one pass rather than read.
 *
 * Appended at the end of the file deliberately. Three earlier fixes in this
 * stylesheet failed because the override sat above the rule it was meant to
 * beat; nothing below this point can be outranked by source order.
 */

.events__lead {
  margin: -.4rem 0 2rem;
  color: var(--ink-muted);
  max-width: 34ch;
}

.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--paper-line);
}

.agenda__row { border-bottom: 1px solid var(--paper-line); }

.agenda__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem .25rem;
  text-decoration: none;
  color: inherit;
  transition: background .25s var(--ease), padding-inline .25s var(--ease);
}

.agenda__link:hover,
.agenda__link:focus-visible {
  background: var(--paper-2);
  padding-inline: .75rem .5rem;
}

/* ------------------------------------------------------------- the chip */
.agenda__chip {
  display: grid;
  place-items: center;
  align-content: center;
  width: 4.25rem;
  padding: .55rem .35rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}

/* The row's own hover tints the chip's backdrop, so lift the chip clear. */
.agenda__link:hover .agenda__chip,
.agenda__link:focus-visible .agenda__chip {
  background: var(--paper);
  border-color: var(--clay);
}

.agenda__mon {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  line-height: 1;
}

.agenda__day {
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1.05;
  margin-top: .15rem;
}

/* ------------------------------------------------------------- the body */
.agenda__body { display: grid; gap: .15rem; min-width: 0; }

.agenda__title {
  font-weight: 600;
  line-height: 1.3;
  /* Long titles wrap rather than shoving the chevron off the row, but only
     break inside a word when that word genuinely cannot fit. */
  overflow-wrap: break-word;
}

.agenda__meta {
  font-size: .85rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

.agenda__link:hover .agenda__title { color: var(--clay); }

/* ---------------------------------------------------------- the chevron */
.agenda__go { display: grid; place-items: center; color: var(--ink-muted); }
.agenda__go svg { width: 1.15rem; height: 1.15rem; }
.agenda__link:hover .agenda__go { color: var(--clay); }

/* ------------------------------------------------------------ the call */
.events__cta { margin-top: 2rem; }

/* Full width on a phone, as drawn; its own width once there is room. */
.events__cta .btn { display: block; text-align: center; }

@media (min-width: 700px) {
  .events__cta .btn { display: inline-flex; }

  .agenda__link { gap: 1.6rem; padding-block: 1.35rem; }
  .agenda__chip { width: 4.75rem; padding-block: .7rem; }
  .agenda__day  { font-size: 2rem; }

  /* No second column for the time here. The agenda only ever renders inside
     the narrow left column of the Exhibitions & Events block, and a nowrap
     time column there left the title about 150px — enough to break
     "Competition" across two lines. Viewport width says nothing about how
     much room this component actually has. */
}

@media (prefers-reduced-motion: reduce) {
  .agenda__link { transition: none; }
}

/* ------------------------------------------- one event, told in full -- */
/* The events page entry: the same chip as the agenda, then the detail the
   agenda row has no room for. */

.event {
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--paper-line);
}
.event:last-of-type { border-bottom: 0; }

.event__date {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.event__chip {
  display: grid;
  place-items: center;
  align-content: center;
  width: 4.25rem;
  padding: .55rem .35rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  flex: none;
}

.event__when { display: block; font-weight: 600; }

.event__title {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
}

.event__meta {
  display: block;
  font-size: .9rem;
  color: var(--ink-muted);
  margin: 0 0 .25rem;
}

.event__body { margin: .9rem 0 0; max-width: 62ch; }

/* The anchor target must clear the sticky header when linked from the
   homepage agenda, or the heading lands underneath it. */
.event { scroll-margin-top: 6rem; }
#upcoming { scroll-margin-top: 4rem; }

/* The clay call to action, as a named variant. The hero had this colouring
   under .hero__cta; the events agenda needs the same thing, and borrowing a
   hero-specific class for it is how .rail leaked across the homepage once
   already. */
.btn--clay { background: var(--clay); border-color: var(--clay); }
.btn--clay:hover { background: var(--clay-deep); border-color: var(--clay-deep); }

/* ========================================== exhibitions & events ======= */
/*
 * The homepage's "what's on" block: the agenda and the exhibition rail under
 * one heading instead of two stacked bands.
 *
 * Appended at the end on purpose — the .show-rail column counts below are
 * overriding rules that live earlier in this file, and an override above the
 * rule it beats is how three earlier fixes in this stylesheet failed.
 */

.whatson { display: grid; gap: 3rem; }

.whatson__sub {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-weight: 500;
  margin: 0 0 1rem;
}

/* The agenda's own lead sits tighter under a sub-head than under an h2. */
.whatson__events .events__lead { margin-top: -.5rem; margin-bottom: 1.5rem; }
.whatson__events .events__cta  { margin-top: 1.5rem; }

@media (min-width: 1100px) {
  /* The agenda is a list of short lines — it wants a column, not a page
     width. The rail keeps the rest, which is what the pictures need. */
  .whatson {
    grid-template-columns: minmax(19rem, 0.82fr) 2fr;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }

  /* A hairline between the two halves, not a border on either one. */
  .whatson__shows {
    border-left: 1px solid var(--paper-line);
    padding-left: clamp(2.5rem, 4vw, 4rem);
  }

  /* Four across is right at full width; in this column it would shrink the
     pictures to thumbnails, so the rail drops to two and runs to two rows. */
  .whatson__shows .show-rail { grid-template-columns: repeat(2, 1fr); }

  /* With nothing coming up the rail has the whole shell back. */
  .whatson--shows-only { grid-template-columns: 1fr; }
  .whatson--shows-only .whatson__shows { border-left: 0; padding-left: 0; }
  .whatson--shows-only .show-rail { grid-template-columns: repeat(4, 1fr); }
}

/* The agenda sits on paper-2 here, so its chips need to lift off it the way
   they do on plain paper. */
.section--paper2 .agenda__chip { background: var(--paper); }
.section--paper2 .agenda__link:hover { background: var(--paper); }
.section--paper2 .agenda__link:hover .agenda__chip { background: var(--paper-2); }