/* /students -- the page a flyer's QR code opens (public/students.html).

   It stands in the grove, the converter's world: the chrysalis is the
   site's own first frame, and the page wears the grove's values from
   themes.css (data-room="convert" on the body). Like /compare and
   /showcase it is the building's dark, a film page with no light version.

   On a phone, which is how almost everybody arrives here, the world is a
   band at the top and the words stand on the ground below it, where nothing
   competes with them. Wider, the world fills the first screen and the words
   stand at its foot on the left, under a veil that leaves the chrysalis
   clear.

   Four languages are in the page; the one shown is html[data-lang]
   (js/students-early.js, before the first paint). */

.st {
  --st-ground: #0B0D10;
  --st-ground-alt: #13161A;
  --st-raise: #1A1E23;
  --st-ink: #EEF1F0;
  --st-ink-2: rgba(238, 241, 240, 0.72);
  --st-ink-3: rgba(238, 241, 240, 0.56);
  --st-rule: rgba(238, 241, 240, 0.14);
  --st-pad: clamp(var(--s4), 4vw, var(--s7));
  --st-title: clamp(var(--t-2xl), 6vw, 4.75rem);

  display: block;
  min-height: 100svh;
  background: var(--st-ground);
  color: var(--st-ink);
}
.st-html { background: #0B0D10; }
/* The building's `main` is a centred flex box for its one stage; this is a page. */
.st-main { display: block; padding: 0; }

/* One language at a time: of the four spans in each place, the one that is
   not the page's language is not shown (English when nothing has chosen). */
html[data-lang="en"] [data-t] > :not([lang="en"]),
html[data-lang="fr"] [data-t] > :not([lang="fr"]),
html[data-lang="de"] [data-t] > :not([lang="de"]),
html[data-lang="it"] [data-t] > :not([lang="it"]),
html:not([data-lang]) [data-t] > :not([lang="en"]) { display: none; }

/* --- the head ------------------------------------------------------------- */

.st-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--st-pad);
}
.st-home {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--st-ink); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  border-radius: var(--radius-control);
}
.st-home__mark {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(var(--shade-rgb) / 0.55);
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-xs); letter-spacing: 0.06em;
}
.st-home__name { text-shadow: 0 1px 12px rgb(var(--shade-rgb) / 0.7); }

/* The four languages: one capsule on the world, the page's own pill lit. */
.st-langs {
  display: flex; gap: 2px; padding: 2px;
  border-radius: var(--radius-control);
  background: rgb(var(--shade-rgb) / 0.55);
}
.st-lang {
  min-width: 44px; height: 44px; padding: 0 var(--s3);
  border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--st-ink-2);
  font: 600 var(--t-xs) / 1 var(--font-ui); letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.st-lang:hover { color: var(--st-ink); background: rgba(238, 241, 240, 0.08); }
html[data-lang="en"] .st-lang[data-lang="en"],
html[data-lang="fr"] .st-lang[data-lang="fr"],
html[data-lang="de"] .st-lang[data-lang="de"],
html[data-lang="it"] .st-lang[data-lang="it"],
html:not([data-lang]) .st-lang[data-lang="en"] { color: var(--st-ink); background: rgba(238, 241, 240, 0.18); }

/* --- the first screen ------------------------------------------------------ */

.st-hero { position: relative; display: grid; }
.st-hero__world { position: relative; height: max(300px, 46svh); overflow: hidden; }
.st-hero__poster {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 38%;
}
/* The grove's own shade, over the top for the head and into the ground at
   the foot, so the band ends where the words begin without a line. */
.st-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgb(var(--shade-rgb) / 0.62) 0,
    rgb(var(--shade-rgb) / 0) 30%,
    rgb(var(--shade-rgb) / 0) 58%,
    var(--st-ground) 100%);
}
.st-hero__words {
  position: relative;
  display: grid; gap: var(--s4);
  padding: 0 var(--st-pad) var(--s8);
  margin-top: calc(-1 * var(--s6));
}

.st-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--st-title);
  line-height: 0.98;
  letter-spacing: var(--track-display);
  text-wrap: balance;
  max-width: 13ch;
}
.st-what { font-size: var(--t-md); line-height: 1.45; color: var(--st-ink-2); max-width: 38ch; }
.st-promise { font-size: var(--t-base); font-weight: 600; line-height: 1.45; color: var(--st-ink); max-width: 40ch; }

