/* ===== ACCESS GATE =====
   The front door: one deep dive's cover fills the screen, the atlas's name
   and the way in sit over its darker corner, and a row of small covers opens
   the stories. gate-hero.js fills the stage and the row. The words are white
   on a picture in every theme, so nothing here reads the theme's colours. */
.access-gate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 2rem 3rem;
  padding: clamp(1.5rem, 4.5vw, 4rem);
  padding-bottom: max(clamp(1.5rem, 4vw, 3rem), env(safe-area-inset-bottom));
  background: #121212;
  color: #fff;
}

/* An address with somewhere to go opens the atlas, never the door. The page
   head sets the class before first paint; access.js then turns it into the
   two elements' hidden attributes and drops it. */
.atlas-direct #accessGate { display: none !important; }
.atlas-direct #appShell[hidden] { display: block !important; }

.gate-stage { position: absolute; inset: 0; z-index: -2; }

.gate-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  /* Out of sight before it steps back, so the drift never jumps. */
  transition: opacity 1.4s ease, transform 0s linear 1.4s;
}

.gate-stage img.is-on {
  opacity: 1;
  transform: scale(1.09);
  transition: opacity 1.4s ease, transform 9s cubic-bezier(.2, .4, .4, 1);
}

/* Dark where the words are, clear where the picture is. */
.access-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 38%) 32%, rgb(0 0 0 / 0%) 62%),
    linear-gradient(90deg, rgb(0 0 0 / 42%) 0%, rgb(0 0 0 / 0%) 52%),
    linear-gradient(180deg, rgb(0 0 0 / 22%) 0%, rgb(0 0 0 / 0%) 18%);
}

.gate-panel {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  text-shadow: 0 1px 18px rgb(0 0 0 / 35%);
}

.gate-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 86%);
}

.gate-mark { width: 1.35rem; height: 1.35rem; color: #fff; flex: none; }

.access-gate h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.75rem);
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}

.gate-copy {
  max-width: 30rem;
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 88%);
}

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
  text-shadow: none;
}

.access-enter,
.gate-depth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, background-color 0.15s, opacity 0.2s;
}

.access-enter { border: 0; background: #fff; color: #111; }
.access-enter:hover:not(:disabled) { transform: scale(1.03); }
.access-enter:disabled { cursor: progress; opacity: 0.55; }

.gate-depth {
  border: 1px solid rgb(255 255 255 / 34%);
  background: rgb(255 255 255 / 14%);
  color: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.gate-depth:hover { background: rgb(255 255 255 / 24%); }

.access-gate :is(a, button):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.gate-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: rgb(255 255 255 / 72%);
}
.gate-facts b { color: #fff; font-weight: 600; }

/* The story on screen, and the others beside it. */
.gate-feature {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 0.9rem;
  min-width: 0;
}

.gate-now {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  color: #fff;
  text-align: right;
  text-decoration: none;
  text-shadow: 0 1px 14px rgb(0 0 0 / 45%);
}
.gate-now-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 75%);
}
.gate-now-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.gate-now-title::after { content: " \2192"; opacity: 0.7; }
.gate-now-meta { font-size: 0.78rem; color: rgb(255 255 255 / 70%); }
.gate-now:hover .gate-now-title { text-decoration: underline; text-underline-offset: 3px; }

.gate-thumbs { display: flex; align-items: center; gap: 0.5rem; }

