/* Prose (articles) ---------------------------------------------------- */

.prose {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Justified prose sets paragraphs flush on both edges; auto hyphenation keeps
   the word spacing even instead of opening rivers between long words. */
.prose--justify p {
  text-align: justify;
  hyphens: auto;
}

/* The storefront moves an owner's headings down to fit the page's outline
   (a "#" in a description is an h2 there) and marks each moved one with the
   class of the level it was written at, so .h1–.h4 keep its look. */
.prose h1,
.prose h2,
.prose h3,
.prose .h1,
.prose .h2,
.prose .h3 {
  color: var(--ink);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose .h4 {
  margin: 0;
}

.prose h1:first-child,
.prose h2:first-child,
.prose .h1:first-child,
.prose .h2:first-child {
  margin-top: 0;
}

/* The block under the text sets the gap to whatever follows it — a tab's
   edge, the page's next section — so the text's own last margin must not add
   to it, or the gap would depend on whether a description ends in a paragraph
   or a table. */
.prose > :last-child {
  margin-bottom: 0;
}

.prose p {
  margin-bottom: 1em;
}

.prose a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose strong {
  color: var(--ink);
}

.prose ul,
.prose ol {
  list-style: disc;
  padding-inline-start: 1.4em;
  margin-bottom: 1em;
}

.prose ol {
  list-style: decimal;
}

.prose blockquote {
  margin: 1.5em 0;
  padding-inline-start: 1.2em;
  border-left: 3px solid var(--primary);
  color: var(--ink);
  font-style: italic;
}

.prose__img {
  border-radius: var(--radius-lg);
  margin-bottom: 1em;
}

.prose__section {
  display: flow-root;
}

/* A text section's photo that carries a credit: the picture and its credit
   line as one figure, floated the way the bare picture is. Without a credit
   the section draws the bare .prose__img exactly as before. */
.prose__figure {
  margin: 0 0 1em;
}

.prose__figure > .prose__img {
  display: block;
  width: 100%;
  margin-bottom: var(--space-1);
}

@media (min-width: 640px) {
  .prose__figure--left,
  .prose__figure--right {
    max-width: 45%;
  }

  .prose__figure--left {
    float: left;
    margin-inline-end: var(--space-6);
  }

  .prose__figure--right {
    float: right;
    margin-inline-start: var(--space-6);
  }

  .prose__figure > .prose__img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }
}

/* Photo credit: who took a Wikimedia Commons photo and under which licence,
   as its licence asks. Small and quiet: under a text section's photo it is
   one muted line; on a banner it sits in the bottom corner over a dark,
   semi-transparent ground, in the light ink a photo hero uses, because a
   photograph is not a background you can rely on for contrast. */
.photo-credit {
  display: block;
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--ink-muted);
}

.photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.photo-credit a:hover {
  color: var(--ink);
}

.photo-credit--on-photo {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 2;
  max-width: calc(100% - 2 * var(--space-2));
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--scrim);
  color: var(--hero-ink);
  font-size: 0.6875rem;
  text-align: right;
}

.photo-credit--on-photo a:hover {
  color: var(--hero-ink);
}

/* The photo credits page: one row per Wikimedia Commons photo, a small
   thumbnail beside its full credit. The anchor on each row is where a
   photo's credit can be linked to. */
.credit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.credit-list__item {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}

.credit-list__thumb {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.credit-list__body {
  min-width: 0;
}

.credit-list__title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.credit-list__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.credit-list__facts a {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.credit-list__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

/* A framed video keeps the player's 16:9 shape at whatever width it gets; the
   frame itself has no border and fills the box. Full width spans the column
   between the title and the text; left and right float beside the text from
   640 px, the same way the photo does, and stack above it below that. */
.prose__video {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: 1em;
  background: var(--surface-raised);
}

.prose__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.prose__video--full {
  margin-block: 0.5em 1.5em;
}

@media (min-width: 640px) {
  /* A photo beside the text keeps one shape, 4:3, whatever the file's own: a
     tall picture next to two paragraphs left a hole as high as the photo
     under the text. */
  .prose__img--left,
  .prose__img--right {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }

  .prose__img--left {
    float: left;
    max-width: 45%;
    margin-inline-end: var(--space-6);
  }

  .prose__img--right {
    float: right;
    max-width: 45%;
    margin-inline-start: var(--space-6);
  }

  .prose__video--left {
    float: left;
    width: 45%;
    margin-inline-end: var(--space-6);
  }

  .prose__video--right {
    float: right;
    width: 45%;
    margin-inline-start: var(--space-6);
  }
}

/* Expandable text: a lead that is always shown, then a native
   details/summary that unfolds the rest in place, with no script. The lead
   is one step up from the prose and in the ink colour, so it reads as the
   opening rather than as a first paragraph. The toggle is a link-coloured
   line with the shop's chevron; it says "read more" while folded and "show
   less" while open, and stays where it was clicked, above the text it
   unfolded. */

.prose__lead {
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--ink);
}

.prose__lead > :last-child {
  margin-bottom: 0;
}

.prose__more {
  margin-top: var(--space-3);
  /* The same slide as the FAQ's answers: the height runs to auto where
     ::details-content exists, and the text opens at once where it does not. */
  interpolate-size: allow-keywords;
}

.prose__more::details-content {
  height: 0;
  overflow: clip;
  transition:
    height var(--dur-base) var(--ease-out),
    content-visibility var(--dur-base) allow-discrete;
}

.prose__more[open]::details-content {
  height: auto;
}

.prose__more-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--secondary);
}

.prose__more-toggle::-webkit-details-marker {
  display: none;
}

.prose__more-toggle:hover .prose__more-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose__more-toggle .icon {
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.prose__more[open] > .prose__more-toggle .icon {
  transform: rotate(180deg);
}

.prose__more-label--less,
.prose__more[open] > .prose__more-toggle .prose__more-label--more {
  display: none;
}

.prose__more[open] > .prose__more-toggle .prose__more-label--less {
  display: inline;
}

.prose__more-body {
  padding-top: var(--space-2);
}