/*********/
/* Fonts */
/*********/

@font-face {
    font-family: "gold";
    src: url("../static/fonts/gold-regular.woff2") format("woff2"),
         url("../static/fonts/gold-regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "gold";
    src: url("../static/fonts/gold-regularitalic.woff2") format("woff2"),
         url("../static/fonts/gold-regularitalic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "gold";
    src: url("../static/fonts/gold-bold.woff2") format("woff2"),
         url("../static/fonts/gold-bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "gold";
    src: url("../static/fonts/gold-bolditalic.woff2") format("woff2"),
         url("../static/fonts/gold-bolditalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Apercu Mono";
    src: url("../static/fonts/ApercuMonoProVar.ttf") format("ttf-variations");
}

/*
@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "DM Mono";
    src: url("../static/fonts/DMMono-MediumItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
}
*/

@font-face {
    font-family: "Shippori Antique B1";
    src: url("../static/fonts/ShipporiAntiqueB1-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/***************/
/* Base styles */
/***************/

* {
    box-sizing: border-box;
    scrollbar-width: none;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
}

:root {
    --scale-ratio: calc(16 / 1464); /* 16px font will actually be 16px in a 1464px wide viewport */
    @media (min-width: 770px) {
        font-size: calc(var(--scale-ratio) * 100vw);
    }
    
    --gb: .25rem; /* grid base */
    --main-max-width: 67.5rem;
    --nav-min-width: 120px; /* TODO figure out how to use px + rem for the media queries */
    
    --bg-cover-color: #F4F2EE;
    --bg-content-color: #FAFAF9;
    --display-ombre-1: #DA0B44;
    --display-ombre-2: #B50451;
    --display-ombre-3: #961670;
    --display-ombre-4: #6E0A87;
    --display-ombre-5: #2F2995;
    --ombre: var(--diplay-ombre-1);
    --body-color: #302D2F;
    --label-color: #625f62;
    --link-color: #961670; /* rgba(150, 22, 112, 1) */
    --link-underline-color: #BDA5B6; /* rgba(189, 165, 182, 1) */
    --whisper-color: #ECE2EE;
    
    --display-family: "Apercu Mono", monospace;
    --display-family-alt: "Shippori Antique B1", sans-serif;
    --body-family: "gold", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;

    --input-border-radius: 1rem;
    --input-border-width: .1875rem;
    --input-focus-factor: 1;
    
    scroll-behavior: smooth;

    @view-transition {
        navigation: auto;
    }
}

@keyframes smooth-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display-family);
    font-weight: 400;
    font-style: normal;
    color: var(--display-ombre-1);
    text-wrap: balance;
}

p, li {
    font-weight: 400;
    font-family: var(--body-family);
    color: var(--body-color);
}

body {
    background-color: var(--bg-content-color);
    display: grid;
    grid-template-columns: [lbleed] 2rem [lcontent] calc(100vw - 4rem) [rcontent] 2rem [rbleed];
    text-wrap: pretty;
    
    
    
    @media (min-width: 48rem) {
        grid-template-columns: [lbleed] 2.5rem [lgutter] 9.5rem [lcontent] repeat(270, .25rem) [rcontent] 9.5rem [rgutter] 2.5rem [rbleed];
    }
}

main {
    max-width: 100vw;
}

a, svg {
    transition: color .1s;
}

:focus-visible {
    outline-color: var(--display-ombre-1);
    outline-color: var(--ombre);
}

/*grid-template-columns: 2.5rem 9.5rem repeat(270, .25rem) 9.5rem 2.5rem*/

/**************/
/* Components */
/**************/
nav {
    position: sticky;
    top: 0;
    padding-top: 1.5rem;
    z-index: 100;
    grid-column: 1 / -1;
    grid-row: 1;
    height: min-content;
    display: grid;
    grid-template-columns: subgrid;
    font-size: 1rem;
    font-family: var(--display-family);
    background-color: var(--bg-cover-color);
    color: var(--display-ombre-1);

    svg {
        width: 3rem;
        color: var(--display-ombre-1);
        
        &:hover {
            color: rgba(110, 10, 135, 1);
        }
    }
    
    ul {
        grid-column: lcontent / rcontent;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        list-style: none;
        padding: 0;
        margin-top: calc(1.25rem - 1cap);
        line-height: 2rem;
        color: inherit;

        li {
            color: inherit;
        }

        a:not(:has(svg)) {
            color: inherit;
            text-decoration: none;
            
            &:hover {
                color: rgba(110, 10, 135, 1);
                background: linear-gradient(to right, rgba(110, 10, 135, 1) 0%, rgba(110, 10, 135, 1) 66.6666%, transparent 66.6666%, transparent 100%) 0 100%/3px 1px repeat-x;
            }
        }
    }

    @media (min-width: 48rem) {
        grid-column: lbleed / lcontent;
        grid-template-columns: 1fr 1fr 1fr;
        padding-top: 3rem;
        background-color: transparent;

        *, ul:nth-child(2) {
            grid-column: 2;
        }

        ul {
            display: block;
                        grid-column: 2;

            li {
                display: block;
            }
        }
    }
}

main {
    grid-column: lcontent / rcontent;
    /* animation: 1.5s smooth-in; */
}

.project main, .project-hero {
    grid-column: lbleed / rbleed;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
}

.project-hero {
    margin-bottom: 2.5rem;
    padding-bottom: .75rem;
    padding-top: 2rem;
    background-color: var(--bg-cover-color);

    @media (min-width: 48rem) {
        padding-top: 0;
    }
    
    hgroup {
        grid-column: lcontent / rcontent;
        margin-top: 4rem;
        margin-bottom: 3.25rem;
        color: var(--display-ombre-1);        

        h1 {
            margin: 0;
            font-family: var(--display-family-alt)
        }

        p {
            margin-top: calc(3 * var(--gb));
            font-family: var(--display-family);
            color: inherit;
        }
    }

    img {
        grid-column: lcontent / rcontent;
        width:  100%;
    }
}

.project-hero-details {
    grid-column: lcontent / rcontent;
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
       "focus   role"
       "team    team"
       "summary summary"
;

    @media (min-width: 48rem) {
        grid-template-columns: 1fr 39.75rem;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
           "focus  summary"
           "role   summary"
           "team   summary";
    }

    .project-hero-focus, .project-hero-role, .project-hero-team {
        h2 {
            font-size: calc(11rem / 16);
            font-family: var(--body-family);
            font-weight: bold;
        }

        p, ul {
            margin-top: 0;
            margin-bottom: 1.5rem;
        }
    }

    .project-hero-focus {
        grid-area: focus;
    }

    .project-hero-role {
        grid-area: role;
    }
    
    .project-hero-team {
        grid-area: team;

        ul {
            padding-left: 1ch;
            line-height: 1.5rem;
            list-style: "-";

            li {
                padding-left: .5ch;
            }
        }
    }

    .project-hero-summary {
        grid-area: summary;
        line-height: 1.5rem;

        @media (min-width: 48rem) {
            margin-top: 1rem;
        }
    }
}

.project-thumb {
    img {
        max-width: 100%;
    }

    h3 {
        display: inline-block;
        color: inherit;
        margin: 0;
        margin-top: .75rem;
        font-size: 1rem;
        font-family: var(--display-family-alt);
    }

    svg {
        display: inline-block;
        height: 1em;
    }

    p {
        margin: 0;
        margin-top: .25rem;
        font-size: calc(11rem / 16);
        font-weight: 500;
        font-family: var(--display-family);
        color: inherit;

        &:first-of-type {
            margin-top: .5rem;
        }
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    &:nth-child(1), &:nth-child(2) {
        color: var(--display-ombre-1);
    }
    
    &:nth-child(3), &:nth-child(4) {
        color: var(--display-ombre-2);
    }
        
    &:nth-child(5), &:nth-child(6) {
        color: var(--display-ombre-3);
    }
        
    &:nth-child(7), &:nth-child(8) {
        color: var(--display-ombre-4);
    }
}

.widget, .widget2 {
    /* container-type: size; */
    margin-bottom: 4rem;
    grid-column: lcontent / rcontent;
}

.project-big-heading, .widget2-heading-big {
    margin-bottom: .75rem;
    max-width: 40rem;
    font-size: calc(21rem /16);
    font-family: var(--display-family-alt);
    color: inherit;
}

.project-med-heading, .widget2-heading-med {
    max-width: 40rem;
    font-size: 1rem;
    font-family: var(--body-family);
    font-weight: bold;
    color: inherit;
}

.widget2-heading-small {
    max-width: 40rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-family: var(--body-family);
    font-weight: 500;
    font-variation-settings: 'wght' 500;
    color: var(--body-color);
}

.project-bodytext, .widget2-body {
    max-width: 40rem;
    margin-top: 0;
    line-height: 1.5rem;

    a {
        color: var(--ombre);
        text-decoration: none;
        background: linear-gradient(to right, var(--link-underline-color) 0%, var(--link-underline-color) 100%) 0 98%/1px 2px repeat-x;
        transition: background .1s, color .1s;

        &:hover {
            color: var(--display-ombre-5);
            background: linear-gradient(to right, var(--display-ombre-5) 0%, var(--display-ombre-5) 100%) 0 98%/1px 2px repeat-x;
        }

        &:active {
            opacity: .6;
        }
    }
}

.project-image, .widget2-image {
    width: 100%;
}

.project-stat-grid, .widget2-stat-grid {

    .project-stat, .widget2-stat {
        display: grid;
        grid-template-columns: 4.5rem 12rem;
        gap: .5rem;
        align-items: end;
        color: inherit;

        &:not(:last-child) {
            margin-bottom: 1rem;
        }

        .project-stat-number, .widget2-stat-number {
            margin: 0;
            font-family: var(--display-family);
            font-size: calc(27rem / 16);
            text-align: right;
            color: inherit;
        }

        .project-stat-label, .widget2-stat-label {
            margin: 0;
            margin-bottom: .125rem;
            max-height: calc(28rem / 16);
            font-size: calc(14rem / 16);
            align-self: end;
            color: var(--label-color);
        }
    }

    @media (min-width: 48rem) {
        display: grid;
        grid-template-rows: 3rem 3rem 3rem;
        grid-auto-columns: min-content;
        grid-auto-flow: column;
        grid-column-gap: 2.5rem;
        width: 100%;

        .project-stat:not(:last-child), .widget2-stat:not(:last-child) {
            margin-bottom: 0;
        }
    }
}

.heading-and-text {
    margin-bottom: 1.5rem;
    color: inherit;
    
    h2 {
        color: inherit;
    }
}

.heading-text-and-stats {
    .project-bodytext {
        max-width: 40rem;
    }
}

.pointer {
    display: grid;
    margin-top: 3rem;
    grid-template-rows: min-content;

    .project-med-heading, .widget2-heading-med {
        grid-column: 2;
        margin: 0;
        margin-bottom: .25rem;
        align-self: end;
    }

    .project-bodytext, .widget2-body {
        grid-column: 2;
    }
}

.widget2-quote-grid {
    @media (min-width: 48rem) {
        display: grid;
        margin-top: .5rem;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 3rem;

        widget2-quote {
            margin-top: 0;
        }
    }

    .widget2-quote {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: min-content 1fr;
        grid-template-rows: 1fr min-content;
        grid-column-gap: .5rem;
        font-family: var(--display-family);
        font-style: italic;
        
        

        svg {
            grid-row: 1 / span 2;
            width: .55rem;
            height: 100%;
            /* object-fit: fill; */
        }

        .widget2-quote-body {
            margin: 0;
            line-height: 1.5rem;
            font-family: inherit;
            color: inherit;

            &::before {
                content: "“"
            }

            &::after {
                content: "”"
            }
        }

        .widget2-quote-source {
            margin: 0;
            margin-top: .5rem;
            font-family: inherit;
            color: var(--label-color);

            &::before {
                content: "- ";
            }
        }
    }
}

.image-single, .widget2-image {
    margin-bottom: 1rem;
}

.widget2-duplex {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.image-quad, .widget2-quad {
    display: grid;
    grid-template: 1fr 1fr / 1fr 1fr;
    gap: 1.25rem;

    @media (min-width: 48rem) {
        gap: 2.5rem;
    }

    .widget2-image {
        margin-bottom: 0;
    }
}

.widget2-image-captioned {
    .widget2-image-caption {
        margin-bottom: 2rem;
    }
    
    @media (min-width: 48rem) {
        display: grid;
        grid-template-columns: 20rem 1fr 50rem;
    
        img {
            grid-column: 3;
        }
    
        .widget2-image-caption {
            margin-top: 4rem;
        }
    }
}

.widget2-beanstalk {
    display: grid;
    grid-template-columns: 25% 0 75%;

    .widget2-beanstalk-captions {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 300%;

        &> div {
            padding: .75rem;
            background-color: var(--bg-content-color);
            border-radius: .5rem;
            animation-name: smooth-in;
            animation-timeline: view();
            animation-fill-mode: both;
            animation-range-start: cover 45%;
            animation-range-end: cover 55%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        .widget2-quote-grid {
            grid-template-columns: 1fr;
            max-width: 25rem;
        }

        .widget2-quote {
            margin-top: 0;
        }
    }

    img {
        grid-column: 3;
        grid-row: 1 / -1;
        z-index: -1;
        width: 100%;
    }

    @media (min-width: 48rem) {
        grid-template-columns: 32rem 1fr 26.75rem;
        
        .widget2-beanstalk-captions {
            width: auto;
            padding: 0;

            &> div {
                background-color: var(--bg-content-color);
                animation: none;
                box-shadow: none;
            }
        }

        img {
            transform: none;
            width: 100%;
        }
    }
}

.strong-color {
    color: var(--ombre);
}

.other-projects {
    grid-column: lbleed / rbleed;
    margin-top: 3rem;
    margin-bottom: 0;
    padding-top: 3rem;
    padding-bottom: 8rem;
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--bg-cover-color);
    color: inherit;

    .other-projects-inner {
        grid-column: lcontent / rcontent;
        display: grid;
        grid-template-rows: 2rem 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        row-gap: 3rem;

        @media (min-width: 48rem) {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: min-content min-content;
            column-gap: 6rem;

            .project-thumb {
                grid-row: 2;
            }
        }

        h2 {
            font-family: var(--display-family-alt);
            color: inherit;
        }

        .project-thumb {

            color: inherit;

            &:hover {
                img {
                    opacity: .9;
                    transition: opacity .1s;
                }
                
                h3 {
                    background: linear-gradient(to right, rgba(47, 41, 149, 1) 0%, rgba(47, 41, 149, 1) 50%, transparent 50%, transparent 100%) 0 100%/2px 1px repeat-x;
                }
            }

            &:active {
                opacity: .6;
            }
        }
    }
}

.divider {
    margin: 3rem 0 3rem;
}

.widget2:has(+ .divider) {
    margin-bottom: 0;
}

/************************/
/* Project page layouts */
/************************/

.cloudscape {
    .context {
        color: var(--display-ombre-1);
    }

    .goal {
        color: var(--display-ombre-1);
    }

    .colors, .icons, .components, .data-vis, .ia {
        grid-column: lcontent / rcontent;
    }

    .other-screenshots {
        grid-column: lgutter / rgutter;
    }

    .documentation {
        grid-column: lcontent / rcontent;
        margin-top: 2.5rem;
        color: var(--display-ombre-3);
        --ombre: var(--display-ombre-3);
    }

    .divider, .impact {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);
    }

    .other-projects {
        color: var(--display-ombre-5);
    }
}

.builderhub {
    .context {
        color: var(--display-ombre-1);
    }

    .goal {
        color: var(--display-ombre-1);
    }

    .preview {
        grid-column: lbleed / rbleed;
    }

    .context2 {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2);

        .widget2-stat-grid {
            margin: 1rem 0 3rem;
            grid-template-rows: 1fr;
        }
    }

    .content-strategy {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-3);
    }

    .work-cycle {
        grid-column: lcontent / rcontent;
    }
     
    .before-after {
        grid-column: lbleed / rbleed;
    }

    .taxonomy {
        grid-column: lcontent / rcontent;
    }

    .information-architecture {
        grid-column: lbleed / rbleed;
    }

    .final-solution {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-3);
    }

    .screens {
    }

    .markdown, .writing, .community {
        color: var(--display-ombre-3);
    }

    .divider {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);
    }

    .impact {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);
    }

    .other-projects {
        color: var(--display-ombre-5);
    }
}