.gate-thumb {
  position: relative;
  flex: none;
  width: 5.75rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.6rem;
  background: rgb(255 255 255 / 12%);
  opacity: 0.62;
  transition: opacity 0.25s, transform 0.25s;
}
.gate-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gate-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
}
.gate-thumb:hover { opacity: 1; }
.gate-thumb[aria-current] { opacity: 1; transform: translateY(-2px); }
.gate-thumb[aria-current]::after { box-shadow: inset 0 0 0 2px #fff; }

.gate-pause {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.gate-pause svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.gate-pause:hover { background: rgb(255 255 255 / 26%); }

/* A phone: the picture above, everything else stacked under it. */
@media (max-width: 860px) {
  .access-gate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    gap: 1.75rem;
    padding: 1.25rem 1rem max(1.25rem, env(safe-area-inset-bottom));
  }
  .access-gate::after {
    background:
      linear-gradient(0deg, rgb(0 0 0 / 86%) 0%, rgb(0 0 0 / 66%) 50%, rgb(0 0 0 / 0%) 82%),
      linear-gradient(180deg, rgb(0 0 0 / 25%) 0%, rgb(0 0 0 / 0%) 16%);
  }
  .gate-panel { grid-row: 2; gap: 0.8rem; }
  .gate-feature { grid-column: 1; grid-row: 3; justify-self: stretch; justify-items: start; }
  .gate-now { justify-items: start; text-align: left; }
  .gate-thumbs {
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    padding: 0.25rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gate-thumbs::-webkit-scrollbar { display: none; }
  .gate-thumb { width: 5.25rem; }
  .gate-actions { width: 100%; }
  .gate-actions > * { flex: 1 1 8rem; padding: 0 1rem; }
  /* Room for the picture: one line of facts, and the button already says
     where the covers lead. */
  .gate-copy { font-size: 0.97rem; }
  .gate-facts li:nth-child(3), .gate-now-kicker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-stage img, .gate-stage img.is-on { transform: none; transition: opacity 0.4s ease; }
}

/* The other language, top right where the atlas's top bar keeps its menu. */
.gate-lang {
  position: absolute;
  top: max(clamp(1rem, 2.5vw, 1.5rem), env(safe-area-inset-top));
  right: clamp(1rem, 2.5vw, 1.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.gate-lang[hidden] { display: none; }
.gate-lang svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gate-lang:hover { background: rgb(255 255 255 / 24%); }

/* The way down to the teachers' section: quiet beside the two buttons. */
.gate-teachers-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 82%);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.gate-teachers-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-teachers-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===== FOR TEACHERS =====
   Under the front door and gone with it: the theme's own page colours, the
   pitch on the left and the wish form on the right. */
.access-gate[hidden] + .gate-teachers,
.atlas-direct .gate-teachers { display: none !important; }

.gate-teachers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 4.5vw, 4rem);
  scroll-margin-top: 0;
  color: var(--text);
}

.teachers-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate-teachers h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.teachers-lead {
  max-width: 34rem;
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--muted);
}

.teachers-points {
  display: grid;
  max-width: 34rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.teachers-points li {
  display: grid;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--border);
}
.teachers-points b { font-weight: 600; }
.teachers-points span { color: var(--muted); font-size: 0.95rem; }

.teachers-examples { margin-top: 2.25rem; }
.teachers-examples[hidden] { display: none; }
.teachers-examples-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.teachers-examples-head a { color: var(--muted); text-decoration: none; }
.teachers-examples-head a::after { content: " \2192"; }
.teachers-examples-head a:hover { color: var(--text); }

.teachers-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.teachers-cover { display: grid; gap: 0.45rem; color: var(--text); text-decoration: none; }
.teachers-cover img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.9rem;
  background: var(--surf);
  transition: transform 0.25s;
}
.teachers-cover span { font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.teachers-cover:hover img { transform: scale(1.02); }

.teachers-form {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.5rem;
  background: var(--surf);
}
.teachers-form label { margin-top: 0.45rem; font-size: 0.9rem; font-weight: 600; }
.teachers-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  outline: none;
}
.teachers-form select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%238a88a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
}
.teachers-form textarea { resize: vertical; min-height: 5.5rem; line-height: 1.45; }
.teachers-form :is(input, select, textarea):focus { border-color: var(--text); }
.teachers-form ::placeholder { color: var(--muted); opacity: 0.75; }

.teachers-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.teachers-pair > div { display: grid; gap: 0.5rem; align-content: start; }

.teachers-send {
  min-height: 52px;
  margin-top: 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}
.teachers-send:hover:not(:disabled) { transform: scale(1.015); }
.teachers-send:disabled { opacity: 0.55; cursor: default; }
.gate-teachers :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.teachers-privacy { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
.teachers-status { margin: 0.2rem 0 0; font-weight: 600; text-align: center; }
.teachers-status:empty { display: none; }
.teachers-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 860px) {
  .gate-teachers { grid-template-columns: minmax(0, 1fr); padding: 3.5rem 1rem 3rem; }
  .gate-teachers h2 { max-width: none; }
  .teachers-pair { grid-template-columns: minmax(0, 1fr); }
}


.access-form {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.4rem;
  width: 100%;
}

.access-form label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.access-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

.access-row input {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surf);
  padding: 0.8rem 1.1rem;
  color: var(--text);
  font: inherit;
  text-align: left;
  outline: none;
}

.access-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.access-row button {
  border: none;
  padding: 0 1.2rem;
  margin: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: 'Nunito', var(--font);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s;
}

.access-row button:hover { filter: brightness(1.08); }

.access-error {
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
}

.access-load-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
}

.access-load-error[hidden] { display: none; }

.access-load-error button {
  min-height: 44px;
  flex: none;
  padding: 0 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.access-load-error button:disabled { opacity: 0.55; cursor: wait; }

/* On the picture, the error is white on a red glass, so it can be read. */
.access-gate .access-load-error {
  margin-top: 0.25rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-radius: 1rem;
  background: rgb(180 30 40 / 72%);
  color: #fff;
  text-shadow: none;
}
.access-gate .access-load-error p { margin: 0; }