/* Samhain Map: a moonlit blue night. Two lights with two meanings:
   turf-fire orange = a place a story names, moonlight white = a famous haunted site.
   Old-print IM Fell for titles and the stories themselves; Alegreya Sans for the interface. */
:root {
  --night: #121a24;
  --slate: #1c2733;
  --slate-2: #243241;
  --rule: #33445a;
  --bone: #ebe5d6;
  --mist: #93a3b5;
  --fire: #e8913a;
  --fire-dim: rgba(232, 145, 58, .16);
  --moon: #dfe8f3;
  --moon-dim: rgba(223, 232, 243, .1);
  --yes: #a9c98f;
  --no: #e09a8c;
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night);
  color: var(--bone);
  font: 17px/1.5 var(--sans);
  display: flex;
  flex-direction: column;
}
a { color: var(--fire); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
button { font: inherit; color: inherit; }

/* header: just the name */
.top {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px;
  padding: 12px 22px 10px;
  border-bottom: 1px solid var(--rule);
}
.wordmark { margin: 0; font: 400 30px/1 var(--fell); letter-spacing: .005em; display: flex; align-items: baseline; gap: 10px; }
.tagline { margin: 0; color: var(--mist); font: italic 17px var(--fell); }
.flame {
  width: 10px; height: 16px; align-self: center; flex: none;
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 72%, #fff1c9 0 22%, var(--fire) 58%, rgba(232, 145, 58, 0) 74%);
  animation: flicker 2.6s infinite ease-in-out;
}
@keyframes flicker { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.9, 1.06); opacity: .85; } }

.layout { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 0; }
#map { min-height: 420px; background: var(--night); }

/* the leaf: the reading side */
.leaf { background: var(--slate); border-left: 1px solid var(--rule); overflow-y: auto; padding: 22px 26px 40px; }
.leaf h2 { font: 400 32px/1.1 var(--fell); margin: 0 0 6px; }
.leaf h3 { font: italic 400 20px/1.2 var(--fell); color: var(--mist); margin: 30px 0 10px; }
.meta { color: var(--mist); font-size: 15px; margin: 0 0 16px; }
.intro { font: 19px/1.55 var(--fell); margin: 0 0 12px; }
.counts { color: var(--mist); font-size: 15px; margin: 0; }
.counts b { color: var(--bone); font-weight: 500; }
.back {
  all: unset; cursor: pointer; color: var(--mist); font-size: 15px; display: inline-block; margin-bottom: 14px;
}
.back:hover { color: var(--bone); }
.back:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.chip {
  border: 1px solid var(--rule); background: transparent; border-radius: 999px;
  padding: 3px 12px 4px; font-size: 15px; cursor: pointer; color: var(--bone);
}
.chip:hover { border-color: var(--mist); }
.chip[aria-pressed="true"] { border-color: var(--fire); background: var(--fire-dim); }
.chip .n { color: var(--mist); margin-left: 5px; font-size: 13px; }
.chip.moon[aria-pressed="true"] { border-color: var(--moon); background: var(--moon-dim); }

/* haunted sites: a moonlit list */
.sites { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.sites li { break-inside: avoid; }
.site {
  all: unset; cursor: pointer; display: flex; gap: 8px; align-items: baseline; padding: 4px 0; width: 100%;
}
.site { align-items: center; padding: 5px 0; }
.site img, .site .noimg {
  width: 52px; height: 52px; flex: none; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--rule); background: var(--slate-2);
  filter: saturate(.55) brightness(.85); /* photos join the night instead of glaring */
}
.site:hover img { filter: none; }
.site .noimg { display: grid; place-items: center; }
.site svg { width: 16px; height: 19px; fill: var(--moon); }

/* a site's photo, toned to the night until you look at it */
.photo { margin: 4px 0 18px; }
.photo img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--rule); background: var(--slate-2);
  filter: saturate(.6) brightness(.8) contrast(1.05); transition: filter .4s ease;
}
.photo img:hover { filter: none; }
.photo figcaption { color: var(--mist); font-size: 13px; margin-top: 6px; }
.photo figcaption a { color: var(--mist); }
@media (prefers-reduced-motion: reduce) { .photo img { transition: none; } }
.site b { font: 400 18px/1.2 var(--fell); color: var(--moon); }
.site span { color: var(--mist); font-size: 14px; }
.site:hover b { text-decoration: underline; text-underline-offset: 3px; }
.site:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }

/* stories: a ruled list, not boxed cards */
.stories { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.story {
  all: unset; display: block; cursor: pointer; width: 100%; padding: 12px 0 13px; border-bottom: 1px solid var(--rule);
}
.story .t { font: 400 21px/1.2 var(--fell); }
.story .s { color: var(--mist); font-size: 15px; margin-top: 3px; }
.story .b { color: var(--fire); font-size: 14px; margin-top: 4px; }
.story:hover .t { color: #fff; text-decoration: underline; text-decoration-color: var(--fire); text-underline-offset: 3px; }
.story:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; }
.empty { color: var(--mist); font-style: italic; }

/* a story: the old text is the main thing */
.beings { color: var(--fire); font-size: 15px; margin: 0 0 12px; }
.summary { font-size: 17px; margin: 0 0 18px; }
.page {
  font: 19px/1.72 var(--fell); color: #efe8da; max-width: 62ch; hyphens: auto;
}
.page p { margin: 0 0 .9em; }
.page p:first-child::first-letter {
  float: left; font-size: 3.4em; line-height: .82; padding: 6px 8px 0 0; color: var(--fire);
}
.reader { border-top: 1px solid var(--rule); padding-top: 18px; }
.more {
  border: 1px solid var(--fire); background: var(--fire-dim); border-radius: 999px; cursor: pointer;
  padding: 6px 16px 7px; font-size: 16px; margin: 4px 0 6px;
}
.more:hover { background: rgba(232, 145, 58, .26); }
.page.folded { max-height: 15.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }

blockquote {
  margin: 0 0 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--fire);
  font: italic 20px/1.45 var(--fell);
}
blockquote.moon { border-left-color: var(--moon); }

/* narration */
.story .aloud { color: var(--moon); font-size: 14px; margin-top: 2px; }
.story .aloud::before { content: "♪ "; }
.listen { margin: 0 0 20px; padding: 12px 14px 4px; border: 1px solid var(--rule); border-radius: 6px; background: var(--slate-2); }
.listen-label { margin: 0 0 8px; font: italic 19px var(--fell); color: var(--moon); }
.listen audio { width: 100%; color-scheme: dark; }
.listen .meta { margin: 6px 0 8px; font-size: 13px; }

/* the checker's evidence */
.evidence { list-style: none; padding: 0; margin: 0; }
.evidence li { padding: 9px 0 10px 24px; border-bottom: 1px solid var(--rule); position: relative; font-size: 16px; }
.evidence li::before { position: absolute; left: 2px; top: 9px; font-size: 15px; }
.evidence .yes::before { content: "✓"; color: var(--yes); }
.evidence .no::before { content: "✗"; color: var(--no); }
.evidence .info::before { content: "·"; color: var(--mist); font-size: 22px; top: 2px; }
.evidence .why { display: block; font-size: 14px; color: var(--mist); }
.evidence .no .why { color: var(--no); }
.evidence .yes .why { color: var(--yes); }
.evidence q { display: block; font: italic 16px/1.4 var(--fell); color: var(--mist); margin-top: 3px; }
.evidence button { all: unset; cursor: pointer; color: var(--fire); }
.evidence button:hover { text-decoration: underline; }
.fine { color: var(--mist); font-size: 14px; margin-top: 22px; }

/* sources, folded away at the bottom of the home view */
details.sources { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 12px; color: var(--mist); font-size: 14px; }
details.sources summary { cursor: pointer; color: var(--bone); font-size: 15px; }
details.sources p { margin: 8px 0; }

/* map */
.leaflet-container { font: 15px var(--sans); background: var(--night); }
/* OSM tiles turned to a moonlit blue night */
.dark-tiles { filter: invert(1) hue-rotate(195deg) brightness(.6) contrast(.92) saturate(.45); }
.leaflet-tooltip { background: var(--slate-2); color: var(--bone); border: 1px solid var(--rule); box-shadow: none; font-size: 15px; }
.leaflet-tooltip-top::before { border-top-color: var(--slate-2); }
.leaflet-bar a { background: var(--slate); color: var(--bone); border-color: var(--rule); }
.leaflet-bar a:hover { background: var(--slate-2); }
.leaflet-control-attribution { background: rgba(18, 26, 36, .8) !important; color: var(--mist); }
.leaflet-control-attribution a { color: var(--mist); }
.ghost-pin { background: none; border: none; }
.ghost-pin svg { filter: drop-shadow(0 0 7px rgba(223, 232, 243, .8)); }
.ghost-pin path { fill: var(--moon); stroke: #5d6e84; stroke-width: 1; }
.ghost-pin circle { fill: var(--night); }

@media (prefers-reduced-motion: reduce) {
  .flame { animation: none; }
}

@media (max-width: 860px) {
  /* phones: the page scrolls as a whole, map first, then the leaf at full length */
  html, body { height: auto; }
  body { display: block; }
  .top { padding: 10px 16px 8px; }
  .wordmark { font-size: 26px; }
  .tagline { font-size: 15px; }
  .layout { display: block; }
  #map { height: 52vh; min-height: 300px; }
  .leaf { border-left: 0; border-top: 1px solid var(--rule); overflow: visible; padding: 18px 16px 36px; scroll-margin-top: 0; }
  .leaf h2 { font-size: 28px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .chip { flex: none; }
  .intro { font-size: 17px; }
  .site b { font-size: 17px; }
  .page { font-size: 18px; }
}