body {
    margin: 0;
    background-color: hsl(181, 2%, 30%); 
    color: hsl(39, 9%, 85%);

    font-family: 'Sina Nova';
    font-size: 13pt;
}

/* body .color-lighter {
    color: hsla(39, 9%, 85%, 90.9%);
} */

.not-shown {
    display: none;
}

.shown-option {
    color: hsl(39, 9%, 88%);
}

.hidden-option {
    color: hsl(39, 9%, 76.4%);
    text-decoration: underline;
    cursor: pointer;
}

div.img-switcher {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 5em;

    position: relative;
    left: 9%;
    width: 76.4%;
}

body.about-page,
body.front-page {
    background-color: hsl(181, 5%, 30%);
    color: hsl(39, 18.6%, 91%);
}

#main-container a {
    color: hsl(39, 0%, 85.4%);
}

div.copyright-notice a,
#contents a {
    color: inherit;
    text-decoration: none;
}

h2 {
    font-family: 'Sina Nova';
    font-weight: lighter;
}

h3 {
    font-family: 'Sina Nova';
    font-weight: normal;
    font-size: 16pt;
}

h4 {
    font-family: 'Sina Nova';
}

body.about-page #header,
body.front-page #header {
    width: 100vw;
    height: 25vh;

    background-color: hsl(181, 5%, 24%);
    padding-bottom: 0.146em;
}

body.about-page #header > div.header-image,
body.front-page #header > div.header-image {
    width: 100%;
    height: 100%;
    background-image: url("../banners/L1001140.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


:root {
    --front-page-left-margin: 14.6vw;
    --front-page-right-margin: 38.2vw;
    --front-page-left-margin-to-content-gap: 1em;
    --front-page-top-margin: 5em;

    --front-page-visual-anchor-width: 0.382em;
    --front-page-visual-anchor-gap: 0.618em;
    --front-page-visual-anchor-border-radius-small: calc(0.382 * var(--front-page-visual-anchor-width));
    --front-page-visual-anchor-border-radius-large: calc(0.618 * var(--front-page-visual-anchor-width));

    --front-page-content-left-margin: 2em;
    --front-page-content-right-margin: 9vw;
}

html {
    min-height: 100%;
    display: flex;
}

body.front-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    flex: 1;
}

body.front-page #main-container {
    display: flex;
    flex-direction: row;
    flex: 1 auto;
}

body.front-page #main-container #column-left {
    width: var(--front-page-left-margin);
    margin: 0;
    height: auto;

    background-color: hsl(181, 5%, 38.2%);
}

body.front-page #main-container #column-right {
    width: var(--front-page-right-margin);
    margin: 0;
    height: auto;

    background-color: hsl(181, 5%, 38.2%);
}

body.front-page #main-container #column-container {
    width: calc(100vw - var(--front-page-left-margin) - var(--front-page-right-margin) - var(--front-page-content-right-margin));
    margin: var(--front-page-top-margin) var(--front-page-content-right-margin) 0 0;
}

body.front-page #main-container #column-container #content-container {
    display: flex;
    flex-direction: row;
}

body.front-page #main-container #content-container #content {
    margin: 0 0 0 calc(var(--front-page-content-left-margin) - var(--front-page-visual-anchor-width));
}

body.front-page #main-container #content-container #visual-anchor-left {
    width: var(--front-page-visual-anchor-width);

    background-color: hsl(181, 7%, 31%);
    border-radius: var(--front-page-visual-anchor-border-radius-large) var(--front-page-visual-anchor-border-radius-small) var(--front-page-visual-anchor-border-radius-small) var(--front-page-visual-anchor-border-radius-large);

    position: relative;
    left: calc(-1 * var(--front-page-visual-anchor-gap) - var(--front-page-visual-anchor-width));
}

