:root {
    --border: #DDDBD6;
    --content-color: #696d68;
    --heading-color: #626660;
    --tidy-data: #b59292;
    --spreadsheet-interface: #A4B4B4;
    --freedom-to-put-things: #b4c5e2;
    --bean-green: #83CD3A;
    --bean-green-border: #89af2754;
    --human-spreadsheet-interaction: #c49daa;
    --content-inner-padding: 40px;
    --lish-data-model: #9FB5BB;
    --how-do-people-learn-to-use-spreadsheets: #d8b395;
}

/* CSS Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

ul,
li,
ol {
    all: unset;
    display: block;
}

* {
    margin: 0;
}

a {
    text-decoration: none;
    color: var(--heading-color);
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

@font-face {
    font-family: 'Spline Sans';
    src: url('fonts/SplineSans-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-display: swap;
}

@font-face {
    font-family: 'Ancizar Serif';
    src: url('fonts/AncizarSerif-Regular.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Ancizar Serif';
    src: url('fonts/AncizarSerif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Ancizar Serif';
    src: url('fonts/AncizarSerif-Italic.ttf') format('truetype');
    font-style: italic;
    font-display: swap;
}

/* Main Styles */

body {
    background-color: #F6F6F4;
    font-family: 'Spline Sans', system-ui, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--heading-color);
    line-height: 1.65;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

@keyframes slideInAnim {
    0% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);

    }
}


