/* DS-08 -- section layouts. Loaded after design.css. */

/* ---- shared plate treatment -------------------------------------------- */
/*
 * Section 3's signature CSS is "planes, fine frames and measured caption
 * rules". Section 4 of this build asks for a fine 1px frame at an 18px
 * radius and NO drop shadow, so the frame is the only thing separating a
 * plate from the page: one hairline in #B09C6D, 6.54:1 against the ground.
 */

.hero__frame, .gal__frame, .place__frame {
  overflow: clip;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

/* MATERIAL DISTINCTNESS: an exhibition walk of alternating wall planes. */
@media (min-width: 1100px) {
  body.p-index main { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; background:var(--bg); padding-block-end:10rem; }
  body.p-index main > .sec { min-width:0; margin:0; border:0; background:var(--bg); }
  body.p-index main > .sec > .wrap { width:auto; max-width:none; }
  body.p-index .hero { grid-column:1/10; min-height:100svh; }
  body.p-index .svcp { grid-column:5/-1; min-height:75svh; }
  body.p-index .appr { grid-column:1/8; min-height:65svh; }
  body.p-index .galp { grid-column:3/-1; min-height:100svh; }
  body.p-index .galp__list { grid-template-columns:1.5fr .8fr; align-items:start; }
  body.p-index .galp__item:nth-child(3) { grid-column:2; margin-top:8rem; }
  body.p-index .stfp { grid-column:1/10; min-height:90svh; }
  body.p-index .revp { grid-column:6/-1; min-height:60svh; }
  body.p-index .faqp { grid-column:2/9; min-height:70svh; }
  body.p-index .cta { grid-column:1/-1; }
}

.hero__frame img, .gal__frame img, .place__frame img,
.galp__fig img, .stf__fig img { width: 100%; filter: var(--media); }

.galp__fig img, .stf__fig img {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

/* The measured caption rule, in the museum-label voice design.css already
   set on .gal__no and its family. Every caption in the build sits the same
   distance under the same hairline. */
.hero__cap, .gal__cap, .galp__cap, .place__cap {
  display: block;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--line);
  color: var(--muted);
}

.galp__cap, .place__cap {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* ---- the hero: five plates and a caption rail --------------------------- */
/*
 * Section 3 asks for a five-image manual slideshow with a caption rail and
 * section 5 for a hero that works with no TypeScript at all. It is therefore
 * a radio group: five inputs, five labels in the rail, and the checked input
 * addresses its plate with a sibling combinator. No script runs, the arrow
 * keys move between plates because that is what a radio group does, and the
 * whole thing keeps working when scripting is off.
 *
 * The inputs are taken out of the flow so they are not grid items, but they
 * are NOT display:none -- a hidden input cannot be focused, and a control
 * that cannot be reached from a keyboard is not a control. Focus lands on
 * the input and is DRAWN on its label, which is the 44px target.
 */

.hero__wrap { position: relative; }

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

.hero__copy > * + * { margin-top: var(--s5); }

.hero__eyebrow {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__lede { font-size: 1.125rem; }

.hero__second {
  align-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* All five plates occupy the same cell. The stage reserves one box and the
   dissolve happens inside it, so nothing on the page moves. */
.hero__stage { display: grid; }

.hero__plate {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-long), visibility 0s linear 600ms;
}

.hero__no {
  display: block;
  margin-bottom: var(--s1);
}

.hero__no, .hero__pick-no {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.hero__text { display: block; color: var(--ink); }

/* The rail. Five labels, a hairline between each, the checked one in ink
   with the accent rule against it. */
.hero__rail-h {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s3);
}

.hero__pick {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  min-height: 44px;
  padding: var(--s3) 0 var(--s3) var(--s4);
  border-top: var(--hair) solid var(--line);
  border-left: var(--rule) solid transparent;
  color: var(--muted);
  transition: color var(--t), border-color var(--t);
}

.hero__pick:last-child { border-bottom: var(--hair) solid var(--line); }

.hero__pick:hover { color: var(--ink); }

.hero__pick-cap { display: block; }

/* The dissolve, and the rail entry that goes with it. Five pairs, written
   out: a checked input has no parent selector to lean on. */
#hp-1:checked ~ .hero__stage .hero__plate--1,
#hp-2:checked ~ .hero__stage .hero__plate--2,
#hp-3:checked ~ .hero__stage .hero__plate--3,
#hp-4:checked ~ .hero__stage .hero__plate--4,
#hp-5:checked ~ .hero__stage .hero__plate--5 {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-long), visibility 0s linear;
}

#hp-1:checked ~ .hero__rail .hero__pick--1,
#hp-2:checked ~ .hero__rail .hero__pick--2,
#hp-3:checked ~ .hero__rail .hero__pick--3,
#hp-4:checked ~ .hero__rail .hero__pick--4,
#hp-5:checked ~ .hero__rail .hero__pick--5 {
  color: var(--ink);
  border-left-color: var(--acc);
}

/* Focus is drawn on the label, at section 4's exact 3px ring and 3px
   offset, with design.css's highlight halo outside it. */
#hp-1:focus-visible ~ .hero__rail .hero__pick--1,
#hp-2:focus-visible ~ .hero__rail .hero__pick--2,
#hp-3:focus-visible ~ .hero__rail .hero__pick--3,
#hp-4:focus-visible ~ .hero__rail .hero__pick--4,
#hp-5:focus-visible ~ .hero__rail .hero__pick--5 {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-width) * 2)
              var(--hi);
  color: var(--ink);
}

