/* ------------------------------------------------------------------ */
/* AUTHOR                                                               */
/* Per-page stylesheet for the author pages, linked after about.css     */
/* through asset_url(). An author page is part of the about family:     */
/* <main class="about author"> takes the tokens, shell, bands, eyebrow, */
/* titles, buttons, links and closing band from about.css, and this    */
/* sheet adds only what the author page has on its own: the portrait   */
/* hero with its facts, the first-person block, the guide cards and    */
/* the purple reach-me panel.                                           */
/* ------------------------------------------------------------------ */

.author {
    /* the readable gold on cream: the about gold only works on dark */
    --author-gold-ink: #a0740a;
    --author-shadow-hover: 0 16px 32px -22px rgba(36, 27, 52, .55);
}

/* ---------------------------------- */
/* -------------- HERO -------------- */
/* ---------------------------------- */

/* a purple strip runs across the top of the band and the portrait overlaps it.
   The grid's first row is exactly the strip's overlap and the words sit in the
   row below, so however far they wrap they never land on the purple */
.author-hero {
    --author-hero-overlap: 160px;

    background-image: linear-gradient(to bottom, var(--about-purple) calc(var(--about-band) + var(--author-hero-overlap)), transparent 0);
}
.author-hero__grid {
    display: grid;
    grid-template-rows: var(--author-hero-overlap) auto;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--about-gap);
    min-height: 640px;
}
/* the frame has a fixed shape, so every author's photo is the same size: neither
   the original's shape nor the length of the words beside it changes it */
.author-hero__photo {
    position: relative;
    grid-row: 1 / span 2;
    grid-column: 1 / span 6;
    align-self: start;
    aspect-ratio: 9 / 10;
    margin: 0;
}
.author-hero__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 30px 60px -34px rgba(36, 27, 52, .55);
    border-radius: var(--about-radius-xl);
    object-fit: cover;
}
/* where the photo was taken, as a pill on it, like the how it works hero's */
.author-hero__caption {
    position: absolute;
    bottom: 16px;
    left: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .45rem .85rem;
    background-color: rgba(255, 255, 255, .92);
    border-radius: var(--about-radius-pill);
    color: var(--about-ink);
    font-size: .85rem;
    font-weight: 600;
}
.author-hero__caption svg {
    flex: none;
}
.author-hero__text {
    grid-row: 2;
    grid-column: 8 / span 5;
    align-self: center;
}
.author-hero__title {
    margin-bottom: 18px;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: .95;
    letter-spacing: -.04em;
}
.author-hero__role {
    max-width: 30ch;
    margin-bottom: 36px;
    color: var(--about-ink);
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    line-height: 1.4;
    text-wrap: pretty;
}
.author-hero__back {
    color: var(--about-go-dark);
    font-weight: 600;
    text-decoration: none;
}
.author-hero__back:hover {
    color: var(--about-go-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.author-hero__back::before {
    content: "← ";
    content: "← " / "";
}

/* two facts, plain text on the cream with a rule between them */
.author-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 32px;
    margin: 0 0 36px;
}
.author-facts__item {
    min-width: 0;
}
.author-facts__item + .author-facts__item {
    padding-left: 32px;
    border-left: 1px solid var(--about-line);
}
.author-facts__figure {
    display: block;
    font-family: var(--about-font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--author-gold-ink);
}
.author-facts__label {
    display: block;
    margin-top: 6px;
    color: var(--about-muted);
    font-size: .8125rem;
}

/* ---------------------------------- */
/* --------- IN MY OWN WORDS -------- */
/* ---------------------------------- */

/* tighter on top than a normal band: the breadcrumb strip above already gives it air */
.author-words {
    padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.author-words__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--about-gap);
}
.author-words__title {
    grid-column: 1 / span 4;
}
.author-words__text {
    grid-column: 6 / span 7;
}
.author-words__text p {
    max-width: 62ch;
    font-size: 1.125rem;
    line-height: 1.62;
}
.author-words__text p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------- */
/* ------------- GUIDES ------------- */
/* ---------------------------------- */

