:root {
    --aberration-shadow-a: .125rem .03125rem .125rem rgba(0, 255, 255, 0), -.125rem -.03125rem .125rem rgba(255, 0, 255, 0);
    --aberration-shadow-b: .125rem .03125rem .125rem rgba(0, 255, 255, .5), -.125rem -.03125rem .125rem rgba(255, 0, 255, .5);
    --aberration-shadow-c: .25rem .125rem .25rem rgba(0, 255, 255, .5), -.25rem -.125rem .25rem rgba(255, 0, 255, .5);

    --bg-main: #fff;
    --bg-secondary: #eee;

    --content-width: 68.75rem; /* 1100px */

    --font-family-heading: "Cormorant Garamond", serif;
    --font-family-main: "Roboto", sans-serif;

    --font-size-decreased: .75rem;
    --font-size-normal: 1rem;
    --font-size-increased: 1.125rem;
    --font-size-large: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 2.5rem;

    --link-color: rgb(20, 127, 255);
    --link-color-visited: rgb(20, 77, 250);
    --link-color-active: rgb(255, 77, 20);
    --link-color-hover: rgb(255, 77, 20);

    --spacer-s: 1rem; /* 16px */
    --spacer-xxs: calc(var(--spacer-s) / 4);
    --spacer-xs: calc(var(--spacer-s) / 2);
    --spacer-m: calc(var(--spacer-s) * 2);
    --spacer-l: calc(var(--spacer-s) * 3);
    --spacer-xl: calc(var(--spacer-s) * 4);
    --spacer-xxl: calc(var(--spacer-s) * 6);

    --text-color-primary: #000;
    --text-color-secondary: #777;
}

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

/** {outline: solid red 1px;}*/

html {
    background: var(--bg-main);
    color: var(--text-color-primary);
    font: 300 1em var(--font-family-main);
    margin: 0;
    padding: 0;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    font-weight: 500;
    margin: 0;
}

h1 {
    font-size: var(--font-size-xxl);
}

h2 {
    font-size: var(--font-size-xl);
}

figure {
    margin: 0;
}

a:link {
    color: var(--link-color);
    text-decoration: none;
    transition: .125s;
}

a:visited {
    color: var(--link-color-visited);
}

a:active,
a:hover {
    color: var(--link-color-active);
    text-decoration: underline;
}

.content-wrapper {
    margin: 0 auto;
    max-width: var(--content-width);
    padding: var(--spacer-s);
}

.main-nav {
    font-size: var(--font-size-large);
}

.logo {
    font: 400 var(--font-size-xxl) / 1 var(--font-family-heading);
    margin: 0;
    text-align: center;
}

.main-nav a {
    color: inherit;
    text-decoration: none;
    text-shadow: var(--aberration-shadow-a);
    transition: 1s;
}

.main-nav a:focus, .main-nav a:hover {
    color: rgba(0, 0, 0, .75);
    text-shadow: var(--aberration-shadow-b);
}

.main-nav ul {
    align-items: center;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: var(--spacer-s) auto 0;
    padding: 0;
}

.main-nav li {
    margin: 0;
    padding: 0;
}

.main-nav li:not(:last-of-type)::after {
    background: #aaa;
    content: '\A';
    display: inline-block;
    height: var(--font-size-normal);
    margin: 0 var(--spacer-xxs);
    width: .125rem;
}

.main-nav a {
    display: inline-block;
    padding: var(--spacer-xxs) var(--spacer-s);
}

.stereo-image img {
    aspect-ratio: 4/3;
    width: 100%;
}

.photos {
    list-style: none;
    margin: var(--spacer-s) 0;
    padding: 0;
}

.photos li {
    margin: 0 0 var(--spacer-s) 0;
    padding: 0;
}

picture {
    display: flex;
}

figure {
    border-bottom: .0625rem solid var(--text-color-secondary);
}

figcaption {
    padding: var(--spacer-xxs);
}

small {
    color: var(--text-color-secondary);
    font-size: var(--font-size-decreased);
}

.lead {
    font-size: var(--font-size-increased);
}

.pagination > * {
    display: inline-block;
    padding: var(--spacer-xxs) var(--spacer-xs);
}

.pagination .spacer {
    color: var(--text-color-secondary);
}

.pagination .current {
    background: var(--bg-secondary);
}

.adjacent-photos {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacer-xs);
}

.adjacent-photos {

}

.adjacent-photos .prev {
    margin-right: auto;
}

.adjacent-photos .next {
    margin-left: auto;
}

.about figure {
    font-size: var(--font-size-decreased);
    max-width: 20rem;
}

.about figure picture {
    aspect-ratio: 1;
    display: flex;
    width: 100%;
}

.about figure img {
    width: 100%;
}

.about p {
    max-width: 40rem;
}