/* ==========================================================================
   Student Hub — the coming-soon page (public.student-hub)
   One cream surface from the hero down, one warm-charcoal island for the
   courses, photographs that dissolve into the page instead of ending on a line.
   ========================================================================== */
.hub-hero,
.hub-ai,
.hub-goodies,
.hub-close,
.hub-courses-wrap {
    background: #fcfbf8;
}

.hub-h2 {
    margin: 0;
    font-family: var(--font-display), Georgia, serif;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
}

.hub-h2--light {
    color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   Hero: the photograph owns the fold, the headline is set on it
   -------------------------------------------------------------------------- */
.hub-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(32rem, 84vh, 47rem);
    display: flex;
    align-items: center;
}

.hub-hero__img {
    position: absolute;
    top: 0;
    right: 0;
    width: 68%;
    height: 100%;
    z-index: -1;
    object-fit: cover;
    object-position: 40% 28%;
    filter: sepia(0.28) saturate(0.9);
    /* The image's own pixels fade out at the left and the bottom, so it
       melts into the page with no seam. */
    -webkit-mask-image:
        linear-gradient(to bottom, #000 0, #000 68%, rgba(0, 0, 0, 0.9) 74%, rgba(0, 0, 0, 0.72) 80%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.26) 92%, rgba(0, 0, 0, 0.08) 97%, transparent 100%),
        linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.35) 11%, rgba(0, 0, 0, 0.62) 18%, rgba(0, 0, 0, 0.86) 26%, #000 36%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to bottom, #000 0, #000 68%, rgba(0, 0, 0, 0.9) 74%, rgba(0, 0, 0, 0.72) 80%, rgba(0, 0, 0, 0.5) 86%, rgba(0, 0, 0, 0.26) 92%, rgba(0, 0, 0, 0.08) 97%, transparent 100%),
        linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.12) 5%, rgba(0, 0, 0, 0.35) 11%, rgba(0, 0, 0, 0.62) 18%, rgba(0, 0, 0, 0.86) 26%, #000 36%);
    mask-composite: intersect;
}

.hub-hero__inner {
    width: 100%;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hub-hero__copy {
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.hub-hero__status {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--brass-deep);
}

.hub-hero__title {
    margin: 0;
    font-family: var(--font-display), Georgia, serif;
    font-size: clamp(2.3rem, 4.6vw, 3.9rem);
    line-height: 1.03;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--ink);
    text-wrap: balance;
}

.hub-hero__title em {
    font-style: italic;
    color: var(--brass);
}

.hub-hero__lede {
    margin: 0;
    max-width: 30rem;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.55;
    color: var(--ink-soft);
}

.hub-hero__signup {
    margin-top: 0.5rem;
    scroll-margin-top: 1.5rem;
}

.hub-hero__fine {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Sign-up form (hero and close): underlined field, square button
   -------------------------------------------------------------------------- */
.hub-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    max-width: 32rem;
}

.hub-form__input {
    flex: 1 1 14rem;
    min-width: 0;
    padding: 0.8rem 0.1rem;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
}

.hub-form__input::placeholder {
    color: var(--ink-faint);
}

.hub-form__input:focus-visible {
    outline: none;
    border-bottom-color: var(--brass);
    box-shadow: 0 2px 0 0 var(--brass);
}

.hub-form__input[aria-invalid="true"] {
    border-bottom-color: var(--terracotta);
}

.hub-form__btn {
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 3px;
    background: var(--brass);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.hub-form__btn:hover,
.hub-form__btn:focus-visible {
    background: var(--brass-deep);
}

.hub-form__ok,
.hub-form__err {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.hub-form__ok {
    color: var(--brass-deep);
    max-width: 30rem;
}

.hub-form__err {
    margin-top: 0.6rem;
    color: #a2431a;
}

/* --------------------------------------------------------------------------
   AI: photograph left, the four tools right
   -------------------------------------------------------------------------- */
.hub-ai {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hub-ai__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hub-ai__photo,
.hub-close__photo {
    margin: 0;
    overflow: hidden;
    border-radius: 4px;
}

.hub-ai__photo {
    aspect-ratio: 4 / 5;
}

.hub-ai__photo img,
.hub-close__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-ai__photo img {
    object-position: 30% 50%;
}

.hub-ai__list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.4rem;
}

.hub-ai__list h3,
.hub-courses__list h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}

.hub-ai__list p,
.hub-courses__list p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.hub-ai__note {
    margin: 1.75rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brass-deep);
}

