/* The existing fixed header carries the countdown while scrolling.
   Its ResizeObserver also includes this bar in menu anchor offsets. */
.access-window {
  margin: 0;
  padding: 5px 16px;
  border-block: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
  color: #fff;
}
.access-window-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.access-window-label {
  flex: none;
  margin: 0;
  color: #fff;
  font: 400 13px/1.5 var(--serif, "Noto Serif JP", serif);
  letter-spacing: .05em;
}
.access-window-clock {
  display: grid;
  grid-template-columns: repeat(3, 46px);
  gap: 4px;
}
.access-window-unit {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 3px 2px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top-color: rgba(200, 164, 93, .28);
  border-radius: 2px;
  background: rgba(255, 255, 255, .025);
}
.access-window-unit b {
  color: #f2e6c6;
  font: 500 24px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.access-window-unit small {
  color: #fff;
  font: 400 9px/1.3 var(--sans, sans-serif);
}
body[data-has-access-window] .hero-layout {
  padding-top: max(158px, calc(12vh + 42px));
}
body[data-has-access-window] .conditions-hero-inner { padding-top: 158px; }
body[data-has-access-window] .global-nav.is-open { top: 100%; }
.access-ended-page { display: grid; min-height: 100vh; min-height: 100svh; margin: 0; padding: 24px; place-items: center; box-sizing: border-box; background: #101010; color: #fff; font-family: "Noto Serif JP", "Yu Mincho", serif; }
.access-ended-content { width: 100%; max-width: 700px; text-align: center; }
.access-ended-brand { margin: 0 0 28px; color: #c8a45d; font: 500 17px/1.6 Georgia, serif; letter-spacing: .12em; }
.access-ended-content h1 { margin: 0; font-size: clamp(27px, 5.5vw, 40px); font-weight: 600; line-height: 1.8; }
.access-ended-content > p:last-child { margin: 24px 0 0; color: #ddd; font-size: 16px; line-height: 1.9; }
@media (max-width: 760px) {
  .access-window { padding: 5px 10px; }
  .access-window-inner { flex-direction: row; gap: 10px; }
  .access-window-label { font-size: 12px; line-height: 1.4; }
  .access-window-clock { grid-template-columns: repeat(3, 38px); gap: 3px; }
  .access-window-unit { padding: 3px 2px 2px; gap: 0; }
  .access-window-unit b { font-size: 22px; }
  .access-window-unit small { font-size: 8px; }
  body[data-has-access-window] .hero-layout { padding-top: 146px; }
  body[data-has-access-window] .conditions-hero { padding-top: 0; }
  body[data-has-access-window] .conditions-hero-inner { padding-top: 146px; }
}

/* Keep the navigation background separate from the translucent timer. */
body[data-has-access-window] .site-header,
body[data-has-access-window] .site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
}
body[data-has-access-window] .site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--header-main-height, 78px);
  z-index: -1;
  background: rgba(12, 12, 11, .92);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.access-window {
  width: 100%;
  padding: 4px 10px;
  background: rgba(12, 12, 11, .64);
  backdrop-filter: blur(12px);
  border: 0;
}
.access-window-inner {
  width: 100%;
  max-width: 720px;
  padding: 4px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.access-window-unit b { color: #fff; }
.access-window .access-window-unit { background: transparent; }
@media (max-width: 760px) {
  .access-window-inner { padding: 3px 8px; gap: 8px; }
}

@media (max-width: 600px) {
  body[data-page="home"][data-has-access-window] .hero { padding-top: 0; }
  body[data-page="home"][data-has-access-window] .hero-layout {
    padding-top: calc(var(--nav-scroll-offset, 122px) - 8px);
  }
}

/* Match the modest size increase in the home page's inline clock. */
body[data-page="home"] .free-enrollment-countdown .access-window-unit b { font-size: clamp(27px, 3.3vw, 38px); }
