/* The Walnut Gallery — "Quiet" design system, editorial pass + brand blue.
   Serif-led and airy, but with structure: left-aligned prose, labelled sections
   with hairline rules, tinted bands separating blocks, pull quotes, and photos
   punctuating as split rows. Tokens carried over from designs/twg/quiet. */

:root {
  --paper: #fbfbf9;
  --tint: #f3f2ec;        /* band background — a half-step darker than paper */
  --ink: #34353a;
  --muted: #8b8c92;
  --faint: #b9bac0;
  --line: #e7e6e2;
  --accent: #6f7169;      /* soft neutral sage-grey — quotes & story copy */
  --brand: #185090;       /* Walnut Gallery blue, sampled from the logo */
  --serif: "Hoefler Text", "Baskerville", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw: 62rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.7;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── Header: centred wordmark + centred nav ── */
.site-header {
  text-align: center;
  padding: 3.4rem 1.5rem 1.8rem;
}
.tree-mark {
  height: 46px;
  margin: 0 auto 1.1rem;
  mix-blend-mode: multiply;        /* white box disappears into the paper background */
}
.wordmark {
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--brand);
}
.wordmark a { text-decoration: none; }
.eyebrow {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0.75rem 0 0;
  padding-left: 0.42em;
}
.site-header nav {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
  gap: 2.6rem;
  flex-wrap: wrap;
}
.site-header nav a {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-header nav a:hover,
.site-header nav a.active { color: var(--brand); border-color: var(--brand); }

/* Mobile: nav collapses behind a CSS-only "Menu" toggle (no JavaScript) */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.nav-burger { display: none; }
@media (max-width: 700px) {
  .nav-burger {
    display: inline-block;
    margin-top: 1.6rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand);
    cursor: pointer;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle:focus-visible + .nav-burger { outline: 2px solid var(--brand); outline-offset: 4px; }
  .nav-toggle:checked ~ nav + .nav-burger,
  .nav-toggle:checked + .nav-burger { border-color: var(--brand); }
  .site-header nav { display: none; }
  .nav-toggle:checked ~ nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.8rem;
  }
}

.rule { height: 1px; background: var(--line); max-width: var(--maxw); margin: 0 auto; }

/* ── Layout ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 40rem; margin: 0 auto; padding: 0 1.5rem; }
.section { margin-top: 4.5rem; }
.centred { text-align: center; }

/* Tinted band — separates a block from the paper around it */
.band {
  margin-top: 5rem;
  padding: 3.8rem 0 4.2rem;
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band .label::after { background: #dedcd3; }

/* Section label: small caps with a trailing hairline */
.label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.6rem;
}
.label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.label--bare { display: block; }
.label--bare::after { display: none; }

/* Prose: left-aligned, comfortable measure */
.prose p { margin: 1.1rem 0 0; }
.prose p:first-child { margin-top: 0; }

/* Pull quote */
.pullquote {
  font-size: clamp(1.45rem, 2.9vw, 1.95rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

/* Split row: text beside image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem;
  align-items: center;
}
.split img { width: 100%; border: 1px solid var(--line); }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
}

/* Info grid: labelled fact cells with strong top rules */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.info { border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.info h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.7rem;
}
.info p { margin: 0.4rem 0 0; font-size: 0.98rem; }
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }

/* Q&A grid */
.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem 3.5rem;
  margin-top: 2.2rem;
}
.qa-item { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.qa-item h3 { font-style: italic; font-weight: 400; font-size: 1.12rem; margin: 0; }
.qa-item p { margin: 0.6rem 0 0; font-size: 0.98rem; }
@media (max-width: 760px) { .qa-grid { grid-template-columns: 1fr; } }

/* ── Framed artwork (hero + works grid) ── */
.artwork {
  width: min(38rem, 100%);
  margin: 0 auto;
  border: 1px solid var(--line);
  padding: 0.9rem;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.artwork img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  background: #e7e3da;
  border: 0;
}
/* Wider frame for a composite of several works — 38rem leaves each panel of a
   2×2 grid too small to read. Unlike a single painting, this one is sized by
   width, not capped by height: the height cap would shrink a near-square
   composite well inside its own frame. */
.artwork--wide { width: min(44rem, 100%); }
.hero .artwork--wide img { max-height: none; width: 100%; }
.caption {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 1.1rem;
}

/* ── Home hero ── */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem 0; text-align: center; }
/* On a page that already opens with a title block, the hero sits closer under it. */
.page-head + .hero { padding-top: 2.4rem; }
/* The hero is a painting, not a banner: show it whole rather than cropped to a
   ratio, capped in height so the exhibition line still sits above the fold. */
.hero .artwork img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 56vh;
  margin: 0 auto;
}
.exhibition { margin: 0 auto; text-align: center; }
.show-title {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--brand);
}
.show-title a { text-decoration: none; }
.dates {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.8rem;
}
.lead {
  font-size: clamp(1.15rem, 2.3vw, 1.4rem);
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}
.story { font-style: italic; color: var(--accent); line-height: 1.85; }

/* Visit facts block (home band) */
.visit {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 2.1;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 0;
}
.visit strong { color: var(--ink); font-weight: 600; }
.visit a { color: var(--ink); }

