/*
 * Field Notes — VeloCMS theme (slug: "field-notes")
 * 1:1 port of the founder's Claude-Design canvas "Field Notes.dc.html".
 *
 * "An expedition journal theme."
 * Palette: night #090D10 · panel #0E1418 · bone #E4E7DE · pine #4C7A6B · sage #8FB8A8
 * Display + prose: Newsreader · Body UI + annotation: IBM Plex Mono
 *
 * All values below are copied verbatim from the design's inline styles and the
 * 1g engineering-notes spec (color tokens, spacing/radius scale, hover table,
 * motion keyframes, mobile-drawer spec). No rounding, no reinterpretation.
 *
 * Scoped to [data-theme="field-notes"] (NOT main-scoped) so /shop and
 * /products/* resolve the same tokens. P-094 token bridge at the bottom.
 */

/* ═══════════════════ COLOR TOKENS (1g) ═══════════════════ */
[data-theme="field-notes"] {
  /* canonical (1g 01) */
  --fn-primary: #4C7A6B;   /* oklch(0.548 0.052 168) — structural accent, outline-CTA border, focus rings, blockquote rule */
  --fn-bg: #0E1418;        /* oklch(0.185 0.014 220) — page background (night) */
  --fn-text: #E4E7DE;      /* oklch(0.921 0.008 130) — prose, filled-CTA background (bone paper) */
  --fn-accent: #8FB8A8;    /* oklch(0.745 0.049 168) — links, mono annotations, kickers; 8.3:1 on bg */

  /* extended (1g 01) */
  --fn-surface: #16241C;      /* oklch(0.245 0.023 160) — bands, drawer, cards-alt */
  --fn-graph-line: #2A3A30;   /* oklch(0.312 0.026 158) — all 1px rules + grid motif */
  --fn-card: #111A15;
  --fn-footer-bg: #0B1013;
  --fn-ink-dim: #AEB8AC;      /* 8.8:1 */
  --fn-ink-faint: #7E8A7E;    /* 5.0:1, meta only */
  --fn-page: #090D10;         /* html/body background from the source's outer canvas */

  /* graph-line alpha helpers used across the design */
  --fn-graph-line-80: rgba(34, 48, 40, 0.5);
  --fn-graph-grid: rgba(42, 58, 48, 0.55);
  --fn-graph-grid-mobile: rgba(42, 58, 48, 0.4);
  --fn-scrim: rgba(5, 9, 8, 0.72); /* mobile drawer scrim */
  --fn-tint-accent-14: rgba(76, 122, 107, 0.14); /* active drawer link bg */

  /* fonts (registered — getThemeFontVars("field-notes")) */
  --fn-display-font: var(--font-newsreader), Georgia, "Times New Roman", serif;
  --fn-mono-font: var(--font-ibm-plex-mono), ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;

  /* layout scale (1g 03) */
  --fn-container: 1440px;
  --fn-gutter: 40px;
  --fn-gutter-mobile: 20px;
  --fn-prose: 65ch;

  /* engine-name palette aliases (kept for any shared component that still
     reads --velo-*; the mobile drawer is now the bespoke FieldNotesMobileMenu
     which reads --fn-* directly via P-162 re-established data-theme). */
  --velo-bg: var(--fn-surface);
  --velo-fg: var(--fn-text);
  --velo-border: var(--fn-graph-line);
  --velo-accent: var(--fn-primary);
}

/* Body font inheritance for the whole theme surface. Per the source, Newsreader
   is the base surface font (headers/hero use it); IBM Plex Mono is applied
   selectively to nav/buttons/pills/captions/meta via .fn-mono. */
[data-theme="field-notes"] {
  font-family: var(--fn-display-font);
  color: var(--fn-text);
  background: var(--fn-bg);
}
[data-theme="field-notes"] .fn-mono {
  font-family: var(--fn-mono-font);
}