@media (min-width: 1024px) {
  .sec > .hero__wrap { display: grid; gap: var(--s7); align-items: start; }
  .sec > .hero__wrap {
    grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
  }
  .sec > .hero__wrap > * + * { margin-top: 0; }
  .hero__copy { grid-column: 1 / -1; }
}

/*
 * Section 4's animation-off state, verbatim: "First plate stays visible;
 * remaining plates form a vertical gallery with captions." The stage stops
 * stacking, every plate is present at full opacity, and the rail goes --
 * a control that no longer controls anything is worse than no control.
 *
 * The 68fr track STAYS. If the stage widened into the vacated column the
 * painted box would be the full 1280px against an 838px promise, which is
 * the fatal finding this whole file is arranged to avoid.
 */
@media (prefers-reduced-motion: reduce) {
  .hero__stage { display: block; }

  .hero__plate {
    opacity: 1;
    visibility: visible;
  }

  .hero__plate + .hero__plate { margin-top: var(--s8); }

  .hero__radio, .hero__rail { display: none; }
}

/* ---- index: the service preview ---------------------------------------- */

.svcp__intro { max-width: var(--measure); color: var(--muted); }

.svcp__list { gap: var(--s7) var(--s5); }

.svcp__item {
  padding-top: var(--s4);
  border-top: var(--rule) solid var(--ink);
}

.svcp__p { margin-top: var(--s3); color: var(--muted); }

.svcp__price { margin-top: var(--s4); }

.svcp__link, .galp__all, .stfp__all, .revp__all, .faqp__all, .svcp__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.svcp__link { margin-top: var(--s2); }

.price__v { font-family: var(--font-h); font-size: 1.375rem; }

.price__q { margin-right: var(--s1); }

@media (min-width: 768px) {
  .svcp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- index: the approach statement ------------------------------------- */

.appr__p { margin-top: var(--s5); font-size: 1.125rem; }

@media (min-width: 1024px) {
  .appr__in {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--s7);
    align-items: start;
  }

  .appr__p { margin-top: 0; }
}

/* ---- index: the gallery preview ---------------------------------------- */

.galp__intro { max-width: var(--measure); color: var(--muted); }

.galp__list { gap: var(--s5); }

