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

/* ---- shared plate treatment -------------------------------------------- */
/*
 * Section 3's signature CSS is "white planes, fine shadows and measured
 * caption rules". The shadow is the only thing separating a plate from the
 * page, because the page and the plate's mat are both white; it is two soft
 * layers and no border, since a border would change the painted box.
 */

.hero__frame, .gal__frame, .place__frame {
  overflow: clip;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(37, 33, 24, .10);
}

/* 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%; }

.galp__fig img {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(37, 33, 24, .10);
}

/* 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%; }

.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-top: var(--s4);
  border-top: var(--rule) solid var(--ink);
}

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

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

/* Three columns of 1.375rem serif inside 768 leaves each quotation about 200px
   wide, which breaks the lines every four or five words. The page reads as two
   columns there and takes the third only once there is room for it, which is
   what the reviews page itself already does. */
@media (min-width: 768px) {
  .revp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .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-top: var(--s4);
  border-top: var(--rule) solid var(--ink);
}

.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);
  box-shadow: 0 1px 2px rgba(21, 21, 21, .06),
              0 12px 32px rgba(21, 21, 21, .07);
}

.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);
  box-shadow: 0 1px 2px rgba(21, 21, 21, .06),
              0 12px 32px rgba(21, 21, 21, .07);
}

.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);
  box-shadow: 0 1px 2px rgba(21, 21, 21, .06),
              0 12px 32px rgba(21, 21, 21, .07);
}

.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; }
}