/* --------------------------------------------------------------------------
   Courses: a warm-charcoal island, the library fading in from the right
   -------------------------------------------------------------------------- */
.hub-courses-wrap {
    padding-block: clamp(0.5rem, 2vw, 1.5rem);
}

.hub-courses {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    overflow: hidden;
    border-radius: 6px;
    background: var(--inkwell);
    color: var(--on-dark);
}

.hub-courses__body {
    padding: clamp(1.75rem, 4.5vw, 3.75rem);
    position: relative;
    z-index: 1;
}

.hub-courses__list {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.hub-courses__list li {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 0.25rem 1.5rem;
    align-items: baseline;
}

.hub-courses__list h3 {
    margin: 0;
    color: var(--on-dark);
}

.hub-courses__list p {
    color: var(--on-dark-soft);
}

.hub-courses__note {
    margin: 1.75rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brass-bright);
}

.hub-courses__photo {
    position: relative;
    min-height: 100%;
}

.hub-courses__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 0.3) 16%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0.8) 38%, #000 52%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.1) 8%, rgba(0, 0, 0, 0.3) 16%, rgba(0, 0, 0, 0.55) 26%, rgba(0, 0, 0, 0.8) 38%, #000 52%);
}

/* --------------------------------------------------------------------------
   Goodies: heading left, a ledger of what you get on the right
   -------------------------------------------------------------------------- */
.hub-goodies {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.hub-goodies__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 5vw, 4.5rem);
    align-items: start;
}

.hub-goodies__head p {
    margin: 1rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.hub-goodies__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-goodies__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.1rem;
}

.hub-goodies__list li:nth-child(odd) {
    background: var(--brass-wash);
}

.hub-goodies__name {
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
}

.hub-goodies__fmt {
    flex: none;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brass-deep);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Close
   -------------------------------------------------------------------------- */
.hub-close {
    padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 7vw, 6rem);
}

.hub-close__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hub-close__photo {
    aspect-ratio: 3 / 2;
}

.hub-close__body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.hub-close__lede {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.hub-close__live {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.hub-close__live a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--brass-bright);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.hub-close__live a:hover,
.hub-close__live a:focus-visible {
    color: var(--brass-deep);
}

/* --------------------------------------------------------------------------
   Motion: only things already on screen move, and never for reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .hub-hero__img {
        animation: hub-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    @supports (animation-timeline: view()) {
        .hub-ai__photo img,
        .hub-close__photo img {
            height: 116%;
            animation: hub-parallax linear both;
            animation-timeline: view();
        }
    }
}

@keyframes hub-settle {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
}

@keyframes hub-parallax {
    from { transform: translateY(-7%); }
    to { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .hub-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .hub-hero__img {
        position: static;
        z-index: auto;
        width: 100%;
        height: clamp(15rem, 48vw, 22rem);
        object-position: 62% 25%;
        -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.8) 72%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.8) 72%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.2) 92%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }

    .hub-hero__inner {
        padding-block: 0.5rem 2.5rem;
    }

    .hub-ai__grid,
    .hub-goodies__grid,
    .hub-close__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hub-ai__photo {
        aspect-ratio: 3 / 2;
    }

    .hub-courses {
        grid-template-columns: minmax(0, 1fr);
    }

    .hub-courses__photo {
        min-height: 12rem;
        order: -1;
    }

    .hub-courses__photo img {
        -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.85) 46%, #000 62%);
        mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, 0.2) 12%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.85) 46%, #000 62%);
    }
}

@media (max-width: 560px) {
    .hub-courses__list li {
        grid-template-columns: minmax(0, 1fr);
    }

    .hub-form__btn {
        width: 100%;
    }

    .hub-goodies__list li {
        padding-inline: 0.85rem;
    }

    .hub-goodies__name {
        font-size: 1.125rem;
    }
}

/* One warm grade across every photograph, so they read as a single set. */
.hub-ai__photo img,
.hub-close__photo img,
.hub-courses__photo img {
    filter: sepia(0.28) saturate(0.9);
}

.hub-goodies__more {
    font-weight: 600;
    color: var(--brass-deep);
}