/* /join/ — newsletter signup.
   One section: a full-bleed picture with the signup form centred on top of it.
   The form is the whole page, so there is no surrounding copy to lay out
   against. Deliberately does not use the shared theme components — only the
   brand colour tokens and Plus Jakarta Sans from /css/theme.css. Everything is
   scoped under .join so nothing here can reach a theme class, and vice versa. */

.join{
    --join-ink:#0B0A2E;          /* deeper than --blue, for the full-bleed ground */
    --join-indigo:#120F64;
    --join-gold:#FFE100;
    --join-paper:#F4F1E8;
    --join-form-line:#C9C4B4;
    --join-form-meta:#5B5A72;
    --join-gut:clamp(18px, 4vw, 64px);

    display:block;
    background:var(--join-ink);
    color:var(--join-paper);
    font-family:"Plus Jakarta Sans", system-ui, sans-serif;
    overflow-x:hidden;
}

/* Reset written with :where() so it computes to (0,1,0) — ordinary
   single-class rules below still win without any !important. */
.join :where(h1,p){margin:0;padding:0;border:0}
.join :where(h1){color:inherit;font-weight:800}
.join :where(p){color:inherit;line-height:1.6}

/* ══ the one section ══ */
.join .join-hero{
    position:relative;
    min-height:min(92vh, 940px);
    display:grid;
    align-content:start;
    padding:clamp(34px,6vh,72px) var(--join-gut) clamp(34px,5vh,64px);
    isolation:isolate;
}
.join .join-hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background-image:url("/media/join/hero-university-archway-courtyard.jpg?v=cd92d05367");
    background-size:cover;background-position:50% 42%;
}
.join .join-hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    /* Only a vertical wash now. The horizontal one existed to darken the left
       third behind the display type; with the card centred it would just make
       the picture look lit from one side for no reason. */
    background:linear-gradient(180deg, rgba(11,10,46,0.82) 0%, rgba(11,10,46,0.4) 26%, rgba(11,10,46,0.9) 74%, #0B0A2E 100%);
}

/* The page is the form and nothing else, so the card is a single centred
   column over the picture rather than one half of a two-column hero. */
.join .join-grid{
    display:grid;justify-items:center;align-items:start;
    max-width:720px;margin:0 auto;width:100%;
}

/* ── the form ── */
.join .join-form{
    background:var(--join-paper);color:var(--join-ink);
    padding:clamp(24px,3vw,40px);
    display:grid;gap:14px;align-self:start;width:100%;
}
.join .join-form-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding-bottom:14px;border-bottom:1px solid var(--join-form-line);
}
/* The only heading left on the page, so it carries the h1 — sized as a label
   rather than a display line, because the form is the page. */
.join .join-form-head h1{
    font-size:0.68rem;font-weight:800;letter-spacing:0.24em;text-transform:uppercase;
    line-height:1.2;color:var(--join-indigo);
}
.join .join-form-head b{font-size:0.7rem;font-weight:700;letter-spacing:0.06em;color:var(--join-form-meta)}

/* The form itself is a Microsoft Forms embed, so the fields are Microsoft's to
   style, not ours. All we own is the frame around it: the paper card above and
   the box below. The iframe is given a white ground and a hairline so it reads
   as a deliberate inset rather than a hole punched in the card. */
.join .join-embed{
    display:block;width:100%;max-width:100%;
    /* Tall enough that the whole Microsoft form — all four questions plus the
       submit button — fits without the iframe scrolling internally. A nested
       scroll area inside a page that already scrolls is the thing to avoid, so
       this is a fixed height rather than a viewport-relative one: the form's
       content height does not shrink just because the window is short.
       If questions are added or removed in Microsoft Forms, re-measure and
       update this number — the page cannot read the embed's height itself. */
    height:1080px;
    border:1px solid var(--join-form-line);
    background:#FFFFFF;
}

.join .join-fineprint{font-size:0.76rem;line-height:1.55;color:var(--join-form-meta)}

/* ── responsive ── */
@media (max-width:1000px){
    .join .join-hero{min-height:auto}
}
@media (max-width:620px){
    /* narrow columns wrap the question text onto more lines, so the embed
       needs more height here, not less */
    .join .join-embed{height:1260px}
}