/* ── Interior page heads ── */
.page-head { max-width: var(--maxw); margin: 0 auto; padding: 3.6rem 1.5rem 0; text-align: center; }
.page-title {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--brand);
}
.page-intro {
  max-width: 34rem;
  margin: 1.6rem auto 0;
  color: var(--muted);
}

.quiet-link {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.quiet-link:hover { color: var(--ink); }

/* ── Photographs ── */
.photo { margin: 3.5rem auto 0; }
.photo img { width: 100%; border: 1px solid var(--line); }
.photo .caption { margin-top: 0.9rem; text-align: center; }

/* ── Works grid (exhibitions) ── */
.works {
  max-width: var(--maxw);
  margin: 2.4rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3rem 2.5rem;
  text-align: center;
}
.work .artwork { padding: 0.6rem; }
/* Artwork is never cropped. The frame keeps a common height so the grid stays
   even; square and portrait pieces sit inside it like a mount. */
.work .artwork img { aspect-ratio: 4 / 3; object-fit: contain; background: transparent; }
/* Most work in the current show is square; a square frame lets it fill the
   mount instead of floating in a letterbox. */
.works--square .artwork img { aspect-ratio: 1 / 1; }
.work .artist {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0;
}
.work .title { font-style: italic; margin: 0.2rem 0 0; color: var(--ink); }
.work .medium {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--faint);
  margin: 0.2rem 0 0;
}

/* Past exhibitions */
.past .show-title { font-size: 1.25rem; }
.past .dates { margin-top: 0.4rem; }
.past p { color: var(--muted); }

/* Artist name heading — exhibitions page, above each pair of works */
.artist-name {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
  margin: 0 0 1.1rem;
}

/* Artist's name + words, held to a readable measure but sharing the left edge
   of the works grid below it. */
.artist-block { max-width: 42rem; }

.work .artist {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0;
}
.work .title { font-style: italic; margin: 0.2rem 0 0; color: var(--ink); }
.work .medium {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--faint);
  margin: 0.2rem 0 0;
}

/* Past exhibitions */
.past .show-title { font-size: 1.25rem; }
.past .dates { margin-top: 0.4rem; }
.past p { color: var(--muted); }

/* Artist name heading — exhibitions page, above each pair of works */
.artist-name {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
  margin: 0 0 1.1rem;
}

/* Artist's name + words, held to a readable measure but sharing the left edge
   of the works grid below it. */
.artist-block { max-width: 42rem; }

/* ── Announcement notice ── */
/* A dated notice — a closure, a changeover — sitting under the header before the
   page proper. Short-lived by design: delete the block once the date has passed. */
.notice {
  max-width: var(--maxw);
  margin: 2.6rem auto 0;
  padding: 1.2rem 1.5rem 1.3rem;
  border-top: 1px solid var(--brand);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.notice-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.6rem;
}
.notice p { margin: 0; font-size: 1rem; }

/* ── Artist directory (artists page) ── */
/* Every artist who shows with us has one permanent entry here, alphabetical by
   surname, and one stable #anchor the exhibition pages link to. */
.artist-list {
  max-width: var(--maxw);
  margin: 2.4rem auto 0;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.8rem 3.2rem;
}
.artist-card {
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  display: flow-root;           /* contains the floated portrait */
}
/* A small portrait sits at the head of the card where we have one. Floated so the
   name stays on the top line and stays aligned with the cards either side of it —
   a card with no photograph is unchanged, which is what most of them still are. */
.artist-portrait {
  float: right;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--tint);
  margin: 0.15rem 0 0.7rem 1.1rem;
}
.artist-card h3 {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
  margin: 0;
}
.artist-card .artist-meta {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0.5rem 0 0;
}
.artist-card p { margin: 0.9rem 0 0; font-size: 0.98rem; }
.artist-card .artist-site {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--brand);
  margin-top: 1rem;
}
.artist-card .artist-site a { color: var(--brand); }


/* ── Back to top ── */
.to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--brand);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s, border-color .2s;
  z-index: 10;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { border-color: var(--brand); }

/* ── Footer ── */
.site-footer {
  margin-top: 5.5rem;
  padding: 2.4rem 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  border-top: 1px solid var(--line);
}
.band + .site-footer { margin-top: 0; border-top: 0; }
.site-footer p { margin: 0.4rem 0 0; }
.site-footer p:first-child { margin-top: 0; }
.footer-nav { margin-bottom: 1.1rem; }
.site-footer .credit { margin-top: 1.1rem; }
.footer-nav a { color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ── Mailing list signup ── */
.signup { margin: 0; }
.field { margin-bottom: 1.6rem; }
.field label,
.field legend {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
  padding: 0;
}
.field input[type="text"],
.field input[type="email"] {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus {
  outline: none;
  border-color: var(--brand);
}
.field--choices { border: 0; margin: 0 0 1.8rem; padding: 0; }
.field--choices legend { margin-bottom: 0.8rem; }
.choice {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 0.55rem;
}
.choice input { flex: 0 0 auto; }
.signup-submit {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--brand);
  border: 0;
  border-radius: 0;
  padding: 0.95rem 2rem;
  cursor: pointer;
}
.signup-submit:hover { background: var(--ink); }
.signup-note {
  margin-top: 1.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.signup-thanks p { margin-top: 0.6rem; }