/* ==========================================================================
   Pan D Endz : blog.css
   The blog: a story, the list of stories, and the numbered pages of that list.

   The pages are written by the server (functions/_lib/blog-render.js). Every
   class here starts with bl-, and the top of each page reuses the inner pages'
   own hero (.pg-hero from pages.css) so the blog opens the way every other
   page does: dark world, the words on the left gutter, the smoke behind them.

   Values: tokens only, as in pages.css. No raw colour, size or easing.
   Order: mobile first. Wider screens are added in min-width blocks.
   Motion: transform and opacity only, CSS only (the article is never touched
   by a script), and none at all under reduced motion, at the bottom.

   Contrast, measured with the site's own arithmetic and listed in
   docs/BLOG.md: every text pairing on these pages is one the site already
   uses and the contrast guard already checks (pairings.json), so a colour the
   owner changes in the admin panel is checked for the blog as well.
   ========================================================================== */

/* ============================================================ 1. THE STORY TOP
   The inner pages' hero, a little shorter: under it comes the picture, and the
   direct answer should be near the first screen. */

.bl-head {
  min-height: 56vh;
  min-height: 56svh;
  padding-bottom: var(--s-5);
}

.bl-head__title {
  max-width: 24ch;
}

/* The kicker is the way back to every story. Gold on char, 12.4:1. */
.bl-head__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.bl-head__kicker:hover,
.bl-head__kicker:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.bl-head__date {
  margin: var(--s-3) 0 0;
  color: var(--cream-muted);         /* 10.1:1 on char */
  font-size: var(--fs-small);
}

.bl-head__date time {
  color: var(--cream);               /* 17.5:1 on char */
}

/* ======================================================== 2. THE WIDE PICTURE
   The picture sits on the seam between the dark top and the paper page: the
   band behind it is char above its middle and paper below, so it is held by
   both worlds. The treatment is the one dish photographs get everywhere on
   the site: cover, the 6px sign-board corner, and coal while it loads. */

.bl-figure {
  margin: 0;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, var(--char) 50%, var(--paper) 50%);
}

.bl-figure picture {
  display: block;
  max-width: 72rem;
}

.bl-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-tag);
  background: var(--coal);
}

/* ============================================================ 3. THE READING
   Paper world. One column at the site's reading measure, headlines hanging
   off the left gutter like everywhere else. */

.bl-body {
  padding: var(--s-6) var(--gutter) var(--s-6);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

/* The direct answer, set as a lead: the display face, larger, behind the same
   green rule the About page's pull quote stands behind. */
.bl-answer {
  max-width: 34ch;
  margin: 0 0 var(--s-6);
  padding-left: var(--s-3);
  border-left: 3px solid var(--green);

  color: var(--ink);                 /* 16.2:1 cold, 14.1:1 hot */
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-d3);
  line-height: 1.3;
  letter-spacing: var(--track-display);
}

.bl-section + .bl-section {
  margin-top: var(--s-6);
}

.bl-section__title {
  max-width: 26ch;
  margin: 0 0 var(--s-3);
  color: var(--green);               /* 5.9:1 cold, 5.1:1 hot, and large */
}