body.front-page #main-container #content-container #visual-anchor-right {
    width: var(--front-page-visual-anchor-width);

    background-color: hsl(181, 6%, 31%);
    border-radius: var(--front-page-visual-anchor-border-radius-small) var(--front-page-visual-anchor-border-radius-large) var(--front-page-visual-anchor-border-radius-large) var(--front-page-visual-anchor-border-radius-small);

    position: relative;
    left: calc(9vw + 0.786 * var(--front-page-visual-anchor-width) + var(--front-page-visual-anchor-gap));
}

body.front-page #main-container h3 {
    margin: 0.25em 0 1em 0;
    font-weight: bold;
}

body.front-page #main-container p,
body.front-page #main-container li {
    line-height: 1.5em;
}

body.front-page #main-container p:last-child {
    margin-bottom: 0.2em;
}

body.about-page #main-container {
    width: calc(40 * 1em);
    margin: 48pt auto;
}


/* body.process-blog #body-container {
    width: 100vw;
    display: flex;
    flex-direction: row;
} */

/* #contents {
    width: 20%;
    color: hsl(39, 9%, 62%);
} */
/* 
body.process-blog #body-container #main-container {
    width: var(--images-width-percent);
    margin: 32pt 16pt;
} */

#contents div.section {
    margin: 20pt 12pt 24pt 12pt;
}

#contents h4:first-of-type {
    margin: 0.5em 0 0.75em 0;
}

#contents h4 {
    margin: 2.0em 0 0.75em 0;
}

#contents div.section span.bullet {
    color: hsl(39, 4%, 48%);
}

#contents div.section span.dash {
    color: hsl(39, 4%, calc(76.4% * 0.88));
}

:root {
    --image-blog-header-height: 32pt;
    --image-blog-header-text-position-y-adjustment: 4pt;
}

body.image-blog #header {
    width: 100vw;
    height: calc(var(--image-blog-header-height) - var(--image-blog-header-text-position-y-adjustment));
    padding: var(--image-blog-header-text-position-y-adjustment) 16pt 0 16pt;

    background-color: hsl(141, 3.4%, 27.5%);
    color: hsl(39, 38.2%, 76.4%);
    box-shadow: 0 0 3pt hsla(181, 5%, 23.6%, 61.8%);

    position: fixed;
    z-index: 2;

    cursor: pointer;

    display: flex;
    align-items: center;
}

body.image-blog #body-container {
    width: 100vw;
}

body.image-blog #body-container #main-container {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

:root {
    --images-width-percent: 90.9%;
    --images-width-vw: 90.9vw;
    --images-width-margin: calc((100vw - var(--images-width-vw)) * 0.5);
    --image-space-between: 7vw;
    --image-halfspace-between: calc(var(--image-space-between) * 0.5);
}

body.image-blog #body-container #main-container h2 {
    width: var(--images-width-percent);
    margin: var(--image-space-between) var(--images-width-margin) 0vw var(--images-width-margin);
}

body.image-blog #body-container #main-container div.main-header {
    width: 76.4%;
    left: calc((100% - var(--images-width-percent)) * 0.5);
    position: relative;

    margin: 0.5em 0 0 0;

    color: hsl(39, 2.1%, 61.8%);
}

:root {
    --image-border-thickness: 1px;
}

body.image-blog #body-container #main-container div.image-no-frame img,
body.image-blog #body-container #main-container div.image-frame img {
    border: var(--image-border-thickness) solid hsla(39, 3%, 23.6%, 52%);
}

body.image-blog #body-container #main-container div.image-frame-horizontal img {
    border: var(--image-border-thickness) solid hsla(39, 3%, 18.6%, 76.4%);
}

body.image-blog #body-container #main-container div.image-no-frame,
body.image-blog #body-container #main-container div.image-columns {
    width: var(--images-width-percent);
    margin: var(--image-space-between) var(--images-width-margin) var(--image-space-between) var(--images-width-margin);
}

body.image-blog #body-container #main-container div.image-no-frame img {
    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 23.6%);
}

body.image-blog #body-container #main-container div.image-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

