/* ===================================================================
 * pages.css — inner pages, articles and the extra homepage sections
 * (added September 2026; loaded after styles.css)
 * ------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * ## entrance animation
 * Done in CSS rather than JavaScript so the content is always painted: a
 * blocked, slow or failed script can never leave the page invisible, and a
 * search engine rendering the page always sees the text.
 * -------------------------------------------------------------------- */
@keyframes ss-rise {
    from {
        opacity   : 0;
        transform : translateY(2.4rem);
    }

    to {
        opacity   : 1;
        transform : none;
    }
}

.animate-on-load {
    animation : ss-rise .7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

.animate-on-load:nth-of-type(2) { animation-delay : .09s; }
.animate-on-load:nth-of-type(3) { animation-delay : .18s; }
.animate-on-load:nth-of-type(4) { animation-delay : .27s; }
.animate-on-load:nth-of-type(5) { animation-delay : .36s; }

.s-header {
    animation : ss-rise .8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .animate-on-load,
    .s-header {
        animation : none;
    }
}

.no-js .animate-on-load,
.no-js [data-animate-el] {
    opacity   : 1 !important;
    transform : none !important;
}

/* --------------------------------------------------------------------
 * ## intro photograph
 * A real <img>, not a CSS background: Google Images can index it, it carries
 * alt text, and no script can leave it invisible.
 * -------------------------------------------------------------------- */
img.s-intro__bg {
    display          : block;
    object-fit       : cover;
    object-position  : center;
    background-image : none;
    max-width        : 100%;
}

/* --------------------------------------------------------------------
 * ## dark-theme corrections
 * The template was written for a light background and later converted to a
 * dark one, but these rules kept their light-theme colours. In styles.css
 * `code` sets both its background and its text to --color-gray-3, so inline
 * code rendered as invisible text in a pale box; `pre` and `mark` had the
 * same fault. All pairings below are at least 4.5:1 against their background.
 * -------------------------------------------------------------------- */
code,
kbd,
samp {
    color         : var(--color-1-lighter);
    background    : var(--color-gray-17);
    border        : 1px solid var(--color-border);
    white-space   : normal;
    overflow-wrap : break-word;
}

pre {
    color      : var(--color-text-dark);
    background : var(--color-gray-17);
    border     : 1px solid var(--color-border);
    overflow-x : auto;
}

pre > code {
    color      : inherit;
    background : none;
    border     : none;
}

mark {
    background : var(--color-1-lighter);
    color      : var(--color-gray-19);
}

.pgn__num:focus,
.pgn__num:hover,
.pgn .current,
.pgn .current:focus,
.pgn .current:hover {
    background : var(--color-1-light);
    color      : var(--color-gray-19);
}

/* --------------------------------------------------------------------
 * ## page shell
 * -------------------------------------------------------------------- */
.s-page {
    --timeline-left-padding        : var(--vspace-1_75);
    --timeline-vertical-border-pos : 8px;
    --subtitle-line-height         : var(--vspace-1_5);
    --timeline-top-adjust          : calc(var(--subtitle-line-height) / 2);

    padding-top    : calc(10rem + var(--vspace-2_5));
    padding-bottom : var(--vspace-3);
    position       : relative;
}

.s-page .row + .row {
    margin-top : var(--vspace-1_5);
}

.entry-wrap {
    max-width : 86rem;
}

.breadcrumbs {
    font-size     : var(--text-sm);
    color         : var(--color-gray-9);
    margin-bottom : var(--vspace-0_75);
}

.breadcrumbs a {
    color : var(--color-gray-7);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
    color : var(--color-1);
}

.breadcrumbs span {
    padding : 0 .6rem;
    color   : var(--color-gray-13);
}

.s-page__title {
    font-family    : var(--font-2);
    font-weight    : 400;
    font-size      : var(--text-display-2);
    line-height    : 1.08;
    letter-spacing : -0.02em;
    color          : var(--color-text-dark);
    margin-top     : 0;
    margin-bottom  : var(--vspace-1);
}

.s-page__lead {
    font-family   : var(--font-1);
    font-weight   : 300;
    font-size     : var(--text-lg);
    line-height   : 1.7;
    color         : var(--color-text);
    margin-bottom : var(--vspace-0_75);
}

.s-page .text-subtitle {
    margin-top    : var(--vspace-0_5);
    margin-bottom : var(--vspace-0_75);
}

.s-page .text-subtitle::after {
    content          : "";
    display          : block;
    width            : 3.2rem;
    height           : 1px;
    background-color : var(--color-1-dark);
    margin-top       : var(--vspace-0_375);
}

/* current page in the main navigation */
.s-header__nav li.current a {
    color : var(--color-1);
}

/* --------------------------------------------------------------------
 * ## article body
 * -------------------------------------------------------------------- */
.entry__meta {
    font-size      : var(--text-sm);
    color          : var(--color-gray-9);
    letter-spacing : .02em;
}

.entry__meta a {
    color : var(--color-1-light);
}

.entry h2 {
    font-size  : var(--text-xl);
    margin-top : var(--vspace-1_5);
}

.entry h3 {
    font-size  : var(--text-lg);
    margin-top : var(--vspace-1_25);
}

.entry h4 {
    font-size  : var(--text-md);
    margin-top : var(--vspace-1);
}

.entry a {
    color         : var(--color-1-light);
    border-bottom : 1px solid var(--color-1-darker);
}

.entry a:hover,
.entry a:focus {
    color               : var(--color-1-lighter);
    border-bottom-color : var(--color-1);
}

.entry img {
    display       : block;
    max-width     : 100%;
    height        : auto;
    border-radius : var(--border-radius);
    margin        : var(--vspace-1) 0;
}

.entry pre {
    overflow-x : auto;
}

.entry table {
    display    : block;
    overflow-x : auto;
    max-width  : 100%;
}

.entry blockquote {
    border-left-color : var(--color-1-dark);
}

.entry hr {
    border-color : var(--color-border);
    margin       : var(--vspace-1_5) 0;
}

.entry__tags {
    margin-top : var(--vspace-1_25);
}

.entry__tag {
    display        : inline-block;
    font-family    : var(--font-1);
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1-light);
    border         : 1px solid var(--color-border);
    border-radius  : 999px;
    padding        : .4rem 1.2rem;
    margin         : 0 .6rem .6rem 0;
}