.productdetails {
    .context {
        margin-top: 4rem;
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-1)
    }

    .preview, .research {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2)
    }

    .concept, .before-after, .zone-examples, .concept-pt2, .pre-release, .pre-release-2, .evolution2 {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-3);
        --ombre: var(--display-ombre-3);
    }

    .expressed-hierarchy, .progressive-disclosure {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);

        .widget2-image-captioned {
                grid-template-columns: 20rem 1fr 42rem;
        }
    }

    .other-projects {
        color: var(--display-ombre-5);
    }
}

.configdashboards {
    .project-hero {
        margin-bottom: 0;
        padding-bottom: 4rem;
    }

    .preview {
        grid-column: lbleed / rbleed;
    }

    .context {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2);
    }
    
    .context2 {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2);
        margin-bottom: 0;
    }

    .goal {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2);
        margin-bottom: 0;
    }

    .divider {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-2);
        margin-bottom: 0;
    }

    .research, .user-journey {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-3);
        margin-bottom: 0;
    }

    .research-pt2 {
        grid-column: lcontent / rcontent;
        margin-bottom: 0;
    }

    .takeaway {
        color: var(--display-ombre-3);
        margin-bottom: 0;
    }

    .user-roles, .research-pt3, .research-images {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-3);
        margin-bottom: 0;
    }

    .concept, .canvases, .create-your-own, .a-widget {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);
        margin-bottom: 0;
        
        /*.widget2-image-captioned {
                grid-template-columns: 20rem 1fr 42rem;
        }*/
    }

    .examples {
        margin-bottom: 0;
    }

    .divider2, .multiphase-release, .milestones {
        grid-column: lcontent / rcontent;
        color: var(--display-ombre-4);
        --ombre: var(--display-ombre-4);
    }

    .other-projects {
        color: var(--display-ombre-5);
    }
}