body.image-blog #body-container #main-container div.image-columns div.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.image-blog #body-container #main-container div.image-columns div.column-2 {
    width: calc((var(--images-width-vw) - 5.5vw) * 0.5);
}

body.image-blog #body-container #main-container div.image-columns div.column-2:last-child {
    margin-top: 14.6vw;
}

body.image-blog #body-container #main-container div.image-columns div.column img:first-child {
    margin-top: 0;
}

body.image-blog #body-container #main-container div.image-columns div.column img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 23.6%);

    margin-top: var(--image-space-between);
}

body.image-blog #body-container #main-container h2 + div.image-no-frame {
    margin: var(--image-halfspace-between) var(--images-width-margin) var(--image-space-between) var(--images-width-margin);
}

body.image-blog #body-container #main-container div.image-no-frame + div.copyright-notice {
    margin-top: calc(14.6vw - var(--image-space-between) - 2em);
}

body.image-blog #body-container #main-container div.image-no-frame img,
body.image-blog #body-container #main-container div.image-frame img {
    width: calc(100% - calc(2 * var(--image-border-thickness)));
}

body.image-blog #body-container #main-container div.image-frame {
    width: calc(var(--images-width-percent) - calc(2 * var(--image-border-thickness)));
    /* padding: var(--image-border-thickness); */
}

body.image-blog #body-container #main-container div.image-no-frame div.caption {
    line-height: 1.5em;
    margin: 0.5em 0;
    text-align: right;

    color: hsl(39, 0%, 38.2%);
    font-size: 10pt;
}

body.image-blog #body-container #main-container div.image-frame,
body.image-blog #body-container #main-container div.image-frame-horizontal {
    margin: var(--image-space-between) var(--images-width-margin) var(--image-space-between) var(--images-width-margin);
}

body.image-blog #body-container #main-container div.image-frame,
body.image-blog #body-container #main-container div.image-frame-horizontal {
    background-color: hsl(181, 2%, 27%);
    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 38.2%);
}

body.image-blog #body-container #main-container h2 + div.image-frame,
body.image-blog #body-container #main-container h2 + div.image-frame-horizontal {
    margin: 5vw var(--images-width-margin) 5vw var(--images-width-margin);
}

body.image-blog #body-container #main-container div.copyright-notice + div.image-frame,
body.image-blog #body-container #main-container div.copyright-notice + div.image-frame-horizontal {
    margin: 5vw var(--images-width-margin) 14.6vw var(--images-width-margin);
}

body.image-blog #body-container #main-container div.image-frame img {
    width: calc(100% - calc(2 * var(--image-border-thickness)));
}

body.image-blog #body-container #main-container div.image-frame-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    padding: 48px 36px;

    width: calc(var(--images-width-percent) - 72px);
    height: calc(80vh + 128px);
}

body.image-blog #body-container #main-container div.image-frame-horizontal img {
    height: calc(80vh - calc(2 * var(--image-border-thickness)));
    width: auto;
}

body.image-blog #body-container #main-container div.image-frame-horizontal.smaller {
    padding: 48px 24px;

    width: calc(var(--images-width-percent) - 48px);
    height: calc(67vh + 96px);
}

body.image-blog #body-container #main-container div.image-frame-horizontal.smaller img {
    height: calc(67vh - calc(2 * var(--image-border-thickness)));
    width: auto;
}

body.image-blog #body-container #main-container div.image-frame-horizontal.three-across {
    padding: 48px 24px;

    /* width: calc(var(--images-width-percent) - 48px); */
    /* height: calc(40vh + 96px); */
    justify-content: space-between;

    width: calc(var(--images-width-percent) - 48px - var(--image-border-thickness) * 2);
    height: auto;
}

body.image-blog #body-container #main-container div.image-frame-horizontal.three-across img {
    /* height: calc(40vh - calc(2 * var(--image-border-thickness))); */
    /* width: auto; */
    width: calc(100% / 3 - var(--image-border-thickness) * 2 - 16px);
    height: auto;
    border: var(--image-border-thickness) solid hsla(39, 3%, 23.6%, 76.4%);
}

