/* THE MUSEUM LABEL. Spec: mockups/5-museum-label/LABEL.md (revision 2), with the owner's changes:
   the big title column stays on the left (css/wall.css), Inquire is the site's pill button, hung 16px under the board,
   left-aligned with it, and there is no artist line (the board opens on the italic title). One printed board: square, matte, about 4mm thick, hung beside the painting in the edge of its light.
   js/wall.js placeLabel() sets left/top (and the stacked width). */
.board{position:absolute;left:0;top:0;z-index:2;width:312px;padding:22px 24px 20px;color:var(--board-ink);
  font-family:"Archivo",sans-serif;font-stretch:100%;font-weight:400;font-kerning:normal;
  background:linear-gradient(160deg,var(--board) 0%,var(--board-2) 100%);
  border-radius:0;
  box-shadow:
    inset 0 1px 0 var(--board-top),             /* top face */
    0 1px 0 var(--board-side),                  /* bottom face: the board's thickness */
    4px 7px 3px -1px rgba(5,4,3,.78);           /* the stand-off shadow: short, crisp, down-right, away from the lamp */
  opacity:0;transition:opacity .16s cubic-bezier(.23,1,.32,1)}
.board ::selection{background:var(--board-ink);color:var(--board)}
.board p,.board h2,.board blockquote{margin:0}

/* the owner removed the artist line: the board opens on the italic title */
.lb-title{font:400 15px/21px "Archivo",sans-serif;font-stretch:100%;letter-spacing:.002em}
.lb-title .nw{white-space:nowrap}
.lb-title cite{font-style:italic;font-weight:400}
.lb-title:focus,.lb-title:focus-visible{outline:none}   /* programmatic focus target on open: no ring */
.lb-line{font-size:14px;line-height:20px;letter-spacing:.004em}
.lb-title + .lb-line{margin-top:2px!important}

.lb-story{margin-top:16px!important;max-width:300px}
.lb-story p{font-size:15px;line-height:22px;letter-spacing:.002em;text-indent:-.4em;hanging-punctuation:first}
.lb-story p::before{content:"\201C"}
.lb-story p::after{content:"\201D"}
.board [hidden]{display:none}

/* the series sits in the board's foot (where a museum prints the inventory number); on desktop the title column already
   shows it, so the foot only appears in the stacked layout */
.lb-foot{margin-top:16px;display:none;justify-content:flex-end;align-items:baseline}
.lb-series{font-size:13px;line-height:20px;letter-spacing:.006em;white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Inquire: the site's pill, outside the board, 16px under it, left-aligned with it */
.inq-row{position:absolute;left:0;top:0;z-index:2;opacity:0;transition:opacity .16s cubic-bezier(.23,1,.32,1)}

/* in: the board is already hanging, the light comes up on it (after the 900ms camera move). out: 160ms */
html.open.settled .board,html.open.settled .inq-row{opacity:1;transition:opacity .48s cubic-bezier(.33,0,.2,1) .12s}

@media (max-width:1023px){
  .lb-foot{display:flex}
  .board{padding:20px 22px 18px}
}
@media (prefers-reduced-motion:reduce){
  html.open.settled .board,html.open.settled .inq-row{transition:opacity .2s linear}
}