.page-opening {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--line);
}
.opening-with-art {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 4rem;
}
.opening-text { padding-right: 2rem; }
.opening-label {
  color: var(--wine);
  font-family: "Rubik", Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1.35rem;
}
.page-opening h1 {
  max-width: 21ch;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  letter-spacing: -.055em;
  line-height: 1.05;
  margin-bottom: 1.8rem;
  text-wrap: balance;
}
.opening-text h1 { max-width: 24ch; }
.opening-intro { max-width: var(--measure); font-size: 1.125rem; margin-bottom: 1.5rem; }
.opening-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.opening-links a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  max-width: 100%;
  font-size: 1rem;
}
.primary-link { background: var(--wine); color: var(--light); padding: .8rem 1.25rem; text-decoration: none; }
.primary-link:hover { background: var(--ink); }
.secondary-link, .hero-directory { padding: .5rem 0; }
.path-art, .notes-art { margin: 0; width: 100%; }
.art-sky {
  position: relative;
  aspect-ratio: 6 / 7;
  overflow: hidden;
  background: #d8b37c;
  border: 8px solid var(--ink);
}
.art-moon { position: absolute; width: 21%; aspect-ratio: 1; left: 20%; top: 12%; border-radius: 50%; background: #f5e6c5; }
.art-arch { position: absolute; background: #423441; clip-path: polygon(0 100%, 0 33%, 10% 21%, 27% 10%, 50% 0, 73% 10%, 90% 21%, 100% 33%, 100% 100%); }
.arch-far { width: 76%; height: 82%; left: 12%; top: 13%; }
.arch-far::before { content: ""; position: absolute; inset: 6% 10% 0; background: #a77773; clip-path: polygon(0 100%, 0 33%, 18% 15%, 50% 0, 82% 15%, 100% 33%, 100% 100%); }
.arch-near { width: 52%; height: 64%; left: 24%; top: 31%; background: #25222b; }
.art-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 23%; background: #746452; }
.art-path { position: absolute; height: 60%; left: 13%; right: 13%; bottom: 0; background: #f2eee4; clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); }
.art-step { position: absolute; height: 3%; background: #a77773; }
.step-near { left: 20%; width: 60%; bottom: 8%; }
.step-middle { left: 29%; width: 42%; bottom: 21%; }
.step-far { left: 38%; width: 24%; bottom: 34%; }
.art-leaf { position: absolute; width: 19%; height: 17%; background: #423441; border-radius: 0 100% 0 100%; bottom: 5%; }
.leaf-left { left: 1%; transform: rotate(-30deg); }
.leaf-right { right: 1%; transform: rotate(120deg); }
.notes-arch { position: relative; width: 100%; aspect-ratio: 6 / 5; background: var(--ink); clip-path: polygon(0 100%, 0 33%, 15% 15%, 50% 0, 85% 15%, 100% 33%, 100% 100%); }
.notes-paper { position: absolute; bottom: 14%; width: 33%; height: 43%; background: var(--paper); border-top: 12px solid var(--gold); }
.paper-left { left: 17%; transform: skewY(10deg); }
.paper-right { right: 17%; transform: skewY(-10deg); }
.notes-paper::after { content: ""; position: absolute; left: 12%; right: 12%; top: 25%; height: 4px; background: #a77773; box-shadow: 0 24px 0 #a77773, 0 48px 0 #a77773; }
.notes-ribbon { position: absolute; width: 5%; height: 30%; left: 47.5%; bottom: 2%; background: var(--wine); }
@media (max-width: 800px) {
  .page-opening { padding-top: 2.3rem; padding-bottom: 2.5rem; }
  .opening-with-art { grid-template-columns: 1fr; gap: 2rem; }
  .page-opening h1 { font-size: clamp(2.45rem, 7.5vw, 4rem); max-width: 23ch; }
  .path-art { max-width: 27rem; }
  .art-sky { aspect-ratio: 6 / 5; }
  .notes-art { display: none; }
}
@media (min-width: 1250px) { .page-opening { padding-left: 0; padding-right: 0; } }
@media (max-width: 520px) {
  .page-opening { padding-left: 1.25rem; padding-right: 1.25rem; }
  .page-opening h1 { font-size: 2.75rem; }
  .opening-links { align-items: flex-start; flex-direction: column; }
}