.author-guides__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--about-gap);
    margin-top: 36px;
}
/* white cards on the cream band */
.author-guide {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--about-white);
    border-radius: var(--about-radius);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
}
.author-guide:hover {
    box-shadow: var(--author-shadow-hover);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}
.author-guide img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.author-guide__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}
/* clamped to two lines, so every card in a row is the same height and the
   meta lands on the same line */
.author-guide__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: calc(2 * 1.3em);
    margin-bottom: 12px;
    font-size: 1.25rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color .16s ease;
}
.author-guide:hover .author-guide__title {
    color: var(--about-go-dark);
}
.author-guide__meta {
    margin: auto 0 0;
    color: var(--about-muted);
    font-size: .875rem;
}
.author-guides__all {
    margin: 32px 0 0;
}

/* ---------------------------------- */
/* ------------ REACH ME ------------ */
/* ---------------------------------- */

/* one purple panel, echoing the hero strip: who you are writing to on the
   left, the two ways to reach her on the right */
.author-reach__panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    padding: 56px;
    background-color: var(--about-purple);
    box-shadow: 0 30px 60px -34px rgba(36, 27, 52, .7);
    border-radius: var(--about-radius-xl);
    color: var(--about-purple-text);
}
.author-reach__avatar {
    overflow: hidden;
    width: 88px;
    height: 88px;
    margin-bottom: 24px;
    border: 3px solid var(--about-gold);
    border-radius: 50%;
}
/* the crop is set per author on the img itself, where each face sits differently */
.author-reach__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-reach__title {
    color: white;
}
.author-reach__lede {
    max-width: 34ch;
    margin: 0;
    color: var(--about-purple-text);
    font-size: 1.125rem;
    line-height: 1.5;
}

/* the routes, split by a hairline */
.author-reach__route {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 20px;
}
.author-reach__route + .author-reach__route {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.author-reach__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: var(--about-gold);
}
.author-reach__route-title {
    margin-bottom: 8px;
    color: white;
    font-size: 1.25rem;
}
.author-reach__text {
    margin-bottom: 20px;
    color: var(--about-purple-text);
}
.author-reach__promise {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--about-purple-tint);
    font-size: .875rem;
    line-height: 1.5;
}
.author-reach__check {
    flex: none;
    margin-top: 2px;
    color: var(--about-gold);
}
/* one round icon button per profile, white on the purple like the outline button */
.author-reach__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.author-reach__social {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background-color: var(--about-white);
    border-radius: 50%;
    color: var(--about-purple);
    transition: background-color .16s ease, transform .12s ease;
}
.author-reach__social:hover {
    background-color: var(--about-gold);
    color: var(--about-purple);
}
.author-reach__social:active {
    transform: translateY(1px);
}

/* ---------------------------------- */
/* ----------- RESPONSIVE ----------- */
/* ---------------------------------- */

