/*************************************************************************************
*
* External
*
*************************************************************************************/

@import url("https://use.typekit.net/gqp2vyu.css");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;500;600;700&display=swap");
@import url("/birdview/css/birdview.css");

/*************************************************************************************
*
* Settings
*
*************************************************************************************/

:root{
    --page-background: #f3f2ed;
    --text-color: #111;
    --secondary-text-color: rgba(0, 0, 0, 0.6);
    --focus-color: #111;

    --display: "Merriweather", Georgia, serif;
    --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
    --monospace: "Menlo", Consolas, monospace;

    /*
    
    Article and figure measurements are defined here in pixels.
    The gallery can hold 1248px of media, separated by 16px gaps.
    Its 16px side padding makes the complete article canvas 1280px wide.
    
     */
    --article-width: 672px;
    --caption-width: 512px;
    --gallery-width: 1248px;
    --gallery-side-padding: 16px;
    --gallery-gap: 16px;
    --wide-content-width: calc(var(--gallery-width) + var(--gallery-side-padding) + var(--gallery-side-padding));
}

/*× Typography controls shared by the editor and generated pages.
 * Each role has its own family, size, weight and line height.
 * Layout and decorative rules below consume these values.
 */
:root{
    --heading-padding-top: 0;
    --heading-padding-bottom: 0;
    --heading-separator: none;
    
    --h1-family: var(--display);
    --h1-color: var(--text-color);
    --h1-size: 2rem;
    --h1-small-size: 1.75rem;
    --h1-weight: 700;
    --h1-line-height: 1.25;
    --h1-letter-spacing: 0;
    --h1-transform: none;
    
    --h2-family: var(--display);
    --h2-size: 1.5rem;
    --h2-weight: 700;
    --h2-line-height: 1.5;
    --h2-letter-spacing: 0;
    --h2-transform: scaleX(1) scaleY(1);
    
    --h3-family: var(--body);
    --h3-size: 1.0625rem;
    --h3-weight: 700;
    --h3-line-height: 1.5;
    --h3-letter-spacing: 0;
    --h3-transform: scaleX(1) scaleY(1);
    
    --content-family: var(--body);
    --content-size: 1rem;
    --content-weight: 400;
    --content-line-height: 1.7;
    
    --info-family: var(--body);
    --info-size: 0.875rem;
    --info-weight: 300;
    --info-line-height: 1.5;
    
    --gist-family: var(--body);
    --gist-size: 0.9375rem;
    --gist-weight: 300;
    --gist-style: italic;
    --gist-line-height: 1.6;
    
    --footer-family: var(--body);
    --footer-size: 0.875rem;
    --footer-weight: 300;
    --footer-line-height: 1.5;
}

/*× Feature overrides. All unspecified values inherit the shared typography.
 * The class wraps the entire exported page, or only the editor canvas.
 */
.feature{
    --page-background: #fff;
    
    --heading-padding-top: 1.5em;
    --heading-padding-bottom: 0em;
    --heading-separator: 2px solid rgba(0, 0, 0, 0.9);

    --h1-family: "futura-pt";
    --h1-color: var(--text-color);
    --h1-size: 2.5rem;
    --h1-letter-spacing: -1px;
    --h1-transform: scaleX(0.95) scaleY(1.05);
    
    --h1-small-size: 2.25rem;
    
    --h2-family: "futura-pt";
    --h2-size: 1.625rem;
    --h2-letter-spacing: 0px;
    --h2-transform: scaleX(0.95) scaleY(1.05);
    
    --h3-letter-spacing: 0px;
    --h3-transform: scaleX(1) scaleY(1);
    
    --info-family: "futura-pt";
    --info-size: 1rem;
    --info-weight: 400;
}

.feature .article_title_row {
    display: block;
}

/*************************************************************************************
*
* Base
*
*************************************************************************************/

html{
    font-size: 16px;
}

/*× The editor canvas and public page share defaults and per-document backgrounds. */
body,
.editor_page{
    background-color: var(--page-background-color, var(--page-background));
}

body{
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-family: var(--body);
    overflow-y: scroll;
}

*{
    box-sizing: border-box;
}

/*************************************************************************************
*
* Blog Header
*
*************************************************************************************/

.site_logo{
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    max-width: var(--article-width);
    margin: 0 auto;
    padding: 0.625em 0 0.375em;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
}

