.pj-story-page {
  --pj-story-ink: #242f29;
  --pj-story-muted: #46554a;
  --pj-story-paper: #f3f2ea;
  --pj-story-rule: #c5c9bd;
  color: var(--pj-story-ink);
}
.pj-story-page .pj-article-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.04fr);
  align-items: stretch;
  width: min(1240px, calc(100% - clamp(32px,8vw,128px)));
  margin: clamp(18px,2.3vw,34px) auto clamp(32px,4vw,56px);
  padding: 0;
  border-top: 2px solid var(--pj-story-ink);
  background: var(--pj-story-paper);
  color: var(--pj-story-ink);
}
.pj-story-page .pj-article-heading {
  align-self: center;
  padding: clamp(26px,3.3vw,48px);
  min-width: 0;
}
.pj-story-page .pj-article-section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--pj-story-muted);
  font: 700 13px/1.35 Assistant,system-ui,sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pj-story-page .pj-article-section::before {
  content: "";
  width: 25px;
  height: 2px;
  background: #987442;
}
.pj-story-page .pj-article-section a { color: inherit; text-decoration: none; }
.pj-story-page .pj-article-section a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pj-story-page .pj-story-headline {
  margin: 13px 0;
  color: var(--pj-story-ink);
  font: 400 clamp(37px,3.9vw,62px)/1.04 Georgia,"Times New Roman",serif;
  letter-spacing: -.043em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.pj-story-page .pj-article-deck, .pj-story-page .pj-article-deck p {
  margin: 0;
  color: #3c473f;
  font: 400 clamp(17px,1.45vw,21px)/1.47 Assistant,system-ui,sans-serif;
  letter-spacing: normal;
}
.pj-story-page .pj-article-date {
  margin: 18px 0 0;
  color: var(--pj-story-muted);
  font: 550 14px/1.5 Assistant,system-ui,sans-serif;
  letter-spacing: normal;
}
.pj-story-page .pj-article-jump {
  margin: 19px 0 0;
  font: 650 16px/1.4 Assistant,system-ui,sans-serif;
}
.pj-story-page .pj-article-jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 16px;
  background: #304737;
  color: #fff;
  text-decoration: none;
}
.pj-story-page .pj-article-jump a::after { content: "↓"; font-family: system-ui,sans-serif; }
.pj-story-page .pj-article-jump a:hover { background: #223327; }
.pj-story-page .pj-article-head a:focus-visible { outline: 3px solid #596e49; outline-offset: 4px; }
.pj-story-page .pj-article-cover {
  align-self: stretch; margin: 0; min-width: 0; min-height: 0;
  display: grid; grid-template-rows: minmax(0,1fr) auto; background: #e8e8de;
}
.pj-story-page .pj-article-cover img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 470px;
  aspect-ratio: 1.55;
  object-fit: cover;
}
.pj-story-page .pj-article-cover figcaption {
  margin: 0; padding: 9px 14px; color: var(--pj-story-muted);
  font: 400 15px/1.4 Assistant,system-ui,sans-serif; text-align: left;
  background: var(--pj-story-paper);
}
.pj-story-page .pj-article-cover:has(figcaption) img,
.pj-story-page .pj-article-cover img[src*="science-why-"] { object-fit: contain; }
.pj-story-page .pj-article-head:not(:has(.pj-article-cover)) { grid-template-columns: 1fr; }
.pj-story-page .pj-article-head:not(:has(.pj-article-cover)) .pj-article-heading { max-width: 820px; }
.pj-story-page .pj-article-body {
  box-sizing: border-box;
  width: min(780px, calc(100% - 40px));
  max-width: 780px;
  margin: 0 auto clamp(32px,4vw,56px);
  padding: 0;
}
@media (max-width: 900px) and (min-width: 721px) {
  .pj-story-page .pj-story-headline { font-size: 36px; }
  .pj-story-page .pj-article-heading { padding: 26px; }
}
@media (max-width: 720px) {
  .pj-story-page .pj-article-head { width: calc(100% - 32px); grid-template-columns: 1fr; margin: 17px auto 27px; }
  .pj-story-page .pj-article-heading { padding: 22px clamp(18px,5vw,30px); }
  .pj-story-page .pj-story-headline { font-size: clamp(32px,7.6vw,45px); margin: 10px 0 12px; }
  .pj-story-page .pj-article-date { margin-top: 11px; }
  .pj-story-page .pj-article-jump { margin-top: 14px; }
  .pj-story-page .pj-article-cover img { height: auto; aspect-ratio: 1.8; max-height: none; }
  .pj-story-page .pj-article-cover:has(figcaption) img { aspect-ratio: auto; }
  .pj-story-page .pj-article-body { width: calc(100% - 36px); }
}
@media print {
  .pj-story-page .pj-article-head { display: block; width: 100%; margin: 0 0 12pt; background: none; border: 0; }
  .pj-story-page .pj-article-heading { padding: 0; }
  .pj-story-page .pj-article-head .pj-article-cover, .pj-story-page .pj-article-jump { display: none; }
}

/* The fall drinks roundup presents each recipe in full in the article. */
.pj-article-body .pj-drink-recipe {
  margin-block: clamp(28px, 4vw, 48px);
  padding-top: clamp(16px, 2.3vw, 25px);
  border-top: 1px solid var(--pj-story-rule);
}
.pj-article-body .pj-drink-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 3vw, 30px);
  margin-bottom: clamp(17px, 2.5vw, 27px);
}
.pj-article-body .pj-drink-heading > * { min-width: 0; margin: 0; }
.pj-article-body .pj-drink-heading figure { flex: 0 0 clamp(80px, 19vw, 195px); }
.pj-article-body .pj-drink-heading img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.6;
  object-fit: cover;
  border: 0;
  box-shadow: none;
}
.pj-article-body.wp-block-post-content .pj-drink-heading h2 {
  margin: 0 0 5px;
  scroll-margin-top: 80px;
}
.pj-article-body.wp-block-post-content .pj-drink-yield {
  margin: 0;
  color: var(--pj-story-muted);
  font-size: 16px;
  font-weight: 600;
}
.pj-article-body .pj-drink-directions {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 4vw, 42px);
}
.pj-article-body .pj-drink-directions > * { min-width: 0; margin: 0; }
.pj-article-body.wp-block-post-content .pj-drink-directions h3 {
  margin: 0 0 7px;
  font-size: clamp(22px, 1.8vw, 26px);
}
.pj-article-body.wp-block-post-content .pj-drink-directions :is(ul,ol) {
  margin: 0;
  padding-inline-start: 1.35em;
}
.pj-article-body .pj-drink-directions ol li::marker { font-weight: 650; }
@media (max-width: 620px) {
  .pj-article-body .pj-drink-directions { grid-template-columns: 1fr; }
}