@media only screen and (max-width: 1024px) {
    /* tablet: the words lose the spacer column beside the photo */
    .author-hero__text {
        grid-column: 7 / span 6;
    }
    .author-words__title {
        grid-column: 1 / span 5;
    }
    .author-reach__panel {
        gap: 40px;
        padding: 44px;
    }
}
@media only screen and (max-width: 900px) {
    .author-guides__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* the panel stacks: the avatar beside the heading, the intro under both,
       and the routes under a hairline */
    .author-reach__panel {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .author-reach__intro {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 20px;
    }
    .author-reach__avatar {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
    .author-reach__eyebrow {
        grid-column: 2;
        align-self: end;
        margin-bottom: 4px;
    }
    .author-reach__title {
        grid-column: 2;
        align-self: start;
        margin-bottom: 0;
    }
    .author-reach__lede {
        grid-column: 1 / -1;
        max-width: 60ch;
        margin-top: 22px;
    }
    .author-reach__routes {
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }
}
@media only screen and (max-width: 760px) {
    /* the hero stacks and the name, eyebrow and role lie over the foot of the
       photo on a dark fade; the facts and the back link follow under it. The
       strip only has to stay shorter than the photo */
    .author-hero {
        --author-hero-overlap: 120px;
    }
    .author-hero__grid {
        grid-template-rows: none;
        grid-template-columns: 1fr;
        min-height: 0;
    }
    /* the text block steps aside so the intro, facts and link become grid items:
       the intro shares the photo's cell, the other two take the rows below */
    .author-hero__text {
        display: contents;
    }
    .author-hero__photo,
    .author-hero__intro {
        grid-row: 1;
        grid-column: 1;
    }
    /* the img sets the frame's shape here, by its own aspect ratio below */
    .author-hero__photo {
        aspect-ratio: auto;
    }
    .author-hero__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(20, 14, 30, .92) 0%, rgba(20, 14, 30, .62) 42%, rgba(20, 14, 30, 0) 72%);
        border-radius: var(--about-radius-xl);
        pointer-events: none;
    }
    /* the photo is back in the flow and sets its own height by the aspect ratio;
       height: auto, or the img's height attribute wins over the aspect ratio */
    .author-hero__photo img {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
        object-position: 50% 30%;
    }
    /* the pill moves to the top corner, leaving the foot of the photo to the words */
    .author-hero__caption {
        top: 12px;
        bottom: auto;
        left: 12px;
        padding: .4rem .75rem;
        font-size: .78rem;
        white-space: nowrap;
    }
    .author-hero__intro {
        position: relative;
        z-index: 1;
        align-self: end;
        padding: 0 24px 24px;
        text-shadow: 0 1px 14px rgba(20, 14, 30, .45);
    }
    .author-hero__eyebrow {
        margin-bottom: 6px;
        color: var(--about-gold-light);
    }
    .author-hero__title {
        margin-bottom: 10px;
        color: white;
        font-size: clamp(3rem, 13vw, 4.5rem);
    }
    .author-hero__role {
        max-width: 36ch;
        margin: 0;
        color: var(--about-purple-text);
        font-size: 1.0625rem;
    }
    /* the facts keep one row of equal columns, so a long label wraps inside its
       own column instead of pushing the next fact onto a line of its own */
    .author-facts {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: 20px;
        margin: 0;
    }
    .author-facts__item + .author-facts__item {
        padding-left: 20px;
    }
    .author-hero__back {
        justify-self: start;
    }
    .author-words__title,
    .author-words__text {
        grid-column: 1 / -1;
    }
    .author-words__text p {
        font-size: 1.0625rem;
    }
}
@media only screen and (max-width: 560px) {
    /* the photo goes portrait so the words on it leave the face in view */
    .author-hero__photo img {
        aspect-ratio: 4 / 5;
    }
    .author-hero__intro {
        padding: 0 20px 20px;
    }

    /* the guides become compact rows: a square thumbnail beside the title */
    .author-guides__grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 28px;
    }
    .author-guide {
        flex-direction: row;
    }
    .author-guide img {
        flex: none;
        align-self: stretch;
        width: 112px;
        aspect-ratio: 1 / 1;
    }
    .author-guide__body {
        justify-content: center;
        padding: 14px 16px;
    }
    .author-guide__title {
        min-height: 0;
        margin-bottom: 6px;
        font-size: 1.0625rem;
        -webkit-line-clamp: 3;
    }
    .author-guide__meta {
        margin: 0;
        font-size: .8125rem;
    }

    .author-reach__panel {
        padding: 28px 20px;
        border-radius: var(--about-radius-lg);
    }
    .author-reach__avatar {
        width: 64px;
        height: 64px;
    }
    .author-reach__lede {
        font-size: 1.0625rem;
    }
    /* each route: the icon on the title's line, the rest full width under it.
       The body steps aside so its children join the route's grid */
    .author-reach__route {
        grid-template-columns: 36px minmax(0, 1fr);
        align-items: center;
        gap: 0 14px;
    }
    .author-reach__route + .author-reach__route {
        margin-top: 28px;
        padding-top: 28px;
    }
    .author-reach__icon {
        width: 36px;
        height: 36px;
    }
    .author-reach__body {
        display: contents;
    }
    .author-reach__body > * {
        grid-column: 1 / -1;
    }
    .author-reach__route-title {
        grid-column: 2;
        margin: 0;
    }
    .author-reach__text {
        margin: 12px 0 18px;
    }
    /* a full-width button: a bigger target, and the label may wrap */
    .author-reach .about-btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }
}