/* Dark fall-forest backdrop (PREVIEW). Matches app ForestBackground dark wash.
   Uses a position:fixed layer so iOS Safari keeps the image still while content scrolls.
   Do not rely on background-attachment:fixed. */

:root{
  /* Cream/gold readable ink over the burgundy wash; brand hues stay. */
  --parchment:#f4ead5;
  --parchment-2:#e8d9b8;
  --ink:#f4ead5;
  --ink-soft:#e0d0ae;
  --garnet:#c9a227;          /* gold-leaning titles on dark */
  --garnet-2:#e0b84a;
  --emerald:#8fbfa3;
  --sapphire:#9bb6d4;
  --amethyst:#c4a0d4;
  --gold:#e0b84a;
  --forest-panel:rgba(58,26,34,.88);
  --forest-panel-soft:rgba(58,26,34,.72);
  --forest-border:rgba(224,184,74,.45);
}

html{
  background:#2a0f16; /* solid fallback while image loads */
}

/* Fixed, non-scrolling forest photo (iOS-safe). */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    url("/images/fall-forest-bg.webp") center / cover no-repeat,
    url("/images/fall-forest-bg.jpg") center / cover no-repeat;
}

/* App dark wash: rgba(74, 20, 32, 0.62) */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(74,20,32,.62);
}

body{
  background:transparent !important;
  color:var(--ink);
}

a{color:var(--gold)}
a:hover{color:var(--garnet-2)}