/* --------------------------------------------------------------------
 * ## author box
 * -------------------------------------------------------------------- */
.author-box {
    display          : flex;
    gap              : 2.4rem;
    align-items      : flex-start;
    padding          : var(--vspace-1) var(--vspace-1_25);
    border           : 1px solid var(--color-border);
    border-radius    : var(--border-radius);
    background-color : var(--color-gray-17);
}

.author-box__avatar {
    width         : 9.6rem;
    height        : 9.6rem;
    border-radius : 50%;
    flex          : none;
}

.author-box__name {
    font-family   : var(--font-2);
    font-size     : var(--text-lg);
    margin        : 0 0 .4rem;
    color         : var(--color-text-dark);
}

.author-box__name a {
    color : var(--color-text-dark);
}

.author-box__bio {
    font-size   : var(--text-sm);
    line-height : 1.7;
    margin      : 0 0 .8rem;
    color       : var(--color-text);
}

.author-box__links {
    font-size : var(--text-sm);
    margin    : 0;
}

.author-box__links a {
    color : var(--color-1-light);
}

/* --------------------------------------------------------------------
 * ## article list
 * -------------------------------------------------------------------- */
.article-list {
    list-style   : none;
    margin-left  : 0;
    padding-left : 0;
}

.article-list__item {
    padding    : var(--vspace-1) 0;
    border-top : 1px solid var(--color-border);
}

.article-list__item:last-child {
    border-bottom : 1px solid var(--color-border);
}

.article-list__meta {
    font-family    : var(--font-1);
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1-dark);
    margin-bottom  : var(--vspace-0_25);
}

.article-list__title {
    font-family : var(--font-2);
    font-weight : 400;
    font-size   : var(--text-xl);
    line-height : 1.2;
    margin      : 0 0 var(--vspace-0_375);
}

.article-list__title a {
    color : var(--color-text-dark);
}

.article-list__title a:hover,
.article-list__title a:focus {
    color : var(--color-1);
}

.article-list__desc {
    margin : 0;
    color  : var(--color-text);
}

.article-list--compact .article-list__title {
    font-size : var(--text-lg);
}

.article-list--compact .article-list__item {
    padding : var(--vspace-0_75) 0;
}

/* --------------------------------------------------------------------
 * ## cards (work / projects / press)
 * -------------------------------------------------------------------- */
.card-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(28rem, 1fr));
    gap                   : var(--vspace-1);
    list-style            : none;
    margin-left           : 0;
    padding               : 0;
}

.card-grid li {
    padding-left : 0;
}

.card {
    height           : 100%;
    padding          : var(--vspace-1);
    border           : 1px solid var(--color-border);
    border-radius    : var(--border-radius);
    background-color : var(--color-gray-17);
}

.card__kicker {
    font-family    : var(--font-1);
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1-dark);
    margin-bottom  : var(--vspace-0_25);
}

.card__title {
    font-family : var(--font-2);
    font-weight : 400;
    font-size   : var(--text-lg);
    line-height : 1.2;
    margin      : 0 0 var(--vspace-0_375);
}

.card__title a {
    color : var(--color-text-dark);
}

.card__title a:hover,
.card__title a:focus {
    color : var(--color-1);
}

.card p {
    font-size   : var(--text-sm);
    line-height : 1.7;
    margin      : 0 0 var(--vspace-0_5);
    color       : var(--color-text);
}

.card__links {
    margin : 0;
}

