/* Wainwright, handcrafted and static and semantic as all fuck. */

body {
	color: #000;
  background: #fff;
  
	font-size: 100%; /* 16px */
	line-height: 1; /* 16px */
  font-family: "Sorts Mill Goudy", "Goudy Bookletter 1911", "GoudyBookletter1911", "Goudy Old Style", "Cambria", "Georgia", serif;
}

#everything {
  width: 81.6em; /* 816px = 34em */
  margin: 7.2em auto 12em; /* 72px = 3 lines, centered, 120px = 5 lines */
  padding: 0 14.4em; /* 0, 144px = 6em */
  
  font-size: 0.625em; /* 10px */
  line-height: 1; /* 10px */
}


/* Links */

a {
  color: #26217A;
}

body.news article > h1 a {
  color: #000;
}

a:focus, a:hover,
body.news article > h1 a:focus, body.news article > h1 a:hover,
.piece a:focus hgroup *, .piece a:hover hgroup *,
body #everything nav ol li a:focus, body #everything nav ol li a:hover,
body #everything nav ol li a:focus *, body #everything nav ol li a:hover * {
  color: #91431E;
}


/* Special characters */

.ampersand {
  color: inherit;
  
  font-size: 0.9em; /* 90% = fudge becuause the italic ampersand is bigger than the regular one */
  font-style: italic;
}


/* Machine readable headings */

h1.for-machines {
  display: none;
}


/* Site heading */

header hgroup {
  float: left;
  
  width: 100%;
  
  padding-bottom: 4.8em; /* 48px = 2 lines */
}

body.home#index header hgroup {
  padding-bottom: 6em; /* 60px = 2.5 lines */
}

header hgroup h1,
header hgroup h2 {
  font-size: 2.4em; /* 24px */
  line-height: 1; /* 24px = 1 line */
  font-style: italic;
}

header hgroup h1 {
  float: left;
}

body.home#index header hgroup h1 {
  float: none;
  position: relative;
  left: -0.0333em; /* -2px = fudge to align with text below */
  
  padding-bottom: 0.2em; /* 12px = 1/2 line */
  
  font-size: 6em; /* 60px = 2.5 lines */
  line-height: 1; /* 60px = 2.5 lines */
  font-style: normal;
}

header hgroup h2 {
  float: right;
  
  text-align: right;
}

body.home#index header hgroup h2 {
  float: none;
  
  font-size: 3.6em; /* 36px = 1.5 lines */
  line-height: 1; /* 36px = 1.5 lines */
  text-align: left;
  font-style: normal;
}

header hgroup a {
  color: #000;
  
  font-style: inherit;
}


/* Introduction content */

body.home#index section {
  clear: both;
}


/* Subject heading */

#everything > section > h1,
#everything > article > h1 {
  clear: both;
  
  margin-bottom: 0.5em; /* 24px = 1 line */
  
  font-size: 4.8em; /* 48px */
  line-height: 1; /* 48px = 2 lines */
}

body.home#index #everything > section > h1 {
  display: none;
}

body.news#index #everything > section > h1 {
  margin-bottom: 1em; /* 48px = 2 lines */
}

#everything > section > h1 em,
#everything > article > h1 em {
  font-style: italic;
}


/* Subject subheading */

#everything > section > section > h1 {
  margin-bottom: 1em; /* 24px = 1 line */
  
  font-size: 2.4em; /* 24px = 1 line */
  line-height: 1; /* 24px = 1 line */
}

#everything > section > section + section {
  margin-top: 2.4em; /* 24px = 1 line */
}


/* News article heading */

body.news section article > h1 {
  margin-bottom: 1em; /* 24px = 1 line */
  
  font-size: 2.4em; /* 24px */
  line-height: 1; /* 24px = 1 line */
}


/* Photograph and text pieces */

.vertical.piece {
  width: 39em; /* 390px */  
}

.left.piece {
  float: left;
}

.right.piece {
  float: right;
}

aside.right.piece {
  width: 50.4em; /* 504px = 24pt */
  margin-left: 2.4em; /* 24px = 1em */
}

aside.right.no-width.piece {
  width: auto;
}

.horizontal.thirty-five-mm.piece {
  padding-bottom: 1em; /* 10px */
}

.horizontal.thirty-five-mm.diptych.piece {
  margin-bottom: -0.1em; /* -1px */
  padding-bottom: 0;
}

