/* Butterfly: Read page.
   Used on: /butterfly/read/.
   Forum Homini website, editable IIS version v018 20261109 090410. Generated with Claude Opus 5.5. */
.rd[data-c-butterfly-read-page] {
  max-inline-size: 40rem;
  margin: 0 auto;
  padding-block-end: calc(var(--s-6) + env(safe-area-inset-bottom));
}
.rd__listen[data-c-butterfly-read-page] {
  margin: 0;
  padding: var(--s-2) var(--s-5) 0;
  text-align: center;
}
/* Version 5: the way to the website, small, under the Listen link */
.rd__home[data-c-butterfly-read-page] {
  padding-block: var(--s-2) var(--s-5);
}
.rd__home[data-c-butterfly-read-page] a[data-c-butterfly-read-page],
.rd__home[data-c-butterfly-read-page] a[data-c-butterfly-read-page]:visited {
  font-size: var(--fs-s, 0.9rem);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.rd__listen[data-c-butterfly-read-page] a[data-c-butterfly-read-page],
.rd__listen[data-c-butterfly-read-page] a[data-c-butterfly-read-page]:visited {
  color: #6b4a14;
  font-family: var(--face-text);
  font-size: var(--fs-m);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* the sheet, as the printed 4 Colour Rocks sheet: warm paper, the heading font in capitals, a serif text */
.bt__paper[data-c-butterfly-read-page] {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-5);
  background: #f0e5d6;
  color: #2b1c10;
  text-align: center;
}
/* the top bar's logo, big across the top: the mark and the name, dark on the graded gold */
.bt__brand[data-c-butterfly-read-page] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  inline-size: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
}
.bt__brand[data-c-butterfly-read-page] img[data-c-butterfly-read-page] {
  inline-size: auto;
  block-size: clamp(40px, 9vw, 64px);
}
.bt__brand[data-c-butterfly-read-page] .bt__name[data-c-butterfly-read-page] {
  inline-size: auto;
  block-size: clamp(18px, 2.4vw + 8px, 28px);
}
.bt__brand[data-c-butterfly-read-page] span[data-c-butterfly-read-page] {
  font-family: var(--face-display);
  font-size: clamp(1.6rem, 1rem + 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.bt__paper[data-c-butterfly-read-page] .bt__title[data-c-butterfly-read-page] {
  margin: var(--s-2) 0 0;
  font-family: var(--face-display);
  font-size: clamp(1.9rem, 1.2rem + 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: none;
  color: #2b1c10;
  -webkit-text-fill-color: #2b1c10;
}
/* owner (18 Oct 2026): "The on one line and butterflies below" */
.bt__t1[data-c-butterfly-read-page],
.bt__t2[data-c-butterfly-read-page] {
  display: block;
}
.bt__paper[data-c-butterfly-read-page] .bt__gold[data-c-butterfly-read-page] {
  color: #8a6420;
  -webkit-text-fill-color: #8a6420;
}
/* the spaced line between two thin rules */
.bt__sub[data-c-butterfly-read-page] {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  font-family: var(--face-display);
  font-size: var(--fs-s);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2b1c10;
}
.bt__sub[data-c-butterfly-read-page]::before,
.bt__sub[data-c-butterfly-read-page]::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: #2b1c10;
}
/* owner (18 Oct 2026): "Lets make a landscape photo across the page of the butterflies before the explanation": the photo
     whole, across the sheet, the words under it */
.bt__grid[data-c-butterfly-read-page] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--s-4);
  inline-size: 100%;
  text-align: start;
}
/* owner (18 Oct 2026): "cut a bottom part of the butterfly photo to make it landscape": the top kept (the butterflies),
     the grass at the bottom cut, a wide landscape */
.bt__sheetpic[data-c-butterfly-read-page] {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: 4px;
}
.bt__text[data-c-butterfly-read-page] {
  display: grid;
  gap: var(--s-4);
}
/* (18 Oct 2026, owner: "Is it good enough to read at a dinner table in the forest?"): a little larger and sturdier than
     reading text elsewhere, for a phone held at the table in candlelight */
.bt__paper-line[data-c-butterfly-read-page] {
  font-family: var(--face-display);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  color: #24170c;
}
.bt__centre[data-c-butterfly-read-page] {
  text-align: center;
}
/* the beige band, as "ORIGINS → SURVIVAL → LIFE → HUMANITY" */
.bt__band[data-c-butterfly-read-page] {
  inline-size: 100%;
  margin-block-start: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: #e6d5b8;
  font-family: var(--face-display);
  font-size: clamp(0.95rem, 0.8rem + 1vw, 1.0625rem);
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2b1c10;
}
.bt__band[data-c-butterfly-read-page] span[data-c-butterfly-read-page] {
  color: #8a6420;
}
/* the big closing line, as "THE SUM OF US" */
.bt__closing[data-c-butterfly-read-page] {
  font-family: var(--face-display);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.1rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #2b1c10;
}
.bt__paper-sign[data-c-butterfly-read-page] {
  font-family: var(--face-text);
  font-size: var(--fs-s);
  font-weight: var(--wt-label, 600);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b4a14;
}
.bt__d2d[data-c-butterfly-read-page] {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin-block-start: var(--s-2);
  border-radius: 4px;
}
.bt__foot[data-c-butterfly-read-page] {
  inline-size: 100%;
  margin-block-start: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid rgb(43 28 16 / 0.25);
  font-family: var(--face-text);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2b1c10;
}
.bt__foot[data-c-butterfly-read-page] span[data-c-butterfly-read-page] {
  padding-inline: 0.4em;
  color: #8a6420;
}
@media (max-width: 520px) {
  .bt__grid[data-c-butterfly-read-page] {
    grid-template-columns: 1fr;
  }
  /* (9 Nov 2026, Karina's list 8.11) centred on phones: the band below never wrapped, so the sheet's one column took its
     width (about 346px) and ran into the right margin (5 to 17px there against 24px on the left). The column now keeps
     inside the sheet's margins and the band may take two lines. */
  .bt__paper[data-c-butterfly-read-page] {
    grid-template-columns: minmax(0, 1fr);
  }
  .bt__band[data-c-butterfly-read-page] {
    white-space: normal;
    text-wrap: balance;
  }
}
/* (9 Nov 2026, Karina's list 8.10) the round × at the top right: back to the page the visitor came from, or to
   Dare2Dream when the page was opened from the QR code */
.bf-close[data-c-butterfly-read-page] {
  position: fixed;
  inset-block-start: calc(14px + env(safe-area-inset-top));
  inset-inline-end: 14px;
  z-index: 10;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #2b1c10;
  color: #f0e5d6;
  font: 22px/1 sans-serif;
  text-decoration: none;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
}
.bf-close[data-c-butterfly-read-page]:focus-visible {
  outline: 2px solid #c9953f;
  outline-offset: 3px;
}