/*
 * Flagstaff Gallery — the public site.
 *
 * Loaded after tokens.css, which it shares entirely with the admin
 * application: palette, type scale, spacing scale, zero radius, focus states,
 * the two Figtree faces. What it does *not* share is app.css. The admin
 * application's tables, filter bars, status badges, drawers and state colours
 * belong to people running a gallery; a customer never needs to see that a
 * consignment is expiring.
 *
 * The design brief from 04a: same brand, quieter and more image-led. So the
 * rules here are mostly about restraint — the interface recedes, the pictures
 * do not compete with it, and nothing is decorated that could instead be
 * given space.
 */

/* ------------------------------------------------------------------ */
/* Ground                                                              */
/* ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: 400;
  /* The site is one long column of images. Anything that scrolls sideways on
     a phone is a bug, so it is prevented at the root rather than chased. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-modal);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--space-4);
}
@media (min-width: 40rem) { .wrap { padding-inline: var(--space-8); } }
@media (min-width: 80rem) { .wrap { padding-inline: var(--space-12); } }

.wrap--narrow { max-width: 46rem; }
.wrap--mid { max-width: 72rem; }

.stack > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

.section { padding-block: var(--space-12); }
@media (min-width: 60rem) { .section { padding-block: var(--space-16); } }
.section + .section { padding-top: 0; }

/* ------------------------------------------------------------------ */
/* Type                                                                */
/* ------------------------------------------------------------------ */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: var(--leading-tight);
}

.display {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  letter-spacing: var(--tracking-display);
  font-weight: 300;
}

.title {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: var(--tracking-title);
  font-weight: 300;
}

.eyebrow {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
  font-weight: 500;
}

.lede {
  font-size: 1.0625rem;
  color: var(--ink-muted);
  max-width: var(--measure);
  margin: 0;
}

.muted { color: var(--ink-muted); }
.small { font-size: var(--text-small); }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* Prose, for a content page or an artist's biography. */
.prose { max-width: var(--measure); }
.prose h2 {
  font-size: 1.375rem;
  letter-spacing: var(--tracking-title);
  margin: var(--space-8) 0 var(--space-3);
}
.prose h3 { font-size: 1.0625rem; font-weight: 500; margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose li { line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--sage);
  color: var(--ink-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }
.prose img { margin: var(--space-6) 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--wash);
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--wash);
  padding: var(--space-4);
  overflow-x: auto;
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4.5rem;
}

.brand { display: block; line-height: 1.1; }
.brand:hover { text-decoration: none; }
.brand__name {
  display: block;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.brand__sub {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

.site-nav { display: none; margin-left: auto; }
.site-nav a {
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) 0;
  /* A label never breaks mid-phrase. "About the / gallery" over two lines
     reads as two menu items, which is worse than a tighter menu. */
  white-space: nowrap;
}
.site-nav a[aria-current='page'] { border-bottom: 1px solid var(--ink); }

.site-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav + .site-header__tools { margin-left: var(--space-6); }

.cart-link {
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cart-link__count {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  padding: 0.1em 0.35em;
  margin-left: 0.35em;
  font-size: 0.6875rem;
}

@media (min-width: 60rem) {
  .site-nav { display: flex; gap: var(--space-4); align-items: center; flex-wrap: nowrap; }
  .menu-toggle { display: none; }
}
/* The gallery can put as many pages in the header as it likes, so the menu
   is given room before it is given air. */
@media (min-width: 85rem) {
  .site-nav { gap: var(--space-6); }
}

/* The phone menu is a <details>, so it works with no JavaScript at all and
   keeps its own open/closed state and keyboard behaviour. */
.menu {
  margin-left: auto;
}
.menu > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { text-decoration: underline; }
.menu__panel {
  position: absolute;
  left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: var(--space-4) var(--space-4) var(--space-8);
}
.menu__panel a {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.0625rem;
}
@media (min-width: 60rem) { .menu { display: none; } }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-12);
}
.hero__figure {
  position: relative;
  background: var(--wash);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.hero__caption {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}
.hero__words { align-self: end; }

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: 5fr 3fr;
    align-items: end;
    gap: var(--space-12);
    padding-block: var(--space-12) var(--space-16);
  }
}

