/*
 * Boom's note on a product page: a comic caption box.
 *
 * The home page prints this same sentence as an italic pull quote inside the
 * "What's Boom smoking?" panel. This is drawn as a different object on purpose
 * -- a caption taped into the poster, hard border and thrown shadow, the same
 * furniture as everything else on this page. One sentence quoted twice in two
 * matching pull quotes reads as two remarks; a quote in one place and a caption
 * in another reads as one voice heard twice.
 *
 * No quotation marks here. The panel draws them because a pull quote without
 * them is just italics; a caption box is already attributed by the tab.
 */
.boom-note {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  /* The thrown shadow is 5px; a 4px gap under the box put it through the
     price line beneath and the price read as struck out. */
  margin: 20px 0 24px;
  padding: 13px 15px 14px;
  background: var(--gold, #e9c577);
  border: 3px solid var(--ink, #0c0b0e);
  box-shadow: 5px 5px 0 rgba(17, 16, 21, .82);
  /* Barely off square. A caption pinned to a page is never quite straight, and
     a whole degree at this width throws the text baseline off the copy above. */
  transform: rotate(-.6deg);
}

/* The icon says who is talking before the label is read. The label is the
   accessible half; this is aria-hidden and carries no information alone. */
.boom-note-tab {
  display: block;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: var(--paper, #fdfaf3);
  border: 3px solid var(--ink, #0c0b0e);
}
.boom-note-tab img {
  width: 100%;
  height: 100%;
  /* Same crop the poster's corner box uses: the icon is a square canvas with
     wide transparent margins, so cover crops into the figure. */
  object-fit: cover;
  object-position: 50% 18%;
  transform: scale(1.3);
}

/* The label and the line are one grid item, not two. Left to auto-placement
   they fill the columns in order and the line lands under the icon, one word
   wide -- which is what happened the first time this was drawn. */
.boom-note-body { display: block; }

.boom-note-label {
  display: block;
  margin: 0 0 3px;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink, #0c0b0e);
}
.boom-note-line {
  display: block;
  margin: 0;
  font-size: clamp(.94rem, 2.4vw, 1.06rem);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink, #0c0b0e);
}

@media (max-width: 430px) {
  /* The tab costs 58px of a 320px column and the note is the words. */
  .boom-note { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .boom-note-tab { width: 34px; height: 34px; border-width: 2px; }
}