@media (min-width: 768px) {
  .galp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .galp__list { gap: var(--s7); }
}

/* ---- index and staff: the staff wall ----------------------------------- */
/*
 * The gap is 32px and stays 32px, on both lists, at every width above 768.
 * SIZES computed the staff promise from a two-up on a 32px gap -- (1280 -
 * 32) / 2 = 624 -- and a wider gap here would make the painted box narrower
 * than the promise, which is safe, while a NARROWER one makes it wider,
 * which is fatal. It is written once per list rather than inherited from
 * --gap so that a later change to --gap cannot reach it.
 */

.stfp__intro { max-width: var(--measure); color: var(--muted); }

.stfp__list, .stf__list { gap: var(--s5); }

.stf__card {
  height: 100%;
  padding: var(--s4);
  background: var(--stf-panel);
  border-radius: var(--radius);
}

.stf__fig { margin: 0; }

.stf__body { padding-top: var(--s4); }

.stf__name { font-size: 1.25rem; }

.stf__role {
  margin-top: var(--s1);
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

.stf__bio { margin-top: var(--s3); color: var(--muted); }

@media (min-width: 768px) {
  .stfp__list, .stf__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s6);
  }
}

@media (min-width: 1024px) {
  .stf__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- index: the review excerpts ---------------------------------------- */

.revp__list { gap: var(--s7); }

.revp__item {
  padding: var(--s5);
  border-top: var(--rule) solid var(--line);
  background: var(--rev-panel);
  border-radius: var(--radius);
}

.revp__q p { font-family: var(--font-h); font-size: 1.375rem; line-height: 1.3; }

.revp__by { margin-top: var(--s4); }

@media (min-width: 768px) {
  .revp__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- index: the FAQ preview -------------------------------------------- */

.faqp__item {
  padding-top: var(--s4);
  border-top: var(--hair) solid var(--line);
}

.faqp__item + .faqp__item { margin-top: var(--s5); }

.faqp__q { font-size: 1.25rem; }

.faqp__a { margin-top: var(--s3); color: var(--muted); }

@media (min-width: 1024px) {
  .faqp__item {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--s7);
  }

  .faqp__a { margin-top: 0; }
}

/* ---- the contact call to action ---------------------------------------- */

.cta { background: var(--surface); }

.cta__p { margin-top: var(--s4); max-width: var(--measure); }

.cta__actions {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

@media (min-width: 1024px) {
  .cta__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s7);
    align-items: end;
  }

  .cta__actions { margin-top: 0; }
}

/* ---- every page head --------------------------------------------------- */

.phead { padding-bottom: 0; }

.phead__lede { margin-top: var(--s5); font-size: 1.125rem; color: var(--muted); }

/* ---- services.html ----------------------------------------------------- */

.svc__row {
  padding-top: var(--s5);
  border-top: var(--rule) solid var(--ink);
}

.svc__row + .svc__row { margin-top: var(--s8); }

.svc__price { margin-top: var(--s3); }

.svc__body > * + * { margin-top: var(--s4); }

.svc__scope { color: var(--muted); }

.svc__fitlabel { margin-right: var(--s2); }

.svc__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/*
 * Section 3's alternating plates are the gallery's composition, and section
 * 6 asks services.html to use them too. The services page carries no image,
 * so what alternates here is the SIDE the priced head sits on: odd rows put
 * the name and the price on the left, even rows on the right, and the scope
 * takes the other column. Below 1024 both stack, head first.
 */
@media (min-width: 1024px) {
  .svc__row {
    display: grid;
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: var(--s7);
    align-items: start;
  }

  .svc__list > .svc__row:nth-child(even) .svc__head {
    grid-column: 2;
    grid-row: 1;
  }

  .svc__list > .svc__row:nth-child(even) .svc__body {
    grid-column: 1;
    grid-row: 1;
  }
}

.how__list { gap: var(--s7); }

