/* ============================================================================
   BEPCO Studio — Field Notes styles (loaded only on /field-notes/* via pageCss).
   Covers BOTH the index (/field-notes/) and the post layout (field-note.njk).
   Ported in spirit from design/mockups/bepco-field-notes-index.html and
   bepco-field-note-post.html; every color/type value → tokens.css.
   All classes are namespaced `fn-` (site.css owns .hero-*, .section-*, .nav-*,
   .footer-*; about.css owns .fc-*). Chrome (spine, banner, nav, footer, noise)
   comes from base.njk + site.css and is NOT restyled here.
   ============================================================================ */

/* INDEX: page header */
.fn-header {
  position: relative;
  padding: 72px 52px 52px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.10);
  background-color: var(--color-vellum);
}
/* Engineering-paper grid across the whole header — the inverse of the amber-on-
   soot treatment on About/Experiences: charcoal lines on a warm vellum base. */
.fn-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(58, 48, 40, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 48, 40, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}
.fn-header-inner {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: stretch;
}
.fn-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 134, 10, 0.6);
  margin-bottom: 16px;
}
.fn-title {
  font-family: var(--font-serif);
  font-size: var(--fs-fluid-40-56);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-carbon);
  margin-bottom: 14px;
}
/* Description of the active filter, sitting BELOW the buttons. The buttons are
   anchored above it so they never shift as this copy changes length; the
   reserved min-height keeps the header from jumping between one- and two-line
   captions. */
.fn-filter-desc {
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-style: italic;
  line-height: 1.6;
  color: rgba(26, 22, 18, 0.55);
  max-width: 460px;
  margin-top: 20px;
  min-height: 3.2em;
}
.fn-filter-desc a { font-style: normal; color: var(--color-amber-dk); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.fn-filter-desc a:hover { color: var(--color-amber); }
/* A mounted document card laid on the engineering grid: a lighter parchment
   fill masks the cross-hatch inside it, a warm shadow lifts it off the paper,
   and an inset hairline gives it the double-ruled look of an archival slip. */
.fn-header-aside {
  position: relative;
  padding: 26px 28px;
  background: var(--color-parchment);
  border: 1px solid rgba(26, 22, 18, 0.16);
  box-shadow:
    0 1px 0 rgba(245, 240, 232, 0.6) inset,
    0 12px 28px -14px rgba(26, 22, 18, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fn-header-aside::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(26, 22, 18, 0.10);
  pointer-events: none;
}
.fn-aside-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-amber-dk);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.14);
}
.fn-desc {
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  line-height: 1.85;
  color: rgba(26, 22, 18, 0.58);
  margin-bottom: 20px;
}
.fn-desc strong.amber { color: var(--color-amber); font-weight: 700; }
.fn-desc a { color: var(--color-amber-dk); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.fn-desc a:hover { color: var(--color-amber); }

/* Topic filter (index) */
.fn-tagfilter { display: flex; flex-wrap: nowrap; gap: 7px; margin-top: 28px; }
.fn-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.55);
  /* Solid fill so the engineering grid doesn't show through the chip. */
  background: var(--color-parchment);
  border: 1px solid rgba(26, 22, 18, 0.18);
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.fn-tag:hover {
  color: var(--color-amber-dk);
  border-color: var(--color-amber);
  background: var(--color-parchment);
}
.fn-tag.is-active {
  color: var(--color-parchment);
  border-color: var(--color-amber-dk);
  background: var(--color-amber-dk);
}

/* ── INDEX: list ──────────────────────────────────────────────────────────── */
.fn-list-wrap { max-width: 1060px; margin: 0 auto; padding: 56px 52px 80px; }
.fn-list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.fn-count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-15);
  color: rgba(26, 22, 18, 0.55);
}
.fn-count strong {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--color-amber);
}
.fn-sort {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.4);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color 0.2s var(--ease);
}
.fn-sort:hover { color: var(--color-amber-dk); }
.fn-sort-arrow { font-size: var(--fs-12); line-height: 1; transition: color 0.2s var(--ease); }
.fn-sort:hover .fn-sort-arrow { color: var(--color-amber); }

/* Entry row — the whole row is the link. */
/* The topic filter hides entries via the `hidden` attribute; the explicit
   `display: grid` below outranks the UA `[hidden] { display:none }`, so restate
   it with matching specificity or filtered-out notes stay visible. */
.fn-entry[hidden] { display: none; }
.fn-entry {
  display: grid;
  grid-template-columns: 128px 1fr 132px;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
  align-items: start;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s var(--ease), background 0.3s var(--ease);
}
.fn-entry::before {
  content: '';
  position: absolute;
  left: -52px;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--color-amber);
  transition: width 0.3s var(--ease);
}
.fn-entry:hover { padding-left: 10px; background: rgba(200, 134, 10, 0.02); }
.fn-entry:hover::before { width: 3px; }

.fn-entry-date {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  letter-spacing: 0.08em;
  color: rgba(26, 22, 18, 0.4);
  padding-top: 3px;
  line-height: 1.5;
}