/* ═══════════════════ MOTION — entrances only (1g 05) ═══════════════════ */
@keyframes fn-rise {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}
@keyframes fn-rise-sm {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
@keyframes fn-rule {
  from { transform: scaleX(0.35); }
  to   { transform: scaleX(1); }
}

/* NB: opacity is never animated — SSR content is fully visible on first frame
   (P-068). Animations mutate transform only, applied on load (no IO gate).
   Stagger +60-80ms per card, max 3 steps (1g 05). */
[data-theme="field-notes"] .fn-anim-rise {
  animation: fn-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-theme="field-notes"] .fn-anim-rise-d1 {
  animation: fn-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both;
}
[data-theme="field-notes"] .fn-anim-rise-d2 {
  animation: fn-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both;
}
[data-theme="field-notes"] .fn-anim-rise-d3 {
  animation: fn-rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms both;
}
[data-theme="field-notes"] .fn-anim-rise-sm {
  animation: fn-rise-sm 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-theme="field-notes"] .fn-anim-rise-sm-drawer {
  animation: fn-rise-sm 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-theme="field-notes"] .fn-anim-rule {
  animation: fn-rule 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  transform-origin: center;
}

/* No bounces, no springs, no loops other than the hero video itself. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="field-notes"] * {
    animation: none !important;
    transition-duration: 0ms !important;
  }
}

/* ═══════════════════ CHROME — sticky header ═══════════════════ */
[data-theme="field-notes"] .fn-header {
  background: var(--fn-bg);
  position: sticky;
  top: 0;
  /* The bespoke FieldNotesMobileMenu drawer is createPortal'd to document.body
     (P-103) with scrim z-80 / panel z-90 in its OWN fixed stacking context, so
     the sticky header's z-index can't paint over it. z-40 sits above normal
     page content (post cards, hero) — matches the source's 1g 06 header layer. */
  z-index: 40;
  border-bottom: 1px solid var(--fn-graph-line);
}
[data-theme="field-notes"] .fn-nav-inner {
  max-width: var(--fn-container);
  margin: 0 auto;
  padding-inline: var(--fn-gutter);
  height: 68px;
  display: flex;
  align-items: center;
  gap: 36px;
}
[data-theme="field-notes"] .fn-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  color: var(--fn-text);
}
[data-theme="field-notes"] .fn-brand-name {
  font-family: var(--fn-mono-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
[data-theme="field-notes"] .fn-brand-vol {
  font-family: var(--fn-mono-font);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fn-accent);
}
[data-theme="field-notes"] .fn-nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  align-items: center;
}
[data-theme="field-notes"] .fn-nav-link {
  font-family: var(--fn-mono-font);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--fn-ink-dim);
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-nav-link:hover {
  color: var(--fn-accent);
}
[data-theme="field-notes"] .fn-nav-link.is-active {
  color: var(--fn-accent);
  text-decoration: underline;
  text-underline-offset: 6px;
}
[data-theme="field-notes"] .fn-nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline-start: 26px;
  border-inline-start: 1px solid var(--fn-graph-line);
}
[data-theme="field-notes"] .fn-cart-link {
  position: relative;
  display: flex;
  color: var(--fn-ink-dim);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-cart-link:hover {
  color: var(--fn-text);
}
[data-theme="field-notes"] .fn-cart-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  background: var(--fn-text);
  color: var(--fn-bg);
  font-family: var(--fn-mono-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
}
[data-theme="field-notes"] .fn-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--fn-graph-line);
  color: var(--fn-ink-dim);
  font-family: var(--fn-mono-font);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  text-decoration: none;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="field-notes"] .fn-account-btn:hover {
  border-color: var(--fn-primary);
  color: var(--fn-text);
}
[data-theme="field-notes"] .fn-account-seal {
  width: 20px;
  height: 20px;
  border: 1px solid var(--fn-primary);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: var(--fn-accent);
  flex-shrink: 0;
}

