/* Page-specific theme for the Wellness Zine case file.
   Only overrides the CSS custom properties defined on .project-page
   in the shared /style.css, plus one small link treatment for inline
   text links used in this page's copy (mediaWorks has none, so the
   shared stylesheet has no rule for it). Colors pulled from the
   zine's own cut-paper logo mark. */

.project-page[data-theme="wellness"] {
  --proj-accent: #1F7C87;      /* zine logo teal */
  --proj-accent-2: #C97C58;    /* zine logo terracotta */
  --proj-accent-soft: #EAE7D2; /* pale sage-paper tint */
  --proj-ink: #3A3226;         /* warm dark ink */
}

.project-page[data-theme="wellness"] .project-main a {
  color: var(--proj-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-page[data-theme="wellness"] .project-main a:hover {
  color: var(--proj-accent-2);
}

/* The shared template zeroes out ul:last-of-type's bottom margin,
   meant for lists that end a section. Here the list is followed by
   a closing paragraph, not the section end, so that rule was
   collapsing the list straight into the paragraph after it. */
.project-page[data-theme="wellness"] #issues ul:last-of-type {
  margin-bottom: 16px;
}

.zine-embed {
  margin: 30px 0;
}

.zine-embed-title {
  margin: 0 0 12px;
  font-family: "Just Me Again Down Here", cursive;
  font-weight: 400;
  font-size: 1.7em;
  color: var(--proj-accent);
}

.zine-embed-link {
  display: block;
  margin-top: 20px;
  text-align: right;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

/* ---- Hero figure: the logo's own square canvas is mostly empty
   splattered background above/around the lettering. The shared
   template stretches this box to match the text column's height on
   desktop (near-square, showing all of that empty space), then
   switches to a cropped landscape box on mobile only. That mobile
   crop reads better — tighter on the actual wordmark — so it's used
   at every width here instead of just below the 720px breakpoint.
   align-self: flex-start opts out of the row's default stretch so
   the aspect-ratio (not the text column's height) drives the box. */
.project-page[data-theme="wellness"] .project-hero-figure {
  flex: 1 1 380px;
  align-self: flex-start;
  aspect-ratio: 16 / 10;
}

/* ---- Flip-book embeds: heyzine's own embed shows a description
   panel beside the book whenever the iframe is wider than it is
   tall. Taller than the 400px in the snippet the book renders
   noticeably larger and covers most of that panel, so the page
   reads as "the magazine" rather than "the description." */
.zine-embed .fp-iframe {
  height: 640px !important;
}

@media (max-width: 720px) {
  .zine-embed .fp-iframe {
    height: 560px !important;
  }
}

/* ---- Beyond Print figure pair: kept side by side (not stacked)
   on mobile too, just at a shorter fixed image height instead of
   the shared template's max-height clamp, which was squishing both
   the square call-for-submissions graphic and the tall Instagram
   promo graphic into a distorted, over-cropped strip. */
@media (max-width: 720px) {
  .project-page[data-theme="wellness"] #beyond .beyond-print-pair {
    flex-direction: row;
    gap: 12px;
  }

  .project-page[data-theme="wellness"] #beyond .beyond-print-pair .project-figure {
    flex: 1 1 0% !important;
  }

  .project-page[data-theme="wellness"] #beyond .beyond-print-pair .project-figure img {
    flex: none !important;
    width: 100% !important;
    height: 170px !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}