.horizontal.four-thirds.piece {
  /* 4:3, 1.33:1 */
  
  padding-bottom: 1.2em; /* 12px */
}

.horizontal.triptych.square.piece {
  padding-bottom: 0.8em; /* 8px */
}

.horizontal.tetraptych.thirty-five-mm.piece {
  padding-bottom: 0.2em; /* 2px */
}

aside.right.horizontal.thirty-five-mm.piece {
  padding-bottom: 0.1em; /* 1px */
}

aside.right.horizontal.tetraptych.thirty-five-mm.piece {
  padding-bottom: 1.8em; /* 18px */
}

.vertical.thirty-five-mm.piece {
  padding-bottom: 0.4em; /* 5px */
}

aside.right.vertical.diptych.thirty-five-mm.piece {
  margin-bottom: -0.1em; /* -1px */
}

.horizontal.sixteen-to-nine.piece {
  padding-bottom: 2.1em; /* 21px = 24px (= 1 line) - 3px */
}

aside.right.horizontal.sixteen-to-nine.piece {
  padding-bottom: 0.4em; /* 4px */
}

.double.horizontal.thirty-five-mm-anamorphic.piece {
  padding-bottom: 1.4em; /* 14px */
}

.horizontal.minus-nine.piece {
  margin-bottom: -0.9em; /* -9px */
}

aside.right.horizontal.plus.piece {
  padding-bottom: 2.4em;
}

.piece + .horizontal.piece {
  padding-top: 4.8em; /* 48px = 2 lines */
}

p + aside.piece {
  padding-top: 2.4em; /* 24px = 1 line */
  
  margin-top: -2.4em;
}

.no-caption.piece {
  margin-bottom: 2.4em; /* 24px = 1 line */
}

.piece a {
  display: block;
}

aside.right.piece a {
  float: right;
  
  width: 100%;
}

.piece a:focus, .piece a:hover {
  background: #eee;
  outline: 24px solid #eee;
}

.horizontal.piece a {
  margin-bottom: -0.2em; /* -2px = crazy kludge for FF */
  padding-bottom: 0.2em; /* 2px = crazy kludge for FF  */
}


/* Photographs and videos */

.piece img,
.piece object,
.tetraptych.no-caption.piece img.one,
.tetraptych.no-caption.piece img.two {
  display: block;
  
  margin-bottom: 2.4em; /* 24px = 1 line */
}

.triptych.piece img.one {
  display: block;
  
  margin-right: 2.4em; /* 24px = 1 line */
}

.no-caption.piece img {
  margin-bottom: 0;
}

.diptych.piece img.one,
.tetraptych.piece img.one,
.tetraptych.piece img.three,
.triptych.piece img.one,
.triptych.piece img.two {
  float: left;
}

.diptych.piece img.two,
.tetraptych.piece img.two,
.tetraptych.piece img.four,
.triptych.piece img.three {
  float: right;
}


/* Text */

article section + section {
  clear: both;
  
  padding-top: 4.8em; /* 48px = 2 lines */
}

.text.piece {
  padding-bottom: 2.4em; /* 48px = 1 line */
}

article p {
  width: 28em; /* 504px = 24pt */
  
  font-size: 1.8em; /* 18px */
  line-height: 1.3334; /* 24px = 1 line; need to round up for Safari */
  text-indent: 1em; /* 18px */
}

article p.verse,
p:first-child,
aside:first-child + p,
h1:first-child + aside + p,
h1 + p {
  text-indent: 0;
}

article p.verse + p.verse {
  margin-top: 1.3334em; /* 24px = 1 line; need to round up for Safari */
}

article p .hidden {
  visibility: hidden;
}

article p em {
  vertical-align: bottom;
  
  font-style: italic;
}

article p q {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

article p q:before {
  content: open-quote;
}

article p q:after {
  content: close-quote;
}

body.news article + article {
  margin-top: 4.8em; /* 48px = 2 lines */
}

article blockquote p {
  font-style: italic;
}

article p + blockquote p:first-child {
  text-indent: 1em; /* 18px */
}


/* Contact information */

body.about#contact #contact-information h2 {
  clear: both;
  float: left;
  
  width: 4em; /* 96px */
  
  font-size: 1.8em; /* 18px */
  line-height: 1.3334; /* 24px = 1 line; need to round up for Safari */
  font-style: italic;
}