@keyframes slideInAnimIcon {
    0% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bodyAnim {
    0% {
        transform: translateY(-5px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

body::selection {
    background: #72ab39;
    color: white;
}

p {
    color: var(--content-color);
}

.content {
    animation: 300ms ease-out 0s 1 bodyAnim;
}

h1 {
    line-height: 1.3;
}

h2 {
    line-height: 1.3;
    font-size: 20pt;
}

h3 {
    font-size: 17pt;
}

h4 {
    font-size: 13pt;
    margin: 8px 0px;
    margin-top: 32px;
}

/* Header */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.header-logo {
    margin: 24px 0px;
    margin-left: 24px;
}

.header-boundline {
    border: 1px solid var(--border);
    width: 100%;
    height: 112px;
    display: block;
    position: absolute;
    left: 0;
    box-sizing: border-box;
}

.cta {
    align-items: flex-end;
    border-right: 1px solid var(--border);
    padding-right: 24px;
    font-size: 14px;
    justify-content: center;
    display: flex;
    flex-flow: column;
    z-index: 1;
}

.cta span {
    opacity: 0.6;
}

.cta b {
    margin-left: 8px;
    opacity: 1;
}

.outbound-bean {
    display: flex;
    align-items: center;
    flex-basis: 40%;
    justify-content: center;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    transform: translateX(16px);
}

.outbound-bean:hover img {
    transform: rotate(-1deg) translateX(-110%) scale(1);

}

.outbound-bean:hover a {
    transform: translateX(2px) scale(1.05);

}

.outbound-bean:hover .cta-flourish {
    transform: translateY(14px) rotate(12deg) scale(1.05);
    box-shadow: 0px 11px 14.1px rgba(112, 140, 0, 0.07);

}

.outbound-bean img {
    position: absolute;
    transform: translateX(-105%);
    transition: transform 200ms;
    z-index: 100;

}

.cta-flourish {
    background: rgb(96 149 44 / 30%);
    display: block;
    padding: 8px 16px;
    border-radius: 24px;
    transition: transform 200ms;
    position: absolute;
    width: 80px;
    height: 30px;
    z-index: -1;
}

.outbound-bean a {
    background: white;
    display: block;
    padding: 8px 16px;
    border-radius: 24px;
    box-shadow: 0px 11px 14.1px rgba(112, 140, 0, 0.07);
    /* border-radius: 8px; */
    transition: transform 200ms;
}

.cta-engage {
    display: flex;
    align-items: stretch;
    flex-basis: 50%;
    justify-content: flex-end;
    align-self: stretch;
    overflow: hidden;
}

.cta-social-buttons {
    margin: 20px 0px;
}

.cta-social-buttons a {
    background: #E6F7C1;
    color: #6EBA22;
    border-radius: 8px;
    padding: 4px 12px;
    margin-right: 4px;
    font-weight: 500;

}

section.cta-updates-container .cta-updates {
    margin-top: 0px;
}

.cta-updates {
    background: #fdfff8;
    padding: 20px 40px;
    display: flex;
    margin-top: 60px;
    margin-bottom: 40px;
    border-radius: 16px;

    box-shadow: 0px 13px 20px 10px #4949380d;
    width: 100%;
    justify-content: space-between;
}

.cta-updates h3 {
    font-weight: 500;
}

.cta-updates img {
    width: 200px;
    aspect-ratio: 1/1;

}

.updates-copy {
    width: 60%;

}

.updates-banner-img-container {
    width: 30%;
    display: flex;
    justify-content: center;
}

/* Navigation */

nav {
    display: flex;
    justify-content: space-between;
    padding: 0px 0px;
}


nav a {
    display: flex;
    flex-flow: column;
    flex-basis: 20%;
    flex: 0 1 20%;
    align-items: start;
    justify-content: space-evenly;
    padding: 0px 24px;
    border-right: 1px solid var(--border);
    height: 96px;
}

nav a div {
    transition: transform 200ms;
}

nav a:first-child {
    padding-left: var(--content-inner-padding);
}

nav a:last-child {
    border-right: 0px;
    padding-right: 24px;
}

nav img {

    width: fit-content;
    height: auto;
    display: block;
    margin-bottom: 12px;
}

nav .selected {
    font-weight: 600;
    opacity: 1;
}

nav a.selected {
    background-color: #F0F4EA;
    color: #66B219;
}

nav a:not(.selected):hover {
    background: rgb(255, 255, 255);
}

nav a:not(.selected):active div {
    transform: scale(0.95)
}

nav a:not(.selected) span {
    opacity: 0.7;
}

nav a.selected span {
    background: white;
    padding: 2px 8px;
    box-shadow: 0px 4px 10px rgba(102, 179, 25, 0.11), inset 0px -1px 0px rgba(0, 0, 0, 0.1);
    display: block;
    animation: 300ms ease-out 0s 1 slideInAnim;
}

nav a.selected img {
    animation: 300ms ease-out 0s 1 slideInAnimIcon;
}

nav a {
    display: flex;
    /* padding: 12px 0px; */
    /* flex-grow: 1; */

    justify-content: center;
    text-transform: uppercase;
    font-size: 10.5pt;
    color: var(--content-color);
    transition: background 300ms;
}

.nav-boundline {
    border-bottom: 1px solid var(--border);
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    z-index: -1;
}

/* Main Content */

.container {
    max-width: 960px;
    margin: 0px auto;
    padding-top: 40px;
    border-left: solid var(--border) 1px;
    border-right: solid var(--border) 1px;
    background: F4F5F6;
}

.background-container {
    background-color: #F0F0EB;
}


section.blog-metadata-container {
    padding-bottom: 0px;
}

.link-to-original {
    background: rgba(0, 0, 0, 0.05);
    margin: 8px;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 8px;
    font-size: 14px;
    transform: translateY(-4px)
}

section {
    padding: 40px var(--content-inner-padding);

}

.section-heading {
    display: flex;
}

.section-heading img {
    margin-right: 12px;
}


.hero {
    width: 100%;
    border-bottom: 1px solid var(--border);
}

.border {
    border-bottom: 1px solid var(--border);
}


.header-copy {
    column-count: 2;
    margin: 24px 0px;
}

.header-copy p {
    margin-top: 0;
}

.split-header {
    width: 20%;
    padding-top: 16px;
}

.content-intro {
    width: 60%;
}

h3 {
    margin: 16px 0px;
}

.content-intro h3 {
    margin-bottom: 12px;
    display: inline;
    font-size: 22px;
}

.content-intro span.label {
    display: inline-block;
    border: 1px solid #80837f80;
    padding: 0px 8px;
    font-size: 14px;
    font-family: "Spline Sans";
    margin: 0px 4px;
    opacity: 1;
    font-weight: 500;
    vertical-align: 0.1em;
}

.content-copy {
    width: 60%;
}

.blog-article section {
    width: 60%;
    padding-top: 0px;
}

.layout-flow {
    display: flex;
}

.literature-listing-container {
    display: flex;
}

.literature-listing-container .author-list {
    flex-flow: column;
}

.aux-video {
    width: 60%;
    display: block;
}

.aux-img {
    width: 60%;
}

.content-image {
    filter: drop-shadow(0px 35px 89.5px rgba(0, 0, 0, 0.13));
    border-radius: 20px;
    max-width: 640px;
    margin: 32px 0px
}

video.full-width {
    max-width: 100%;
}

.video-with-comment {
    display: flex;
}

.comment {
    height: fit-content;
    font-size: 9pt;
    background: white;
    margin-left: 16px;
    padding: 12px;
    margin-top: 24px;

}

p {
    margin: 16px 0px;
}

.wrapped-heading {
    width: 60%;

}


.design-header {
    border-bottom: 1px solid var(--border)
}


.design-concept {
    border-bottom: 1px solid var(--border)
}

.design-concept:last-child {
    border-bottom: none;
}

#literature .resource-description {
    padding-right: 2rem;
}



video {
    filter: drop-shadow(0px 35px 89.5px rgba(0, 0, 0, 0.13));
    border-radius: 20px;
    max-width: 640px;
    margin: 24px 0px;
    width: 100%;

}

.app-screenshot {
    max-width: 90%;
}

.main-try-bean-button {
    background: var(--bean-green);
    color: white;
    padding: 12px 32px;
    border-radius: 32px;
    margin-left: 20%;
    margin-top: 20px;
    display: block;
    width: fit-content;
    box-shadow: 0px 3px 17px 5px #0000000a;
    font-size: 16px;
    font-weight: 600;
}

.bean-paper {
    background: #FFFFFF;
    width: 80%;
    display: flex;
    padding: 32px 24px;
    border-radius: 20px;
    box-shadow: 0px 3px 17px 5px #0000000a;
    position: relative;
    margin-bottom: 48px;
}

.bean-paper h4 {
    margin-top: 8px;
}

.bean-paper p {
    margin: 8px 0px;
}

.bean-paper div {
    margin-left: 35%;

}

.bean-paper span {
    color: #548f1b;
    font-size: 14px;
}

.bean-paper img {
    max-width: 30%;
    top: -40px;

    margin-right: 20px;
    position: absolute;
}

.author-header {
    padding-left: 20%;
    width: 100%;
    border-bottom: 1px solid var(--border);
}


.author-header span {
    box-shadow: 0 0 0 1px var(--border);
    display: block;
    padding-left: 8px;
    font-weight: 500;
    padding: 12px 24px;
    font-size: 14px;
}

.paper-authors {
    margin-top: 4px;
    display: flex;
}

.flex-stack {
    display: flex;
}

.review-label {
    display: inline-block;
    border: 1px solid #80837f80;
    padding: 0px 8px;
    font-size: 14px;
    font-family: "Spline Sans";
    margin: 0px 4px;
    opacity: 1;
    font-weight: 500;
    vertical-align: 0.1em;
}




blockquote {
    border-left: 3px solid var(--bean-green);
    padding-left: 24px;

}

.related-links {
    margin: 0 var(--content-inner-padding);
}

.related-links a {
    color: #548f1b;
    font-weight: 600;
    margin-right: 20px;

}



.pattern-entries h2 {
    padding: 0px var(--content-inner-padding);
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.pattern-entries h3 {
    padding: 8px var(--content-inner-padding);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
    font-size: 22px;

}

.pattern-entry-content {
    column-count: 2;
    padding: 0px var(--content-inner-padding);
    margin: 32px 0px;
}

.pattern-entry-content-2-wrap {
    margin: 40px 0px;
}

.pattern-entry-content-2 {
    padding: 0px var(--content-inner-padding);
    display: flex;

}

.pattern-entry-content-2 .primary-content {
    width: 60%;
}

.pattern-entry-content-2 aside {
    display: flex;
    justify-content: flex-end;
    width: 40%;
    flex-flow: column;
    align-items: flex-end;
}

.pattern-entry-content-2 aside img {
    width: 250px;
}


.pattern-entries blockquote {
    break-inside: avoid;
    margin: 16px 0px;

}

.pattern-entries p {
    margin: 0;
}

.pattern-entries:first-of-type {
    margin-top: 0px;
}

.pattern-entry:first-of-type {
    margin-top: 0px;
}

.pattern-entry {
    margin-top: 72px;
}

.pattern-entry:last-of-type {
    padding-bottom: 48px;
}


.pattern-entries {
    margin-top: 80px;
}


.year {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--border);
    font-size: 20px;
    width: 20%;
    font-weight: 500;
}

.history-listing-header {
    display: flex;
    border-top: 1px solid var(--border)
}

.history-time-block {
    display: flex;
    width: 100%;
    align-content: center;
    border-bottom: 1px solid var(--border);

}

.history-time-block time {
    width: calc(20%);
    display: flex;
    align-self: center;
    justify-content: center;
    height: 100%;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    border-right: 1px solid var(--border)
}

.history-listing-container {
    position: relative;
}

.history-listing-container .author-list li {
    box-shadow: -1px 0 0 0 var(--border), 0px 1px 0 0 var(--border);
    padding: 8px 16px;
    width: 30%;
    margin-right: 0px;
    box-sizing: border-box;
    margin-bottom: 0px;
}

.history-listing-container .author-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}


.history-listing-container .author-list li:nth-child(2) {
    width: 70%;
}

.history-listing-container:nth-last-child(1) {
    padding-bottom: 20px;
}

.history-entry-image {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 20%;
    box-shadow: 0px 11px 20px #00000026;
}

.entry-primary-details {
    width: 60%;
    padding: 24px;
}

.entry-primary-details h3 {
    margin: 0px 0px;
}



.history-listing-container p {
    margin-left: 20%;
    padding: 24px;
    width: 60%;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-bottom: 0px;
}

.history-listing-container .paper-authors {
    padding-left: 20%;
    border-bottom: 1px solid var(--border);
    margin-top: 0px;
}

.review-listing {
    transition: background-color 300ms ease, transform 150ms ease;
    display: block;

}

.review-listing:last-of-type {
    border-bottom: 1px solid var(--border);
    ;
}

.review-listing:hover {
    background-color: rgb(255, 255, 255);
}

.review-listing {
    overflow: hidden;
}


.review-listing {
    border-top: 1px solid var(--border)
}

.author-list ul {
    display: flex;
    flex-wrap: wrap;
}



.author-list-label {
    font-weight: 500;
    margin-right: 16px;
    text-wrap: nowrap;
    margin-top: 6px;
    margin-bottom: 12px;

}

.author-list img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    border-radius: 50%;
    object-fit: cover;
}

.author-list {
    display: flex;
    align-items: flex-start;


}



.author-list li {
    display: flex;
    align-items: center;
    margin-right: 16px;
    margin-bottom: 12px;
}

.author-list span {
    font-size: 13px;
}

.label-and-date {
    margin-bottom: 8px;
}

.label-and-date time {
    font-size: 14px;
}

.review-metadata {
    width: 60%;
}

.review-metadata h1 {
    margin-bottom: 12px;
    display: inline;
}

.review-metadata .author-list {
    flex-flow: column;
}

.paper-details button {
    width: 100%;
    background: #72ab39;
    border: none;
    padding: 20px;
    color: white;
    border-radius: 8px;
}

.paper-image-container .tidy-data-flourish {
    background-color: #396aab
}


.review-listing:hover .paper-flourish {
    transform: translate(5%, 3%) rotateZ(6deg) scale(0.99);
    box-shadow: 0px 11px 20px rgb(0 0 0 / 10%);

    filter: brightness(0.92) contrast(1.4) saturate(1.25);

    /* < 1 = darker */



}

.review-listing:hover .paper-image-container img {
    transform: translate(0%, -1.5%) rotate(2.5deg) scale(1.01);
    box-shadow: 0px 11px 50px rgb(0 0 0 / 17%);

}

.review-listing:hover .post-image-container img {
    transform: translate(0%, -1.5%) rotate(2.5deg) scale(1.01);

}

.paper-flourish {
    background-color: var(--tidy-data);
    max-width: 300px;
    left: 40px;
    top: 30px;
    aspect-ratio: 1/1.414;
    position: absolute;
    z-index: 0;
    border-radius: 16px;
    transform: translate(4%, 5%) rotate(5deg);
    transition: transform 300ms, filter 300ms;
    width: 90%;
    /* image 356 */

    box-shadow: 0px 7px 14px rgb(0 0 0 / 17%);
    /* background-color: #e5e5f7; */

    background-image: linear-gradient(#ffffff54 1px, transparent 1px), linear-gradient(to right, #ffffff54 1px, #7f7f7f 1px);
    background-size: 30px 15px;
    background-blend-mode: overlay;
}

.paper-image-container {
    position: relative;
    width: 40%;
}

.post-image-container {
    position: relative;
    width: 50%;
}

.post-image-container img {
    max-width: 350px;
    position: absolute;
    left: 30px;
    top: 80px;
    border-radius: 16px;

    transform: rotate(3deg);
    transition: transform 300ms, box-shadow 200ms;
    width: 90%;
    z-index: 1;
}

.paper-image-container img {
    max-width: 300px;
    position: absolute;
    left: 30px;
    top: 80px;
    border-radius: 16px;
    box-shadow: 0px 7px 14px rgb(0 0 0 / 17%);
    transform: rotate(3deg);
    transition: transform 300ms, box-shadow 200ms;
    width: 90%;
    z-index: 1;
}


#human-spreadsheet-interaction .paper-flourish {
    background-color: var(--human-spreadsheet-interaction)
}

#list-data-model .paper-flourish {
    background-color: var(--lish-data-model);
}