@media (min-width: 48rem) {
    .cloudscape {
        .context {
            grid-column: lcontent / span 130;
            color: var(--display-ombre-1);
        }
    
        .goal {
            grid-column: span 132 / rcontent;
            color: var(--display-ombre-1);
        }
    
        .colors, .icons, .components, .data-vis, .ia {
            grid-column: lcontent / rcontent;
        }
    
        .other-screenshots {
            grid-column: lgutter / rgutter;
        }
    
        .documentation {
            grid-column: lcontent / span 160;
            margin-top: 2.5rem;
            color: var(--display-ombre-3);
            --ombre: var(--display-ombre-3);
        }
    
        .divider, .impact {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-4);
        }
    
        .other-projects {
            color: var(--display-ombre-5);
        }
    }
    
    .builderhub {
        .context {
            grid-column: lcontent / span 130;
            color: var(--display-ombre-1);
        }
    
        .goal {
            grid-column: span 132 / rcontent;
            color: var(--display-ombre-1);
        }
    
        .preview {
            grid-column: lbleed / rbleed;
        }
    
        .context2 {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-2);
    
            .widget2-stat-grid {
                        margin: 1rem 0 3rem;
                grid-template-rows: 1fr;
            }
        }
    
        .content-strategy {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-3);
        }
    
        .work-cycle {
            grid-column: lcontent / rcontent;
        }
         
        .before-after {
            grid-column: lbleed / rbleed;
        }
    
        .taxonomy {
            grid-column: lcontent / rcontent;
        }
    
        .information-architecture {
            grid-column: lbleed / rbleed;
        }
    
        .final-solution {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-3);
        }
    
        .screens {
            grid-column: lgutter / rgutter;
        }
    
        .markdown, .writing, .community {
            grid-column: lcontent / rbleed;
            color: var(--display-ombre-3);
        }
    
        .divider {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-4);
        }
    
        .impact {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-4);
        }
    
        .other-projects {
            color: var(--display-ombre-5);
        }
    }
    
    .productdetails {
        .context {
            margin-top: 4rem;
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-1)
        }
    
        .preview, .research {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-2)
        }
    
        .concept, .before-after, .zone-examples, .concept-pt2, .pre-release, .pre-release-2, .evolution2 {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-3);
            --ombre: var(--display-ombre-3);
        }
    
        .expressed-hierarchy, .progressive-disclosure {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-4);
    
            .widget2-image-captioned {
                    grid-template-columns: 20rem 1fr 42rem;
            }
        }
    
        .other-projects {
            color: var(--display-ombre-5);
        }
    }
    
    .configdashboards {
        .project-hero {
            margin-bottom: 0;
            padding-bottom: 4rem;
        }
    
        .preview {
            grid-column: lbleed / rbleed;
        }
    
        .context {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-2);
        }
        
        .context2 {
            grid-column: lcontent / rbleed;
            color: var(--display-ombre-2);
            margin-bottom: 0;
        }
    
        .goal {
            grid-column: lcontent / span 110;
            color: var(--display-ombre-2);
            margin-bottom: 0;
        }
    
        .divider {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-2);
            margin-bottom: 0;
        }
    
        .research, .user-journey {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-3);
            margin-bottom: 0;
        }
    
        .research-pt2 {
            grid-column: lcontent / span 120;
            margin-bottom: 0;
        }
    
        .takeaway {
            grid-column: span 120 / rcontent;
            color: var(--display-ombre-3);
            margin-bottom: 0;
        }
    
        .user-roles, .research-pt3, .research-images {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-3);
            margin-bottom: 0;
        }
    
        .concept, .canvases, .create-your-own, .a-widget {
            grid-column: lcontent / rgutter;
            color: var(--display-ombre-4);
            margin-bottom: 0;
            
            .widget2-image-captioned {
                    grid-template-columns: 20rem 1fr 42rem;
            }
        }
    
        .examples {
            grid-column: lgutter / rgutter;
            margin-bottom: 0;
        }
    
        .divider2, .multiphase-release, .milestones {
            grid-column: lcontent / rcontent;
            color: var(--display-ombre-4);
            --ombre: var(--display-ombre-4);
        }
    
        .other-projects {
            color: var(--display-ombre-5);
        }
    }
}