/* ═══════════════════ BUTTONS / CTAs (1g 04) ═══════════════════ */
[data-theme="field-notes"] .fn-cta-filled {
  background: var(--fn-text);
  color: var(--fn-bg);
  font-family: var(--fn-mono-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 14px 24px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms ease-out;
}
[data-theme="field-notes"] .fn-cta-filled:hover {
  background: #FFFFFF;
}
[data-theme="field-notes"] .fn-cta-outline {
  border: 1px solid var(--fn-primary);
  color: var(--fn-text);
  font-family: var(--fn-mono-font);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 13px 24px;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
[data-theme="field-notes"] .fn-cta-outline:hover {
  background: var(--fn-surface);
  border-color: var(--fn-accent);
}
/* larger buy-column CTA variant (padding 17px 24px / 16px 24px, 14px) */
[data-theme="field-notes"] .fn-cta-filled-lg {
  background: var(--fn-text);
  color: var(--fn-bg);
  font-family: var(--fn-mono-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 0;
  padding: 17px 24px;
  cursor: pointer;
  transition: background-color 140ms ease-out;
}
[data-theme="field-notes"] .fn-cta-filled-lg:hover {
  background: #FFFFFF;
}
[data-theme="field-notes"] .fn-cta-outline-lg {
  background: none;
  border: 1px solid var(--fn-primary);
  color: var(--fn-text);
  font-family: var(--fn-mono-font);
  font-size: 14px;
  letter-spacing: 0.08em;
  border-radius: 0;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
[data-theme="field-notes"] .fn-cta-outline-lg:hover {
  background: var(--fn-surface);
  border-color: var(--fn-accent);
}

/* pill / tag / pagination hover — border→pine, text→bone · 140ms ease-out (1g 04) */
[data-theme="field-notes"] .fn-pill {
  font-family: var(--fn-mono-font);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--fn-graph-line);
  color: var(--fn-ink-dim);
  background: transparent;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
[data-theme="field-notes"] .fn-pill:hover {
  border-color: var(--fn-primary);
  color: var(--fn-text);
}
[data-theme="field-notes"] .fn-pill.is-active {
  background: var(--fn-text);
  color: var(--fn-bg);
  font-weight: 600;
  border: 1px solid var(--fn-text);
}

/* ═══════════════════ FOCUS (all) — 1g ═══════════════════ */
[data-theme="field-notes"] a:focus-visible,
[data-theme="field-notes"] button:focus-visible,
[data-theme="field-notes"] input:focus-visible,
[data-theme="field-notes"] textarea:focus-visible {
  outline: 2px solid var(--fn-primary);
  outline-offset: 2px;
}
/* Input focus — border #2A3A30→#4C7A6B · 120ms (1g 04) */
[data-theme="field-notes"] .fn-input {
  flex: 1;
  min-width: 0;
  background: var(--fn-bg);
  border: 1px solid var(--fn-graph-line);
  color: var(--fn-text);
  font-family: var(--fn-mono-font);
  font-size: 12.5px;
  padding: 12px 14px;
  outline: none;
  border-radius: 0;
  transition: border-color 120ms ease-out;
}
[data-theme="field-notes"] .fn-input:focus {
  border-color: var(--fn-primary);
}
[data-theme="field-notes"] .fn-input::placeholder {
  color: var(--fn-ink-faint);
}

/* ═══════════════════ DUOTONE IMAGERY (1g structure note) ═══════════════════ */
[data-theme="field-notes"] .fn-duotone {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.25) hue-rotate(96deg) saturate(0.55)
    brightness(0.82) contrast(1.05);
}
[data-theme="field-notes"] .fn-duotone-figure {
  margin: 0;
  border: 1px solid var(--fn-graph-line);
  background: var(--fn-card);
}
[data-theme="field-notes"] .fn-figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--fn-mono-font);
  font-size: 12px;
  color: var(--fn-accent);
  padding: 12px 16px;
  border-block-start: 1px solid var(--fn-graph-line);
}

/* ═══════════════════ POST / PRODUCT CARDS — post card hover (1g 04) ═══════════════════ */
[data-theme="field-notes"] .fn-card {
  text-decoration: none;
  color: var(--fn-text);
  border: 1px solid var(--fn-graph-line);
  display: flex;
  flex-direction: column;
  background: var(--fn-card);
  transition: border-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="field-notes"] .fn-card:hover {
  border-color: var(--fn-primary);
  transform: translateY(-3px);
}
/* product card variant (CSS-only, :hover, no JS) — border→sage + lift + shadow (1g 04) */
[data-theme="field-notes"] .fn-product-card {
  text-decoration: none;
  color: var(--fn-text);
  border: 1px solid var(--fn-graph-line);
  background: var(--fn-card);
  display: flex;
  flex-direction: column;
  transition: border-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="field-notes"] .fn-product-card:hover {
  border-color: var(--fn-accent);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
}

/* observation-log row hover — background transparent→card · 120ms linear (1g 04) */
[data-theme="field-notes"] .fn-log-row {
  text-decoration: none;
  color: var(--fn-text);
  transition: background-color 120ms linear;
}
[data-theme="field-notes"] .fn-log-row:hover {
  background: var(--fn-card);
}

/* gallery thumbnail hover — border→pine (product images) */
[data-theme="field-notes"] .fn-thumb {
  padding: 0;
  border: 1px solid var(--fn-graph-line);
  background: none;
  cursor: pointer;
  transition: border-color 140ms ease-out;
}
[data-theme="field-notes"] .fn-thumb:hover {
  border-color: var(--fn-primary);
}
[data-theme="field-notes"] .fn-thumb.is-active {
  border-color: var(--fn-accent);
}

/* ═══════════════════ PROSE (post / page body) ═══════════════════ */
[data-theme="field-notes"] .fn-prose {
  font-size: 19px;
  line-height: 1.72;
  max-width: 65ch;
  color: var(--fn-text);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
[data-theme="field-notes"] .fn-prose p {
  margin: 0;
}
[data-theme="field-notes"] .fn-prose h2 {
  font-family: var(--fn-display-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.15;
  margin: 18px 0 0;
}
[data-theme="field-notes"] .fn-prose h3 {
  font-family: var(--fn-display-font);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin: 14px 0 0;
}
[data-theme="field-notes"] .fn-prose blockquote {
  margin: 8px 0 0;
  padding-block: 6px;
  padding-inline-start: 26px;
  border-inline-start: 2px solid var(--fn-primary);
  font-size: 23px;
  font-style: italic;
  line-height: 1.5;
  color: var(--fn-ink-dim);
}
[data-theme="field-notes"] .fn-prose pre {
  margin: 14px 0 0;
  background: var(--fn-footer-bg);
  color: var(--fn-accent);
  font-family: var(--fn-mono-font);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 20px 22px;
  overflow-x: auto;
  border: 1px solid var(--fn-graph-line);
  border-radius: 0;
}
[data-theme="field-notes"] .fn-prose img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) sepia(0.25) hue-rotate(96deg) saturate(0.55)
    brightness(0.82) contrast(1.05);
}
[data-theme="field-notes"] .fn-prose a {
  color: var(--fn-accent);
}

/* ═══════════════════ GRAPH-PAPER MOTIF (1g 03) ═══════════════════ */
/* Two repeating linear-gradients, rgba graph-line lines, cell 28px desktop /
   22-24px mobile, only on surface-color bands. Symmetric grid → direction-safe. */
[data-theme="field-notes"] .fn-graph-band {
  border-block: 1px solid var(--fn-graph-line);
  background-color: var(--fn-surface);
  background-image: linear-gradient(var(--fn-graph-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fn-graph-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="field-notes"] .fn-graph-box {
  border: 1px solid var(--fn-graph-line);
  background-color: var(--fn-surface);
  background-image: linear-gradient(var(--fn-graph-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fn-graph-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ═══════════════════ FOOTER ═══════════════════ */
[data-theme="field-notes"] .fn-footer {
  background: var(--fn-footer-bg);
}
[data-theme="field-notes"] .fn-footer-inner {
  max-width: var(--fn-container);
  margin: 0 auto;
}
[data-theme="field-notes"] .fn-footer-brand {
  font-family: var(--fn-mono-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
[data-theme="field-notes"] .fn-footer-link {
  font-family: var(--fn-mono-font);
  font-size: 12px;
  color: var(--fn-ink-dim);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-footer-link:hover {
  color: var(--fn-accent);
}
[data-theme="field-notes"] .fn-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-block-start: 1px solid var(--fn-graph-line);
  padding-block: 18px;
  font-family: var(--fn-mono-font);
  font-size: 11px;
  color: var(--fn-ink-faint);
}

/* ═══════════════════ MOBILE DRAWER (1g 06) ═══════════════════ */
/* Bespoke FieldNotesMobileMenu (P-162 portaled drawer, data-theme
   re-established) — scrim z-index:80, panel z-index:90 per the source spec.
   1:1 with the .dc.html "Home / mobile 390 / drawer open" screen (L288-307). */

/* hamburger trigger — shown < lg only (desktop nav takes over ≥ lg). 44×44
   hit target per the source's mobile header (L397). Ink-dim → text hover. */
[data-theme="field-notes"] .fn-hamburger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: -10px;
  background: none;
  border: none;
  color: var(--fn-text);
  cursor: pointer;
  padding: 0;
}
@media (max-width: 1023px) {
  [data-theme="field-notes"] .fn-hamburger {
    display: grid;
  }
}

/* in-drawer nav rows — serif 22px/500, active = bone + 2px sage start-border
   + tint bg; mono 01–0N index (ink-faint / sage active). (.dc.html L296-301) */
[data-theme="field-notes"] .fn-drawer-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 20px;
  text-decoration: none;
  color: var(--fn-ink-dim);
  border-inline-start: 2px solid transparent;
  font-family: var(--fn-display-font);
  font-size: 22px;
  font-weight: 500;
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-drawer-link:hover {
  color: var(--fn-text);
}
[data-theme="field-notes"] .fn-drawer-link.is-active {
  color: var(--fn-text);
  border-inline-start: 2px solid var(--fn-accent);
  background: var(--fn-tint-accent-14);
}
[data-theme="field-notes"] .fn-drawer-index {
  font-family: var(--fn-mono-font);
  font-size: 11px;
  color: var(--fn-ink-faint);
}
[data-theme="field-notes"] .fn-drawer-link.is-active .fn-drawer-index {
  color: var(--fn-accent);
}

/* in-drawer close button — 44×44 hit target, ink-dim → text 140ms (L292). */
[data-theme="field-notes"] .fn-drawer-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: var(--fn-ink-dim);
  cursor: pointer;
  padding: 0;
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-drawer-close:hover {
  color: var(--fn-text);
}

/* in-drawer cart row — mono 12.5px/.08em, ink-dim → text 140ms (L303). */
[data-theme="field-notes"] .fn-drawer-cart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--fn-ink-dim);
  text-decoration: none;
  transition: color 140ms ease-out;
}
[data-theme="field-notes"] .fn-drawer-cart-row:hover {
  color: var(--fn-text);
}

/* mobile-only cart (design mobile header L399) — hidden ≥ lg; the desktop
   cart lives in .fn-nav-right. */
[data-theme="field-notes"] .fn-nav-mobile-cart {
  display: none;
}

/* ═══════════════════ RESPONSIVE (mobile 390) ═══════════════════ */
/* Desktop nav + right-side collapse below lg (1024px); the bespoke
   FieldNotesMobileMenu hamburger (.fn-hamburger) shows < lg. Mirror the
   design's mobile 390 header: hamburger · brand · cart (L396-400). */
@media (max-width: 1023px) {
  [data-theme="field-notes"] .fn-nav-links,
  [data-theme="field-notes"] .fn-nav-right {
    display: none;
  }
  [data-theme="field-notes"] .fn-nav-inner {
    height: 56px;
    padding-inline: 16px;
    gap: 14px;
  }
  /* cart pinned to the reading-end edge (design L399: margin-inline-start:auto). */
  [data-theme="field-notes"] .fn-nav-mobile-cart {
    display: flex;
    margin-inline-start: auto;
    margin-inline-end: -6px;
    color: var(--fn-ink-dim);
  }
}

/* Post detail 4-col grid (1fr minmax(65ch) 240px 1fr) collapses to a single
   column on mobile — the marginal aside is hidden (source mobile post has no
   annotation column) and gutters shrink to 20px, prose to 17px/1.68 (1g 02).
   !important required throughout this block — the grid/aside elements set
   gridTemplateColumns/padding/display inline (JSX style=), which otherwise
   always beats an external stylesheet rule regardless of specificity (same
   class of bug as fn-hero-grid above). */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-post-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    padding: 28px 20px 32px !important;
  }
  [data-theme="field-notes"] .fn-post-grid > * {
    grid-column: 1 !important;
  }
  [data-theme="field-notes"] .fn-post-aside {
    display: none !important;
  }
  [data-theme="field-notes"] .fn-post-adjacent {
    grid-template-columns: 1fr !important;
  }
  [data-theme="field-notes"] .fn-prose {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }
  /* post + page h1 shrink to the source's mobile size (33px post / 34px
     about page, per the mockup's mobile 390 screens, 1g 02 scale). */
  [data-theme="field-notes"] .fn-post-grid h1 {
    font-size: 33px !important;
    line-height: 1.1 !important;
  }
  [data-theme="field-notes"] .fn-page-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    padding: 28px 20px 36px !important;
  }
  [data-theme="field-notes"] .fn-page-grid > * {
    grid-column: 1 !important;
  }
  [data-theme="field-notes"] .fn-page-aside {
    display: none !important;
  }
  [data-theme="field-notes"] .fn-page-grid h1 {
    font-size: 34px !important;
    line-height: 1.1 !important;
  }
}

/* Home hero split grid collapses to single column on mobile (source: full
   media-first stack, h1 30-36px per 1g 02). !important required — the grid
   sets gridTemplateColumns inline (JSX style=), which otherwise always beats
   an external stylesheet rule regardless of specificity (same pattern as the
   !important on fn-latest-grid/fn-blog-grid/fn-shop-grid below).

   Source mobile 390 order is MEDIA FIRST (full-bleed 250px poster + caption)
   then copy below (kicker/h1 36px/subhead/stacked full-width CTAs) — no
   meta row (lat/long/seeing) on mobile. */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-hero-grid {
    grid-template-columns: 1fr !important;
  }
  [data-theme="field-notes"] .fn-hero-media {
    order: -1;
  }
  [data-theme="field-notes"] .fn-hero-figure {
    border-inline-start: none !important;
    border-block-end: 1px solid var(--fn-graph-line);
  }
  [data-theme="field-notes"] .fn-hero-figure-media {
    height: 250px !important;
  }
  [data-theme="field-notes"] .fn-hero-copy {
    padding: 28px 20px 32px !important;
    gap: 16px !important;
  }
  [data-theme="field-notes"] .fn-hero-h1 {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }
  [data-theme="field-notes"] .fn-hero-meta {
    display: none !important;
  }
  [data-theme="field-notes"] .fn-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  [data-theme="field-notes"] .fn-hero-ctas .fn-cta-filled,
  [data-theme="field-notes"] .fn-hero-ctas .fn-cta-outline {
    text-align: center;
  }
}

/* Blog index masthead — mobile padding shrinks + h1 collapses to the
   source's mobile 390 size (32px). !important required — fn-blog-main and
   fn-blog-h1 both carry inline styles (JSX style=). */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-blog-main {
    padding: 28px 20px 8px !important;
  }
  [data-theme="field-notes"] .fn-blog-h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
}

