/* Postie's blog.

   Every value here is a token from tokens.css or a measurement taken from an
   existing component, because the prototypes are the pixel source of truth and
   this page was recreated from the kit rather than designed fresh:

     - the 130px top padding clears the fixed header, same as `.pay`
     - the card shadow and radius are `.pay__card`
     - the kicker is `.pay__kicker`
     - the reading column is 68ch, same as `.prose`

   The picture frame is a cousin of `partials/chapter_plate.html`, not a copy.
   That component's CSS lives in storybook.css, 44KB that only the home page
   loads, and pulling it in for one frame would cost every blog reader the
   whole storybook. Nothing here claims the two must stay identical. */

.bp {
  max-width: 1000px;
  margin: 0 auto;
  padding: 130px 20px 72px;
}
.bp--one { max-width: 780px; }

/* ---- The head, on the backdrop ------------------------------------------ */

.bp__head { text-align: center; margin-bottom: 36px; color: var(--gold-pale); }
.bp__head h1 {
  font-family: var(--font-display);
  color: var(--parchment-paper);
  margin: 0 0 12px;
  font-size: clamp(2rem, 6vw, 2.75rem);
}
.bp__lede { max-width: 54ch; margin: 0 auto; color: var(--gold-pale); }

.bp__kicker {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .1em;
  margin: 0 0 6px;
  color: var(--ink-muted);
}
.bp__head .bp__kicker { color: var(--gold); }

/* ---- The bag ------------------------------------------------------------ */

.bp__bag {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .bp__bag { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .bp__bag { grid-template-columns: repeat(3, 1fr); } }

.bp__card { display: flex; }
.bp__link {
  display: grid;
  gap: 8px;
  align-content: start;
  width: 100%;
  padding: 14px 14px 20px;
  text-decoration: none;
  color: var(--ink);
  background: var(--parchment-paper);
  border-radius: var(--radius-cta);
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, .6);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.bp__link:hover,
.bp__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 26px 52px -24px rgba(0, 0, 0, .66);
}
.bp__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.bp__pic {
  display: block;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--envelope-kraft);
}
.bp__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp__pic--none { display: grid; place-items: center; }
.bp__stamp { font-size: 2.25rem; color: var(--ink-faint); }

.bp__meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--ink-muted);
}
.bp__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.3;
}
.bp__excerpt { color: var(--ink-muted); font-size: .9375rem; }

.bp__empty {
  text-align: center;
  color: var(--gold-pale);
  padding: 40px 0;
}

/* ---- The reply slip at the foot of the index ----------------------------- */

.bp__slip { text-align: center; margin-top: 44px; color: var(--gold-pale); }
.bp__slip .script { font-size: 1.5rem; margin: 0 0 12px; }

/* ---- One post ------------------------------------------------------------ */

.bp__preview {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 2px dashed var(--gold);
  border-radius: var(--radius-input);
  background: rgba(201, 162, 39, .12);
  color: var(--gold-pale);
  font-size: .9375rem;
}

.bp__post {
  border-radius: var(--radius-cta);
  padding: 32px 24px 36px;
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, .6);
}
@media (min-width: 620px) { .bp__post { padding: 44px 48px 48px; } }

.bp__post__head { text-align: center; margin-bottom: 26px; }
.bp__post h1 {
  font-family: var(--font-display);
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 5vw, 2.375rem);
  line-height: 1.2;
}
.bp__dek {
  color: var(--ink-muted);
  font-size: 1.0625rem;
  margin: 0 auto;
  max-width: 48ch;
}

.bp__plate { position: relative; margin: 0 0 30px; }
.bp__plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7);
}
/* Two opposite corners held down, the way a picture goes into a scrapbook. */
.bp__tape {
  position: absolute;
  width: 62px;
  height: 20px;
  background: rgba(247, 238, 216, .55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.bp__tape--a { top: -8px; left: -12px; transform: rotate(-6deg); }
.bp__tape--b { bottom: -8px; right: -12px; transform: rotate(-6deg); }

.bp__body { max-width: 68ch; margin: 0 auto; }
.bp__body p { margin: 0 0 1.1em; }
.bp__body h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  margin: 1.8em 0 .5em;
}

.bp__ps {
  margin: 36px auto 0;
  max-width: 68ch;
  padding-top: 24px;
  border-top: 1px solid rgba(42, 36, 22, .16);
  text-align: center;
}
.bp__ps .script { font-size: 1.75rem; margin: 0 0 4px; color: var(--accent); }
.bp__ps p { color: var(--ink-muted); margin: 0 0 18px; }

.bp__back { text-align: center; margin-top: 28px; }
.bp__back a { color: var(--gold-hi); }

@media (prefers-reduced-motion: reduce) {
  .bp__link { transition: none; }
  .bp__link:hover, .bp__link:focus-visible { transform: none; }
}

/* ---- The decision ---------------------------------------------------------
   Shown only to staff or to whoever holds the signed link the alert email
   carried, and only while the post is still a draft. It sits at the bottom
   because that is where somebody who has just read the thing is standing. */
.bp__judge {
  max-width: 68ch;
  margin: 28px auto 0;
  padding: 22px 20px;
  text-align: center;
  background: var(--parchment-paper);
  border: 2px dashed rgba(42, 36, 22, .35);
  border-radius: var(--radius-cta);
}
.bp__judge__q {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 14px;
}
.bp__judge__row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.bp__judge__row .btn { min-height: 44px; }
.bp__judge__note {
  margin: 14px 0 0;
  font-size: .875rem;
  color: var(--ink-muted);
}

/* ---- Drawing the picture again ------------------------------------------ */
.bp__redraw { margin: -14px 0 28px; text-align: center; }
.bp__redraw__row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.bp__redraw__row form { margin: 0; }
.bp__redraw .btn { min-height: 44px; }
.bp__redraw .btn[disabled] { opacity: .7; cursor: progress; }
.bp__redraw__of {
  margin: 8px auto 0;
  max-width: 52ch;
  font-size: .8125rem;
  color: var(--ink-muted);
}
.bp__drawn {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius-input);
  background: rgba(30, 91, 58, .1);
  color: var(--forest);
  font-size: .9375rem;
  text-align: center;
}
.bp__drawn--no { background: rgba(142, 43, 32, .08); color: var(--ink-error); }