/* ==========================================================================
   Thota Vaikuntam — /publications/
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* ------------------------------------------------------------ intro: photo | text, the quote across beneath (owner 2026-09-11) */
.pub-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-y) var(--gap-x); align-items: center; }
.pub-intro__media picture { width: 100%; }
.pub-intro__media img { width: 100%; height: auto; }
.pub-intro__body .lede { max-width: 62ch; }
.pub-intro__quote { margin: var(--gap-y) 0 0; }
@media (min-width: 1024px) {
  .pub-intro { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }   /* the photo a quarter narrower than the old half-width column */
  .pub-intro__body { padding-left: 40px; }
}

/* ------------------------------------------------------------ small button */
/* PU3: main.css .btn now carries a 44px min-height (inline-flex, centred); restate
   the floor here so the small variant stays a 44px touch target on its own. */
.btn--small { font-size: var(--fs-foot); padding: 9px 14px; min-height: 44px; }

/* ------------------------------------------------------------ cover grid */
.pub-grid-wrap { position: relative; }
.pub-grid { border-top: 1px solid var(--hairline); padding-top: var(--gap-y); }   /* no heading above the covers (owner) */
/* each cover is a flex column whose body fills the grid row, so a row's years and buttons share one line
   when a title wraps (as the shop grid does) */
.pub { position: relative; display: flex; flex-direction: column; }
.pub__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: var(--row-h);
  text-decoration: none;
}
.pub__media picture { max-height: 100%; width: auto; max-width: 100%; }
.pub__media img {
  width: auto; height: auto;
  max-width: 100%; max-height: var(--row-h);
  object-fit: contain;
  background: transparent !important;
}
.pub__placeholder { display: block; width: 70%; aspect-ratio: 3 / 4; background: var(--bg-soft); }
.pub--pale .pub__media img { box-shadow: 0 0 0 1px var(--hairline); }
.pub__body { padding-top: var(--cap-gap); flex: 1 0 auto; display: flex; flex-direction: column; }
.pub__title { margin-bottom: .3em; }
.pub__meta { margin: 0 0 .3em; }
.pub__meta { margin-top: auto; margin-bottom: 1em; }
.pub__actions { margin: 0; }
.pub__actions .btn { margin: 0; }
.pub:target .pub__title { color: var(--red); }

/* ------------------------------------------------------------ note */
.pub-note-section { padding-block: 0; }   /* closing strip: 60 → hairline → 30 → note, then only the footer's 60 (owner 2026-09-22) */
.pub-note-section .pub-note {   /* two classes: outranks main.css's `main > .section p` 62ch cap so the hairline spans the width */
  font-size: var(--fs-meta); line-height: 2.1rem;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--grey-1);
  border-top: 1px solid var(--hairline);
  padding-top: 30px;
  margin: 0;
  max-width: none;
}
.pub-note a { text-decoration: none; }
.pub-note a:hover { color: var(--ink); }