/* Blue Pine Modern — shared styles for content sub-pages */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --paper: #fdfaf3; --cream: #f4ead6; --cream-light: #faf3e2; --linen: #ede4cf;
  --ink: #2b1f15; --ink-soft: #5a4633; --ink-faint: #8a7559;
  --rust: #a04a2e; --rust-hover: #7d3520; --forest: #2f4a3a; --gold: #c89f5d;
  --rule: #d8c9a3; --rule-soft: #e8dcc0;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--cream); line-height: 1.7; font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rust); text-decoration: underline; }
a:hover { color: var(--rust-hover); }
.page-nav {
  background: rgba(244,234,214,0.95); border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; z-index: 10;
}
.page-nav-inner {
  max-width: 820px; margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: baseline; gap: 8px;
}
.page-nav .wordmark { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: var(--ink); text-decoration: none; }
.page-nav .modern { font-family: 'Fraunces', serif; font-style: italic; font-size: 18px; color: var(--rust); text-decoration: none; }
.page-nav .back { margin-left: auto; font-size: 14px; }
.page-wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px 40px; }
.page-eyebrow {
  font-family: 'Fraunces', serif; font-style: italic; color: var(--rust);
  font-size: 15px; letter-spacing: 0.04em; margin-bottom: 12px;
}
.page-title {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(36px, 5vw, 52px);
  letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); margin-bottom: 14px;
}
.page-updated { font-size: 14px; color: var(--ink-faint); margin-bottom: 40px; }
.page-wrap h2 {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px;
  letter-spacing: -0.015em; color: var(--ink); margin: 38px 0 12px;
}
.page-wrap p { margin-bottom: 18px; color: var(--ink-soft); }
.page-wrap ul { margin: 0 0 18px 22px; color: var(--ink-soft); }
.page-wrap li { margin-bottom: 8px; }
.callout {
  background: var(--linen); border-left: 3px solid var(--rust); border-radius: 0;
  padding: 18px 22px; margin: 26px 0; font-size: 16px; color: var(--ink-soft);
}
.page-footer {
  border-top: 1px solid var(--rule); margin-top: 56px; padding: 30px 24px;
  text-align: center; font-size: 13px; color: var(--ink-faint);
}
.page-footer a { color: var(--ink-faint); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Deep-link arrivals: clear the sticky nav, then make the target card announce itself */
[id] { scroll-margin-top: 84px; }
.find-card:target {
  outline: 3px solid var(--rust);
  outline-offset: 4px;
  border-radius: 10px;
  animation: targetPulse 2.2s ease-out 1;
}
@keyframes targetPulse {
  0%, 30% { box-shadow: 0 0 0 6px rgba(160, 74, 46, .28); }
  100%    { box-shadow: 0 0 0 0 rgba(160, 74, 46, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .find-card:target { animation: none; }
}