/* ==========================================================================
   Field Guide (blog) stylesheet
   --------------------------------------------------------------------------
   Forked from assets/styles.css's shared .article/.prose/.callout/.post-card
   rules (2026-07-01) so the blog's look can evolve independently of the
   long-form layout still used by services/legal/help/editor pages. Loaded
   only on blog/index.html and the 3 post pages, AFTER styles.css — same
   class names, so these rules simply win the cascade there. Not shared.
   ========================================================================== */

/* ---- post card (blog index grid) ---- */
.post-card { display:block; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s, box-shadow .25s, border-color .2s; }
.post-card:hover { transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(10,16,32,.4); border-color:color-mix(in srgb,var(--electric) 40%,var(--line)); }
.post-card .pc-body { padding:1.6rem; }
.post-card .tag { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--electric-dk); font-weight:700; }
.post-card h3 { margin:.6rem 0; font-size:var(--step-1); color:var(--ink); font-weight:700; }
.post-card .meta { font-family:var(--mono); font-weight:700; font-size:var(--step--1); color:var(--slate); margin-top:1rem; }

/* ---- article ---- */
.article { padding-top: 3rem; }
.article-head { max-width: 760px; margin:0 auto; }
.article-head h1 { font-size: var(--step-4); margin:1rem 0; }
/* .prose and .callout are canonical in styles.css — no per-page override needed here */

/* ---- byline + legal boilerplate ---- */
/* max-width:none overrides the sitewide `p{max-width:64ch}` rule, which computed
   against this element's own small mono font and left it narrower than its
   centered parent -- text-align:center then centered text inside an
   off-center box. Same fix already used by .prose p for the same reason. */
.post-meta {
  font-family: var(--mono); font-weight: 500; font-size: var(--step--1); color: var(--slate);
  max-width: none; line-height: 1.5;
  margin-top: 1.5em; margin-top: 1.5lh;
  margin-bottom: 1.5em; margin-bottom: 1.5lh;
}
.post-meta a { color: var(--electric-dk); text-decoration: underline; text-underline-offset: 2px; }
.post-disclaimer { background: var(--paper-warm); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; padding: 1rem 1.2rem; margin-top: 2.5rem; font-size: var(--step--1); color: var(--slate); }

/* ---- share row (under the byline, all blog pages) ---- */
.fb-share { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 0; }
.fb-share-label { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); margin-right: .1rem; }
.fb-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--slate); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; cursor: pointer; padding: 0; }
.fb-share-btn svg { width: 16px; height: 16px; }
.fb-share-btn:hover, .fb-share-btn:focus-visible { background: var(--electric); border-color: var(--electric); color: #fff; transform: translateY(-2px); }
.fb-share-btn.fb-share-copy.is-copied { background: var(--electric-dk); border-color: var(--electric-dk); color: #fff; }

/* ---- Field Guide section hero (blog index + posts) ----
   Mirrors the nav/footer brand lockup: icon + wordmark on one row, the
   tagline stacked below in the same small-caps mono treatment as
   .logo .tagline (font-size .625rem here matches its measured 9.856px). */
.fb-hero { background: var(--ink); color: #fff; padding-block: clamp(2.6rem, 6vw, 4.2rem); position: relative; overflow: hidden; }
.fb-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.fb-row { display: inline-flex; align-items: center; gap: .6rem; line-height: 1; }
.fb-icon { width: clamp(1.9rem, 4.5vw, 2.9rem); height: clamp(1.9rem, 4.5vw, 2.9rem); color: var(--electric-br); flex: none; }
.fb-word { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(2.4rem, 5vw, 3.6rem); color: #fff; margin: 0; line-height: 1; }
.fb-word .fb-dot { color: var(--electric-br); }
.fb-tag { font-family: var(--mono); font-size: .625rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: #86898f; margin: 0; }

/* ---- "more guides" pill (blog index) -- the plain border-only .tag-pill
   read as too faint at weight 200; give this one real contrast ---- */
.fb-more-pill { background: var(--paper-warm); border-color: var(--line); color: var(--ink); font-weight: 700; }