:root {
  color-scheme: light;
  --paper: #fff8ed;
  --navy: #12334f;
  --gold: #e5c589;
  --ink: #142e46;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; }
.masthead { max-width: 1440px; margin: auto; padding: 25px 5%; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.wordmark { display: block; width: 270px; max-width: 58%; height: auto; }
.development-label { margin: 0; padding: 11px 18px; border: 1px solid #c4b895; border-radius: 30px; font-size: .9375rem; line-height: 1.5; color: #425143; text-align: center; }
main { max-width: 1600px; margin: auto; }
.storytime { position: relative; overflow: hidden; isolation: isolate; min-height: 570px; background: #0d263e; color: var(--paper); display: flex; align-items: center; }
.illustration { position: absolute; inset: 0; z-index: -2; }
.illustration img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.storytime::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 29, 47, .78), rgba(10, 29, 47, .55) 28%, rgba(10, 29, 47, .08) 51%, transparent 67%); }
.message { width: 47%; max-width: 650px; padding: 62px 5%; }
.eyebrow { color: var(--gold); font-size: .875rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 21px; }
h1 { margin: 0 0 24px; max-width: 10ch; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.7rem, 4.3vw, 4.3rem); font-weight: 400; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.description { max-width: 38ch; margin: 0; font-size: 1.125rem; line-height: 1.7; color: #f3ebdd; }
.availability { margin: 28px 0 0; padding-top: 23px; border-top: 1px solid rgba(229, 197, 137, .45); max-width: 35ch; color: #f0d6a5; font-size: 1rem; line-height: 1.7; }
footer { max-width: 1440px; margin: auto; padding: 27px 5%; display: flex; justify-content: space-between; gap: 20px; color: #54604f; font-size: .875rem; line-height: 1.6; }
footer p { margin: 0; }
@media (max-width: 1050px) {
  .storytime { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .storytime::before { display: none; }
  .illustration { position: relative; z-index: auto; overflow: hidden; }
  .illustration img { width: 166.667%; max-width: none; height: auto; margin-left: -66.667%; }
  .message { width: 100%; max-width: none; padding: 40px 6% 44px; }
  h1 { max-width: 20ch; font-size: clamp(2.3rem, 6vw, 3.6rem); }
  .description { max-width: 54ch; }
  .availability { max-width: 46ch; }
}
@media (max-width: 540px) {
  .masthead { padding: 23px 22px; flex-direction: column; gap: 17px; }
  .wordmark { width: 240px; max-width: 85%; }
  .development-label { padding: 8px 16px; font-size: .875rem; }
  .message { padding: 32px 24px 37px; }
  .eyebrow { font-size: .8125rem; letter-spacing: .09em; margin-bottom: 17px; }
  .description { font-size: 1.0625rem; }
  footer { padding: 24px; flex-wrap: wrap; gap: 7px 20px; }
}