/****************/
/* Animations */
/****************/

.home-hero p {
    opacity: 0;
    animation: .8s ease-out .8s forwards text-up-in;
}

.home-hero .custom-underline svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: .5s ease-in 1s forwards draw;
}

.home-work {
    opacity: 0;
    animation: .5s ease-out 1.1s forwards fade-in;
}

.project-hero, main .widget2 {
    opacity: 0;
    animation: .5s ease-out .5s forwards fade-in;
}

main .widget2 {
    animation-delay: .7s;
}

@keyframes text-up-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes draw {
    from {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/****************/
/* One-off bits */
/****************/

body.home {
    padding-bottom: 9rem;
    background-color: var(--bg-cover-color);
}

.home-hero {
    padding-top: 4rem;
    min-height: 100vh;
    @media (min-width: 48rem) {
        min-height: unset;
        height: 100vh;
        max-height: 80vw;
        padding-top: 16rem;
    }

    h1 {
        font-size: calc(22rem / 16);
        font-weight: 500;
        line-height: 2rem;
        text-wrap: unset;
    }
    
    h1 span {
        text-wrap: balance !important;
        
        &:nth-child(2) {
            color: var(--display-ombre-2);
        }
        
        &:nth-child(3) {
            color: var(--display-ombre-3);
        }
    }
    
    p {
        margin-bottom: 0;
        font-family: var(--display-family-alt);
        color: var(--display-ombre-4);
        line-height: 1.75rem;

        &:not(:first-child) {
            margin-top: 0;
        }

        br {
            display: none;
            @media (min-width: 48rem) {
                display: initial;
            }
        }

    }

    .whisper {
        color: var(--whisper-color);
    }

    .custom-underline {
        position: relative;
        font-style: normal;
        text-decoration: none;
        color: inherit;

        &:hover {
            color: var(--display-ombre-5);

            svg {
                bottom: -.11rem;
            }
        }

        svg {
            position: absolute;
            left: -.25rem;
            bottom: -.15rem;
            color: var(--display-ombre-5);
            transition: bottom .1s;
        }
    }
}

.home-hero-line {
    opacity: 0;
    display: inline-block;
    width: 100%;
    animation: .8s ease-out forwards text-up-in;

    &:first-child {
        animation-delay: .5s;
    }

    &:nth-child(2) {
        animation-delay: .6s;
    }

    &:nth-child(3) {
        animation-delay: .7s;
    }
}

.home-work {
    h2 {
        font-size: calc(21rem / 16);
        font-family: var(--display-family-alt);
    }

    .home-articles {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem 2.5rem;

        @media (min-width: 32rem) {
            grid-template-columns: 1fr 1fr;
        }

        .project-thumb {
            &:hover {
                img {
                    opacity: .9;
                    transition: opacity .1s;
                }
                
                h3 {
                    background: linear-gradient(to right, var(--display-ombre-1) 0%, var(--display-ombre-1) 50%, transparent 50%, transparent 100%) 0 100%/2px 1px repeat-x;
                }
            }

            &:active {
                opacity: .6;
            }
        }
    }
}

.modal-overlay { /* dead code? */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: opacity(50%);
}

.password-prompt {
    height: 29rem;
    width: 47rem;
    padding: 10rem 4rem;
    border: none;
    border-radius: 1.5rem;
    font-size: calc(22rem / 16);
    background-color: white;
    transition: display .3s allow-discrete, overlay .3s allow-discrete;
    animation: open-dialog .3s forwards;

    &:focus-visible {
        outline: none;
    }

    &::backdrop {
        background-color: var(--bg-cover-color);
        opacity: .75;
    }

    label {
        display: block;
        margin-bottom: .75rem;
        font-weight: 500;
        font-family: var(--display-family);
        color: var(--display-ombre-1);
    }

    .input-wrapper {
        padding: var(--input-border-width);
        height: 4rem;
        width: 100%;
        margin-bottom: 1.5rem;
        border-radius: var(--input-border-radius);
        background: linear-gradient(to right, var(--display-ombre-1), var(--display-ombre-4));
        opacity: 1;
        transition: padding .2s, opacity .1s;

        &:hover {
            opacity: .6;
        }

        &:has(input:focus) {
            padding: calc(var(--input-border-width) * var(--input-focus-factor));
            opacity: 1;
        }
    }

    .input-wrapper-bg {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 2.5rem;
        letter-spacing: .25rem;
        border-radius: calc(var(--input-border-radius) - var(--input-border-width));
        background-clip: padding-box;
        border: solid 5px transparent;
        background: white;
        transition: border .2s;

        &:has(input:focus) {
            border-radius: calc(var(--input-border-radius) - var(--input-focus-factor) * var(--input-border-width));
        }
    }
    
    input {
        display: block;
        width: 100%;
        height: 100%;
        padding: .5rem;
        font-size: 2.5rem;
        letter-spacing: .25rem;
        border: none;
        border-radius: calc(var(--input-border-radius) - var(--input-border-width));
        background: linear-gradient(to right, var(--display-ombre-1), var(--display-ombre-4));
        background-clip: text;
        color: transparent;
        caret-color: var(--display-ombre-1);

        &:focus, &:active {
            highlight: none;
            outline: none;
            -webkit-tap-highlight: transparent;
        }
    }
    
    button {
        float: right;
        display: block;
        padding: .75rem 1rem;
        border: none;
        border-radius: 1rem;
        font-family: var(--body-family);
        background: var(--display-ombre-4);
        color: white;
        cursor: pointer;
        transition: transform .1s;

        &:hover {
            transform: scale(1.03);
        }

        &:active {
            opacity: .8;
        }
    }
}

@keyframes open-dialog {
    from {
        opacity: 0;
        transform: translateY(4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}