body { font-family: -apple-system, "Helvatica Neue", Helvetica, Arial, sans; margin: 0; background-color: #1c1c1c; color: #eeeeee; }

a { text-decoration: none; font-weight: bold; color: #7598F5; }

#header { line-height: 48px; border-bottom: 1px solid #343434; }
#header .container { box-sizing: border-box; width: 100%; padding: 0 20px; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; font-size: 20px; }
#header .container .app-page { height: 48px; padding: 0; display: flex; }
#header .container .app-page a.primary-link, #header .container .app-page a.secondary-link { display: flex; color: #eeeeee; }
#header .container .app-page a.primary-link .icon, #header .container .app-page a.secondary-link .icon { display: block; width: 36px; height: 36px; margin: 6px; background-size: contain; background-repeat: repeat; background-position: center; background-image: url("/assets/sasquatch.png"); }
#header .container .app-page a.primary-link .text, #header .container .app-page a.secondary-link .text { height: 48px; line-height: 48px; }
#header .container .app-page a.secondary-link .text { opacity: 0.75; font-weight: normal; }
#header .container .app-page a.secondary-link .text:hover { opacity: 1; }
#header .container .app-page a.secondary-link .text:before { content: "/"; padding: 0 4px; }
#header .container .locales .container .locale-link { display: block; line-height: 48px; margin: 0 12px; color: inherit; font-weight: normal; }
#header .container .locales .container .locale-link-current { display: none; }
#header .container .home { display: flex; align-content: stretch; width: 100%; flex-direction: row; gap: 20px; }
@media (max-width: 660px) { #header .container .home { flex-direction: column; gap: 0; } }
#header .container .home a.primary { display: flex; gap: 6px; flex-shrink: 0; }
#header .container .home a.primary .logo { width: 36px; height: 36px; background-image: url("/assets/sasquatch.png"); background-size: contain; background-position: center; background-repeat: no-repeat; margin: 6px 0; }
#header .container .home a.primary .text { font-size: 1.25rem; line-height: 36px; margin: 6px 0; font-family: Charter, Garamond, Cambria, Georgia, Times, serif; font-variant: small-caps; }
#header .container .home .secondary { display: flex; gap: 20px; align-content: stretch; width: 100%; flex-shrink: 1; }
#header .container .home .secondary .leading, #header .container .home .secondary .trailing { display: flex; gap: 20px; flex-grow: 0; flex-shrink: 0; }
#header .container .home .secondary .spacer { flex-grow: 1; min-width: 10px; }
#header .container .home a { color: inherit; }
#header .container a:hover { opacity: 0.6; }

#footer { padding: 40px 20px; color: #eeeeee; background-color: #343434; }
#footer a { font-weight: bold; padding: 6px 10px; color: inherit; }
#footer a:hover { opacity: 0.5; }
#footer .links { text-align: center; padding-bottom: 20px; display: flex; justify-content: center; }
#footer .copyright { margin: 10px 0; text-align: center; color: #aaaaaacc; font-size: 0.8rem; }

#category-header { padding: 30px 20px 0; box-sizing: border-box; max-width: 1000px; margin: 0 auto; }
#category-header a { color: inherit; }
#category-header h1 { font-size: 5rem; line-height: 1.35em; margin: 10px 0; font-family: Charter, Garamond, Cambria, Georgia, Times, serif; }
#category-header .page-summary { font-size: 1.25rem; line-height: 1.35em; }

body { background-color: #111111; color: #ffffff; }

section a { color: #ffcc00; }

section#intro { width: 600px; max-width: 100%; margin: 20px auto; }
section#intro .content { padding: 6px 20px; background-color: #343434; box-sizing: border-box; width: 100%; flex-grow: 0; }
section#intro .content h1 { font-ize: 24pt; line-height: 1.35em; font-family: Charter, Garamond, Cambria, Georgia, Times, serif; }
section#intro .content p { font-size: 16pt; font-family: -apple-system, "Helvatica Neue", Helvetica, Arial, sans; line-height: 1.35em; }

section#photo-list { flex-grow: 1; flex-shrink: 0; width: 600px; max-width: 100%; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 600px) { section#photo-list { padding: 0 20px; } }
section#photo-list .photo-item { width: 100%; flex-grow: 1; flex-shrink: 1; box-sizing: border-box; }
section#photo-list .photo-item figure { margin: 0; border: 1px solid #343434; }
section#photo-list .photo-item figure .photo-image { width: 100%; height: 0; padding-top: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
section#photo-list .photo-item figure figcaption { font-size: 10pt; color: #aaaaaacc; font-weight: normal; background-color: #343434; padding: 10px; gap: 0.5em; }
section#photo-list .photo-item figure figcaption .date { font-style: normal; color: #ffcc00; }
section#photo-list .photo-item figure figcaption p { margin: 0; }

section#app-link { width: 600px; max-width: 100%; margin: 20px auto; box-sizing: border-box; text-align: center; padding: 20px; background-color: #343434; }
section#app-link .app-icon { width: 64px; height: 64px; margin: 0 auto; background-position: center; background-size: contain; background-repeat: no-repeat; }