/* A modal dialog makes the page inert, but does not lock its scrollbars. */
html:has(#screensaver[open]),
body:has(#screensaver[open]) {
  overflow: hidden !important;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html:has(#screensaver[open])::-webkit-scrollbar,
body:has(#screensaver[open])::-webkit-scrollbar { display: none; }
#screensaver {
  --rest-shift-x: min(48px, 4vw);
  --rest-shift-y: min(36px, 3vh);
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none;
  background: #000;
  box-shadow: none;
  touch-action: none;
  cursor: none;
  color: #d7dfeb;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  font-family: "Segoe UI", system-ui, sans-serif;
}
#screensaver::backdrop { background: #000; }
#screensaver::-webkit-scrollbar { display: none; }
#screensaver .rest-layout { box-sizing: border-box; width: 100%; height: 100%; padding: clamp(28px, 5vw, 84px); display: grid; grid-template-columns: .85fr 1.35fr; gap: clamp(28px, 5vw, 80px); }
#screensaver .rest-clock-panel { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
#screensaver .rest-brand { display: flex; align-items: center; gap: 14px; color: #8d9bab; font-size: clamp(10px, 1vw, 14px); letter-spacing: .16em; line-height: 1.8; }
#screensaver .rest-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #493238; border-radius: 14px; color: #bc7c81; font-size: 16px; letter-spacing: -.04em; }
#screensaver .rest-clock { display: block; font-size: clamp(64px, 10vw, 160px); line-height: 1; font-weight: 250; font-variant-numeric: tabular-nums; letter-spacing: -.075em; color: #d7dfeb; }
#screensaver .rest-date { margin-top: 22px; font-size: clamp(16px, 1.6vw, 26px); color: #99a6b7; }
#screensaver .rest-greeting { margin-top: 12px; font-size: clamp(13px, 1.2vw, 18px); color: #647487; }
#screensaver .rest-hint { color: #9eacbd; font-size: 16px; line-height: 1.7; }
#screensaver .rest-hint>span:last-child { display: block; padding-left: 27px; font-size: 12px; color: #647487; }
#screensaver .rest-touch { margin-right: 10px; color: #bf858a; }
#screensaver .rest-agenda { align-self: center; min-width: 0; }
#screensaver .rest-agenda-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 24px; }
#screensaver .rest-eyebrow { color: #be8589; font-size: 11px; letter-spacing: .2em; margin: 0 0 9px; }
#screensaver h2 { margin: 0; font-size: clamp(24px, 2.7vw, 42px); font-weight: 550; letter-spacing: -.04em; }
#screensaver .rest-page { font-size: 12px; color: #728196; white-space: nowrap; }
#screensaver .rest-events { display: grid; gap: 10px; }
#screensaver .rest-event { display: flex; align-items: center; gap: 20px; padding: clamp(12px, 1.6vh, 22px) 20px; border: 1px solid #1b2632; border-radius: 18px; background: #090e14; min-width: 0; }
#screensaver .rest-event-featured { background: #191315; border-color: #493035; }
#screensaver .rest-event-date { flex: 0 0 44px; text-align: center; }
#screensaver .rest-event-date strong { display: block; font-size: 30px; font-weight: 450; line-height: 1.1; font-variant-numeric: tabular-nums; }
#screensaver .rest-event-date span { color: #8c9aab; font-size: 12px; }
#screensaver .rest-event-details { min-width: 0; }
#screensaver .rest-event-when { margin: 0 0 5px; color: #a4aebc; font-size: 12px; }
#screensaver .rest-event-featured .rest-event-when { color: #c39195; }
#screensaver h3 { margin: 0; font-size: clamp(16px, 1.65vw, 25px); font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#screensaver .rest-event-location { color: #8391a4; font-size: 12px; margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screensaver .rest-event-location:empty { display: none; }
#screensaver .rest-status { color: #738196; font-size: 11px; line-height: 1.5; margin: 18px 0 0; }
@media (max-aspect-ratio: 1/1) {
  #screensaver { --rest-shift-x: min(28px, 4vw); }
  #screensaver .rest-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 30px; padding: 40px; }
  #screensaver .rest-clock-panel { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
  #screensaver .rest-brand { grid-column: 1 / -1; }
  #screensaver .rest-clock { font-size: clamp(60px, 13vw, 110px); }
  #screensaver .rest-date { margin-top: 12px; }
  #screensaver .rest-greeting { display: none; }
  #screensaver .rest-agenda { align-self: start; }
}
@media (max-height: 650px) and (min-aspect-ratio: 1/1) {
  #screensaver { --rest-shift-x: min(20px, 4vw); }
  #screensaver .rest-layout { padding: 24px 32px; }
  #screensaver .rest-event { padding: 9px 14px; gap: 14px; }
  #screensaver .rest-agenda-heading { margin-bottom: 12px; }
  #screensaver h3 { font-size: 16px; }
  #screensaver .rest-event-location { margin-top: 3px; }
}
@media (max-width: 500px) {
  #screensaver { --rest-shift-x: min(18px, 4vw); --rest-shift-y: min(18px, 3vh); }
  #screensaver .rest-layout { padding: 26px; gap: 20px; }
  #screensaver .rest-clock-panel { gap: 14px; }
  #screensaver .rest-hint { font-size: 12px; max-width: 110px; }
  #screensaver .rest-hint>span:last-child { padding-left: 0; font-size: 10px; }
  #screensaver .rest-date { font-size: 13px; }
  #screensaver .rest-event { padding: 10px; gap: 12px; }
}