.how__step {
  padding-top: var(--s4);
  border-top: var(--hair) solid var(--line);
}

.how__h { margin-top: var(--s3); }

.how__p { margin-top: var(--s3); color: var(--muted); }

@media (min-width: 768px) {
  .how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.note { background: var(--surface); }

.note__p { margin-top: var(--s5); }

/* ---- gallery.html: the wall -------------------------------------------- */
/*
 * One column below 768, two stacked columns from 768 -- section 7's own
 * words -- and from 1024 the alternating plate: image 62%, label 38%, 48px
 * between them, the sides swapping on every second item. Section 15 fails
 * this build if those plates collapse into an ordinary centred container
 * above 1024, so the swap is stated on nth-child and not left to chance.
 *
 * The swap is done with grid placement and not with `order`, so the reading
 * order of the figure and its caption never moves.
 */

.gal__list { display: grid; gap: var(--s8); }

.gal__cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: baseline;
}

.gal__text {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (min-width: 768px) {
  .gal__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8) var(--s7);
  }
}

@media (min-width: 1024px) {
  .gal__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s10);
  }

  .gal__fig {
    display: grid;
    grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
    gap: var(--s7);
    align-items: end;
  }

  .gal__cap {
    display: block;
    margin-top: 0;
    padding-bottom: var(--s2);
  }

  .gal__no { display: block; margin-bottom: var(--s3); }

  /*
   * The swap REVERSES THE TRACKS as well as the placement. Putting the
   * frame in column 2 and leaving the tracks at 62/38 would hang every
   * even plate at 38% of the wall -- half the hang shrinking by a third
   * on alternate rows, and an image painted far under a `sizes` promise
   * that measure2 would pass in silence because under-painting is the
   * safe direction. Measured at 1280: 704px on every row, either side.
   */
  .gal__item:nth-child(even) .gal__fig {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  }

  .gal__item:nth-child(even) .gal__frame { grid-column: 2; grid-row: 1; }

  .gal__item:nth-child(even) .gal__cap { grid-column: 1; grid-row: 1; }
}

/* ---- staff.html: the service cross-links -------------------------------- */

.focus__p { margin-top: var(--s5); color: var(--muted); }

.focus__list { margin-top: var(--s6); gap: 0; }

.focus__list li { border-top: var(--hair) solid var(--line); }

.focus__list li:last-child { border-bottom: var(--hair) solid var(--line); }

.focus__list a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--s3) var(--s4);
}

.focus__list a:hover { background: var(--hi); }

@media (min-width: 768px) {
  .focus__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s7);
  }
}

/* ---- about.html -------------------------------------------------------- */

.abt__cols > .abt__p + .abt__p { margin-top: var(--s5); }

.prin__list, .proc__list { gap: var(--s7); }

.prin__item, .proc__step {
  padding-top: var(--s4);
  border-top: var(--rule) solid var(--ink);
}

.prin__p, .proc__p { margin-top: var(--s3); color: var(--muted); }

.proc__h { margin-top: var(--s3); }

.place__cap { max-width: var(--measure); }

.limit { background: var(--surface); }

.limit__p { margin-top: var(--s5); }

@media (min-width: 768px) {
  .abt__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s7);
  }

  .abt__cols > .abt__p + .abt__p { margin-top: 0; }

  .prin__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .proc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .proc__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .place__fig {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: var(--s7);
    align-items: end;
  }

  .place__cap { margin-top: 0; padding-bottom: var(--s2); }
}

/* ---- reviews.html ------------------------------------------------------ */

.rev__list { gap: var(--s7); }

.rev__card {
  height: 100%;
  padding: var(--s5);
  border-top: var(--rule) solid var(--line);
  background: var(--rev-panel);
  border-radius: var(--radius);
}

.rev__q { margin-top: var(--s4); }

.rev__q p { font-family: var(--font-h); font-size: 1.25rem; line-height: 1.35; }

.rev__foot {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--line);
}