/* Post grid (blog index) collapse to 1 column mobile / stay 3-col desktop;
   tablet gets 2-col as a graceful step (source ships 1-col mobile, 3-col
   desktop only — tablet uses the same collapse as other themes). Shop grid
   is the ONE exception — the source's mobile 390 shop screen ships a 2-col
   grid (compact title+price cards), not 1-col (1g, confirmed against the
   mockup's "Shop listing / mobile 390" screen). */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-latest-grid,
  [data-theme="field-notes"] .fn-blog-grid {
    grid-template-columns: 1fr !important;
  }
  [data-theme="field-notes"] .fn-log-header,
  [data-theme="field-notes"] .fn-log-row {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }
  [data-theme="field-notes"] .fn-footer-grid {
    grid-template-columns: 1fr !important;
  }
  [data-theme="field-notes"] .fn-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Shop grid — 2-col at mobile (390) per the source, gap shrinks to 14px,
   card copy simplifies to title+price only (SKU badge / description /
   "VIEW ITEM" hidden — matches the mockup's compact mobile card). */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-shop-main {
    padding: 28px 20px 0 !important;
  }
  [data-theme="field-notes"] .fn-shop-h1 {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  [data-theme="field-notes"] .fn-shop-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  [data-theme="field-notes"] .fn-shop-card-sku,
  [data-theme="field-notes"] .fn-shop-card-desc,
  [data-theme="field-notes"] .fn-shop-card-viewitem {
    display: none !important;
  }
  [data-theme="field-notes"] .fn-shop-card-media {
    height: 150px !important;
  }
  [data-theme="field-notes"] .fn-shop-card-title {
    font-size: 15.5px !important;
    line-height: 1.25 !important;
  }
  [data-theme="field-notes"] .fn-shop-card-body {
    padding: 12px 14px !important;
    gap: 5px !important;
  }
}

