@font-face {
  font-family: 'Pixelify Sans';
  src: url('fonts/PixelifySans.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.card {
  --story-accent: #a5b77a;
  width: min(380px, 86vw);
  padding: 14px 16px 18px;
  border: 32px solid transparent;
  border-image: url('ui/optimized/fantasy-basalt-frame-v1.5086acc43a27.webp') 200 fill / 32px / 0 stretch;
  background: none;
  image-rendering: pixelated;
  box-shadow: none;
  --story-reading-font: 'Trebuchet MS', 'Segoe UI', sans-serif;
  --story-title-font: Georgia, 'Times New Roman', serif;
  font-family: var(--story-reading-font);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-shadow: 0 1px #0d1919;
}

.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
}

.card-rune {
  flex: 0 0 20px;
  width: 20px;
  height: 28px;
  background: var(--story-accent);
  mask: var(--chapter-rune) center / contain no-repeat;
  -webkit-mask: var(--chapter-rune) center / contain no-repeat;
}
[data-rune="fehu"] { --chapter-rune: url('ui/rune-fehu.svg'); }
[data-rune="uruz"] { --chapter-rune: url('ui/rune-uruz.svg'); }
[data-rune="thurisaz"] { --chapter-rune: url('ui/rune-thurisaz.svg'); }
[data-rune="ansuz"] { --chapter-rune: url('ui/rune-ansuz.svg'); }
[data-rune="raidho"] { --chapter-rune: url('ui/rune-raidho.svg'); }

.card small {
  display: block;
  color: var(--story-accent);
  font: 700 14px/1.4 var(--story-reading-font);
  letter-spacing: .025em;
}

.card h1 {
  color: #f0e8ca;
  font: 700 29px/1.18 var(--story-title-font);
  letter-spacing: 0;
  margin: 14px 0 18px;
  text-wrap: balance;
}

.card p {
  color: #f0eddf;
  font: 400 19px/1.55 var(--story-reading-font);
  margin: 0;
}

/* Keep Icelandic copy easy to scan, with distinct letters in every panel. */
.card, .card small, .card h1, .card p {
  font-variant-ligatures: none;
}

#choices, #method {
  --story-title-font: var(--story-reading-font);
  --story-accent: #456f65;
  border-width: 20px;
  border-image: url('ui/hallway-panel.svg') 12 fill / 20px / 0 stretch;
  padding: 20px 28px 24px;
  text-shadow: none;
}
#choices h1, #method h1 { font-size: 27px; line-height: 1.2; }
#choices h1, #method h1 { color: #263d37; }
#choices p, #method p { color: #344b43; }

#lookout {
  --story-accent: #c9dce2;
  border-image-source: url('ui/optimized/fjord-driftwood-frame-v1.bf7121b9f692.webp');
}
#lookout h1 { color: #f0e9ce; }
#lookout p { color: #edf3f3; }

@media (max-width: 600px) {
  .card {
    right: 20px;
    width: min(340px, calc(100vw - 40px));
    padding: 12px 12px 16px;
    border-width: 28px;
    border-image-width: 28px;
  }
  #choices, #method { padding: 18px 18px 20px; border-image-width: 20px; }
  .card h1, #choices h1, #method h1 { font-size: 26px; }
  .card p { font-size: 18px; }
}