.rev__time {
  display: block;
  margin-top: var(--s2);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.45;
}

.rev__svc {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .rev__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- faq.html ---------------------------------------------------------- */

.faqg { padding-block: var(--s8); }

.faqg__sub { margin-top: var(--s3); color: var(--muted); }

.faq__item {
  /* spacing comes from the band rule in design.css */
  border-top: var(--hair) solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--s3) 0;
  font-family: var(--font-h);
  font-size: 1.25rem;
  line-height: 1.15;
}

.faq__q::after {
  content: "+";
  margin-left: auto;
  padding-left: var(--s4);
  color: var(--acc);
}

.faq__item[open] > .faq__q::after { content: "\2212"; }

.faq__a { padding: 0 0 var(--s5); color: var(--muted); }

.faq__escape {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--surface);
}

/* ---- contact.html ------------------------------------------------------ */

.cd > * + * { margin-top: var(--s4); }

.cd__addr { color: var(--muted); }

.cd__hh { margin-top: var(--s6); font-size: 1.125rem; }

.cd__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: var(--hair) solid var(--line);
}

.cd__row dt { min-width: 14ch; font-weight: 700; }

.cd__row dd { color: var(--muted); }

.cd__note { color: var(--muted); }

.cd__plate {
  margin-top: var(--s6);
  overflow: hidden;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.cd__plate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cform { margin-top: var(--s8); }

.cform > * + * { margin-top: var(--s5); }

.cform__consent { max-width: var(--measure); color: var(--muted); }

.alt { background: var(--surface); }

.alt__p { margin-top: var(--s4); max-width: var(--measure); }

.alt__in > .btn { margin-top: var(--s6); }

@media (min-width: 1024px) {
  .con__grid {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: var(--s7);
    align-items: start;
  }

  .cform { margin-top: 0; }
}

/* ---- privacy.html ------------------------------------------------------ */

.pv__sec + .pv__sec {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--line);
}

.pv__sec > p { margin-top: var(--s4); }

.pv__h { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; }

@media (min-width: 1024px) {
  .pv__sec {
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    gap: var(--s7);
    align-items: start;
  }

  .pv__sec > p { margin-top: 0; grid-column: 2; }

  .pv__sec > p + p { margin-top: var(--s4); }
}

/* ---- 404.html ---------------------------------------------------------- */

.nf__code {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

.nf__h1 { margin-top: var(--s4); }

.nf__p { margin-top: var(--s5); color: var(--muted); }

.nf__links { margin-top: var(--s6); }

.nf__links li { border-top: var(--hair) solid var(--line); }

.nf__links li:last-child { border-bottom: var(--hair) solid var(--line); }

.nf__links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  max-width: 28rem;
}

.nf__book { margin-top: var(--s7); }

/* ---- visual-completeness pass ----------------------------------------- */
/*
 * Keep the white-cube rhythm without turning it into empty viewport space.
 * These values still leave gallery breathing room, but each band now earns
 * the space it occupies with either useful content or a photographic plate.
 */
:root { --band-pad: 3.5rem; }

.exhibit {
  padding-block: 0 var(--band-pad);
}

.exhibit__in {
  display: grid;
  gap: var(--s5);
  align-items: stretch;
}

