/* ============================================================
   Forge — the shared layer across every page but the homepage.

   Carries the reading-progress rule, and now the season: the same
   Minnesota shoreline and falling leaves the homepage keeps in its
   colophon, injected into each subpage's footer by hearth.js from
   /trees-wide.svg. Decoration only — aria-hidden, behind the text,
   nothing load-bearing, and prefers-reduced-motion strips the motion
   while keeping the still landscape.
   ============================================================ */

:root{
  --fa-ink:#17150f;
  --fa-accent:#a33b1f;
  --fa-rule:#ddd6c8;
  --bark:#6b5f4e; --conifer:#44614f; --foliage:#46704b;
}

/* Content rides above anything decorative — readability first. */
header,nav,main,section{ position:relative; z-index:1 }
footer{ position:relative; overflow:hidden }
footer > *{ position:relative; z-index:1 }

/* How far down the page you have read. A rule, drawn in ink. */
#fa-heat{
  position:fixed; left:0; top:0; height:2px; width:0; z-index:60;
  pointer-events:none;
  background:var(--ember,var(--fa-accent));
}

/* A plate meets the next at a hairline, not at a hot seam. */
section + section::before, main section::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  pointer-events:none;
  background:var(--line,var(--fa-rule));
}

/* Selection matches the homepage rather than the browser default. */
::selection{ background:rgba(163,59,31,.10); color:var(--text,var(--fa-ink)) }

/* One focus treatment, and it is visible on paper. */
:focus-visible{ outline:2px solid var(--ember,var(--fa-accent)); outline-offset:3px }

/* ---- the season (shared with the homepage system) ---- */
[data-season="deep-winter"]{ --season:#4f7799 }
[data-season="thaw"]       { --season:#6c7f86 }
[data-season="green-up"]   { --season:#4a7a45; --foliage:#8fb573 }
[data-season="high-summer"]{ --season:#8a7016; --foliage:#46704b }
[data-season="turning"]    { --season:#a8551f; --foliage:#b5541f }
[data-season="freeze-up"]  { --season:#6b7280 }

/* the shoreline band along the foot of the page */
.fa-trees{
  position:absolute; left:0; right:0; bottom:0; height:min(10vw,140px);
  opacity:.45; pointer-events:none; z-index:0;
}
/* the text block gets its own ground above the shoreline */
footer{ padding-bottom:min(11vw,150px) !important }
.fa-trees svg{ width:100%; height:100%; display:block }
.treeline .bare{ display:none }
[data-season="deep-winter"] .treeline .leafy,
[data-season="thaw"] .treeline .leafy,
[data-season="freeze-up"] .treeline .leafy{ display:none }
[data-season="deep-winter"] .treeline .bare,
[data-season="thaw"] .treeline .bare,
[data-season="freeze-up"] .treeline .bare{ display:block }
@media (max-width:700px){ .fa-trees{ opacity:.32 } }

/* the leaves */
.fa-motes{ position:absolute; left:0; right:0; bottom:0; height:min(12vw,165px); overflow:hidden; pointer-events:none; z-index:0 }
.mote{
  position:absolute; top:-14px; left:0; width:4px; height:4px; border-radius:50%;
  background:var(--season,#a33b1f); opacity:0;
  animation-name:fa-drift; animation-timing-function:linear; animation-iteration-count:infinite;
  will-change:transform,opacity;
}
[data-season="high-summer"] .mote,[data-season="green-up"] .mote{ width:3px; height:7px; border-radius:60% }
[data-season="turning"] .mote{ width:6px; height:4px; border-radius:60% 20% 60% 20% }
@keyframes fa-drift{
  0%   { transform:translate3d(0,-14px,0) rotate(0deg); opacity:0 }
  12%  { opacity:var(--peak,.4) }
  88%  { opacity:var(--peak,.4) }
  100% { transform:translate3d(var(--dx,14px),var(--dy,200px),0) rotate(var(--rot,0deg)); opacity:0 }
}
[data-season="green-up"] .mote{ top:auto; bottom:-14px; animation-name:fa-driftup }
@keyframes fa-driftup{
  0%   { transform:translate3d(0,14px,0) rotate(0deg); opacity:0 }
  12%  { opacity:var(--peak,.35) }
  88%  { opacity:var(--peak,.35) }
  100% { transform:translate3d(var(--dx,14px),calc(var(--dy,200px) * -1),0) rotate(var(--rot,0deg)); opacity:0 }
}

@media (prefers-reduced-motion:reduce){
  #fa-heat{ transition:none }
  .fa-motes{ display:none }
}