.card__links a {
    font-size    : var(--text-sm);
    margin-right : 1.2rem;
    color        : var(--color-1-light);
}

/* --------------------------------------------------------------------
 * ## book card
 * -------------------------------------------------------------------- */
.book-card {
    display          : flex;
    gap              : 3.2rem;
    padding          : var(--vspace-1_25);
    border           : 1px solid var(--color-border);
    border-radius    : var(--border-radius);
    background-color : var(--color-gray-17);
}

.book-card__title {
    font-family : var(--font-2);
    font-weight : 400;
    font-size   : var(--text-xl);
    line-height : 1.2;
    margin      : 0 0 .4rem;
}

.book-card__title a {
    color : var(--color-text-dark);
}

.book-card__title a:hover,
.book-card__title a:focus {
    color : var(--color-1);
}

.book-card__sub {
    font-style    : italic;
    color         : var(--color-gray-8);
    margin-bottom : var(--vspace-0_5);
}

.book-card__links .btn {
    margin-right  : 1rem;
    margin-bottom : 1rem;
}

/* --------------------------------------------------------------------
 * ## profile (about page)
 * -------------------------------------------------------------------- */
.profile {
    display               : grid;
    grid-template-columns : 30rem minmax(0, 1fr);
    gap                   : var(--vspace-1_5);
    align-items           : start;
}

.profile__photo img {
    display       : block;
    width         : 100%;
    height        : auto;
    border-radius : var(--border-radius);
}

.profile__photo figcaption {
    font-size  : var(--text-xs);
    color      : var(--color-gray-9);
    margin-top : var(--vspace-0_25);
}

.facts {
    list-style   : none;
    margin-left  : 0;
    padding-left : 0;
}

.facts li {
    display       : flex;
    gap           : 1.6rem;
    padding       : var(--vspace-0_375) 0;
    border-bottom : 1px solid var(--color-border);
    font-size     : var(--text-sm);
    line-height   : 1.6;
}

.facts li strong {
    flex        : none;
    width       : 15rem;
    font-weight : 500;
    color       : var(--color-text-dark);
}

.facts li a {
    color : var(--color-1-light);
}

/* timeline uses the template's .timeline styles; give it the line */
.s-page .s-about__timeline-section {
    position : relative;
}

/* --------------------------------------------------------------------
 * ## press kit
 * -------------------------------------------------------------------- */
.bio-block {
    margin        : 0 0 var(--vspace-1) 0;
    padding       : var(--vspace-0_75) var(--vspace-1);
    border-left   : 2px solid var(--color-1-dark);
    background    : var(--color-gray-17);
    border-radius : 0 var(--border-radius) var(--border-radius) 0;
}

.bio-block p:last-child {
    margin-bottom : 0;
}

.bio-block__label {
    font-family    : var(--font-1);
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1-dark);
    margin-bottom  : var(--vspace-0_25);
}

.headshots {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(24rem, 1fr));
    gap                   : var(--vspace-1);
    list-style            : none;
    margin-left           : 0;
    padding               : 0;
}

.headshots li {
    padding-left : 0;
}

.headshots img {
    display       : block;
    width         : 100%;
    height        : auto;
    border-radius : var(--border-radius);
    margin-bottom : var(--vspace-0_375);
}

.headshots p {
    font-size : var(--text-sm);
    margin    : 0;
}

/* --------------------------------------------------------------------
 * ## homepage additions
 * -------------------------------------------------------------------- */
.s-home {
    padding-top    : 0;
    padding-bottom : var(--vspace-3);
}

.s-home__block {
    margin-bottom : var(--vspace-2_5);
}

.s-home__more {
    margin-top : var(--vspace-1);
}

.s-home__more a {
    font-family    : var(--font-1);
    font-size      : var(--text-sm);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1-light);
}

.s-home__more a:hover,
.s-home__more a:focus {
    color : var(--color-1-lighter);
}

.s-about__lead {
    font-size     : var(--text-md);
    color         : var(--color-text-dark);
    margin-bottom : var(--vspace-1);
}

/* --------------------------------------------------------------------
 * ## 404
 * -------------------------------------------------------------------- */
.s-page--404 {
    min-height : 60vh;
}

/* --------------------------------------------------------------------
 * ## responsive
 * -------------------------------------------------------------------- */
@media screen and (max-width: 900px) {
    .s-page {
        padding-top : calc(8rem + var(--vspace-2_5));
    }
}

@media screen and (max-width: 800px) {
    .s-page__title {
        font-size : var(--text-display-1);
    }

    .profile {
        grid-template-columns : 1fr;
    }

    .profile__photo {
        max-width : 32rem;
    }

    .author-box,
    .book-card {
        flex-direction : column;
        gap            : 1.6rem;
    }
}

@media screen and (max-width: 600px) {
    .s-page__title {
        font-size : var(--text-xxxl);
    }

    .facts li {
        flex-direction : column;
        gap            : .2rem;
    }

    .facts li strong {
        width : auto;
    }
}