body.about#contact #contact-information #email h2,
body.about#contact #contact-information #email p {
  padding-bottom: 1.3333em; /* 24px = 1 line */
}

body.about#contact article #contact-information p {
  float: left;
  
  text-indent: 0;
}

body.about#contact #contact-information + section {
  padding-top: 2.4em; /* 24px = 1 line */
}


/* Captions */

article footer {
  clear: both;
  
  padding-top: 2.4em; /* 24px = 1 line */
}

.piece h1,
.piece h2 {
  clear: both;
  
  font-size: 1.8em; /* 18px */
  line-height: 1.3334; /* 24px = 1 line; need to round up for Safari */
  text-align: right;
}

article footer p {
  width: 31.5em; /* 504px = 24pt */
  
  font-size: 1.6em; /* 16px */
  line-height: 1.5; /* 24px = 1 line */
  text-align: right;
}

.piece h2,
article footer p.date {
  font-style: italic;
}

.piece a h1, .piece a h1,
.piece a h2, .piece a h2 {
  color: #000;
}

.piece h2 cite {
  font-style: normal;
}


/* Side notes */

article p + aside {
  padding-top: 2.4em; /* 24px = 1 line */
}

aside.right {
  margin-left: 2em; /* 20px */
}

aside.piece h1,
aside.piece h2 {
  font-size: 1.6em; /* 16px */
  line-height: 1.5; /* 24px */
}


/* Table of contents */

nav {
  float: left;
  clear: both;
  
  width: 100%;
  padding: 4.8em 0; /* 48px = 2 lines, 0 */
}

nav > ol > li {
  float: left;
  clear: both;
  
  padding-bottom: 1.2em; /* 12px = 1/2 line */
}

nav a,
nav span {
  color: #000;
  
  font-size: 1.8em; /* 18px */
  line-height: 1.3334; /* 24px = 1 line */
}

nav a span,
nav span span {
  font-size: 1em;
  line-height: 1;
}

nav > ol > li > a,
nav > ol > li > span {
  float: left;
  clear: both;
}

body.home#index nav li.introduction a,
body.guide nav li.guide span,
body.guide#forests nav a.forests,
body.guide#hydrangea nav a.hydrangea,
body.guide#ice nav a.ice,
body.guide#loper nav a.loper,
body.guide#moonlight nav a.moonlight,
body.guide#ossuary nav a.ossuary,
body.guide#sunlight nav a.sunlight,
body.guide#trade-routes nav a.trade-routes,
body.guide#vegetation-of-the-chihuahuan-desert nav a.vegetation-of-the-chihuahuan-desert,
body.news nav li.news a.index,
body.news#january-1-2010 nav li.news a.january-1-2010,
body.news#may-3-2010 nav li.news a.may-3-2010,
body.news#june-13-2010 nav li.news a.june-13-2010,
body.news#june-14-2010 nav li.news a.june-14-2010,
body.news#june-27-2010 nav li.news a.june-27-2010,
body.about nav li.explanatory-notes span,
body.about#index nav a.about,
body.about#prints nav a.about-prints,
body.about#the-news nav a.about-the-news,
body.about#contact nav a.contact {
  vertical-align: bottom;
  
  color: #000;
  
  font-style: italic;
}

nav em {
  float: left;
  
  width: 2em; /* 36px = 1.5em */
  
  font-style: inherit;
}

nav ol ol {
  float: left;
  clear: both;
  
  margin-left: 3.6em; /* 36px = 1.5em */
}

nav ol ol li {
  display: inline;
  
  float: left;
  
  padding-right: 0.3333em; /* 6px */
}

nav ol ol li a {
  float: left;
}


/* Copyright */

#everything > footer {
  clear: both;
  
  width: 40.8em; /* 408px = 816px / 2 */
  margin: 0 auto;
  padding: 2.3em 0 1.2em; /* 23px = 24px (= 1 line) - 1px border, 0, 12px = 1/2 line */
  
  border-top: 0.1em solid #888; /* 1px */
  
  text-align: center;
}

#everything > footer p {
  color: #444;
  
  font-size: 1.2em; /* 12px */
  line-height: 1.5; /* 18px = 3/4 line */
  font-style: italic;
}

#everything > footer a {
  font-style: inherit;
}