#how-do-people-learn-to-use-spreadsheets .paper-flourish {
    background-color: var(--how-do-people-learn-to-use-spreadsheets);
}

#tidy-data .paper-flourish {
    background-color: var(--tidy-data)
}

#spreadsheet-interface .paper-flourish {
    background-color: var(--spreadsheet-interface)
}

#freedom-to-put-things .paper-flourish {
    background-color: var(--freedom-to-put-things)
}


/* Footer */

.background-container footer {
    max-width: 960px;
    margin: 0px auto;
    border-left: solid var(--bean-green-border) 1px;
    border-right: solid var(--bean-green-border) 1px;
}

.bean-footer-copy {
    background: white;
    padding: 20px 20px;
    border-radius: 12px;
    box-shadow: 0px 13px 15px -2px rgb(107 96 75 / 10%);
    transform: rotateZ(-0.6deg);
    margin-top: 20px;

}



footer .cta-copy {
    padding: 24px;
}

.footer-boundline {
    border-bottom: 1px solid var(--bean-green-border);
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    z-index: 1;
}

.footer-boundline-2 {
    border-bottom: 1px solid var(--bean-green-border);
    width: 100%;
    height: 32px;
    display: block;
    position: absolute;
    left: 0;

}



footer {
    font-size: 13px;
    /* padding-bottom: 260px; */
    /* margin-top: 48px; */

}



