/* The credits page keeps every source and link readable inside a parchment panel. */
body:has(.credits) {
  min-height: 100dvh;
  margin: 0;
  padding: 24px;
  overflow: auto;
  background: linear-gradient(#120e0bd9, #120e0bd9), url('/assets/gamer/haru-room-v2.png') center / cover fixed;
}

.credits {
  width: min(100%, 960px);
  margin: 0 auto;
  padding: clamp(22px, 5vw, 52px);
  border: 10px solid transparent;
  border-image: url('/assets/preparation/paper-frame.png') 150 fill / 18px stretch;
  background: #f1e1ba url('/assets/journal/parchment-v1.png') center / cover;
  color: #402719;
  box-shadow: 0 20px 70px #000b;
  font-family: var(--font-copy);
  line-height: 1.65;
}

.credits h1,
.credits h2 { color: #4a2a19; font-family: BoardHand, Georgia, serif; line-height: 1.3; }
.credits h1 { margin: 18px 0 28px; font-size: clamp(34px, 6vw, 52px); }
.credits h2 { margin: 30px 0 10px; font-size: clamp(24px, 4vw, 34px); }
.credits p { color: #533a28; }
.credits :is(p,li,h2,th,td) { word-break:keep-all;overflow-wrap:anywhere; }
.credits a { color: #69421f; overflow-wrap: anywhere; text-underline-offset: 3px; }
.credits table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.credits th,
.credits td { min-width: 150px; padding: 10px 12px; border-bottom: 1px solid #a98a5b; text-align: left; vertical-align: top; }
.credits th { color: #4a2a19; background: #d7b47766; }
.credits ul { padding-left: 24px; }
.credits :is(a, th, td):focus-visible { outline: 3px solid #146b78; outline-offset: 2px; }

@media (max-width: 420px) {
  body:has(.credits) { padding: 8px; }
  .credits { padding: 20px 14px; border-width: 7px; }
  .credits h1 { font-size: 34px; }
  .credits h2 { font-size: 25px; }
}
/* All attribution text and links stay available inside the reading sections. */
.credits .credit-section { margin:12px 0;padding:0;border:1px solid #b69a71;background:#fff7e5aa;color:#49321e; }
.credits .credit-section > summary { min-height:48px;padding:12px 16px;cursor:pointer;color:#49321e; }
.credits .credit-section > summary h2 { display:inline;margin:0;padding:0;border:0;font:22px BoardLabel,sans-serif; }
.credits .credit-section > :not(summary) { margin-inline:16px; }
.credits .credit-section[open] { padding-bottom:12px; }
.credits > a:first-child, .account-card button { border:7px solid transparent;border-image:url('/assets/preparation/button-icon-v3.png') 22% / 10px stretch;background-image:var(--button-surface,url('/assets/preparation/button-secondary-v3.png'));background-position:center;background-size:112% 260%;background-origin:padding-box;background-clip:padding-box;color:#f6e5bd; }