:root {
    --copyright-notice-height: 32pt;
}

body.image-blog #body-container #main-container div.copyright-notice {
    height: var(--copyright-notice-height);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

body.image-blog #body-container #main-container div.copyright-notice a {
    font-size: 12pt;
    color: hsl(39, 2%, 38.2%);
}

body.image-blog #body-container #main-container img {
    width: 100%;
}

body.image-blog #body-container #contents {
    position: fixed;
    top: var(--image-blog-header-height);
    height: calc(100vh - var(--image-blog-header-height));

    z-index: 1;
    color: hsl(39, 9%, 81.4%);
    background-color: hsl(181, 5%, 38.2%);
    box-shadow: 0 0 3pt hsl(181, 5%, 23.6%);
}

.initial-fadeout {
    visibility: hidden;
}

body.process-blog #body-container #main-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.process-blog #body-container #spacer {
    flex-grow: 1;
}

body.process-blog #body-container #main-container h2 {
    width: 76.4%;
    left: 9%;
    position: relative;
    margin: 6em 0 0.667em 0;
}

body.process-blog #body-container #main-container h2.in-line-with-body {
    left: 23.6%;
    width: 38.2%;
    margin: 6em 0 0.4em 0;
}

body.process-blog #body-container #main-container div.main-header {
    width: 76.4%;
    left: 9%;
    position: relative;

    margin: 0;

    color: hsl(39, 4.2%, 76.4%);
}

body.process-blog #body-container #main-container div.main-header.in-line-with-body {
    left: 23.6%;
    width: 38.2%;
    margin-bottom: 1em;
}

body.process-blog #body-container #main-container #main h4,
body.process-blog #body-container #main-container #main h3,
body.process-blog #body-container #main-container #main ul,
body.process-blog #body-container #main-container #main p {
    width: 38.2%;
    left: 23.6%;
    position: relative;
    
    /* text-align: justify;
    text-justify: inter-word; */

    line-height: 1.75em;
    margin-block-end: 1.75em;
}

body.process-blog #body-container #main-container #main div.text-container.to-the-left p {
    width: 38.2%;
    left: calc(9% + 1em);
    position: relative;
    
    /* text-align: justify;
    text-justify: inter-word; */

    line-height: 1.5em;
}

body.process-blog #body-container #main-container #main div.main-after-picture-header {
    margin-top: vw;
    margin-bottom: 0.4em;
    margin-left: 4.381669713vw;

    font-size: 1.5em;
}

body.process-blog #body-container #main-container #main div.after-picture-date {
    margin-left: 4.381669713vw;

    color: hsl(39, 4.2%, 76.4%);
}

body.process-blog #body-container #main-container #main div.main-after-picture-header-2 {
    margin-top: 7.088722551vw;
    margin-bottom: 0.4em;
    margin-left: 4.381669713vw;
    font-size: 1.5em;

    width: 18.6%;
    text-align: right;
}

body.process-blog #body-container #main-container #main div.after-picture-date-2 {
    margin-left: 4.381669713vw;

    width: 18.6%;
    text-align: right;

    color: hsl(39, 4.2%, 76.4%);
}

body.process-blog #body-container #main-container #main div.lens-item {
    margin: 2em 0;
}

body.process-blog #body-container #main-container #main div.lens-item h4 {
    margin: 0;
    text-decoration: underline;
}

body.process-blog #body-container #main-container #main div.lens-item p:first-of-type {
    margin-top: 0.618em;
}

body.process-blog #body-container #main-container #main ul {
    width: calc(38.2% - 3em);
}