.site_logo:hover{
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: none;
    border-bottom: none;
}

.site_logo:active{
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.05);
}

.site_logo img{
    width: 32px;
    height: auto;
}

.author{
    font-family: "futura-pt", Futura, sans-serif;
    font-weight: 400;
}

/*************************************************************************************
*
* Article Layout
*
*************************************************************************************/

/*
 
 Regular content occupies the middle column.
 Wide figure content may use the flexible outer columns.
 `.article_content` is the editable part in the editor.
 
 */
.article,
.article_content{
    display: grid;
    grid-template-columns: minmax(var(--gallery-side-padding), 1fr) minmax(0, var(--article-width)) minmax(var(--gallery-side-padding), 1fr);
}

.article{
    max-width: var(--wide-content-width);
    margin: 0 auto;
    padding: 1rem 0;
    color: var(--text-color);
    font-family: var(--content-family);
    font-size: var(--content-size);
    font-weight: var(--content-weight);
    line-height: var(--content-line-height);
}

.article > *,
.article_content > *{
    grid-column: 2;
    min-width: 0;
}

.article > .wide,
.article > .grid,
.article_content > .wide,
.article_content > .grid{
    grid-column: 1 / -1;
    justify-self: center;
    width: min(var(--gallery-width), calc(100% - var(--gallery-side-padding) - var(--gallery-side-padding)));
}

hr{
    width: min(var(--article-width), calc(100% - var(--gallery-side-padding) - var(--gallery-side-padding)));
    margin: 0 auto;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* An article rule fills its grid track, including when its margins are auto. */
.article hr{
    width: 100%;
    margin: 1rem 0 0;
}

/*************************************************************************************
*
* Article Header
*
*************************************************************************************/

.article_header{
    padding: 0.5em 0;
}

.article_title_row{
    display: grid;
    min-height: 44px; /* min height equal to the nav arrows to avoid relayout */
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 1rem;
    padding-top: var(--heading-padding-top);
}

.article h1{
    color: var(--h1-color);
    grid-column: 2;
    margin: 0;
    font-family: var(--h1-family);
    font-size: var(--h1-size);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    text-align: center;
    letter-spacing: var(--h1-letter-spacing);
    transform: var(--h1-transform);
}

.article h1 a{
    color: inherit;
    text-decoration: none;
}

.article h1 a:hover,
.article h1 a:active{
    text-decoration: underline;
}

.article_navigation_arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
}