/* Keep the existing parchment header/footer banners (brand crest stays). */
.banner,
.contact-banner{
  /* restore light parchment look that those rules already set */
  color:#2a2118;
}
.banner .wordmark,
.contact-banner h2{color:#6b1d2a}
.banner .badge,
.badge{
  color:#1f4d3a;
  border-color:rgba(31,77,58,.45);
  background:rgba(255,252,244,.7);
}
.banner-nav a{color:#6b1d2a}
.site-foot{color:var(--ink-soft)}
.contact-mail a{color:var(--gold)}
.site-foot .copy{color:var(--ink-soft);opacity:.85}

/* Home / shared cards */
.frame,
.hbox.frame{
  background:var(--forest-panel) !important;
  color:var(--ink);
}
.hbox-title,
h2.hbox-title,
.portal-title,
.tagline,
.lede,
.kicker,
h1{
  color:var(--gold) !important;
}
.hbox-sub,
.hbox-copy,
.portal-note,
.pitch,
.fine{color:var(--ink-soft) !important}
.hbox-go{color:var(--gold) !important}
.portal{
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,248,230,.12),transparent 42%),
    radial-gradient(ellipse at 80% 90%,rgba(90,40,16,.28),transparent 46%),
    rgba(58,26,34,.92) !important;
  color:var(--ink);
  border-color:#3a1a22;
  outline-color:rgba(224,184,74,.55);
}
.portal-open{color:var(--gold) !important}
.tile{
  background:rgba(74,20,32,.72) !important;
  border-color:var(--forest-border) !important;
  color:var(--gold) !important;
}
.tile:hover,.tile:focus-visible{
  background:rgba(90,28,40,.9) !important;
  border-color:var(--gold) !important;
}
.acts-row li{
  background:rgba(74,20,32,.75) !important;
  border-color:rgba(224,184,74,.4) !important;
  color:var(--ink) !important;
}
.medallion{
  background:radial-gradient(circle at 40% 35%,#4a1a24,#2a0f16) !important;
  border-color:var(--gold) !important;
  color:var(--gold) !important;
  box-shadow:inset 0 0 0 3px rgba(224,184,74,.25) !important;
}

/* Interior page blocks (page.css) */
.block,
.panel{
  background:var(--forest-panel) !important;
  border-color:var(--forest-border) !important;
  color:var(--ink);
}
.block h2,.plain h2,.panel h2{color:var(--gold) !important}
.block p,.block li,.plain p,.block strong{color:var(--ink-soft)}
.block strong{color:var(--ink)}
form.signup input[type=email]{
  background:rgba(42,15,22,.85) !important;
  color:var(--ink) !important;
  border-color:var(--forest-border) !important;
}

/* Find a Ren Faire */
.filter-bar{
  background:var(--forest-panel) !important;
  border-color:var(--forest-border) !important;
}
.filter-group legend,
.filter-selects label,
.clear-filters{color:var(--gold) !important}
.season-chip,.stay-chip{
  background:rgba(74,20,32,.75) !important;
  color:var(--ink) !important;
  border-color:rgba(224,184,74,.4) !important;
}
.season-chip[data-season="Winter"]{background:rgba(29,53,87,.55) !important;color:#d6e4f2 !important}
.season-chip[data-season="Spring"]{background:rgba(31,77,58,.55) !important;color:#d6efe3 !important}
.season-chip[data-season="Summer"]{background:rgba(184,137,45,.35) !important;color:#f8efd4 !important}
.season-chip[data-season="Fall"]{background:rgba(107,29,42,.55) !important;color:#f6e6e8 !important}
.filter-selects select{
  background:rgba(42,15,22,.9) !important;
  color:var(--ink) !important;
  border-color:var(--forest-border) !important;
}
.faire{border-top-color:rgba(224,184,74,.22) !important}
.faire h3{color:var(--gold) !important}
.faire-index{
  margin:22px auto 8px;
  max-width:760px;
  background:var(--forest-panel);
  border:1px solid var(--forest-border);
  border-radius:16px;
  padding:16px 16px 8px;
}
.faire-index h2{font-family:var(--serif);color:var(--gold);font-size:clamp(1.6rem,4vw,2.05rem);line-height:1.1}
.faire-index h3{font-family:var(--serif);color:var(--gold);font-size:1.35rem;margin:14px 0 0}
.faire-index .index-list{list-style:none;margin:10px 0 0;padding:0}
.faire-index .index-list li{padding:8px 0;border-top:1px solid rgba(224,184,74,.22);color:var(--ink-soft)}
.faire-index a{font-weight:600}
.map-links{margin:8px 0 0}
.map-links a{margin-right:12px;display:inline-flex;min-height:44px;align-items:center;font-weight:600}
.faire p,.faire .meta,.caption,.lede{color:var(--ink-soft) !important}
.list-col{
  background:var(--forest-panel-soft);
  border-radius:12px;
  padding:8px 12px;
  border:1px solid var(--forest-border);
}
.view-toggle button,
.view-toggle [role="tab"]{
  background:rgba(58,26,34,.88);
  color:var(--ink);
  border:1px solid var(--forest-border);
}
/* Keep the map frame as-is (wood + parchment) for contrast. */

/* Emberwyn chat surfaces */
.goldberry-panel,
.gb-panel,
.gb-shell,
.gb-composer,
.goldberry-chat,
#goldberry,
.chat-shell{
  background:var(--forest-panel) !important;
  border-color:var(--forest-border) !important;
  color:var(--ink) !important;
}

/* Soften hero crest shadow on dark */
.hero-crest{filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}

/* Prefer reduced data / motion: still show wash over solid */
@media (prefers-reduced-data:reduce){
  html::before{background:#3a1420}
}

/* Parchment islands keep dark ink (atlas plaque, chart, coming-up card). */
.chart .kicker{color:#6b1d2a !important}
.chart h1,.cartouche h1{color:#2a2118 !important}
.chart .caption{color:#4a3b2c !important}
.chart .realm-btn{color:#2a2118}

/* Coming Up / region scroll stays parchment: restore original dark ink inside it. */
.scroll{
  --ink:#2a2118; --ink-soft:#5a4a3a; --garnet:#6b1d2a; --garnet-2:#8a2a3a;
  --emerald:#1f4d3a; --sapphire:#1d3557; --gold:#b8892d;
  color:#2a2118;
}
.scroll a{color:#6b1d2a}
.scroll .faire h3,.scroll h2,.scroll .kicker{color:#6b1d2a !important}
.scroll .faire p,.scroll .faire .meta,.scroll .lede{color:#5a4a3a !important}
.scroll .faire{border-top-color:rgba(90,74,58,.18) !important}

/* Footer social chips are cream: keep garnet text. */
.contact-social a{color:#6b1d2a}
.contact-social a:hover{color:#f4ead5}

/* Performers: dark cards and chips so cream text reads. */
.act{
  background:var(--forest-panel) !important;
  border-color:var(--forest-border) !important;
  box-shadow:inset 0 0 0 4px rgba(224,184,74,.08) !important;
}
.act h2{color:var(--gold)}
.act-desc,.founded{color:var(--ink-soft)}
.filters button{
  background:rgba(58,26,34,.85) !important;color:var(--ink) !important;
  border-color:var(--forest-border) !important;
}
.filters button[aria-pressed="true"]{background:var(--gold) !important;color:#1e160d !important;border-color:var(--gold) !important}
.filters button:hover{border-color:var(--gold) !important}
.soc{background:rgba(42,15,22,.85) !important;color:var(--ink) !important;border-color:var(--forest-border) !important}
.soc:hover{background:var(--gold) !important;color:#1e160d !important}
.where-list a,.where-list span{background:rgba(42,15,22,.75) !important;border-color:rgba(224,184,74,.3) !important}
.where-list a{color:var(--gold) !important}
.where-list span{color:var(--ink-soft) !important}

/* FAQ and Theme weekends: dark jump chips and question groups. */
.jump a{
  background:rgba(58,26,34,.85) !important;color:var(--ink) !important;
  border-color:var(--forest-border) !important;
}
.jump a:hover{border-color:var(--gold) !important}
.group{
  background:var(--forest-panel) !important;
  border-color:var(--forest-border) !important;
}

/* Rustic log header (MOCK). Same hewn-log art as the app's LogHeader:
   cover-fit log, rgba(30,14,10,.34) veil, cream titles with a dark shadow, gold for the active item. */
.banner{
  color:#f4e8d0;
  background:
    linear-gradient(180deg,rgba(20,9,5,.68) 0%,rgba(20,9,5,.62) 50%,rgba(20,9,5,.72) 100%),
    url("/images/log-header.webp") center / cover no-repeat,
    url("/images/log-header.jpg") center / cover no-repeat,
    #6e4524;
  border-top:0;
  border-bottom:2px solid rgba(20,10,6,.85);
  box-shadow:
    inset 0 -2px 0 rgba(201,162,39,.55),
    0 12px 24px -10px rgba(0,0,0,.75);
}
.banner .wordmark{
  color:#fbf3e0;
  -webkit-text-stroke:.8px rgba(14,6,3,.95);
  paint-order:stroke fill;
  text-shadow:0 2px 3px #000,0 0 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.7);
}
.banner .badge{
  color:#f4e8d0;
  background:rgba(24,11,7,.72);
  border-color:rgba(232,213,163,.6);
}
.banner .banner-nav a{
  color:#fbf3e0;
  font-weight:700;
  -webkit-text-stroke:.5px rgba(14,6,3,.95);
  paint-order:stroke fill;
  text-shadow:0 1px 2px #000,0 0 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.75);
}
.banner .banner-nav a:hover{color:#e8b84a}
.banner .banner-nav a[aria-current="page"]{
  color:#e8b84a;
  border-bottom-color:#e8b84a;
}
.banner .banner-badge{
  background:rgba(30,14,10,.78);
  color:#f4e8d0;
  box-shadow:inset 0 0 0 1px rgba(232,213,163,.45);
}
.banner .banner-menu{
  background:rgba(24,11,7,.72);
  color:#fbf3e0;
  border-color:rgba(232,184,74,.7);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.banner .banner-brand img{filter:drop-shadow(0 3px 4px rgba(0,0,0,.55))}
@media (max-width:640px){
  .banner.is-menu-open .banner-nav{
    background:rgba(30,14,10,.55);
    border-radius:12px;
  }
  .banner.is-menu-open .banner-nav a{border-bottom-color:rgba(232,184,74,.3)}
}

/* Hanging lanterns (MOCK) replace the crystal (home, left) and the sun (every page, right). */
.banner-lantern{
  position:absolute;
  top:calc(100% - 3px);
  right:26px;
  z-index:3;
  width:54px;
  height:auto;
  pointer-events:none;
  transform-origin:50% 0;
  animation:banner-sun-sway 5.4s ease-in-out infinite, lantern-flicker 3.2s ease-in-out infinite;
}
.trinket.trinket-lantern{
  width:54px;
  animation:banner-sun-sway 6.2s ease-in-out infinite, lantern-flicker 2.7s ease-in-out infinite;
}
.banner-lantern,
.trinket.trinket-lantern{
  filter:drop-shadow(0 0 10px rgba(255,190,80,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.45));
}
@keyframes lantern-flicker{
  0%,100%{filter:drop-shadow(0 0 10px rgba(255,190,80,.55)) drop-shadow(0 4px 4px rgba(0,0,0,.45))}
  45%{filter:drop-shadow(0 0 16px rgba(255,200,95,.75)) drop-shadow(0 4px 4px rgba(0,0,0,.45))}
  70%{filter:drop-shadow(0 0 8px rgba(255,180,70,.45)) drop-shadow(0 4px 4px rgba(0,0,0,.45))}
}
@media (max-width:720px){
  .banner-lantern{width:30px;right:10px}
  .trinket.trinket-lantern{width:30px}
}
@media (max-width:700px){ .banner-lantern{display:block} }
@media (prefers-reduced-motion:reduce){
  .banner-lantern,.trinket.trinket-lantern{animation:none}
}