.st-go {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 56px; margin-top: var(--s2); padding: 0 var(--s6);
  border-radius: var(--radius-control);
  background: var(--signal-fill); color: var(--signal-ink);
  font-size: var(--t-base); font-weight: 600; line-height: 1.2; text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-state) var(--ease);
}
.st-go::after {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: translate var(--dur-state) var(--ease);
}
.st-go:hover { background: var(--signal-fill-hover); }
.st-go:hover::after { translate: 2px 0; }
.st-fine { font-size: var(--t-sm); line-height: 1.5; color: var(--st-ink-3); max-width: 46ch; }

/* --- what happens next, and which addresses count ---------------------------- */

.st-more {
  display: grid; gap: var(--s8);
  padding: var(--s8) var(--st-pad) var(--s9);
  background: var(--st-ground-alt);
}
.st-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-xl); line-height: var(--lh-tight); letter-spacing: -0.02em;
  margin-bottom: var(--s5);
}

.st-steps { list-style: none; margin: 0; padding: 0; }
.st-step {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s4);
  padding: var(--s5) 0;
  border-top: var(--hairline) solid var(--st-rule);
}
.st-step:last-child { border-bottom: var(--hairline) solid var(--st-rule); }
.st-step__n { color: var(--signal); font-size: var(--t-lg); line-height: 1.15; }
.st-step p { font-size: var(--t-md); line-height: 1.5; max-width: 52ch; }

.st-lede { color: var(--st-ink-2); line-height: 1.5; max-width: 46ch; margin-bottom: var(--s5); }
/* Closed, the list says what is in it; the arrow turns as it opens. */
.st-open {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 52px; padding: 0 var(--s5);
  border: 0; border-radius: var(--radius-control);
  background: var(--st-raise); color: var(--st-ink);
  font: inherit; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-state) var(--ease);
}
.st-open::after {
  content: ""; flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-state) var(--ease);
}
.st-open[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.st-open:hover { background: rgba(238, 241, 240, 0.12); }
.st-list { padding-top: var(--s2); }
.st-h3 { font-size: var(--t-sm); font-weight: 600; color: var(--st-ink-3); margin: var(--s6) 0 var(--s2); }
.st-group { list-style: none; margin: 0; padding: 0; }
.st-school {
  display: grid; gap: 2px;
  padding: var(--s3) 0;
  border-top: var(--hairline) solid var(--st-rule);
}
.st-school__name { font-size: var(--t-sm); }
.st-school__domains { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--t-xs); color: var(--st-ink-2); overflow-wrap: anywhere; }
.st-missing { margin-top: var(--s6); font-size: var(--t-sm); line-height: 1.5; color: var(--st-ink-2); max-width: 46ch; }
.st-missing a { color: var(--st-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }

.st-foot { color: var(--st-ink-3); background: var(--st-ground-alt); }
.st-foot a { color: var(--st-ink-2); }
.st-foot .footer__contract { color: var(--st-ink); }

.st-go:focus-visible, .st-open:focus-visible, .st-lang:focus-visible, .st-home:focus-visible {
  outline: 2px solid var(--st-ink); outline-offset: 3px;
}

/* --- a phone ---------------------------------------------------------------- */

@media (max-width: 699px) {
  .st-home__name { display: none; }
  .st-go { justify-self: stretch; padding: 0 var(--s5); }
}

/* --- wider: the world is the whole first screen ------------------------------- */

@media (min-width: 900px) {
  .st-hero { min-height: clamp(640px, 100svh, 1000px); }
  .st-hero__world { position: absolute; inset: 0; height: auto; }
  .st-hero__poster { object-position: 50% 50%; }
  .st-hero__veil {
    background:
      linear-gradient(90deg,
        rgb(var(--shade-rgb) / 0.86) 0,
        rgb(var(--shade-rgb) / 0.66) 30%,
        rgb(var(--shade-rgb) / 0.10) 56%,
        rgb(var(--shade-rgb) / 0) 72%),
      linear-gradient(180deg,
        rgb(var(--shade-rgb) / 0.55) 0,
        rgb(var(--shade-rgb) / 0) 22%,
        rgb(var(--shade-rgb) / 0) 70%,
        var(--st-ground-alt) 100%);
  }
  .st-hero__words {
    align-self: end;
    margin: 0;
    padding: var(--s9) var(--st-pad) var(--s8);
    max-width: min(40rem, 46vw);
  }
  .st-more {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s9);
    align-items: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-go, .st-go::after, .st-open, .st-open::after, .st-lang { transition: none; }
}

/* A finger's reach (styles.css, DESIGN.md 2.5): the home mark lends a finger
   44 px; the language pills are 44 px already, side by side. */
@media (pointer: coarse) {
  :where(.st-home) { position: relative; }
  :where(.st-home)::after { content: ""; position: absolute; inset: var(--hit-reach); }
}