footer .lets-talk {
    font-size: 14pt;
    font-weight: 600;
    color: var(--content-color);

}

footer .copy {
    opacity: 1;
    padding: 64px 44px;
    width: 60%;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

.footer-nav {
    opacity: 0.8;
    flex-shrink: 0;
    flex-grow: 0;
    width: 60%;
}

.footer-logo-wrapper {

    /* padding: 44px; */
    display: flex;
    align-items: stretch;

}

.footer-logo-wrapper img {
    width: 80%;
    padding: 12px;
    max-width: 300px;


}

footer .primary-container {
    display: flex;
    align-items: stretch;
    position: relative;
}

footer .logo-img {
    position: absolute;
    transform: translate(20px, 0px);

    z-index: 1;
    filter: drop-shadow(0px 4px 3.6px rgba(0, 0, 0, 0.07));


}

footer .secondary-container {
    display: flex;
}


.footer-aside {
    display: flex;
    flex-flow: column;
    border-left: 1px solid var(--bean-green-border);
    width: 40%;
    flex-grow: 0;
    padding-left: px;
    justify-content: center;
    align-items: center;
}

.footer-aside span {
    border: 1px solid var(--border);
    padding: 4px 32px;
    border-radius: 20px;
    opacity: 0.8;
}

footer nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative;
}