/* Product detail — gallery main plate shrinks to 280px, thumbnail strip to
   56px + 8px gaps, buy column padding shrinks, h1 collapses to 30px, per the
   mockup's mobile 390 screen. !important required — fn-product-h1 /
   fn-product-buy-col carry inline styles (JSX style=). */
@media (max-width: 900px) {
  [data-theme="field-notes"] .fn-product-gallery {
    padding: 0 !important;
    border-inline-end: none !important;
    gap: 0 !important;
  }
  [data-theme="field-notes"] .fn-duotone-figure {
    border-inline: none !important;
    border-block-end: 1px solid var(--fn-graph-line);
  }
  [data-theme="field-notes"] .fn-product-gallery-main {
    height: 280px !important;
  }
  [data-theme="field-notes"] .fn-product-thumbs {
    gap: 8px !important;
    padding: 12px 16px 0 !important;
  }
  [data-theme="field-notes"] .fn-product-thumb-media {
    height: 56px !important;
  }
  [data-theme="field-notes"] .fn-product-buy-col {
    padding: 22px 20px 32px !important;
    gap: 16px !important;
  }
  [data-theme="field-notes"] .fn-product-h1 {
    font-size: 30px !important;
    line-height: 1.12 !important;
  }
}

/* wide strips never overflow the document (P-140) */
[data-theme="field-notes"] .fn-pill-scroll {
  overflow-x: auto;
}

