.portal-layout {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}
.portal-layout .portal-art { min-height: 0; min-width: 0; }
.portal-layout .portal-brand { padding-top: 1rem; flex-shrink: 0; }
.portal-layout .portal-tagline { margin-top: 1rem; font-size: clamp(1.5rem, 3vh, 2.25rem); }
.portal-landscape { display: block; width: 100%; max-width: none; min-height: 0; flex: 1 1 0; object-fit: cover; object-position: center bottom; }
.portal-layout .portal-form { min-height: 0; min-width: 0; padding: 20px 24px 36px; }
.portal-layout .portal-form > section { padding: 0; }
.portal-connect { grid-template-rows: auto minmax(0, 1fr); }
.portal-connect .portal-art { min-height: 0; }
.portal-connect .portal-brand { padding-top: 1rem; }
.portal-connect .portal-tagline,
.portal-connect .portal-art > img { display: none; }
.portal-connect .portal-form { margin-top: 0; padding: 0 1rem; min-height: 0; }
.portal-connect .portal-form > section { padding: 1rem; }
@media (min-width: 1024px) {
  .portal-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .portal-layout .portal-brand { padding-top: 2rem; }
  .portal-layout .portal-tagline { margin-top: 2rem; font-size: clamp(2rem, 4.5vh, 3rem); }
  .portal-layout .portal-form { padding: 32px 48px; }
  .portal-connect .portal-brand { padding-top: 2rem; }
  .portal-connect .portal-tagline { display: block; margin-top: 2rem; font-size: clamp(2rem, 4.5vh, 3rem); }
  .portal-connect .portal-art > img { display: block; min-height: 0; flex-shrink: 1; }
  .portal-connect .portal-form { padding: 1.5rem; }
}
/* Keep controls reachable with a keyboard open or at high browser zoom. */
@media (max-height: 620px) {
  .portal-layout .portal-form { overflow-y: auto; align-items: safe center; }
}

/* Authentication forms can grow beyond the viewport without clipping their heading or links. */
.portal-auth {
  height: auto;
  min-height: 100dvh;
  grid-template-rows: 200px auto;
  overflow: visible;
}
.portal-auth .portal-form { padding: 32px 24px 40px; }
@media (min-width: 1024px) {
  .portal-auth { grid-template-rows: auto; }
  .portal-auth .portal-art { position: sticky; top: 0; height: 100dvh; align-self: start; }
  .portal-auth .portal-form { padding: 48px; }
}