body.process-blog #body-container #main-container #main.longer-form h3,
body.process-blog #body-container #main-container #main.longer-form ul,
body.process-blog #body-container #main-container #main.longer-form p {
    width: 48.2%;
    left: 16.7%;

    /* text-align: justify;
    text-justify: inter-word; */
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-075 li {
    margin: 0.75em 2em 0.75em 0;
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-075 li:first-child {
    margin: 1.25em 2em 0.75em 0;
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-075 li:last-child {
    margin: 0.75em 2em 1.25em 0;
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-033 li {
    margin: 0.333em 2em 0.333em 0;
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-033 li:first-child {
    margin: 1em 2em 0.333em 0;
}

body.process-blog #body-container #main-container #main ul.extra-space-for-elements-033 li:last-child {
    margin: 0.333em 2em 1.25em 0;
}

body.process-blog #body-container #main-container #main p.extra-line-height {
    line-height: 2em;
}

body.process-blog #body-container #main-container #main h3 {
    margin: 1.5em 0 1em 0;
    text-decoration: underline;
}

body.process-blog #body-container #main-container #main div.img-container + h3 {
    margin: 1em 0;
}

body.process-blog #body-container #main-container #main > div.text-container.head-note {
    margin: 2em 0 0 9%;
    width: 38.2%;

    display: flex;
    flex-direction: row;
    align-content: stretch;
}

body.process-blog #body-container #main-container #main > div.text-container.head-note > div.bar {
    margin: 0 1em 0 0;
    width: 0.333em;
    
    border-radius: 0.111em;
    background-color: hsl(181, 2%, 26%);
}

body.process-blog #body-container #main-container #main > div.text-container.head-note p {
    left: 0%;
    margin: 1em 0;
    width: auto;
    
    font-style: italic;

    color: hsl(39, 9%, 81.4%);
    line-height: 1.5em;
}

body.process-blog #body-container #main-container #main > div.text-container.head-note p:first-child,
body.process-blog #body-container #main-container #main > div.text-container.head-note p:last-child {
    margin: 0;
}


/* body.process-blog #body-container #main-container div.head-note + div.img-container {
    margin-top: 4em;
} */

body.process-blog #body-container #main-container #main > div.text-container:last-child,
body.process-blog #body-container #main-container #main > p:last-child {
    margin-bottom: 8em;
}

body.process-blog #body-container #main-container #main div.img-container:first-child {
    margin-top: 4em;
}

body.process-blog #body-container #main-container div.img-container {
    width: 76.4%;
    left: 9%;
    position: relative;
    margin: 6em 0 1.5em 0;
}

body.process-blog #body-container #main-container div.img-container.even-berth {
    margin: 6em 0 4.5em 0;
}

body.process-blog #body-container #main-container div.img-container.more-berth {
    margin: 8em 0 5em 0;
}

body.process-blog #body-container #main-container div.img-container.even-more-berth {
    margin: 10em 0 10em 0;
}

body.process-blog #body-container #main-container div.img-container > img {
    width: 100%;
    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 23.6%);
}

body.process-blog #body-container #main-container div.img-container-width-48 {
    width: 48.58682718%;
    left:  19.63808455%;
}

body.process-blog #body-container #main-container div.img-container-width-61 {
    width: 61.8%;
    left:  14.6%;
}

/* phi^-1, split in half, with phi^-7 spacing, and inset to 1 - phi^-3 */
body.process-blog #body-container #main-container div.img-container-width-65-inset-to-764 {
    width: 65.24758425%; /* phi^-1 + phi^-7 */
    left:  13.27424163%; /* phi^-5 + (((1 - phi^3) - (phi^-1 + phi^-7)) / phi^2) */
}

body.process-blog #body-container #main-container div.img-container-width-70 {
    width: 70.0%;
    left:  18.56%;
}

body.process-blog #body-container #main-container div.img-container-width-78 {
    width: 78.8%;
}

body.process-blog #body-container #main-container div.img-container-width-81 {
    left: 7.1%;
    width: 81.4%;
}

body.process-blog #body-container #main-container div.img-container-width-85 {
    left: 5.6%;
    width: 85.4%;
}

body.process-blog #body-container #main-container div.img-container-width-88 {
    left: 4.33%;
    width: 88.6%;
}

body.process-blog #body-container #main-container div.img-container-width-91 {
    left: 3.4%;
    width: 91%;
}