.exhibit__fig {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.exhibit__fig img {
  width: 100%;
  height: 100%;
  min-height: 17rem;
  max-height: 32rem;
  object-fit: cover;
}

.exhibit__cap {
  padding: var(--s3) var(--s4);
  border-top: var(--hair) solid var(--line);
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.exhibit__note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: var(--hair) solid var(--line);
  border-left: var(--rule) solid var(--acc);
  background: var(--surface);
}

.exhibit__kicker {
  margin-bottom: var(--s3);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.exhibit__h { font-size: clamp(1.8rem, 4vw, 3.15rem); }
.exhibit__p { margin-top: var(--s4); color: var(--muted); }

.hero__frame img,
.gal__frame img,
.place__frame img,
.galp__fig img,
.stf__fig img {
  height: 100%;
  object-fit: cover;
}

.hero__frame { aspect-ratio: 4 / 3; }
.gal__frame, .place__frame { aspect-ratio: 3 / 2; }
.stf__fig { aspect-ratio: 4 / 5; overflow: hidden; }

@media (min-width: 768px) {
  :root { --band-pad: 4.5rem; }
  .exhibit__in { grid-template-columns: minmax(0, 62fr) minmax(18rem, 38fr); }
}

@media (min-width: 1024px) {
  :root { --band-pad: 5.5rem; }
  .gal__list { gap: 4.5rem; }
}

@media (min-width: 1100px) {
  body.p-index main { display: block; padding-block-end: 0; }
  body.p-index main > .sec > .wrap {
    width: 100%;
    max-width: calc(var(--max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  body.p-index .hero,
  body.p-index .svcp,
  body.p-index .appr,
  body.p-index .galp,
  body.p-index .stfp,
  body.p-index .revp,
  body.p-index .faqp { min-height: 0; }

  body.p-index .svcp > .wrap,
  body.p-index .revp > .wrap { max-width: 1120px; margin-right: 4vw; }

  body.p-index .appr > .wrap,
  body.p-index .faqp > .wrap { max-width: 980px; margin-left: 4vw; }

  body.p-index .hero > .wrap,
  body.p-index .stfp > .wrap { max-width: 1180px; margin-left: 3vw; }

  body.p-index .galp > .wrap { max-width: 1160px; margin-right: 3vw; }
  body.p-index .galp__list {
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .75fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--s5);
    align-items: stretch;
  }

  body.p-index .galp__item:first-child { grid-column: 1; grid-row: 1 / 3; }
  body.p-index .galp__item:nth-child(2) { grid-column: 2; grid-row: 1; }
  body.p-index .galp__item:nth-child(3) { grid-column: 2; grid-row: 2; margin-top: 0; }
  body.p-index .galp__fig { display: flex; height: 100%; flex-direction: column; }
  body.p-index .galp__fig picture { display: block; flex: 1; min-height: 0; overflow: hidden; }
  body.p-index .galp__fig img { width: 100%; height: 100%; object-fit: cover; }
}

.p-404 .nf__wrap {
  display: grid;
  gap: var(--s7);
}

.nf__visual {
  align-self: start;
  overflow: hidden;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.nf__visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 768px) {
  .p-404 .nf__wrap { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .nf__copy { align-self: center; }
}

/* ---- the museum label in the footer ------------------------------------ */
/*
 * A wall label, in the proportions a wall label is printed in: the title
 * line, the maker line under it, then the metadata block, then the action.
 * No image sits inside it and nothing in it is rotated, so nothing here can
 * inflate a rectangle that a `sizes` attribute has promised something about.
 */

.ft__label {
  padding-bottom: var(--s7);
  margin-bottom: var(--s7);
  border-bottom: var(--hair) solid var(--line);
}

.ft__label-in {
  padding-left: var(--s4);
  border-left: var(--rule) solid var(--acc);
}

.ft__label-h {
  display: block;
  font-family: var(--font-h);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
}

.ft__label-sub {
  display: block;
  margin-top: var(--s2);
  color: var(--muted);
}

.ft__label-meta {
  margin-top: var(--s4);
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
}

.ft__label-act { margin-top: var(--s6); }

@media (min-width: 1024px) {
  .ft__label-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s7);
    align-items: end;
  }

  .ft__label-meta { grid-column: 1; }

  .ft__label-act { margin-top: 0; grid-column: 2; grid-row: 1 / 3; align-self: end; }
}

/* aajwebz-mailto-nowrap — an address is one token, never split across lines */
a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 380px) {
  a[href^="mailto:"] { font-size: 0.88em; }
}