/* ------------------------------------------------------------------ */
/* Artwork grid                                                        */
/* ------------------------------------------------------------------ */

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 60rem) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
}
@media (min-width: 80rem) {
  .grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .grid--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The card is shared with the admin application, per 04a. Same proportions,
   same restraint; the public one simply has more room around it. */
.card { display: block; }
.card:hover { text-decoration: none; }

.card__frame {
  position: relative;
  background: var(--wash);
  overflow: hidden;
  /* Works are all shapes. A fixed ratio with the image contained inside it
     keeps the grid's rhythm without cropping anybody's composition. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  transition: transform var(--duration) var(--ease);
}
.card:hover .card__frame img { transform: scale(1.02); }

.card__none {
  color: var(--ink-muted);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.card__body { padding-top: var(--space-3); }
.card__artist {
  font-size: var(--text-small);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.card__title {
  font-size: 1rem;
  margin: 0.1rem 0 0.35rem;
  font-weight: 400;
}
.card__price { font-size: var(--text-small); }

/* Availability. Words, never colour alone — and no admin state colours here:
   a customer is told sold, reserved or on hold, and nothing else. */
.flag {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border: 1px solid var(--line);
  color: var(--ink-muted);
}
.flag--sold { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.flag--reserved,
.flag--hold { background: var(--sage-wash); border-color: var(--sage); color: var(--ink); }

.card__frame .flag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--paper);
}
.card__frame .flag--sold { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ */
/* Browse: filters                                                     */
/* ------------------------------------------------------------------ */

.browse {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}

/* On a phone the artwork comes first and the filters follow it.
   A visitor who arrived to look at paintings should see a painting, not a
   screenful of tick boxes; the results bar carries a link down to them.
   Done with `order` rather than by collapsing the rail into a <details>,
   because a details element's open state cannot be set from CSS and the
   usual overrides for it are unreliable in Safari. */
.filters { order: 2; }
.browse__results { order: 1; }

@media (min-width: 60rem) {
  .browse { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-12); }
  .filters { position: sticky; top: 6rem; order: 0; }
  .browse__results { order: 0; }
  .filters__jump { display: none; }
}

.filters__jump {
  white-space: nowrap;
  display: inline-block;
  margin-left: var(--space-3);
  border: 1px solid var(--line);
  padding: 0.2em 0.6em;
}
.filters__jump:hover { border-color: var(--ink); text-decoration: none; }

.filters { font-size: var(--text-small); }
.filters__group { border-top: 1px solid var(--line); padding-block: var(--space-4); }
.filters__group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: var(--text-label);
  color: var(--ink-muted);
  font-weight: 500;
}
.filters__group > summary::-webkit-details-marker { display: none; }
.filters__group > summary::after { content: '+'; font-size: 1rem; }
.filters__group[open] > summary::after { content: '\2212'; }
.filters__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
}
.filters__list li + li { margin-top: 0.4rem; }
.filters__list a { display: block; }
.filters__list a[aria-current='true'] { font-weight: 600; }
.filters__list a[aria-current='true']::before { content: '\2713\00a0'; }
.filters__count { color: var(--ink-muted); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border: 1px solid var(--line);
  padding: 0.25em 0.6em;
  font-size: var(--text-small);
}
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip::after { content: '\00d7'; color: var(--ink-muted); }

.browse__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--control-height);
  padding: 0 var(--space-6);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: var(--text-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--wash); border-color: var(--line); color: var(--ink-muted); cursor: not-allowed;
}
.btn--secondary { background: var(--paper); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--block { width: 100%; }

/*
 * Every text-like control, listed by what it is *not*.
 *
 * `input[type='text']` does not match `<input name="customer_name">`, which
 * has no type at all and is a text input to every browser there is — so the
 * checkout's own name, phone and address fields have been unstyled and
 * full-bleed since stage 8, and every field added since inherited the fault.
 * Exactly the same mistake the admin stylesheet carried until 12 September,
 * found the same way: by adding a form and looking at it.
 */
input:not([type='checkbox'], [type='radio'], [type='file'], [type='submit'],
          [type='button'], [type='reset'], [type='range'], [type='color'],
          [type='image'], [type='hidden']),
select, textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.55rem var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px: anything smaller makes iOS zoom on focus */
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: var(--space-8); background-image: none; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline-offset: 1px; }

.field { display: block; }
.field + .field { margin-top: var(--space-4); }
.field > label {
  display: block;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
  font-weight: 500;
}
.field__error { color: var(--danger); font-size: var(--text-small); margin-top: var(--space-2); }
.field__help { color: var(--ink-muted); font-size: var(--text-small); margin-top: var(--space-2); }

.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-small);
  cursor: pointer;
}
.check input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--ink); }

.notice {
  border: 1px solid var(--line);
  border-left-width: 3px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-small);
}
.notice--ok { border-left-color: var(--ok); background: var(--ok-wash); }
.notice--error { border-left-color: var(--danger); background: var(--danger-wash); }
.notice--info { border-left-color: var(--sage); background: var(--sage-wash); }

/* ------------------------------------------------------------------ */
/* Artwork detail                                                      */
/* ------------------------------------------------------------------ */

.work { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 60rem) {
  .work { grid-template-columns: minmax(0, 3fr) minmax(20rem, 2fr); gap: var(--space-16); }
  .work__aside { position: sticky; top: 6rem; }
}

.work__figure {
  background: var(--wash);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 20rem;
}
.work__figure img { max-height: 78vh; width: auto; object-fit: contain; }