.bl-p {
  max-width: var(--measure);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* A link to one of the site's own pages, inside the story's text. */
.bl-link {
  color: var(--green);               /* 5.9:1 cold, 5.1:1 hot */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bl-link:hover {
  text-decoration-thickness: 2px;
}

/* A citation mark: a small link to its numbered source below. */
.bl-cite {
  line-height: 0;
}

.bl-cite a {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.bl-cite a:hover,
.bl-cite a:focus-visible {
  text-decoration: underline;
}

/* --- the questions people ask --------------------------------------------- */

.bl-faq {
  max-width: var(--measure);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.bl-faq__title {
  margin: 0 0 var(--s-2);
  color: var(--green);
}

.bl-faq__item {
  margin-top: var(--s-4);
}

.bl-faq__q {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.bl-faq__a {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ============================================= 4. CALL AHEAD, SEE THE MENU
   The dark world again, and the site's own pieces: the phone number set the
   way the Visit section sets it, and the two pill buttons. */

.bl-cta {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: var(--s-6) var(--gutter);
  background: var(--char);
  color: var(--cream);
}

.bl-cta__line {
  max-width: 40ch;
  margin: 0;
  color: var(--cream-muted);         /* 10.1:1 on char */
}

.bl-cta__phone {
  color: var(--gold);                /* 12.4:1 on char */
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-d2);
  line-height: 1;
  letter-spacing: var(--track-display);
  text-decoration: none;
}

.bl-cta__phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.bl-cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ================================================== 5. WHERE THE FACTS COME FROM */

.bl-notes {
  padding: var(--s-5) var(--gutter) var(--s-6);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.bl-notes__ai {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  color: var(--ink-muted);           /* 7.5:1 cold, 6.5:1 hot */
  font-size: var(--fs-small);
}

.bl-notes__title {
  margin: 0 0 var(--s-2);
  color: var(--green);
}

.bl-sources {
  display: grid;
  gap: var(--s-1);
  max-width: var(--measure);
  margin: 0;
  padding-left: 1.5em;
  font-size: var(--fs-small);
}

.bl-sources a {
  color: var(--green);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.bl-sources__site {
  color: var(--ink-muted);
}

/* ================================================= 6. A LIST OF STORIES
   Not a grid of rounded boxes: a board, one story per row under a hairline,
   the way the menu and the shelf are written out. The title is the link, and
   a stretched link makes the whole row clickable; "Read the story" sits above
   it so it stays a link of its own. */

.bl-listing,
.bl-related {
  padding: var(--s-6) var(--gutter) var(--s-7);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.bl-related__title {
  margin: 0 0 var(--s-4);
  color: var(--green);
}

.bl-list {
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-item {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.bl-item__pic {
  overflow: hidden;
  border-radius: var(--r-tag);
}

.bl-item__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--coal);
  transition: transform var(--t-slow) var(--ease-smoke);
}

.bl-item:hover .bl-item__img {
  transform: scale(1.03);
}

.bl-item__title {
  margin: 0;
  color: var(--ink);
}

.bl-item__title a {
  color: inherit;
  text-decoration: none;
}

.bl-item__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bl-item__title a:hover,
.bl-item__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.bl-item__desc {
  margin: var(--s-2) 0 0;
  color: var(--ink-muted);           /* 7.5:1 cold, 6.5:1 hot */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.bl-item__date {
  margin: var(--s-2) 0 0;
  color: var(--ink-muted);
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.bl-item__more {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-1);

  color: var(--green);               /* 5.9:1 cold, 5.1:1 hot */
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.bl-related__all {
  margin: var(--s-5) 0 0;
}

.bl-empty {
  max-width: 30ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: var(--fraunces-wonk);
  font-size: var(--fs-d3);
  line-height: 1.2;
}

/* The page number under the blog's title, on page 2 and after. */
.bl-listhead__page {
  margin: var(--s-3) 0 0;
}

/* ====================================================== 7. THE PAGE NUMBERS
   Plain numbered links, Newer and Older either side. Every one is a 44px
   target, the current one is filled green (cream on green, 5.9:1), and each
   one's outline is the text colour itself, so a boundary never drops under
   3:1. */

.bl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.bl-pager__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px currentColor;

  color: var(--ink);
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-decoration: none;
}

a.bl-pager__num:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.bl-pager__num.is-current {
  background: var(--green);
  box-shadow: none;
  color: var(--cream);
}

/* ======================================================= WIDER SCREENS ONLY */

@media (min-width: 760px) {
  /* A story in a list: the picture on the left, the words on the right. */
  .bl-item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--s-5);
    align-items: start;
  }

  .bl-list--related .bl-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}

@media (min-width: 900px) {
  .bl-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--s-6);
  }

  .bl-cta__line {
    grid-column: 1 / -1;
  }
}

/* ================================================================= MOTION
   The top of a story rises into place as the page opens, the way a headline
   burns in, and the picture follows it. Transform and opacity only, and CSS
   only: no script ever touches the article. */

@keyframes bl-rise {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.bl-head .pg-hero__inner > *,
.bl-listhead .pg-hero__inner > * {
  animation: bl-rise var(--t-slow) var(--ease-smoke) both;
}

.bl-head .pg-hero__inner > :nth-child(2),
.bl-listhead .pg-hero__inner > :nth-child(2) {
  animation-delay: 60ms;
}

.bl-head .pg-hero__inner > :nth-child(3),
.bl-listhead .pg-hero__inner > :nth-child(3) {
  animation-delay: 120ms;
}

.bl-figure picture {
  animation: bl-rise var(--t-slow) var(--ease-smoke) 180ms both;
}

/* ========================================================== REDUCED MOTION
   Nothing moves. Everything is simply there. */

@media (prefers-reduced-motion: reduce) {
  .bl-head .pg-hero__inner > *,
  .bl-listhead .pg-hero__inner > *,
  .bl-figure picture {
    animation: none;
  }

  .bl-item__img,
  .bl-body,
  .bl-notes,
  .bl-listing,
  .bl-related {
    transition: none;
  }

  .bl-item:hover .bl-item__img {
    transform: none;
  }
}