footer nav a {
    width: 33.3333%;
    flex-basis: auto;
    box-sizing: border-box;
    height: 100px;
    border-right: 1px solid var(--bean-green-border)
}

footer nav img {
    opacity: 0.8;

}

.footer-nav-divider {
    border-bottom: 1px solid var(--bean-green-border);
    width: 100%;
    display: block;
    position: absolute;
    left: 0px;
    border-right: none;

    top: 100px;
}

footer nav a:nth-child(3) {
    border-right: none;
}

footer nav a:nth-child(5) {
    padding-left: var(--content-inner-padding);
}




@media only screen and (max-width: 800px) {

    .blog-metadata-container .paper-image-container {
        width: 40%;
        padding-left: 24px;
        left: auto;
    }

    .literature-listing-container {
        display: flex;
        flex-flow: column;
        margin-bottom: 200px;
    }

    .literature-listing-container .content-intro {
        width: 80%;

    }

    /* 
    .paper-image {
    display: flex;
    justify-content: center;
    } */

    .paper-image-container {
        width: 100%;
    }

    .paper-flourish {
        max-width: 420px;
        left: 30px;
    }

    .paper-image-container img {
        max-width: 420px;
        left: auto;
    }

    .history-listing-container .author-list {
        flex-flow: column;
    }

    .history-listing-container .author-list li {
        width: 100%;
    }


}

