/* Fall is the default, including when JavaScript is unavailable.
   Change this palette and its matching logo together for a future season. */
:root {
  color-scheme: light;
  --cream: #f6f1e7;
  --ink: #3e2c25;
  --brown: #6c4937;
  --muted: #705b4d;
  --brand: #782f3a;
  --brand-hover: #5c202b;
  --orange: #b9511d;
  /* Darker orange keeps small links readable on warm backgrounds. */
  --accent: #963d16;
  --line: #d9c9bb;
  --border-strong: #bea18e;
  --surface-red: #ecded9;
  --surface-orange: #f0dfcc;
  --surface-warm: #ede1d4;
  --surface-footer: #e7d8c9;
  --header-background: rgba(246, 241, 231, .95);
  --art-parchment: #e5cbb2;
  --art-rose: #c89489;
  --art-clay: #cd9978;
  --art-gold: #cd7737;
}

/* A fixed-scale panorama crops at the viewport edges without distorting leaves.
   Horizontal continuation covers wide screens while preserving the natural scale.
   Decoration stays behind transparent controls and never intercepts input. */
.site-header { isolation: isolate; padding-bottom: 30px; }
html:root { scroll-padding-top: 158px; }
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: 0;
  height: 100px;
  background: url("assets/fall-leaf-panorama-grounded.png") left calc(max(28px, (100vw - 1240px) / 2) - 310px) bottom -44px / 1100px auto repeat-x;
  opacity: .32;
  pointer-events: none;
}
.site-header .brand,
.site-header .menu-toggle,
.site-header .nav-links { background-color: transparent; }
.site-header .nav-links { padding: 8px 12px; }
@media (max-width: 700px) {
  .site-header { padding-bottom: 38px; }
  html:root { scroll-padding-top: 144px; }
  .site-header .nav-links { top: 132px; }
  .site-header::before {
    height: 64px;

  }
  /* The expanded menu is a separate panel over page content. */
  .site-header .nav-links.open { background-color: var(--cream); }
}