/* Voice badge — shared by index rows and article header. */
.fn-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  margin-bottom: 10px;
}
.fn-badge.is-real {
  color: rgba(200, 134, 10, 0.7);
  background: rgba(200, 134, 10, 0.08);
  border: 1px solid rgba(200, 134, 10, 0.2);
}
.fn-badge.is-fictional {
  color: rgba(122, 158, 138, 0.9);
  background: rgba(122, 158, 138, 0.08);
  border: 1px solid rgba(122, 158, 138, 0.2);
}
.fn-badge--article { font-size: var(--fs-9); letter-spacing: 0.16em; padding: 3px 10px; margin-bottom: 16px; }

.fn-entry-title {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  font-weight: var(--weight-regular);
  color: var(--color-carbon);
  line-height: 1.25;
  margin-bottom: 8px;
}
.fn-entry-excerpt {
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  color: rgba(26, 22, 18, 0.52);
  line-height: 1.7;
  margin-bottom: 12px;
}
.fn-entry-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fn-entry-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.4);
  background: rgba(26, 22, 18, 0.04);
  padding: 2px 7px;
}
.fn-readmore {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-amber);
  display: inline-block;
  transition: letter-spacing 0.2s var(--ease);
}
.fn-entry:hover .fn-readmore { letter-spacing: 0.22em; }

.fn-entry-meta { text-align: right; }
.fn-readtime {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.1em;
  color: rgba(26, 22, 18, 0.4);
}
.fn-entry-ref {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.08em;
  color: rgba(200, 134, 10, 0.4);
  margin-top: 6px;
}

/* Empty states (institutional voice) */
.fn-empty {
  padding: 56px 0 24px;
  max-width: 620px;
}
.fn-empty--filtered {
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-style: italic;
  line-height: 1.8;
  color: rgba(26, 22, 18, 0.5);
}
.fn-empty--filtered a { font-style: normal; color: var(--color-amber-dk); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s var(--ease); }
.fn-empty--filtered a:hover { color: var(--color-amber); }
.fn-empty-code {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.16em;
  color: rgba(200, 134, 10, 0.5);
  margin-bottom: 16px;
}
.fn-empty-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  color: var(--color-carbon);
  line-height: 1.4;
  margin-bottom: 12px;
}
.fn-empty-body {
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-style: italic;
  line-height: 1.8;
  color: rgba(26, 22, 18, 0.5);
}

/* ── POST: breadcrumb ─────────────────────────────────────────────────────── */
.fn-breadcrumb {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 52px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.35);
}
.fn-breadcrumb a { color: rgba(26, 22, 18, 0.35); text-decoration: none; transition: color 0.2s var(--ease); }
.fn-breadcrumb a:hover { color: var(--color-amber); }
.fn-crumb-sep { color: rgba(26, 22, 18, 0.2); }

/* ── POST: article ────────────────────────────────────────────────────────── */
.fn-article { max-width: 720px; margin: 0 auto; padding: 40px 52px 24px; }

.fn-article-header { margin-bottom: 48px; }
.fn-article-title {
  font-family: var(--font-serif);
  font-size: var(--fs-fluid-32-48);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-carbon);
  margin-bottom: 16px;
}
.fn-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.4);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(26, 22, 18, 0.08);
}
.fn-meta-sep { color: rgba(26, 22, 18, 0.2); }
.fn-article-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.fn-article-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.42);
  background: rgba(26, 22, 18, 0.05);
  border: 1px solid rgba(26, 22, 18, 0.1);
  padding: 3px 8px;
}
.fn-article-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.12em;
  color: rgba(200, 134, 10, 0.4);
}

/* ── POST: markdown body (generous measure/margins) ───────────────────────── */
.fn-body { font-size: var(--fs-17); }
.fn-body p {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.9;
  color: rgba(26, 22, 18, 0.74);
  margin-bottom: 24px;
}
.fn-body p em { font-style: italic; color: rgba(26, 22, 18, 0.55); }
.fn-body h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  font-weight: var(--weight-regular);
  color: var(--color-carbon);
  line-height: 1.2;
  margin: 40px 0 16px;
}
.fn-body h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: var(--weight-bold);
  color: var(--color-carbon);
  margin: 32px 0 12px;
}
.fn-body a { color: var(--color-amber-dk); text-decoration: underline; text-underline-offset: 2px; }
.fn-body a:hover { color: var(--color-amber); }
.fn-body ul,
.fn-body ol { margin: 0 0 24px 22px; }
.fn-body li {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.8;
  color: rgba(26, 22, 18, 0.74);
  margin-bottom: 8px;
}
.fn-body blockquote {
  border-left: 2px solid rgba(200, 134, 10, 0.35);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
}
.fn-body blockquote p {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-style: italic;
  color: rgba(26, 22, 18, 0.55);
  margin-bottom: 0;
}
.fn-body blockquote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 134, 10, 0.45);
  margin-top: 8px;
  font-style: normal;
}
.fn-body code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background: rgba(26, 22, 18, 0.05);
  padding: 1px 5px;
}
.fn-body hr {
  border: 0;
  border-top: 1px solid rgba(26, 22, 18, 0.1);
  margin: 40px 0;
}