.work__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.work__thumbs a { width: 4.5rem; height: 4.5rem; background: var(--wash); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.work__thumbs img { max-width: 100%; max-height: 100%; object-fit: contain; }

.work__price { font-size: 1.5rem; letter-spacing: 0.02em; }
.work__meta { border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-4); }
.work__meta dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--text-small); }
.work__meta dt { color: var(--ink-muted); }
.work__meta dd { margin: 0; }

.work__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

/* Zoom, in CSS alone.
   The checkbox is off-screen and its label is the picture; ticking it adds no
   script and needs no library. A zoomed image scrolls inside its own frame,
   which is what a person actually wants — to move around a detail — rather
   than a lightbox that traps focus and has to be taught to release it. */
.zoom { position: relative; display: block; }
.zoom__toggle { position: absolute; opacity: 0; pointer-events: none; }
.zoom__label { display: block; cursor: zoom-in; }
.zoom__toggle:checked ~ .zoom__label { cursor: zoom-out; overflow: auto; }
.zoom__toggle:checked ~ .zoom__label .work__figure { align-items: flex-start; justify-content: flex-start; }
.zoom__toggle:checked ~ .zoom__label img {
  max-height: none;
  max-width: none;
  width: 220%;
}
.zoom__toggle:focus-visible ~ .zoom__label { outline: 2px solid var(--ink); outline-offset: 3px; }
.zoom__hint {
  font-size: var(--text-small);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------------ */
/* Artists                                                             */
/* ------------------------------------------------------------------ */

.artist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  list-style: none; padding: 0; margin: 0;
}
@media (min-width: 60rem) { .artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } }

.artist-card__frame {
  aspect-ratio: 1 / 1;
  background: var(--wash);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.artist-card__frame img { width: 100%; height: 100%; object-fit: cover; }
.artist-card__initials {
  font-size: 1.75rem;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
}
.artist-card__name { margin-top: var(--space-3); font-size: 1rem; }
.artist-card__count { color: var(--ink-muted); font-size: var(--text-small); }

.artist-head { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .artist-head { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-12); } }
.artist-head__portrait { background: var(--wash); aspect-ratio: 1 / 1; overflow: hidden; }
.artist-head__portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* Cart and checkout                                                   */
/* ------------------------------------------------------------------ */

.checkout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 60rem) { .checkout { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); gap: var(--space-12); } }

.summary { border: 1px solid var(--line); padding: var(--space-6); }
@media (min-width: 60rem) { .summary { position: sticky; top: 6rem; } }
.summary__line { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-small); }
.summary__line + .summary__line { margin-top: var(--space-2); }
.summary__total {
  display: flex; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--line);
  margin-top: var(--space-4); padding-top: var(--space-4);
  font-size: 1.125rem;
}

.basket { list-style: none; margin: 0; padding: 0; }
.basket__item {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.basket__thumb { background: var(--wash); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.basket__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.basket__remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--text-small); color: var(--ink-muted);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.basket__remove:hover { color: var(--danger); }

.countdown {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: var(--space-16);
  padding-block: var(--space-12);
  background: var(--wash);
  font-size: var(--text-small);
}
.site-footer__cols { display: grid; gap: var(--space-8); }
@media (min-width: 60rem) { .site-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer h2 {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__legal {
  border-top: 1px solid var(--line);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
}

.hours { white-space: pre-line; }

/* A gift voucher in the basket has no picture. Rather than an empty box or a
   borrowed icon, the tile says what it is — it is the only line in a basket
   that is not a thing with a photograph of it. */
.basket__thumb--plain {
  display: grid; place-items: center;
  background: var(--paper-2, #f4f2ee);
  font-size: var(--text-small, 0.875rem); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted, #6b6660);
}

.env-banner {
  background: var(--warn-wash);
  border-bottom: 1px solid var(--warn);
  color: var(--warn);
  text-align: center;
  padding: var(--space-2);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */

.pager {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  margin-top: var(--space-12);
  font-size: var(--text-small);
}
.pager__pages { color: var(--ink-muted); }

/* ------------------------------------------------------------------ */
/* Motion and print                                                    */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover .card__frame img { transform: none; }
}

@media print {
  .site-header, .site-footer, .filters, .work__actions, .pager, .env-banner { display: none; }
  body { font-size: 11pt; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ------------------------------------------------------------------ */
/* Choosing a print                                                    */
/* ------------------------------------------------------------------ */

/*
 * Which numbered print the buyer is buying.
 *
 * Radio buttons rather than a select, and no script at all: the public site
 * ships none (§9), and a native radio group already has the keyboard and
 * screen-reader behaviour a custom one would have to reimplement. Rendered
 * only where the gallery holds more than one print of the image — one print
 * posts a hidden field, because confirming the only option is ceremony.
 */
.edition-choice {
  border: 1px solid var(--rule);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edition-choice legend {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 var(--space-2);
}

.edition-choice__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--rule);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

/* The whole chip reacts, not just the dot: it is a touch target on a phone. */
.edition-choice__option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.edition-choice__option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}