.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
}
.lockup { text-decoration: none; }
.lockup__text b { font-family: var(--serif); font-weight: 600; font-size: 24px; display: block; line-height: 1; }
.lockup__text small { font-size: 13px; opacity: 0.7; display: block; margin-top: 3px; }
.masthead__nav { display: flex; gap: 26px; font-size: 16px; }
.masthead__nav a { text-decoration: none; opacity: 0.8; }
.masthead__nav a:hover { opacity: 1; }
@media (max-width: 760px) { .masthead__nav { display: none; } }

section { padding: 72px 0 0; }
.lead { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); max-width: 24ch; font-weight: 600; }
.sub { max-width: 62ch; margin-top: 14px; opacity: 0.85; }
.sub--flush { margin-top: 0; }
.checklist { padding-left: 20px; line-height: 1.7; max-width: 62ch; }

.hero__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}
.hero__copy h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 700; letter-spacing: -0.01em; }
.hero__line { font-family: var(--serif); font-size: clamp(18px, 2vw, 22px); max-width: 36ch; margin-top: 10px; }

/* character cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 34px; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__portrait { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--sand); }
.card__portrait--empty {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 34px;
  color: var(--navy);
}
.card__name { font-size: 26px; }
.card__role { font-family: var(--serif); font-style: italic; opacity: 0.8; margin-top: -6px; }
.card__where { font-size: 15px; opacity: 0.8; }
.card__where-value { font-style: italic; }
.card__facts { margin: 0; padding-left: 18px; font-size: 15px; opacity: 0.9; line-height: 1.5; }
.card__book { font-size: 14px; opacity: 0.7; font-family: var(--serif); font-style: italic; }
.card__talk { align-self: flex-start; margin-top: auto; }

/* books */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 34px; }
.book { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: start; }
.book__cover {
  width: 130px;
  aspect-ratio: 1;
  border-radius: 4px 12px 12px 4px;
  object-fit: cover;
  box-shadow: 6px 8px 0 rgba(28, 46, 74, 0.18);
  background: var(--bay);
}
.book__cover--empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  color: var(--cream);
}
.book--coming .book__cover--empty {
  background: repeating-linear-gradient(45deg, var(--sand), var(--sand) 8px, #dccaa4 8px, #dccaa4 16px);
  color: var(--navy);
  box-shadow: none;
}
.book__series { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.book__title { font-size: 25px; margin-top: 2px; }
.book__meta { font-size: 14px; opacity: 0.7; margin: 4px 0 10px; }
.book__blurb { font-size: 16px; }
.book__note { font-size: 14px; opacity: 0.7; margin-top: 8px; font-style: italic; }
.book__pending { font-size: 14px; opacity: 0.6; margin-top: 12px; }
.book .btn { margin-top: 14px; }

/* watch */
.empty {
  margin-top: 34px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px;
  display: grid;
  gap: 16px;
  justify-items: start;
}
.empty__frame {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--navy);
  display: grid;
  place-items: center;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 22px;
  text-align: center;
  padding: 16px;
}

/* parents */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; margin-top: 34px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 14px;
}
.form__title { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.form__field { display: grid; gap: 6px; font-size: 15px; }
.form input, .form textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--ground);
  color: var(--ink);
  width: 100%;
}

.colophon {
  margin-top: 80px;
  padding: 34px 0 120px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  opacity: 0.85;
}
.colophon b { font-family: var(--serif); }

.talk-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  box-shadow: 0 16px 34px -12px rgba(28, 46, 74, 0.6);
}