/* ═══════════════════ RTL (1g 03) ═══════════════════ */
/* Source spec: "All directional spacing uses logical properties... RTL Arabic
   ships without overrides." Mono letter-spacing is presentational tracking
   that breaks connected Arabic script — zero it on labels under rtl (same
   discipline as every other theme; the source note applies to layout, not
   Latin-only letter-spacing on mono labels). */
[dir="rtl"] [data-theme="field-notes"] .fn-nav-link,
[dir="rtl"] [data-theme="field-notes"] .fn-brand-vol,
[dir="rtl"] [data-theme="field-notes"] .fn-account-btn,
[dir="rtl"] [data-theme="field-notes"] .fn-pill,
[dir="rtl"] [data-theme="field-notes"] .fn-footer-link,
[dir="rtl"] [data-theme="field-notes"] .fn-cta-filled,
[dir="rtl"] [data-theme="field-notes"] .fn-cta-outline,
[dir="rtl"] [data-theme="field-notes"] .fn-cta-filled-lg,
[dir="rtl"] [data-theme="field-notes"] .fn-cta-outline-lg,
[dir="rtl"] [data-theme="field-notes"] .fn-drawer-index,
[dir="rtl"] [data-theme="field-notes"] .fn-drawer-cart-row,
[dir="rtl"] [data-theme="field-notes"] .fn-drawer-coords {
  letter-spacing: 0;
}

/*
 * ═══════════════════ P-094 TOKEN BRIDGE ═══════════════════
 * The commerce archetype + shared components consume the universal
 * --vb-color-* vocabulary. Map Field Notes palette → --vb-color-* at the
 * global [data-theme="field-notes"] scope (NOT main-scoped) so /shop and
 * /products/* resolve. No currentColor, no circular refs (1g). Values match
 * the source canvas's own --vb-color-* declarations exactly.
 */
[data-theme="field-notes"] {
  --vb-color-primary: #4C7A6B;      /* pine — structural accent / CTA border */
  --vb-color-primary-fg: #E4E7DE;   /* bone label on pine */
  --vb-color-bg: #0E1418;           /* panel */
  --vb-color-fg: #E4E7DE;           /* bone — prose text */
  --vb-color-accent: #8FB8A8;       /* sage */
}