@media only screen and (max-width: 740px) {
    body {
        font-size: 13px;
    }

    :root {
        --content-inner-padding: 28px;
    }

    nav a {
        width: 200px;
        font-size: 8pt;
        padding: 0 12px;

        /* flex-grow: 0; */
        /* flex-basis: auto; */
    }



    .outbound-bean {
        display: none;
    }

    h2 {
        font-size: 15pt;
    }

    .cta-updates {
        flex-flow: column;
        align-items: center;
    }


    .updates-copy {
        width: 100%;
    }


    .content-intro h3 {
        font-size: 18px;
    }

    .primary-container {
        flex-flow: column;
    }

    .secondary-container {
        flex-flow: column;
    }

    footer .copy {
        width: 100%;
        border-bottom: 1px solid var(--bean-green-border);
    }

    .footer-aside {
        width: 100%;

    }

    .footer-nav {
        width: 100%;
    }

    .footer-logo-wrapper {
        padding: 20px;
    }


    footer nav {
        border-bottom: 1px solid var(--bean-green-border);
    }


}

@media only screen and (max-width: 600px) {
    .aux-video {
        width: 100%;
    }

    h3 {
        font-size: 14pt;
    }

    .cta-updates img {
        display: none;
    }

    .history-time-block time {
        font-size: 14px;
    }

    .main-try-bean-button {
        margin-left: 0px;
    }


    .blog-metadata-container .paper-image-container {
        display: none;
    }



    .cta-engage {
        flex-basis: 1;
    }

    .layout-flow {
        display: flex;
        flex-flow: column;
    }



    .content-intro {
        width: 100%;
    }

    .content-copy {
        width: 100%;
    }

    .header-copy {
        column-count: 1;
    }

    nav a {
        width: 200px;
        font-size: 9pt;
        /* flex-grow: 0; */
        /* flex-basis: auto; */
    }

    nav a {
        font-size: 8pt;
        /* flex-grow: 0; */
        /* flex-basis: auto; */
    }

    .paper-image-container {
        width: 100%;
    }

}

@media only screen and (max-width: 480px) {
    .hero {
        height: 200px;
        object-fit: cover;
    }

    nav a {
        align-items: center;
    }

    footer nav a {
        align-items: flex-start;
    }

    nav img {
        margin-bottom: 0px;
    }

    footer nav img {
        margin-bottom: 12px;
    }

    nav span {
        font-size: 8pt;
        /* flex-grow: 0; */
        /* flex-basis: auto; */
        display: none;

    }

    nav a.selected span {
        display: none;
    }


    .cta-engage {
        display: none;
    }

    .header-logo {
        margin: 24px auto;
        margin-left: auto;
    }



}



@media only screen and (max-width: 960px) {
    .video-with-comment {
        flex-flow: column;

    }

    .comment {
        margin-top: 12px;
        margin-left: 0px;

    }
}