/* The About page: after the page head, what Logixcel believes in large type
   (the page's one moment), who it works for on two photo panels, how it
   works beside a photo, and the close on a panel over the Beams' grid. */

main > section:not(.page-head) {
    padding-block-start: var(--space-16);
}

.about-close {
    padding-block-end: var(--space-16);
}

@media (min-width: 48rem) {
    main > section:not(.page-head) {
        padding-block-start: var(--space-24);
    }

    .about-close {
        padding-block-end: var(--space-24);
    }
}

main h2 {
    margin: 0;
    font-size: var(--text-display-sm);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
}

main h3 {
    margin: 0;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-snug);
}

.about-text {
    max-inline-size: var(--measure);
    margin-block: var(--space-5) 0;
    color: var(--muted-foreground);
    font-size: var(--text-lead);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* ---- What we believe: three opinions in large type, each under a rule
   lit in Neon ---- */

.about-views h2 {
    color: var(--green-text);
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
}

.views {
    display: grid;
    gap: var(--space-10);
    margin-block: var(--space-8) 0;
    padding: 0;
    list-style: none;
}

.view {
    position: relative;
    display: grid;
    gap: var(--space-4) var(--space-16);
    padding-block-start: var(--space-6);
    border-block-start: var(--border-width) solid var(--border-strong);
}

/* The Neon over the rule, from the start edge. */
.view::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--border-width) * -1);
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: var(--border-width);
    background: var(--green);
}

.view h3 {
    font-size: var(--text-display-md);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;
}

.view p {
    max-inline-size: var(--measure);
    margin: 0;
    color: var(--muted-foreground);
    font-size: var(--text-lead);
    line-height: var(--leading-relaxed);
    text-wrap: pretty;
}

/* From --breakpoint-lg each opinion's heading and line share a row. */
@media (min-width: 56.25rem) {
    .view {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: baseline;
    }
}

/* ---- Who we work for: two panels, the words over the foot of each photo ---- */

.who-list {
    display: grid;
    gap: var(--space-2);
    margin-block: var(--space-10) 0;
    padding: 0;
    list-style: none;
}

/* Each panel is three rows: open photo, then the heading and the words over
   the foot of it. The photo spans all three and sets the 4:5 shape on the
   Carbon card, which holds that shape until the photo loads, or if it never
   does. Side by side, the panels share their rows, so the headings line up. */
.who {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--card);
}

.who-photo {
    position: relative;
    z-index: var(--z-behind);
    grid-row: 1 / -1;
    grid-column: 1;
    aspect-ratio: 4 / 5;
    margin: 0;
}

.who-photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* The foot of the photo fades into the ground, so the words read on it. */
.who-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--background), color-mix(in srgb, var(--background) 75%, transparent) 40%, transparent 75%);
}

.who h3,
.who p {
    grid-column: 1;
    margin-inline: var(--space-6);
}

.who h3 {
    grid-row: 2;
    font-size: var(--text-3xl);
}

.who p {
    grid-row: 3;
    max-inline-size: var(--measure);
    margin-block: var(--space-3) var(--space-6);
    color: var(--muted-foreground);
}

.who-also {
    max-inline-size: var(--container-2xl);
    margin-block: var(--space-6) 0;
    color: var(--muted-foreground);
}

.who-also a {
    color: var(--foreground);
    text-underline-offset: var(--space-1);
}

@media (min-width: 48rem) {
    .who-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) auto auto;
        row-gap: 0;
    }

    .who {
        grid-row: span 3;
        grid-template-rows: subgrid;
    }

    .who h3,
    .who p {
        margin-inline: var(--space-10);
    }

    .who p {
        margin-block-end: var(--space-10);
    }
}

/* ---- How we work: four steps down the start side, the photo at the end ---- */

.about-how .wrap {
    display: grid;
    gap: var(--space-10);
}

.how-list {
    display: grid;
    gap: var(--space-6);
    margin-block: var(--space-10) 0;
    padding: 0;
    list-style: none;
}

.how {
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    align-items: baseline;
    padding-block-start: var(--space-5);
    border-block-start: var(--border-width) solid var(--border-strong);
}

.how-num {
    grid-row: span 2;
    color: var(--green-text);
    font-family: var(--font-heading);
    font-size: var(--text-ui);
    font-variant-numeric: tabular-nums;
}

.how h3 {
    font-size: var(--text-2xl);
}

.how p {
    margin-block: var(--space-2) 0;
    color: var(--muted-foreground);
}

.how-photo {
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--card);
}

.how-photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

@media (min-width: 56.25rem) {
    .about-how .wrap {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: var(--space-16);
    }
}

/* ---- The close: a raised panel over the Beams' grid and glow, without
   the falling lights ---- */

.close-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: start;
    overflow: hidden;
    padding-block: var(--space-16);
    padding-inline: var(--space-6);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card);
}

.close-panel h2 {
    max-inline-size: var(--container-xl);
    font-size: var(--text-display-md);
    line-height: var(--leading-display);
}

.close-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    margin-block-start: var(--space-8);
}

.close-email {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-target);
    font-size: var(--text-ui);
    text-underline-offset: var(--space-1);
}

@media (min-width: 48rem) {
    .close-panel {
        padding-block: var(--space-20);
        padding-inline: var(--space-16);
    }
}

/* ---- Motion ---- */

@keyframes view-draw {
    from {
        inline-size: 0;
    }
}

/* From the muted grey of the line under it. */
@keyframes view-light {
    from {
        color: var(--muted-foreground);
    }
}

/* As each opinion comes up the screen, the Neon draws in from the start
   edge and the heading lights. Where scroll-driven animations aren't
   supported, or motion is reduced, they are simply lit. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .view {
            view-timeline-name: --view;
        }

        .view::before {
            animation: view-draw linear both;
            animation-timeline: --view;
            animation-range: cover 10% cover 40%;
        }

        .view h3 {
            animation: view-light linear both;
            animation-timeline: --view;
            animation-range: cover 10% cover 40%;
        }
    }
}