:root {
  --lorelei-grey: #817d7a;
  --lorelei-grey-deep: #514d4b;
  --lorelei-grey-soft: #d1cfca;
}

.lorelei-page { background: var(--cream); }
.lorelei-masthead { border-color: rgba(17, 17, 15, .28); }
.lorelei-masthead .edition { color: var(--lorelei-grey-deep); }

.lor-hero {
  display: grid;
  grid-template-columns: minmax(18rem, .92fr) minmax(21rem, 1.08fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: center;
  min-height: 100svh;
  padding: clamp(7rem, 12vh, 10rem) var(--pad) clamp(4rem, 7vw, 7rem);
  border-bottom: 1px solid var(--rule);
}
.lor-hero-copy { min-width: 0; }
.lor-hero h1 {
  margin: 0;
  max-width: 8ch;
  font-size: clamp(4.4rem, 10vw, 10.5rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.085em;
}
.lor-hero h1 span { color: var(--lorelei-grey); }
.lor-name {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  color: var(--lorelei-grey-deep);
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-style: italic;
  line-height: 1;
}
.lor-lead {
  width: min(25rem, 100%);
  margin: clamp(2rem, 4vw, 4rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-style: italic;
}
.lor-rabbit { width: min(100%, 38rem); justify-self: end; }
.lor-rabbit .media-placeholder,
.lor-rabbit .media-button {
  aspect-ratio: 3 / 4;
  min-height: 0;
  background: var(--lorelei-grey-soft);
}

.lor-abilities {
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.lor-section-heading .eyebrow,
.lor-abilities .section-number { color: var(--lorelei-grey-soft); }
.lor-section-heading h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.075em;
}
.lor-study {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: clamp(7rem, 14vw, 14rem);
}
.lor-study:last-child { margin-bottom: 0; }
.lor-study-copy h3 {
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 9rem);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.075em;
}
.lor-study-copy p {
  max-width: 24rem;
  color: #aaa49a;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-style: italic;
}
.lor-abilities .discipline-index { color: var(--lorelei-grey-soft); }
.lor-abilities .media > figcaption { color: #aaa49a; }

.lor-chess { grid-template-columns: .8fr 1.2fr; }
.lor-chess .media { width: min(100%, 34rem); justify-self: end; }
.lor-chess .media-placeholder,
.lor-chess .media-button {
  aspect-ratio: 3 / 4;
  min-height: 0;
  background: #6d6966;
  color: var(--paper);
}

.lor-closeup { grid-template-columns: minmax(18rem, .8fr) 1.2fr; }
.lor-closeup .media { width: min(100%, 30rem); }
.lor-closeup .media-placeholder,
.lor-closeup .media-button {
  aspect-ratio: 3 / 4;
  min-height: 0;
  background: #a09b96;
}

.lor-hacker { grid-template-columns: .7fr 1.3fr; }
.lor-hacker .media { width: 100%; }
.lor-hacker .media-placeholder,
.lor-hacker .media-button {
  aspect-ratio: 480 / 433;
  min-height: 0;
  background: #766b61;
  color: var(--paper);
}

.lor-sibling {
  display: grid;
  grid-template-columns: minmax(16rem, .65fr) minmax(20rem, 1.35fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  background: var(--paper);
}
.lor-sibling-copy { min-width: 0; }
.lor-sibling-copy .section-number { margin-bottom: clamp(3rem, 7vw, 7rem); }
.lor-sibling-copy h2,
.lor-sleep-copy h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 8rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
}
.lor-sibling-copy h2 span,
.lor-sleep-copy h2 span { color: var(--lorelei-grey); }
.lor-sibling-copy > p:last-child,
.lor-sleep-copy > p:last-child {
  max-width: 24rem;
  margin-top: 2rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
}
.lor-sibling-media { width: min(100%, 36rem); justify-self: end; }
.lor-sibling-media .media-placeholder,
.lor-sibling-media .media-button {
  aspect-ratio: 3 / 4;
  min-height: 0;
  background: var(--lorelei-grey-soft);
}

.lor-sleep {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  background: var(--lorelei-grey-deep);
  color: var(--paper);
}
.lor-sleep-copy .section-number,
.lor-sleep-copy .eyebrow { color: var(--lorelei-grey-soft); }
.lor-sleep-copy > p:last-child { color: var(--lorelei-grey-soft); }
.lor-sleep-media .media-placeholder,
.lor-sleep-media .media-button {
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: #6e6864;
}
.lor-sleep .media > figcaption { color: var(--lorelei-grey-soft); }
.lorelei-footer a { text-underline-offset: .25rem; }

@media (max-width: 850px) {
  .lor-hero {
    grid-template-columns: 1fr;
    gap: 3rem;
    min-height: auto;
    padding-top: 7rem;
  }
  .lor-hero h1 { font-size: clamp(4.3rem, 18vw, 7.5rem); }
  .lor-rabbit { width: min(82vw, 30rem); justify-self: end; }
  .lor-study,
  .lor-chess,
  .lor-closeup,
  .lor-hacker {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lor-closeup .lor-study-copy { grid-row: 1; }
  .lor-study-copy h3 { font-size: clamp(3.6rem, 16vw, 7rem); }
  .lor-chess .media,
  .lor-closeup .media {
    width: min(82vw, 30rem);
    margin-left: auto;
    justify-self: auto;
  }
  .lor-hacker .media { width: 100%; }
  .lor-sibling,
  .lor-sleep {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .lor-sibling-media { width: min(86vw, 30rem); justify-self: end; }
}

@media (max-width: 580px) {
  .lor-hero h1 { font-size: clamp(3.85rem, 18vw, 6rem); }
  .lor-rabbit,
  .lor-chess .media,
  .lor-closeup .media,
  .lor-sibling-media { width: 100%; }
  .lor-study-copy h3 { font-size: clamp(3.15rem, 15vw, 5.5rem); }
  .lor-sibling-copy h2,
  .lor-sleep-copy h2 { font-size: clamp(3rem, 14vw, 5.5rem); }
}