/* ── IN-BODY GALLERY (the {% gallery %} shortcode) ─────────────────────────────
   Same viewer language as the archive record hero, scoped to the body column.
   Photos cover-crop to a 3:2 frame; thumbnails + prev/next + arrow keys. ── */
/* Optional single hero image — sits between the header and the body, centered
   on the article column. Same 3:2 framed treatment as the in-body galleries,
   without the controls. Driven by the `hero` / `heroCaption` front matter. */
.fn-hero { margin: 0 0 44px; }
.fn-hero-frame {
  aspect-ratio: 3 / 2;
  background: var(--color-soot);
  border: 1px solid rgba(26, 22, 18, 0.18);
  overflow: hidden;
}
.fn-hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fn-hero-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.02em;
  color: rgba(26, 22, 18, 0.5);
  line-height: 1.5;
  text-align: center;
  padding: 12px 2px 0;
}

.fn-gallery { margin: 32px 0; }
.fn-gal-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--color-soot);
  border: 1px solid rgba(26, 22, 18, 0.18);
  overflow: hidden;
}
.fn-gal-main {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-soot);
}
.fn-gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-18);
  line-height: 1;
  color: rgba(245, 240, 232, 0.85);
  background: rgba(26, 22, 18, 0.45);
  border: 1px solid rgba(245, 240, 232, 0.25);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fn-gal-nav:hover { background: var(--color-amber); border-color: var(--color-amber); color: var(--color-carbon); }
.fn-gal-prev { left: 14px; }
.fn-gal-next { right: 14px; }
.fn-gal-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.02em;
  color: rgba(26, 22, 18, 0.5);
  line-height: 1.5;
  padding: 10px 2px 0;
}
.fn-gal-thumbs { display: flex; gap: 8px; padding: 10px 0 0; flex-wrap: wrap; }
.fn-gal-thumb {
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(26, 22, 18, 0.15);
  background: var(--color-soot);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.fn-gal-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fn-gal-thumb:hover { opacity: 1; }
.fn-gal-thumb.on { border-color: var(--color-amber); opacity: 1; }

/* ── POST: article footer ─────────────────────────────────────────────────── */
.fn-article-footer {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 40px 52px 0;
}
.fn-af-label {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.3);
  margin-bottom: 10px;
  padding-top: 40px;
  border-top: 1px solid rgba(26, 22, 18, 0.08);
}
.fn-af-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.fn-af-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.1em;
  color: rgba(200, 134, 10, 0.4);
  margin-bottom: 8px;
}
.fn-af-archive {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.42);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.fn-af-archive:hover { color: var(--color-amber); }
.fn-share {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(26, 22, 18, 0.07);
}
.fn-share-label {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.3);
}
.fn-share-link {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 22, 18, 0.4);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.fn-share-link:hover { color: var(--color-amber); }

/* ── POST: related ────────────────────────────────────────────────────────── */
.fn-related {
  background: var(--color-vellum);
  border-top: 1px solid rgba(26, 22, 18, 0.08);
  padding: 48px 52px 56px;
  margin-top: 56px;
}
.fn-related-inner { max-width: 720px; margin: 0 auto; }
.fn-related-label {
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(200, 134, 10, 0.55);
  margin-bottom: 26px;
}
.fn-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fn-rc {
  text-decoration: none;
  color: inherit;
  padding: 20px;
  border: 1px solid rgba(26, 22, 18, 0.08);
  background: var(--color-parchment);
  display: block;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.fn-rc:hover { border-color: var(--color-amber); transform: translateY(-1px); }
.fn-rc--kit { border-left: 3px solid rgba(200, 134, 10, 0.4); }
.fn-rc-code {
  font-family: var(--font-mono);
  font-size: var(--fs-8);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 134, 10, 0.5);
  margin-bottom: 6px;
}
.fn-rc-title {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  color: var(--color-carbon);
  line-height: 1.3;
  margin-bottom: 5px;
}
.fn-rc-sub {
  font-family: var(--font-serif);
  font-size: var(--fs-12);
  font-style: italic;
  line-height: 1.5;
  color: rgba(26, 22, 18, 0.48);
}
.fn-related-empty {
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.8;
  color: rgba(26, 22, 18, 0.48);
}

/* ── MOBILE ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .fn-header { padding: 48px 20px 40px; }
  .fn-header-inner { grid-template-columns: 1fr; gap: 32px; }
  .fn-header-aside { padding: 20px 22px; }
  .fn-tagfilter { flex-wrap: wrap; gap: 8px; }
  .fn-list-wrap { padding: 40px 20px 64px; }

  .fn-entry { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .fn-entry::before { left: -20px; }
  .fn-entry:hover { padding-left: 6px; }
  .fn-entry-meta { text-align: left; }
  .fn-readtime { display: inline; }
  .fn-entry-ref { display: inline; margin-top: 0; margin-left: 12px; }

  .fn-breadcrumb { padding: 16px 20px 0; }
  .fn-article { padding: 28px 20px 16px; }
  .fn-article-footer { padding: 32px 20px 0; }
  .fn-related { padding: 40px 20px 44px; }
  .fn-related-grid { grid-template-columns: 1fr; }
}