/* The opening fits the available screen, including mobile browser controls. */
.opening {
  height: 100vh;
  height: 100svh;
  max-height: 1100px;
  padding-top: clamp(16px, 3svh, 42px);
  padding-bottom: max(clamp(20px, 3svh, 38px), env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3svh, 36px);
}
.opening .masthead { padding-block: 0; }
.opening .hero {
  padding-block: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 3svh, 32px);
}
.opening .hero-composition {
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: center;
}
.opening .hero-question {
  margin-bottom: clamp(14px, 2.5svh, 26px);
}
.opening .hero h1 {
  width: var(--hero-wordmark-width, min(74%, 900px, calc((100svh - 340px) * 1.86)));
  max-width: 100%;
  margin: 0;
}
.opening .hero-lettering { width: 100%; height: auto; }
.opening .hero-seal {
  width: var(--hero-seal-size, min(31vw, 390px));
  height: auto;
  right: 8%;
  top: -4px;
}
.opening .hero-tagline {
  font-size: clamp(18px, 3.4vw, 48px);
  line-height: 1.25;
  margin-top: clamp(20px, 3.2svh, 38px);
  white-space: nowrap;
}
.opening .scroll-cue {
  margin-top: 0;
  justify-self: start;
  align-self: end;
  font-size: clamp(11px, 1.6svh, 14px);
}
.opening .arrow-circle {
  width: clamp(26px, 4svh, 38px);
  height: clamp(26px, 4svh, 38px);
  font-size: clamp(17px, 2.5svh, 20px);
}
@media (max-width: 700px) {
  .opening { max-height: 700px; }
  .opening .hero h1 { width: var(--hero-wordmark-width, 95%); }
  .opening .hero-seal { right: -1%; top: -12px; }
  .opening .hero-seal { max-width: 34%; }
  .opening .hero-tagline { letter-spacing: -.035em; }
}
@media (max-width: 340px) {
  .opening .hero-tagline { font-size: 16px; }
}
@media (orientation: portrait) {
  .opening .hero-composition {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    gap: clamp(14px, 2svh, 22px) 14px;
    align-items: center;
  }
  .opening .hero-question { grid-area: 1 / 1; margin: 0; }
  .opening .hero h1 { grid-area: 2 / 1 / 3 / -1; }
  .opening .hero-seal {
    grid-area: 1 / 2;
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    margin: calc(var(--hero-seal-size, 110px) * .065);
  }
  .opening .hero-tagline { grid-area: 3 / 1 / 4 / -1; margin: 0; }
}
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
  .opening { max-height: none; padding-top: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); gap: 12px; }
  .opening .brand { font-size: 11px; line-height: 1.4; }
  .opening .brand strong { font-size: 12px; }
  .opening .hero { gap: 12px; }
  .opening .hero-question { font-size: 10px; margin-bottom: 10px; }
  .opening .hero-tagline { font-size: clamp(18px, 2.5vw, 27px); margin-top: 14px; }
  .opening .hero-seal { right: 9%; top: 9%; }
  .opening .scroll-cue { gap: 10px; }
  .opening .phone-watermark { width: 260px; bottom: -160px; }
}
@media print {
  .opening { height: auto; max-height: none; display: block; padding-block: 20px; }
  .opening .hero { display: block; height: auto; margin-top: 35px; }
  .opening .hero h1 { width: 55%; }
  .opening .hero-seal { width: 25%; }
}