/* ============================================================
   7 · Latest Publication — olive; taped polaroid + rich copy
   ============================================================ */
.pub {
  background: var(--c-olive);
}

/* The copy is split either side of the editor's rule so the polaroid can drop
   into that break when the grid stacks. Here both halves sit in column 2, flush
   (the rule's own margin spaces them) and the polaroid spans them. */
.pub__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  column-gap: clamp(44px, 6vw, 90px);
  align-items: center;
}
.pub__polaroid { grid-column: 1; grid-row: 1 / span 2; }
.pub__copy { grid-column: 2; }

/* taped polaroid */
.pub__polaroid {
  position: relative;
  background: #fdfbf7;
  padding: 14px 14px 52px;
  transform: rotate(-3deg);
  box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.55);
  max-width: 420px;
  margin-inline: auto;
}
.pub__polaroid img {
  width: 100%;
}
.pub__polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  font-family: var(--f-accent);
  font-size: 19px;
  color: #b9ab8d;
}
.pub__tape {
  position: absolute;
  width: 108px;
  height: 30px;
  background: rgba(214, 202, 178, 0.55);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.pub__tape--tl {
  top: -14px;
  left: 42px;
  transform: rotate(-8deg);
}
.pub__tape--br {
  bottom: 26px;
  left: -40px;
  transform: rotate(-55deg);
}

/* single rich-text field: headings, emphasis, dividers and quotes all
   styled so the editor alone can shape this column.

   Book-page treatment. The copy is one field, so the pull-quotes are
   positional: the opening line, and the line that closes the blurb (the
   one sitting directly above the editor's horizontal rule) are set in the
   display serif and framed by printer's ornaments; the paragraphs between
   are justified like a page of the book itself. Remove the rule in the
   editor and the closing line simply reads as body copy. */
.pub__copy {
  /* a printed measure — justified copy needs one, and the column is wide */
  max-width: min(100%, 72ch);
}
.pub__body {
  --pub-rule: rgba(250, 224, 203, 0.32);
  --pub-gap: clamp(56px, 12vw, 76px);   /* break in the rule for the ornament */
  /* rule with a printer's ornament centred in its own gap, so it needs no
     opaque backing and rides on whatever the section background is */
  --pub-orn:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 10'><path d='M22 .8 25.6 5 22 9.2 18.4 5Z' fill='%23FAE0CB'/><circle cx='9' cy='5' r='1.5' fill='%23FAE0CB'/><circle cx='35' cy='5' r='1.5' fill='%23FAE0CB'/></svg>") center / auto 12px no-repeat,
    linear-gradient(90deg,
      var(--pub-rule) 0 calc(50% - var(--pub-gap) / 2),
      transparent calc(50% - var(--pub-gap) / 2) calc(50% + var(--pub-gap) / 2),
      var(--pub-rule) calc(50% + var(--pub-gap) / 2) 100%) center / 100% 1px no-repeat;
}
.pub__body p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--c-cream);
  text-align: justify;
  hyphens: auto;
}
.pub__body p + p { margin-top: 1.1em; }
.pub__body h2,
.pub__body h3,
.pub__body h4 {
  font-family: var(--f-accent);
  font-weight: 400;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.4;
  color: var(--c-cream-lt);
  text-align: center;
}
.pub__body h2, .pub__body h3, .pub__body h4 { margin-bottom: .55em; }
.pub__body * + h2,
.pub__body * + h3,
.pub__body * + h4 { margin-top: 1.2em; }

/* the two pull-quotes — scoped to the lead half so the paragraph that opens
   the second half is not mistaken for the opening quote */
.pub__body--lead > p:first-of-type,
.pub__body > p:has(+ hr) {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.5;
  color: var(--c-peach);
  text-align: center;
  text-wrap: balance;
  hyphens: manual;
}
/* ornaments above and below the opening quote; the closing quote is already
   followed by the editor's rule, which is drawn as one below */
.pub__body--lead > p:first-of-type::before,
.pub__body--lead > p:first-of-type::after {
  content: "";
  display: block;
  height: 12px;
  background: var(--pub-orn);
}
.pub__body--lead > p:first-of-type::before { margin-bottom: clamp(18px, 2.4vw, 28px); }
.pub__body--lead > p:first-of-type::after { margin-top: clamp(18px, 2.4vw, 28px); }
.pub__body > p:has(+ hr) { margin-bottom: clamp(6px, 1vw, 12px); }

.pub__body em, .pub__body i {
  font-family: var(--f-accent);
  font-style: italic;
  color: var(--c-peach);
}
.pub__body strong { color: var(--c-cream-lt); font-weight: 600; }
.pub__body a { color: var(--c-cream-lt); text-decoration: underline; text-underline-offset: 3px; }
.pub__body hr {
  height: 12px;
  border: 0;
  background: var(--pub-orn);
  margin: clamp(22px, 3vw, 34px) 0;
}
.pub__body blockquote {
  margin: 1.4em 0;
  padding-left: 18px;
  border-left: 2px solid rgba(237, 231, 214, .35);
}
.pub__body blockquote p {
  font-family: var(--f-accent);
  font-style: italic;
  color: var(--c-cream-lt);
  text-align: left;
}
.pub__body ul, .pub__body ol { margin: 1em 0 0 1.2em; }
.pub__body li {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--c-cream);
  list-style: disc;
}
.pub__body ol li { list-style: decimal; }
.pub__body img { max-width: 100%; height: auto; border-radius: 8px; }

.pub__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.pub__chips li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13.5px;
  color: var(--c-cream);
  border: 1px solid rgba(237, 231, 214, 0.4);
  border-radius: 999px;
  padding: 8px 18px;
}
/* linked chips look identical, just interactive */
.pub__chips li.pub__chip--link { padding: 0; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.pub__chip--link a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  color: inherit;
  text-decoration: none;
}
.pub__chip--link:hover { background: rgba(237, 231, 214, .12); border-color: rgba(237, 231, 214, .7); }
.pub__cta {
  margin-top: 30px;
}

@media (max-width: 900px) {
  .pub__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(32px, 7vw, 48px);
  }
  /* one column: the polaroid leaves the left rail and takes the break the
     editor's rule makes, directly above the closing half of the copy */
  .pub__polaroid,
  .pub__copy { grid-column: auto; grid-row: auto; }
  .pub__copy--lead { order: 1; }
  .pub__polaroid { order: 2; }
  .pub__copy--tail { order: 3; }
  /* the row gap now does the spacing the rule's margin used to */
  .pub__body--lead > hr:last-child { margin-bottom: 0; }
  .pub__polaroid {
    max-width: 340px;
  }
  /* stacked: chips and buttons centred under the centred section head;
     the copy keeps its book-page setting */
  .pub__copy { margin-inline: auto; }
  .pub__chips { justify-content: center; }
  .pub__body ul, .pub__body ol { margin-inline: 0; list-style-position: inside; }
}