body.process-blog #body-container #main-container div.img-container-width-95-even {
    left: 2.8%;
    width: 94.4%;
}

body.process-blog #body-container #main-container div.img-container-width-100 {
    left: 0%;
    width: 100%;
}

body.process-blog #body-container #main-container div.image-columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

body.process-blog #body-container #main-container div.image-columns div.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

body.process-blog #body-container #main-container div.image-columns div.column-2 {
    width: calc((100% - 4.508497187%) * 0.5);
}

body.process-blog #body-container #main-container div.image-columns div.column-3 {
    width: calc((100% - 2 * 4.508497187%) * 0.3333);
}

body.process-blog #body-container #main-container div.image-columns div.column > div:first-child,
body.process-blog #body-container #main-container div.image-columns div.column > img:first-child {
    margin-top: 0;
}

body.process-blog #body-container #main-container div.image-columns div.column > div,
body.process-blog #body-container #main-container div.image-columns div.column > img {
    width: 100%;
    height: auto;
    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 23.6%);

    margin-top: 9.1vw;
}

body.process-blog #body-container #main-container div.image-columns.img-container-width-85 div.column-2 {
    width: calc((100% - 6.524758425%) * 0.5);
}

body.process-blog #body-container #main-container div.image-columns div.column-2:last-child {
    margin-top: 9.1vw;
}

body.process-blog #body-container #main-container div.image-columns div.column img:first-child {
    margin-top: 0;
}

body.process-blog #body-container #main-container div.image-columns div.column-3.third-column img {
    margin-top: 9.1vw;
}

body.process-blog #body-container #main-container div.image-columns div.column-3.second-column img {
    margin-top: calc(9.1vw * 0.5);
}

body.process-blog #body-container #main-container div.image-columns div.column-3.first-column img {
    margin-top: 0;
}

body.process-blog #body-container #main-container div.img-container div.img-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* background-color: hsl(181, 0%, 14.6%); */
}

body.process-blog #body-container #main-container div.img-container div.img-row img {
    height: auto;

    box-shadow: 0 0 4pt hsla(181, 5%, 23.6%, 18.6%);
}

body.process-blog #body-container #main-container div.img-container div.img-row img.w30 {
    width: 30vw;
    height: auto;
}

body.process-blog #body-container #main-container div.img-container div.img-row img.w309 {
    width: 30.90169944vw;
    height: auto;
}

body.process-blog #body-container #main-container div.img-container div.img-row img.w38 {
    width: 38.2vw;
    height: auto;
}

body.process-blog #body-container #main-container div.img-container div.img-row img.w44 {
    width: 43.77vw;
    height: auto;
}

body.process-blog #body-container #main-container div.img-container div.caption {
    line-height: 1.75em;
    margin: 0.5em 0;
    text-align: right;

    color: hsl(39, 0%, 51.8%);
    font-size: 10pt;
}

body.process-blog #body-container #main-container div.img-container div.caption-38 {
    margin-left: calc(61.8% - 2.1%);
    width: 38.2%;
    margin-top: 1.5em;
    line-height: 1.5em;
}

body.process-blog #body-container #main-container div.img-container div.caption-62 {
    margin-left: calc(38.2% - 2.1%);
    width: 61.8%;
    margin-top: 1.5em;
    line-height: 1.5em;
}

body.image-blog #body-container #main-container div.img-container.inset,
body.process-blog #body-container #main-container div.img-container.inset {
    /* width: 61.8%;
    left: 14.6%; */
    position: relative;
    /* margin: 3em 0 2em 0; */
}

body.process-blog #body-container #main-container div.img-container.inset.extra-margin-top {
    margin: 4em 0 2em 0;
}

body.process-blog #body-container #main-container div.img-container.inset.extra-margin-4-3 {
    margin: 4em 0 3em 0;
}

body.process-blog #body-container #main-container div.img-container.inset.extra-margin-4-4 {
    margin: 4em 0 4em 0;
}