.article_navigation_arrow:hover{
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.article_navigation_arrow:active{
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Navigation arrows */
.article_navigation_arrow::before{
    content: "";
    width: 24px;
    height: 24px;
    background: center / contain no-repeat;
}

.article_navigation_newer{
    grid-column: 1;
    grid-row: 1;
}

.article_navigation_newer::before{
    background-image: url("elements/icon-left.png");
}

.article_navigation_older{
    grid-column: 3;
    grid-row: 1;
}

.article_navigation_older::before{
    background-image: url("elements/icon-right.png");
}

.article .info{
    margin: 0;
    padding: 0.25rem 0 0;
    padding-bottom: var(--heading-padding-bottom);
    font-family: var(--info-family);
    font-size: var(--info-size);
    font-weight: var(--info-weight);
    line-height: var(--info-line-height);
    text-align: center;
}

.article .info a{
    /*× Native link and visited colors are supplied by the browser. */
    text-decoration: underline;
}

.article .info_blog + .info_date::before,
.article .info_author + .info_date::before{
    content: ", ";
}


.article .gist{
    max-width: 32em;
    margin: 2em auto 1em;
    padding: 0 1em;
    font-family: var(--gist-family);
    font-size: var(--gist-size);
    font-weight: var(--gist-weight);
    font-style: var(--gist-style);
    line-height: var(--gist-line-height);
    
    /* max-width: 33em;
    margin: 2em auto 0em;
    padding: 1em;
    font-weight: bold;
    font-size: 0.875em;
    line-height: 1.6em;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-top: none;
    border-bottom: none; */
    
    /* display: none; */
}

/*************************************************************************************
*
* Filters
*
*************************************************************************************/

.filters{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 0;
}

.filters button{
    flex: 1 1 auto;
    min-height: 2.1rem;
    margin: 0;
    padding: 0.3rem 0.75rem;
    color: inherit;
    font-family: var(--body);
    font-size: 0.875rem;
    font-weight: 300;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.filters button:hover{
    background-color: rgba(255, 255, 255, 1);
}

.filters button.selected_filter{
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    border-color: transparent;
}

/*************************************************************************************
*
* Blog index
*
*************************************************************************************/

.blog_index .article_title_row{
    position: relative;
}

.blog_index h1 a{
    position: static;
}

.blog_title_icon{
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: auto;
}

.blog_index .article_header {
    padding: 0;
}

.article_list{
    display: grid;
    gap: 1.5rem;
}

.article_nav_item{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 1rem;
    padding: 0;
}

/*× Index typography takes precedence over the general article text rules. */
.article .article_nav_item > h2{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: var(--display);
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.5;
}

.article_nav_item h2 a{
    color: inherit;
    text-decoration: none;
}

.article_nav_item h2 a:hover,
.article_nav_item h2 a:active,
.article_nav_item h2 a:focus-visible{
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.article_nav_item time{
    grid-column: 2;
    grid-row: 1;
    color: var(--secondary-text-color);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.7;
    white-space: nowrap;
}

.article .article_nav_item > p{
    grid-column: 1;
    max-width: 31rem;
    margin: 0.1rem 0 0;
    color: var(--secondary-text-color);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.5;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
 * This rule follows the article-item display rule so filtering can override it.
 */
.article_nav_item.filtered_out{
    display: none;
}

/*************************************************************************************
*
* Typography
*
*************************************************************************************/

.article h2{
    margin: 1em 0 0;
    font-family: var(--h2-family);
    font-size: var(--h2-size);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    transform: var(--h2-transform);
    transform-origin: 0% 50%;
}

.article h3{
    margin: 1.5rem 0 0;
    font-family: var(--h3-family);
    font-size: var(--h3-size);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    transform: var(--h3-transform);
    transform-origin: 0% 50%;
}

.article p:where(:not(.info):not(.gist)),
.article ul,
.article ol{
    margin-top: 1em;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.article ul,
.article ol{
    margin-top: 0.5em;
}

.article ul,
.article ol{
    padding-left: 1.5rem;
}

.article li{
    margin: 0.35rem 0;
    padding-left: 0.25rem;
}

/*× Adding a nested list must not change the first paragraph's spacing. */
.article li > p:first-child{
    margin: 0;
}

.article li > ul,
.article li > ol{
    margin: 0.5em 0 0;
}

.article blockquote{
    margin: 1em 0;
    padding-left: 1em;
    border-left: 1px solid rgba(0, 0, 0, 0.4);
}

.article blockquote p{
    margin: 0.5em 0;
    font-style: italic;
    line-height: 1.8;
}

.article blockquote cite{
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
}

.article q{
    font-style: italic;
}

.article aside{
    position: relative;
    margin: 1.5rem 0;
    padding: 0 1rem 1rem 4rem;
    font-style: italic;
    background-color: rgba(128, 128, 128, 0.05);
    border: 1px solid rgba(128, 128, 128, 0.2);
}

.article aside::before{
    position: absolute;
    top: 50%;
    left: 1rem;
    display: block;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
    content: "i";
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 50%;
}

.article .left_align { text-align: left; }
.article .center { text-align: center; }
.article .right_align { text-align: right; }

/*************************************************************************************
*
* Code
*
*************************************************************************************/

.article code{
    margin: 0;
    padding: 0.1rem 0.25rem;
    font-family: var(--monospace);
    font-size: 0.875em;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;
}

.article pre{
    margin: 1rem 0;
}

.article pre code{
    display: block;
    padding: 0.85rem;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

/*************************************************************************************
*
* Media Blocks
*
*************************************************************************************/

/*×
 * Regular and wide figures stack vertically. Only grid figures form rows.
 * Media keep their requested width, capped by their containing figure.
 * Grid rows wrap naturally; JavaScript does not measure or rearrange them.
 * Captions retain their independent editorial width in every layout.
 */
.article .media_block{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gallery-gap);
    margin: 1em 0;
}

.article .media_block.grid{
    flex-flow: row wrap;
    align-items: flex-start;
    /*
    This centers all media horizontally.
    Use my own article From inline-block to CSS Grid to make a better CSS layout.
    */
    justify-content: center;
}

.article .media_block.grid figcaption{
    flex-basis: 100%;
}

.article h2 + .media_block,
.article h3 + .media_block{
    margin-top: 0.75rem;
}

/*
 * Every media item uses its specified width, capped by the available space.
 */
.article .media_block img,
.article .media_block video,
.article .media_block audio{
    display: block;
    flex: none;
    width: min(var(--media-width, 100%), 100%);
    height: auto;
    margin: 0;
}

.article .media_block audio{
    min-height: 3.375rem;
}

.article .media_block video:focus{
    outline: none;
}

.article figcaption{
    flex: none;
    width: 100%;
    padding-inline: max(var(--gallery-side-padding), calc((100% - var(--caption-width)) / 2));
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/*×
 * Referenced media share one presentation in the editor and generated articles.
 * Native image/video dimensions are supplied once by the media load event.
 * Explicit widths override defaults; only CSS constrains them to the figure.
 */
.article .media_item {
    flex: none;
    min-width: 0;
    max-width: 100%;
    width: min(var(--media-width, var(--media-default-width, var(--article-width))), 100%);
    margin: 0;
}

.article .media_item[data-media-type="image"],
.article .media_item[data-media-type="video"] {
    --media-default-width: calc(var(--media-source-width, calc(var(--article-width) * 2)) / 2);
}

.article .media_item[data-media-type="embed"] {
    --media-default-width: var(--embed-width, var(--article-width));
}

.article .media_item > img,
.article .media_item > video,
.article .media_item > audio,
.article .media_item > iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.article .media_item > iframe {
    aspect-ratio: var(--embed-ratio, 16 / 9);
    border: 0;
}

.article .media_item > video {
    aspect-ratio: var(--media-source-ratio, auto);
}

.article .media_unavailable {
    display: block;
    padding: 1rem;
    border: 1px dashed currentColor;
    font-size: 0.875em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.article .media_item > [hidden] {
    display: none;
}

/*************************************************************************************
*
* Media Player click-to-play
*
*************************************************************************************/

.media_item .embed_poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--embed-ratio, 16 / 9);
    padding: 0;
    border: 0;
    background: transparent;
    color: white;
    cursor: pointer;
}
.media_item .embed_poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.embed_play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    background: #e10000;
    font-size: 16px;
    font-weight: 500;
}
.media_item .embed_poster[hidden],
.media_item .embed_poster img[hidden],
.media_item iframe[hidden] {
    display: none;
}

/*************************************************************************************
*
* Footer
*
*************************************************************************************/

.blog_footer{
    font-family: var(--footer-family);
    font-size: var(--footer-size);
    font-weight: var(--footer-weight);
    line-height: var(--footer-line-height);
    width: min(var(--article-width), calc(100% - 2rem));
    margin: 0 auto;
    padding: 1rem 0;
    text-align: center;
}

.keyboard_shortcuts{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
}

.keyboard_shortcut{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--secondary-text-color);
    font-size: 0.5rem;
}

.keyboard_shortcut_birdview{
    margin-left: 52px;
}

.keycap{
    font-family: inherit;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--secondary-text-color);
    font-size: 1.125rem;
    line-height: 1;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.keycap:hover{
    color: var(--text-color);
    background-color: rgba(255, 255, 255, 1);
}

.keycap:active{
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.blog_copyright{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3em;
    margin: 1rem 0 0;
    color: var(--secondary-text-color);
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.blog_copyright a{
    color: inherit;
}

/*************************************************************************************
*
* Responsive
*
*************************************************************************************/

@media screen and (max-width: 47rem){
    .article{
        grid-template-columns: var(--gallery-side-padding) minmax(0, 1fr) var(--gallery-side-padding);
    }

    .article_title_row{
        gap: 0.5rem;
    }

    .article h1{
        font-size: var(--h1-small-size);
    }
}

@media screen and (max-width: 32rem){
    .filters{
        justify-content: flex-start;
    }

    .article_nav_item{
        grid-template-columns: minmax(0, 1fr);
    }

    .article_nav_item time{
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.15rem;
    }
}

/*************************************************************************************
*
* Print
*
*************************************************************************************/

@media print{
    .site_logo,
    .article_navigation_arrow,
    .blog_footer,
    .filters,
    #birdview_auto_generated_button{
        display: none;
    }

    .article .media_block{
        break-inside: avoid;
    }
}