/* Das Ornament ist eine SVG mit transparentem Hintergrund statt eines iOS-Emoji. */
.brand-mark, .hero-ornament, .chapter-rule, .chapter-end, .not-found > span,
.door:after, .door.locked .door-bottom:before {
  background: url('/assets/ornament.svg') center / contain no-repeat;
}
.brand-mark { display: block; width: 2.5rem; height: 2.5rem; flex: none; }
.hero-ornament { width: clamp(8rem, 25vw, 21rem); aspect-ratio: 1; opacity: .18; }
.chapter-rule { display: block; position: relative; width: 1.2rem; height: 1.2rem; margin: 0 auto; }
.chapter-rule:before, .chapter-rule:after { position: absolute; top: 50%; width: 75px; }
.chapter-rule:before { right: calc(100% + 1rem); }
.chapter-rule:after { left: calc(100% + 1rem); }
.chapter-end { width: 1.4rem; height: 1.4rem; margin: 0 auto 4rem; }
.not-found > span { display: block; width: 4rem; height: 4rem; margin: 0 auto; }
.door:after { content: ''; right: -3rem; bottom: -3rem; width: clamp(7rem, 12vw, 12rem); height: clamp(7rem, 12vw, 12rem); }
.door.locked .door-bottom:before { content: ''; display: block; width: 1.1rem; height: 1.1rem; opacity: .6; }

.chapter-header { padding-top: clamp(3rem, 7vw, 5rem); }
.chapter-heading { display: flex; align-items: center; justify-content: center; gap: clamp(1.8rem, 6vw, 5rem); margin-bottom: 2.4rem; }
.chapter-door { position: relative; display: grid; flex: none; place-items: center; width: 92px; height: 124px; border: 5px solid #2c5550; border-radius: 3px; background: #153e38; color: #fff7e5; box-shadow: 5px 8px 0 #d1c7aa; transform: rotate(-3deg); }
.chapter-door:before { content: ''; position: absolute; inset: 5px; border: 1px dashed #cba668; opacity: .65; pointer-events: none; }
.chapter-door-number { font: normal 3.7rem/1 'DM Serif Display', Georgia, serif; }
.chapter-door-handle { position: absolute; right: .6rem; top: 52%; width: .5rem; height: .5rem; border: 1px solid #b18b48; border-radius: 50%; background: #d5a851; }
.chapter-month { position: relative; min-width: 0; padding: 2.2rem 2.3rem 1.7rem; border: 1px solid #ddd3b9; background: #fbf7eb; box-shadow: 7px 9px 0 #e5dfce; }
.chapter-month:after { content: ''; position: absolute; top: 0; right: 0; border-top: 20px solid #e2d5b8; border-left: 20px solid transparent; }
.chapter-binding { position: absolute; top: -.8rem; left: 0; right: 0; display: flex; justify-content: space-evenly; }
.chapter-binding i { display: block; width: 7px; height: 21px; border: 2px solid #a88356; border-radius: 5px; background: #f6f2e9; }
.chapter-month h1 { margin: 0; font-size: clamp(3.4rem, 7vw, 6rem); line-height: 1; white-space: nowrap; }
.chapter-month-underline { display: block; width: 100%; height: 1px; margin-top: 1rem; background: #d8cbb2; }

.story .report { background: #f3f0e7; color: #303a36; border-left: 0; border-top: 1px solid #bbb6a9; border-bottom: 1px solid #bbb6a9; box-shadow: 5px 6px 0 #e4dfd2; font: normal .99rem/1.9 'Courier New', Courier, monospace; letter-spacing: .012em; }
.story .report p { margin: 1.1em 0; }

@media (max-width: 620px) {
  .chapter-header { padding-inline: 1rem; }
  .chapter-heading { gap: .8rem; margin-bottom: 1.8rem; }
  .chapter-door { width: 70px; height: 101px; }
  .chapter-door-number { font-size: 2.9rem; }
  .chapter-door-handle { right: .3rem; }
  .chapter-month { padding: 1.7rem .8rem 1rem; }
  .chapter-month h1 { font-size: clamp(1.7rem, 8.5vw, 3.3rem); }
  .chapter-month-underline { margin-top: .6rem; }
  .hero-ornament { width: 13rem; }
}